curo/Business-Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement shadcn/ui + Tailwind CSS UI layer

Browse Source 
- Design token system via CSS custom properties (light/dark mode)
- Theme context hook + ThemeToggle component
- AppShell + collapsible Sidebar replace inline Nav
- LoginPage redesigned: two-column grid with hero panel
- shadcn/ui Button and Input components
- Tailwind config wired to CSS variable tokens
- All pages de-Nav'd; PrivateRoute/AdminRoute wrap with AppShell
- TypeScript passes clean (npm run typecheck)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
2026-04-17 12:32:06 +02:00
parent 9e2e4ec338
commit c3f87706ee
26 changed files with 1263 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changelog/2026-04-17_switch-penpot-to-figma.md
+36
View File
@@ -23,3 +23,39 @@
**Files Modified:**
- `CLAUDE.md` — added UI Library (shadcn/ui) and Styling (Tailwind CSS v3) rows to Stack table
- `frontend/STATUS.md` — marked shadcn/ui checklist item as done; updated Known limitations note from "evaluation pending" to "adoption in progress"
---
# 2026-04-17 — Implement shadcn/ui + Tailwind CSS UI layer
**Timestamp:** 2026-04-17T12:00:00
**Summary:** Full implementation of the shadcn/ui + Tailwind CSS UI layer: design token system, theme context, new LoginPage, AppShell + Sidebar replacing the inline Nav component.
**Files Added:**
- `frontend/tailwind.config.ts` — Tailwind config with CSS-variable-based design tokens (primary, accent, background, surface, border, foreground, muted)
- `frontend/postcss.config.js` — PostCSS config (tailwindcss + autoprefixer)
- `frontend/components.json` — shadcn/ui init config (style: default, baseColor: slate, cssVariables: true)
- `frontend/src/styles/theme.css` — Tailwind directives + full CSS custom property token set (light/dark mode)
- `frontend/src/lib/utils.ts` — `cn()` utility (clsx + tailwind-merge)
- `frontend/src/components/ui/button.tsx` — shadcn/ui Button (default, ghost, outline, destructive variants)
- `frontend/src/components/ui/input.tsx` — shadcn/ui Input
- `frontend/src/hooks/useTheme.ts` — theme hook (localStorage + OS preference detection)
- `frontend/src/components/ThemeToggle.tsx` — sun/moon ghost icon button
- `frontend/src/components/Sidebar.tsx` — collapsible left sidebar (expanded/collapsed states, NavLinks, admin-only item, user avatar, logout)
- `frontend/src/components/AppShell.tsx` — layout wrapper (Sidebar + scrollable main)
**Files Modified:**
- `frontend/package.json` — added lucide-react, clsx, tailwind-merge, class-variance-authority, @radix-ui/react-slot, tailwindcss, autoprefixer, postcss
- `frontend/vite.config.ts` — added `@/` path alias via fileURLToPath
- `frontend/src/main.tsx` — import theme.css
- `frontend/src/App.tsx` — PrivateRoute and AdminRoute now wrap children in AppShell; removed Nav import
- `frontend/src/pages/LoginPage.tsx` — full redesign: two-column grid (form panel + hero panel), shadcn Input/Button, ThemeToggle
- `frontend/src/pages/DashboardPage.tsx` — removed Nav, applied Tailwind headings
- `frontend/src/pages/AppsPage.tsx` — removed Nav
- `frontend/src/pages/ProfilePage.tsx` — removed Nav
- `frontend/src/pages/AdminPage.tsx` — removed Nav
- `frontend/src/pages/DocumentsPage.tsx` — removed Nav
- `frontend/src/pages/DocumentAdminSettingsPage.tsx` — removed Nav
- `frontend/src/pages/AIAdminSettingsPage.tsx` — removed Nav
- `frontend/STATUS.md` — added component inventory table; updated What it is; updated Future work checklist