Skip to content

feat(ui): migrate app shell to Tailwind CSS + shadcn (dark theme) #57

@Shakalito

Description

@Shakalito

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestfrontendUser interface, dashboards, charts, and client-side state management.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions