feat: redesign UI with pastel theme, dark mode and smooth animations
- Add light/dark/system theme switcher with localStorage persistence and automatic prefers-color-scheme detection - New pastel Instagram-inspired palette: rose accent (#C9445D light, #E8687E dark), clean #FAFAFA / #000000 backgrounds - Replace all hardcoded bg-white / red-* colors with CSS variables so every page and modal respects the active theme - Smooth card hover: translateY elevation + image zoom (no layout shift) - Micro-animations on action buttons with spring cubic-bezier - Editorial navbar: 3px accent top bar, uppercase wordmark - Theme toggle button (sun/moon/monitor) added to navbar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -51,7 +51,7 @@ export default function UploadPage() {
|
||||
|
||||
{!preview ? (
|
||||
<div {...getRootProps()}
|
||||
className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all bg-white ${
|
||||
className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all bg-[var(--surface)] ${
|
||||
isDragActive ? 'border-[var(--accent)] bg-[var(--accent-light)] scale-[1.01]' : 'border-[var(--border)] hover:border-[var(--fg-tertiary)] hover:bg-[var(--surface-hover)]'
|
||||
}`}>
|
||||
<input {...getInputProps()} />
|
||||
@@ -110,7 +110,7 @@ export default function UploadPage() {
|
||||
</div>
|
||||
|
||||
{uploadMutation.isError && (
|
||||
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-red-50 text-red-600 text-xs font-medium animate-fade-up">
|
||||
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-fade-up">
|
||||
Не удалось загрузить. Попробуйте снова.
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user