You are acting as a Senior Frontend Engineer. Your task is to refactor the site's layout and design system. Stop using arbitrary CSS, inline styles, or custom styling rules.
1. Mandatory Tech Stack
Framework: React (Vite or Next.js)
Styling Framework: Tailwind CSS
Component Library:shadcn/ui (built on Radix UI primitives)
Icon Library:lucide-react
2. Design Tokens & Color Palette
You must configure Tailwind CSS variables (globals.css / tailwind.config.js) to use the exact color tokens below. All components must draw from these variables (e.g., bg-background, text-primary, bg-card).
Primary Text (--foreground):#1A1D2E (Deep Dark Blue-Gray)
Muted Text (--muted-foreground):#64748B (Slate Gray)
Border (--border):#E2E8F0
3. Layout & Structure Guidelines
Component Usage: Rebuild form fields, buttons, dialogs, cards, and navigation using native shadcn/ui primitives (Card, Button, Input, Select, etc.).
Spacing & Grid: Enforce uniform padding and margins using Tailwind spacing classes (p-4, p-6, gap-4).
Visual Cleanup: Remove all legacy, orphaned, or arbitrary custom CSS files. Ensure the dark and light mode toggle cleanly switches the root theme class.
Execution Steps
Install and initialize Tailwind CSS and shadcn/ui if not already present.
Define the color variables in globals.css using the hex codes specified above.
Replace custom components with clean, composable shadcn/ui components styled via Tailwind.
# UI Standardization & Tech Stack Brief
You are acting as a Senior Frontend Engineer. Your task is to refactor the site's layout and design system. Stop using arbitrary CSS, inline styles, or custom styling rules.
---
### 1. Mandatory Tech Stack
* **Framework:** React (Vite or Next.js)
* **Styling Framework:** Tailwind CSS
* **Component Library:** `shadcn/ui` (built on Radix UI primitives)
* **Icon Library:** `lucide-react`
---
### 2. Design Tokens & Color Palette
You must configure Tailwind CSS variables (`globals.css` / `tailwind.config.js`) to use the exact color tokens below. All components must draw from these variables (e.g., `bg-background`, `text-primary`, `bg-card`).
#### Dark Mode Palette
* **Background (`--background`):** `#252B42` (Deep Slate Navy)
* **Card Surface (`--card`):** `#303753` (Lighter Slate)
* **Input Surface (`--input`):** `#23283B` (Dark Blue)
* **Primary Accent (`--primary`):** `#4A43EC` (Electric Violet)
* **Secondary Accent (`--secondary`):** `#7171FF` (Periwinkle Blue)
* **Data / Accent (`--accent`):** `#42ECF5` (Bright Cyan)
* **Primary Text (`--foreground`):** `#FFFFFF` (White)
* **Muted Text (`--muted-foreground`):** `#8B95B7` (Soft Slate Gray)
* **Border (`--border`):** `#3D4668`
#### Light Mode Palette
* **Background (`--background`):** `#F8FAFC` (Off-white)
* **Card Surface (`--card`):** `#FFFFFF` (Pure White)
* **Primary Accent (`--primary`):** `#4A43EC` (Electric Violet)
* **Secondary Accent (`--secondary`):** `#7171FF`
* **Data / Accent (`--accent`):** `#2AD1ED`
* **Primary Text (`--foreground`):** `#1A1D2E` (Deep Dark Blue-Gray)
* **Muted Text (`--muted-foreground`):** `#64748B` (Slate Gray)
* **Border (`--border`):** `#E2E8F0`
---
### 3. Layout & Structure Guidelines
* **Component Usage:** Rebuild form fields, buttons, dialogs, cards, and navigation using native `shadcn/ui` primitives (`Card`, `Button`, `Input`, `Select`, etc.).
* **Spacing & Grid:** Enforce uniform padding and margins using Tailwind spacing classes (`p-4`, `p-6`, `gap-4`).
* **Visual Cleanup:** Remove all legacy, orphaned, or arbitrary custom CSS files. Ensure the dark and light mode toggle cleanly switches the root theme class.
---
### Execution Steps
1. Install and initialize Tailwind CSS and `shadcn/ui` if not already present.
2. Define the color variables in `globals.css` using the hex codes specified above.
3. Replace custom components with clean, composable `shadcn/ui` components styled via Tailwind.
Implementation is pushed to main and ready for review.
## Implementation update
- Migrated the UI from the legacy Jinja template/custom CSS to a Vite React frontend styled with Tailwind.
- Added local shadcn-style primitives built on Radix UI and switched icon usage to lucide-react.
- Wired the exact requested light/dark design tokens through `globals.css` and Tailwind theme usage.
- Preserved the existing Importarr API-driven workflows, including queue controls, settings, manual batches, update actions, and force-run.
- Updated FastAPI and Docker so the built frontend assets are served in production.
- Added focused frontend tests for settings hydration and the force-run action, and updated backend UI assertions for the new app shell.
## Commit
- `65c96bb` — `Migrate UI to React and Tailwind Refs #32`
## Verification
- `npm --prefix frontend test -- --run`
- `npm --prefix frontend run build`
- `.venv/bin/python -m pytest -q`
- `git diff --check`
- `sudo -n docker build -t importarr-issue-32-check .`
## Result
Implementation is pushed to `main` and ready for review.
daniels
added the ready label 2026-07-30 14:56:02 +02:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
UI Standardization & Tech Stack Brief
You are acting as a Senior Frontend Engineer. Your task is to refactor the site's layout and design system. Stop using arbitrary CSS, inline styles, or custom styling rules.
1. Mandatory Tech Stack
shadcn/ui(built on Radix UI primitives)lucide-react2. Design Tokens & Color Palette
You must configure Tailwind CSS variables (
globals.css/tailwind.config.js) to use the exact color tokens below. All components must draw from these variables (e.g.,bg-background,text-primary,bg-card).Dark Mode Palette
--background):#252B42(Deep Slate Navy)--card):#303753(Lighter Slate)--input):#23283B(Dark Blue)--primary):#4A43EC(Electric Violet)--secondary):#7171FF(Periwinkle Blue)--accent):#42ECF5(Bright Cyan)--foreground):#FFFFFF(White)--muted-foreground):#8B95B7(Soft Slate Gray)--border):#3D4668Light Mode Palette
--background):#F8FAFC(Off-white)--card):#FFFFFF(Pure White)--primary):#4A43EC(Electric Violet)--secondary):#7171FF--accent):#2AD1ED--foreground):#1A1D2E(Deep Dark Blue-Gray)--muted-foreground):#64748B(Slate Gray)--border):#E2E8F03. Layout & Structure Guidelines
shadcn/uiprimitives (Card,Button,Input,Select, etc.).p-4,p-6,gap-4).Execution Steps
shadcn/uiif not already present.globals.cssusing the hex codes specified above.shadcn/uicomponents styled via Tailwind.Implementation update
globals.cssand Tailwind theme usage.Commit
65c96bb—Migrate UI to React and Tailwind Refs #32Verification
npm --prefix frontend test -- --runnpm --prefix frontend run build.venv/bin/python -m pytest -qgit diff --checksudo -n docker build -t importarr-issue-32-check .Result
Implementation is pushed to
mainand ready for review.