Halit Aksoy 6f88658c60 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

2.3 KiB

Raw Permalink Blame History

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.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).

2.3 KiB Raw Permalink Blame History