Add light mode support (next-themes), JetBrains Mono font, OpenType features
- layout.tsx: ThemeProvider from next-themes, light mode DEFAULT, JetBrains_Mono font - globals.css: font-mono pointing to correct variable, font-feature-settings cv01+ss03 on body - next-themes package installed - Build passes with zero errors
This commit is contained in:
63
docs/web-lightmode-spec.md
Normal file
63
docs/web-lightmode-spec.md
Normal file
@@ -0,0 +1,63 @@
|
||||
CRITICAL REDESIGN REQUIRED. The current Tessera frontend is dark-mode-only and not user-friendly. Implement these changes:
|
||||
|
||||
## 1. LIGHT MODE AS DEFAULT
|
||||
Rewrite the theme system. shadcn/ui supports light/dark via CSS variables.
|
||||
|
||||
- Remove forced `className="dark"` from HTML element in layout.tsx
|
||||
- Add ThemeProvider (install next-themes: bun add next-themes)
|
||||
- Light mode is DEFAULT. Dark mode via toggle.
|
||||
- Use shadcn/ui's built-in CSS variable system (already in globals.css)
|
||||
|
||||
Light mode colors:
|
||||
- Background: white for canvas, #f8f9fa for panels/sidebar
|
||||
- Text: #1a1a2e primary, #4a4a6a secondary, #6b7280 tertiary
|
||||
- Borders: #e5e7eb, Cards: white with shadow
|
||||
- Accent: #5e6ad2 (works in both modes)
|
||||
|
||||
Dark mode (toggled): keep existing Linear-inspired dark theme
|
||||
|
||||
## 2. BETTER FONT
|
||||
- Primary: 'Inter' from next/font/google with font-feature-settings: 'cv01' 1, 'ss03' 1 (geometric Linear-like character)
|
||||
- Monospace: 'JetBrains Mono' for ticket IDs, code, config
|
||||
- Headings: tighter letter-spacing (-0.02em)
|
||||
- Body: 15px base, line-height 1.5
|
||||
|
||||
## 3. UX IMPROVEMENTS
|
||||
|
||||
### Ticket list (page.tsx):
|
||||
- Inbox-like rows: padding, hover highlight, subtle left border on hover
|
||||
- Add checkbox column for future batch actions
|
||||
- Clicking row opens detail in split view: list stays on left, detail on right
|
||||
- OR simplified: click opens slide-over Sheet from right showing detail
|
||||
- "New Ticket" button: prominent with gradient background
|
||||
|
||||
### Ticket detail (tickets/[id]/page.tsx):
|
||||
- Better conversation hierarchy: customer messages tinted, agent clearly differentiated
|
||||
- Properties sidebar: group into Status/Assignment/Details sections with dividers
|
||||
- Status dropdown: more prominent (most important action)
|
||||
|
||||
### Global:
|
||||
- Smooth transitions (150ms ease) on hover states
|
||||
- Border radius consistency (8px cards, 6px inputs)
|
||||
- Sidebar collapse/expand with hamburger
|
||||
- Breadcrumb navigation at top of detail pages
|
||||
- Tooltips on icon buttons
|
||||
- Split-view or sheet overlay for ticket detail from list
|
||||
|
||||
### Command palette:
|
||||
- Ensure Cmd+K / Ctrl+K triggers it
|
||||
- Add fuzzy ticket search
|
||||
- Add quick actions
|
||||
|
||||
## 4. IMPLEMENTATION
|
||||
- Read current files first
|
||||
- Modify existing files, don't delete
|
||||
- Preserve api.ts and types.ts
|
||||
- Use next-themes for theme switching
|
||||
- shadcn/ui CSS variables already in globals.css
|
||||
|
||||
## 5. VERIFY
|
||||
- `cd web && bun run build` — zero TypeScript errors
|
||||
- Both light and dark mode work
|
||||
- Font has OpenType features applied
|
||||
- Ticket list is inbox-like
|
||||
Reference in New Issue
Block a user