mancala/docs/specs/theme-polish/tasks.md

# Theme polish: tasks

Work through the tasks in order; each ends with its checks passing and a commit. Tick a task when it is committed.

- [x] 1. **Spec**: requirements, design and tasks.
- [x] 2. **Web app messages**: Notyf at the top centre in the theme's colors.
- [x] 3. **Theme cookie**: the web app saves the chosen theme for the login pages.
- [x] 4. **Login theme**: the script, the three themes' styles, logo and board masks; checked in Chrome in all three
      themes, at desktop and phone width, with and without the cookie.
- [x] 5. **Docs**: `AGENTS.md` (specs list, the cookie), `apps/keycloak/README.md`, `TODO.md`.
- [x] 6. **Header**: the new order, the settings menu with the themes, the account on every page, the home page's
      actions on phones; checked in Chrome in all three themes at desktop and phone width.
docs(theme-polish): add the spec The login pages in the app's three themes, chosen through a cookie, and the web app's messages in the theme's colors at the top centre. 2026-10-17 02:28:40 +03:00			`# Theme polish: tasks`

			`Work through the tasks in order; each ends with its checks passing and a commit. Tick a task when it is committed.`

			`- [x] 1. Spec: requirements, design and tasks.`
feat(frontend): show messages at the top in the theme's colors Messages appear at the top centre below the header as an inverted chip of the theme, in the app's font and without icons, and close on a click instead of sliding in at the bottom right in Notyf's red. 2026-10-17 02:39:41 +03:00			`- [x] 2. Web app messages: Notyf at the top centre in the theme's colors.`
feat(frontend): remember the theme in a cookie for the login pages Keycloak's pages are on another origin; a mancala_theme cookie reaches them on localhost's ports and, set for playmancala.app, on its auth subdomain. 2026-10-17 02:40:07 +03:00			`- [x] 3. Theme cookie: the web app saves the chosen theme for the login pages.`
feat(keycloak): give the login pages the app's three themes A script in the page's head reads the theme the web app saved in the mancala_theme cookie, or follows the system's color scheme, and puts the theme's class on the page. The stylesheet takes the redesign's colors, font, header, cards, fields and pill buttons; the logo and the board on the card are masks in the theme's colors. 2026-10-17 02:44:54 +03:00			`- [x] 4. Login theme: the script, the three themes' styles, logo and board masks; checked in Chrome in all three`
docs(theme-polish): add the spec The login pages in the app's three themes, chosen through a cookie, and the web app's messages in the theme's colors at the top centre. 2026-10-17 02:28:40 +03:00			`themes, at desktop and phone width, with and without the cookie.`
docs: describe the themed login pages and messages 2026-10-17 02:45:11 +03:00			- [x] 5. Docs: `AGENTS.md` (specs list, the cookie), `apps/keycloak/README.md`, `TODO.md`.
feat(frontend): simplify the header as in the updated design The header is now the logo, the page's actions, how to play, settings and the account. The theme swatches move into a settings menu; the account shows the player's initials and is on every page through an AuthUserContext. On phones the home page's actions leave the header for a row of two buttons. Checked menu items get a check at their end. 2026-10-17 02:59:26 +03:00			`- [x] 6. Header: the new order, the settings menu with the themes, the account on every page, the home page's`
			`actions on phones; checked in Chrome in all three themes at desktop and phone width.`