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

# Theme polish: requirements

Status: implemented on branch `feature/theme-polish` (based on `develop`); checked in Chrome against the local stack.
Scope: the Keycloak login theme, the web app's short messages and its header. Follows `web-redesign`.

## Goals

The login pages and the web app's messages look like the rest of the app in each of its three themes (Ceviz, Gece,
Yeşim), and messages appear where they are noticed without covering the game.

## Requirements

### R1. Login pages
- R1.1 The login, registration, password reset and other Keycloak login pages use the web redesign's look: its colors,
  font, logo, rounded cards, pill buttons and the app's name ("Mancala", in Turkish "Köçürme").
- R1.2 They use the theme the player chose in the web app on the same device, also right after changing it.
- R1.3 Without a chosen theme (e.g. a first visit straight to the login page), they follow the system's color scheme:
  Ceviz when it is dark, Yeşim when it is light.
- R1.4 Errors, info messages and the language select stay readable in every theme; the pages work at phone width
  without horizontal scrolling.

### R2. Messages in the web app
- R2.1 Short messages (e.g. "Opponent's turn", "Connection lost") use the theme's colors and font.
- R2.2 They appear at the top centre, just below the header, not in the bottom right corner.
- R2.3 Several messages stack without covering the header; each goes away by itself or when clicked.

### R3. Header
- R3.1 Every page's header has, in this order: the logo and name, the page's actions, how to play, settings and the
  account (the design canvas's updated header).
- R3.2 How to play, settings and the account are round icon buttons; the account shows the player's initials.
- R3.3 Settings opens a menu with the three themes, each with its swatch and name, the chosen one checked. The theme
  swatches are no longer in the header.
- R3.4 The account menu (log in, sign up, log out) is on every page, not only the home page.
- R3.5 At phone width the home page's actions (New Game, Play the bot) leave the header for a row of two buttons at the
  top of the page; the game page keeps its action as an icon.

## Out of scope (TODO)
- The design's "Sound effects" switch in settings: the app has no sounds yet.
- Keycloak's email theme (password reset emails).