Retheme entire web UI (login + signed-in system) to echo MokoAi mokoonyx

jmiller commented

2026-07-18 23:39:42 +00:00

Owner

Reported by: @jmiller

Goal: Retheme the entire MokoGIT web UI -- the login page AND the whole signed-in system (dashboards, repos, issues/PRs, org/admin, settings) -- so it echoes the MokoAi look at https://ai.dev.mokoconsulting.tech (the mokoonyx theme). Login is the starting point; the theme then carries through the entire authenticated app.

Reference palette (ai.dev mokoonyx):

body bg #0e1318; card/secondary bg #151b22; border #2b323b
text #e6ebf1; primary/accent #3f8ff0; link #60a5fa; deep brand #112855
Font Awesome Free 7.1.0, self-hosted (already vendored at web_src/css/vendor/fontawesome/ and imported in web_src/css/index.css)
Accessibility + light/dark control as a rounded pill (moon + AUTO toggle + blue accessibility icon), as in ai.dev.

Scope:

Login/auth pages styled to mokoonyx.
Signed-in app chrome (navbar, sidebars, cards, tables, buttons, forms) themed system-wide.
Ship as a MokoGIT web theme mirroring mokoonyx (light + dark variants).
Ensure Font Awesome 7 actually loads in the built bundle (fixes blank a11y/theme icons).

Supersedes #818 (blank a11y/theme navbar icons): the FA-7 embed + toggle presentation are handled by this retheme. #819 (broken login-logo) and #820 (org header width) remain separate.

Reported 2026-07-18.

**Reported by:** @jmiller **Goal:** Retheme the **entire MokoGIT web UI** -- the login page AND the whole signed-in system (dashboards, repos, issues/PRs, org/admin, settings) -- so it echoes the **MokoAi** look at https://ai.dev.mokoconsulting.tech (the `mokoonyx` theme). Login is the starting point; the theme then carries through the entire authenticated app. **Reference palette (ai.dev `mokoonyx`):** - body bg `#0e1318`; card/secondary bg `#151b22`; border `#2b323b` - text `#e6ebf1`; primary/accent `#3f8ff0`; link `#60a5fa`; deep brand `#112855` - Font Awesome Free **7.1.0**, self-hosted (already vendored at `web_src/css/vendor/fontawesome/` and imported in `web_src/css/index.css`) - Accessibility + light/dark control as a rounded pill (moon + AUTO toggle + blue accessibility icon), as in ai.dev. **Scope:** 1. Login/auth pages styled to mokoonyx. 2. Signed-in app chrome (navbar, sidebars, cards, tables, buttons, forms) themed system-wide. 3. Ship as a MokoGIT web theme mirroring `mokoonyx` (light + dark variants). 4. Ensure Font Awesome 7 actually loads in the built bundle (fixes blank a11y/theme icons). **Supersedes #818** (blank a11y/theme navbar icons): the FA-7 embed + toggle presentation are handled by this retheme. #819 (broken login-logo) and #820 (org header width) remain separate. _Reported 2026-07-18._

jmiller added the tech-debt label 2026-07-18 23:39:42 +00:00

jmiller referenced this issue from a commit

2026-07-18 23:45:29 +00:00

feat(ui): retheme login page to MokoAi mokoonyx look (mold for #822)

jmiller referenced this issue

2026-07-18 23:45:47 +00:00

feat(ui): retheme login page to MokoAi mokoonyx look (mold for #822) #823

jmiller commented

2026-07-18 23:47:01 +00:00

Author

Owner

Branch created: feature/822-retheme-entire-web-ui-login-signed-in-sy

git fetch origin
git checkout feature/822-retheme-entire-web-ui-login-signed-in-sy

Branch created: [`feature/822-retheme-entire-web-ui-login-signed-in-sy`](https://git.mokoconsulting.tech/MokoConsulting/MokoGIT/src/branch/feature/822-retheme-entire-web-ui-login-signed-in-sy) ```bash git fetch origin git checkout feature/822-retheme-entire-web-ui-login-signed-in-sy ```

jmiller referenced this issue

2026-07-21 18:40:17 +00:00

(feat) Comprehensive Mobile Responsiveness Across All Pages #719

jmiller commented

2026-07-21 18:40:45 +00:00

Author

Owner

Folded into the consolidated mobile + retheme design on #719 (work package WP-B). Shipping together on feat/mobile-retheme. Approach: tune the existing theme-mokogit-{light,dark}.css token values to the mokoonyx palette (not importing MokoAI's data-bs-theme sheets) + extend mokogit-brand.css for app-wide chrome. Decisions: light-theme primary → #aec5f5 (black text on accent), dark accent stays #3f8ff0. See #719 for the full plan.

Folded into the consolidated mobile + retheme design on **#719** (work package **WP-B**). Shipping together on `feat/mobile-retheme`. Approach: tune the existing `theme-mokogit-{light,dark}.css` token values to the mokoonyx palette (not importing MokoAI's `data-bs-theme` sheets) + extend `mokogit-brand.css` for app-wide chrome. Decisions: light-theme primary → `#aec5f5` (black text on accent), dark accent stays `#3f8ff0`. See #719 for the full plan.

jmiller referenced this issue from a commit

2026-07-21 19:27:57 +00:00

feat(ui): retheme tokens + app chrome to mokoonyx (#822)

jmiller referenced this issue

2026-07-21 19:28:32 +00:00

feat(ui): mobile responsiveness + mokoonyx retheme + Bootstrap 5 drop-in (#719 #822 #835 #818 #803) #857

jmiller referenced this issue from a commit

2026-07-21 19:29:21 +00:00

Merge pull request 'feat(ui): mobile responsiveness + mokoonyx retheme + Bootstrap 5 drop-in (#719 #822 #835 #818 #803)' (#857) from feat/mobile-retheme into dev

jmiller referenced this issue from a commit

2026-07-21 21:43:03 +00:00

feat(theme): bundle MokoOnyx template.css + light/dark sheets; sync workflow (#822)