Introduce Tailwind CSS and shadcn UI as the primary styling system.
Establish a dark-theme baseline inspired by trading platforms.
AC:
-
Tailwind configured and used as main styling solution
-
shadcn components for buttons, inputs, cards, tables
-
Dark theme baseline applied consistently
-
At minimum: Landing, Dashboard, Portfolio, Alerts styled
Deps - none.
To ensure a smooth migration and maintain code quality, I propose breaking this task into 4 sequential Pull Requests (PRs).
This approach allows for better testing and prevents massive, hard-to-review code changes
-
a: chore(ui): add Tailwind CSS base setup
-
Scope: Installation, tailwind.config.js, PostCSS, and base global styles.
-
AC: Tailwind utility classes work on a test page; no regressions in existing legacy CSS.
-
b: chore(ui): add shadcn/ui + base theme tokens
-
Scope: shadcn init, installation of core components (Button, Input, Card, Table). Setup of CSS variables for Dark Mode.
-
AC: Ability to use shadcn components in a single view; theme tokens correctly applied.
-
c: feat(ui): create AppShell layout (nav + container)
-
Scope: Building a unified wrapper for authenticated routes (Navbar + Sidebar/Container).
-
AC: Portfolio, Alerts, and Watchlist pages use the same master layout.
-
d: feat(ui): apply dark theme to core pages
-
Scope: Full style migration for Dashboard, Portfolio, Alerts, and Landing Page. Removal of legacy inline styles and bare HTML tables.
-
AC: All core pages are responsive and follow the XTB-inspired Dark Theme.
Introduce Tailwind CSS and shadcn UI as the primary styling system.
Establish a dark-theme baseline inspired by trading platforms.
AC:
Tailwind configured and used as main styling solution
shadcn components for buttons, inputs, cards, tables
Dark theme baseline applied consistently
At minimum: Landing, Dashboard, Portfolio, Alerts styled
Deps - none.
To ensure a smooth migration and maintain code quality, I propose breaking this task into 4 sequential Pull Requests (PRs).
This approach allows for better testing and prevents massive, hard-to-review code changes
a: chore(ui): add Tailwind CSS base setup
Scope: Installation, tailwind.config.js, PostCSS, and base global styles.
AC: Tailwind utility classes work on a test page; no regressions in existing legacy CSS.
b: chore(ui): add shadcn/ui + base theme tokens
Scope: shadcn init, installation of core components (Button, Input, Card, Table). Setup of CSS variables for Dark Mode.
AC: Ability to use shadcn components in a single view; theme tokens correctly applied.
c: feat(ui): create AppShell layout (nav + container)
Scope: Building a unified wrapper for authenticated routes (Navbar + Sidebar/Container).
AC: Portfolio, Alerts, and Watchlist pages use the same master layout.
d: feat(ui): apply dark theme to core pages
Scope: Full style migration for Dashboard, Portfolio, Alerts, and Landing Page. Removal of legacy inline styles and bare HTML tables.
AC: All core pages are responsive and follow the XTB-inspired Dark Theme.