60 lines
2.8 KiB
Plaintext
60 lines
2.8 KiB
Plaintext
Redesign the entire UI of this application to look like Windows 11 Fluent Design. This is a UI-only redesign - do NOT change any business logic, API routes, database schema, or functionality. Only modify visual styling (CSS classes, Tailwind utilities, color values, border-radius, shadows, etc.).
|
|
|
|
Changes needed:
|
|
|
|
1. globals.css - Update theme:
|
|
- Primary color: #0078D4 (Windows 11 blue)
|
|
- Add --color-win11-accent: #0078D4 and shades (#106EBE, #005A9E, #003D6B)
|
|
- Background: light #f3f3f3, dark #202020
|
|
- Rounded corners: 8px cards, 4px small elements
|
|
- Shadows: subtle layered shadows like Win11 (0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.08))
|
|
- Smooth transitions: 200-300ms ease
|
|
- Add acrylic utility: .acrylic { backdrop-filter: blur(20px) saturate(180%); background: rgba(255,255,255,0.7); }
|
|
- Add .acrylic-dark for dark mode
|
|
|
|
2. app/(main)/layout.tsx - Main layout:
|
|
- Background: #f3f3f3 (light) / #202020 (dark)
|
|
- Sidebar: add bg-white/80 dark:bg-[#2d2d2d]/80 backdrop-blur-xl rounded-e-lg
|
|
- Content area: clean with subtle padding
|
|
|
|
3. components/sidebar.tsx - Windows 11 navigation:
|
|
- Semi-transparent bg with backdrop-blur-xl
|
|
- Nav items: rounded-lg hover states with subtle bg-slate-100 dark:bg-slate-800
|
|
- Active item: bg-blue-50 dark:bg-blue-900/30 text-[#0078D4] with left border-2 indicator
|
|
- Smooth collapse animation with transition-all duration-300
|
|
|
|
4. components/header.tsx - Windows 11 title bar:
|
|
- Clean minimal, height h-12
|
|
- Rounded search input (rounded-full or rounded-lg) like Win11 search
|
|
- Subtle bottom border
|
|
|
|
5. components/note-card.tsx - Win11 cards:
|
|
- rounded-lg (8px)
|
|
- border border-slate-200 dark:border-slate-700
|
|
- hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200
|
|
- Clean white bg
|
|
|
|
6. components/home-client.tsx - Widget layout:
|
|
- Rounded containers (rounded-xl) for each section
|
|
- Subtle hover:shadow-md transition
|
|
|
|
7. components/note-editor.tsx & rich-text-editor.tsx - Win11 editor:
|
|
- Rounded toolbar buttons (rounded-md)
|
|
- Subtle separators between toolbar groups
|
|
- Clean focused state
|
|
|
|
8. components/ui/button.tsx - Win11 buttons:
|
|
- rounded-md (6px)
|
|
- Primary: bg-[#0078D4] hover:bg-[#106EBE] text-white
|
|
- Secondary: bg-slate-100 hover:bg-slate-200 border border-slate-300
|
|
- Subtle active states
|
|
|
|
9. components/ui/card.tsx - Win11 card:
|
|
- rounded-lg border border-slate-200/60
|
|
- hover:shadow-md transition-shadow duration-200
|
|
|
|
10. components/ui/input.tsx - Win11 input:
|
|
- rounded-md (6px)
|
|
- border-slate-300 focus:border-[#0078D4] focus:ring-1 focus:ring-[#0078D4]/30
|
|
|
|
Read each file first, understand its structure, then make surgical edits. After all changes, run npm run build to verify the build passes. Fix any build errors if any. |