Public Access
admin
6a0c9d0c4e
- 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
78 lines
2.2 KiB
CSS
78 lines
2.2 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background-color: #f5f5f5;
|
|
color: #171717;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
* {
|
|
border-color: #e5e5e5;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid #0ea5e9;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
::selection {
|
|
background-color: #bae6fd;
|
|
color: #0c4a6e;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply btn bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply btn bg-white text-surface-700 border border-surface-300 hover:bg-surface-50 active:bg-surface-100;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply btn text-surface-600 hover:bg-surface-100 active:bg-surface-200;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply btn bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-white rounded-xl shadow-sm border border-surface-200 overflow-hidden;
|
|
}
|
|
|
|
.input {
|
|
@apply w-full px-3 py-2.5 rounded-lg border border-surface-300 bg-white text-sm text-surface-900 placeholder:text-surface-400 transition-all duration-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.label {
|
|
@apply block text-sm font-medium text-surface-700 mb-1.5;
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
|
|
.skeleton {
|
|
@apply animate-shimmer bg-gradient-to-r from-surface-200 via-surface-300 to-surface-200 bg-[length:200%_100%] rounded-md;
|
|
}
|
|
}
|