feat: full UI redesign with design system, Nielsen heuristics compliance

Public Access

- Install lucide-react, framer-motion, react-hot-toast, clsx, tailwind-merge
- Custom Tailwind config: semantic color tokens, Inter font, shadow scale,
  border radius scale, custom animations (fadeIn, slideUp, shimmer)
- Shared component library: Button, Badge, Card, Input, Select, Textarea,
  EmptyState, Skeleton, LoadingSpinner
- Global CSS with @layer components (.btn, .card, .input, .badge, .skeleton)
- Toast notification system via react-hot-toast + showToast utility
- ErrorBoundary wrapper for graceful error recovery
- Redesigned navigation: sticky, active state indicators, Lucide icons
- Dashboard: hero header, today highlighting, scrollable week grid,
  redesigned meal cards, empty states, skeleton loading
- Meal Detail: hero image with gradient overlay, metadata row with icons,
  Lucide star rating, edit-existing-feedback flow
- Pantry: inline add form, search/filter, visual quantity badges,
  expiry warnings, confirmation dialogs
- Shopping List: gradient summary cards, aisle grouping with badges,
  sale strikethrough pricing, empty state
- Login: centered card with icon, Input component, Button component
- All old gray/blue utility classes migrated to new surface/primary tokens
- TypeScript clean, production build passes

This commit is contained in:

admin

2026-05-14 10:26:53 -07:00

parent f7ed10651b

commit 6a0c9d0c4e

23 changed files with 1772 additions and 528 deletions

									
										frontend/index.html
									
		+2
		
												View File
												
				@@ -4,6 +4,8 @@

				    <meta charset="UTF-8" />

				    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

				    <title>MealPlanner</title>

				    <link rel="preconnect" href="https://fonts.googleapis.com" />

				    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

				  </head>

				  <body>

				    <div id="root"></div>