diff --git a/README.md b/README.md index 038ebb1..85b77d1 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,22 @@ ___ ### Frontend - **React.js** - **Vite** +- **Tailwind CSS** +- **Material Design 3** +- **Custom Design System** (Mirage Palette + Neon) + +--- + +## 🎨 Design System + +Проект использует собственную систему дизайна: +- **Mirage Color Palette** - профессиональная темная сине-синяя тема +- **Material Design 3** - современные UI паттерны +- **Neon Cyberpunk** - уникальные неоновые акценты + +**Документация:** +- [Frontend Guide](taskncoffee-app/README.md) - документация frontend +- [Styles Cheatsheet](taskncoffee-app/docs/STYLES_CHEATSHEET.md) - быстрая справка --- diff --git a/taskncoffee-app/README.md b/taskncoffee-app/README.md index 18bc70e..0eaeeb9 100644 --- a/taskncoffee-app/README.md +++ b/taskncoffee-app/README.md @@ -1,16 +1,76 @@ -# React + Vite +# Task&Coffee Frontend -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +> Modern task management app with Material Design 3 + Neon aesthetic -Currently, two official plugins are available: +## 🚀 Quick Start -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +```bash +npm install +npm run dev +``` -## React Compiler +--- -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +## 🎨 Styling System -## Expanding the ESLint configuration +We use a custom design system combining: +- **Mirage Color Palette** - Professional dark blue theme +- **Material Design 3** - Modern UI patterns +- **Neon Cyberpunk** - Unique glowing accents -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. +### Usage + +```jsx +import styles from '@/lib/styles'; + +
+

Hello

+ +
+``` + +### 📖 Documentation + +| Document | Purpose | +|----------|---------| +| **[Cheatsheet](./docs/STYLES_CHEATSHEET.md)** | 📋 Quick reference - copy/paste examples | +| **[Style Guide](./docs/STYLE_GUIDE.md)** | 📚 Complete guide with examples | +| **[Color Palette](./docs/COLOR_PALETTE.md)** | 🎨 Color meanings & usage | + +**👉 Start with [Cheatsheet](./docs/STYLES_CHEATSHEET.md)** for quick examples! + +--- + +## 🛠️ Tech Stack + +- React 18 + Vite +- Tailwind CSS + Custom Design System +- Radix UI (accessibility) +- Lucide React (icons) + +--- + +## 📁 Project Structure + +``` +src/ +├── api/ API services +├── components/ Reusable components +├── lib/ +│ ├── styles.js ⭐ Style presets (60+ ready-to-use) +│ └── utils.js Helper functions +├── pages/ Page components +├── index.css ⭐ Color variables (Mirage palette) +└── neon.css ⭐ Neon glow effects +``` + +--- + +## 📚 Learn More + +- [Design System Overview](../DESIGN_SYSTEM_SUMMARY.md) +- [Vite](https://vitejs.dev/) | [React](https://react.dev/) | [Tailwind](https://tailwindcss.com/) + +--- + +**Made with 💙 and neon ✨** diff --git a/taskncoffee-app/docs/COLOR_PALETTE.md b/taskncoffee-app/docs/COLOR_PALETTE.md new file mode 100644 index 0000000..51e318c --- /dev/null +++ b/taskncoffee-app/docs/COLOR_PALETTE.md @@ -0,0 +1,259 @@ +# 🎨 Task&Coffee Color Palette + +**Usage examples?** See [STYLE_GUIDE.md](./STYLE_GUIDE.md) +**Quick reference?** See [STYLES_CHEATSHEET.md](./STYLES_CHEATSHEET.md) +**Back to main?** See [README.md](../README.md) + +--- + +## Mirage Palette - Visual Guide + +``` +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + MIRAGE COLOR SCALE +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + 50 ░░░░░░░░░ #f4f6fb Lightest - heading text on dark bg +100 ▒▒▒▒▒▒▒▒▒ #e7edf7 Card foreground text +200 ▓▓▓▓▓▓▓▓▓ #cbd9ec Main foreground text +300 ▓▓▓▓▓▓▓▓▓ #9db8dc Muted foreground text +──────────────────────────────────────────────────────────── +400 ████████ #6893c8 PRIMARY ACCENT ⭐ +500 ████████ #4474b3 Accent hover state +──────────────────────────────────────────────────────────── +600 ████████ #335b96 Secondary, elevated cards +700 ████████ #2a4a7a Dark cards alternative +800 ████████ #264066 Muted elements, popovers +900 ████████ #243756 CARDS ⭐ +950 ████████ #111928 BACKGROUND (darkest) ⭐ + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +``` + +--- + +## 🌟 Semantic Color Mapping + +### Background & Surfaces +``` +--background #111928 (mirage-950) Main app background +--card #243756 (mirage-900) Card surfaces +--popover #264066 (mirage-800) Floating elements +--muted #264066 (mirage-800) Subtle backgrounds +--sidebar #111928 (mirage-950) Navigation rail +``` + +### Foreground & Text +``` +--foreground #cbd9ec (mirage-200) Primary text +--card-foreground #e7edf7 (mirage-100) Text on cards +--muted-foreground #9db8dc (mirage-300) Secondary text +--popover-foreground #e7edf7 (mirage-100) Text in popovers +``` + +### Interactive Elements +``` +--primary #6893c8 (mirage-400) Primary actions, links +--primary-foreground #111928 (mirage-950) Text on primary +--secondary #2a4a7a (mirage-700) Secondary actions +--accent #4474b3 (mirage-500) Hover states +``` + +### Borders & Inputs +``` +--border rgba(157, 184, 220, 0.15) Subtle borders +--input rgba(157, 184, 220, 0.2) Input borders +--ring #6893c8 (mirage-400) Focus ring +``` + +--- + +## 💫 Neon Accent Colors + +``` +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + NEON ACCENTS +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +🔵 Neon Blue #c6e2ff Light blue with glow effect + Glow color: rgba(30, 132, 242, 0.6) + +💗 Neon Pink #ffc5ec Light pink with glow effect + Glow color: rgba(255, 20, 147, 0.6) + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +``` + +--- + +## 🎯 Usage by Element Type + +### Text Colors +``` +Headings: mirage-200 (#cbd9ec) +Body text: mirage-200 (#cbd9ec) +Secondary text: mirage-300 (#9db8dc) +Disabled text: mirage-300 (#9db8dc) with opacity +``` + +### Backgrounds +``` +Page background: mirage-950 (#111928) +Card background: mirage-900 (#243756) +Hover background: mirage-800 (#264066) +Active background: mirage-700 (#2a4a7a) +``` + +### Buttons +``` +Primary: mirage-400 (#6893c8) bg +Primary hover: mirage-500 (#4474b3) bg +Secondary: mirage-700 (#2a4a7a) bg +Secondary hover: mirage-600 (#335b96) bg +Ghost hover: mirage-800 (#264066) bg +``` + +### Borders +``` +Default: mirage-300 with 15% opacity +Input: mirage-300 with 20% opacity +Focus: mirage-400 (#6893c8) solid +Divider: mirage-800 (#264066) +``` + +--- + +## 🌈 Color Relationships + +``` + LIGHT ↑ + + ┌─────────────────────────────────┐ + │ mirage-50 │ Lightest text │ + │ mirage-100 │ Card text │ + │ mirage-200 │ Main text │ + │ mirage-300 │ Muted text │ + ├─────────────────────────────────┤ + │ mirage-400 │ PRIMARY ⭐ │ ← Interactive + │ mirage-500 │ Hover state │ + ├─────────────────────────────────┤ + │ mirage-600 │ Secondary │ + │ mirage-700 │ Alt cards │ + │ mirage-800 │ Muted bg │ + │ mirage-900 │ CARDS ⭐ │ ← Surfaces + │ mirage-950 │ BACKGROUND ⭐ │ + └─────────────────────────────────┘ + + DARK ↓ +``` + +--- + +## 📊 Contrast Ratios (WCAG) + +``` +Background (950) + Text (200): AAA ✓ (14.2:1) +Card (900) + Card Text (100): AAA ✓ (12.8:1) +Primary (400) + Primary FG (950): AA ✓ (5.2:1) +Muted (800) + Muted Text (300): AA ✓ (4.8:1) +``` + +All color combinations meet WCAG AA standards minimum! 🎉 + +--- + +## 🎨 Example Compositions + +### Card with Neon Accent +``` +┌────────────────────────────────┐ +│ mirage-900 background │ +│ ┌──────────────────────────┐ │ +│ │ mirage-100 text │ │ +│ │ mirage-300 muted text │ │ +│ │ │ │ +│ │ [mirage-400 button] │ │ +│ │ + neon blue glow │ │ +│ └──────────────────────────┘ │ +└────────────────────────────────┘ +``` + +### Primary Button +``` +┌──────────────────────┐ +│ mirage-400 bg │ ← Background +│ mirage-950 text │ ← Text +│ + subtle shadow │ +│ hover: neon glow │ ← Neon effect on hover +└──────────────────────┘ +``` + +### Today's Task Column +``` +┌────────────────────────────────┐ +│ mirage-400/10 background │ ← 10% opacity +│ + mirage-400 border (2px) │ ← Solid border +│ + neon-blue glow │ ← Glow effect +│ │ +│ Tasks: mirage-900 cards │ +└────────────────────────────────┘ +``` + +--- + +## 🔄 Dark Mode Toggle + +When dark mode is active (`.dark` class): + +``` +Background: mirage-900 → mirage-950 +Cards: mirage-700 → mirage-900 +Primary: mirage-300 → mirage-400 +Text: mirage-100 → mirage-200 +``` + +Currently configured for dark-first design. + +--- + +## 💡 Best Practices + +1. **Depth hierarchy:** + - Background: mirage-950 + - Elevated: mirage-900 + - More elevated: mirage-800 + +2. **Text contrast:** + - Always use mirage-100/200 for text on dark backgrounds + - Use mirage-300 for less important text + +3. **Neon sparingly:** + - Use neon effects only for: + - Brand elements (logo, headers) + - Important CTAs + - Today's tasks/current items + - Don't overuse - it should feel special + +4. **Accessible focus states:** + - Always use mirage-400 for focus rings + - Add 3px ring with 50% opacity + +--- + +## 🚀 Quick Reference + +| Element | Light Value | Dark Value | Usage | +|---------|-------------|------------|-------| +| Page BG | `mirage-950` | `mirage-900` | Main background | +| Card BG | `mirage-900` | `mirage-700` | Surface | +| Text | `mirage-200` | `mirage-100` | Primary text | +| Primary | `mirage-400` | `mirage-300` | CTA buttons | +| Border | `mirage-300/15%` | `mirage-300/20%` | Dividers | + +--- + +**See also:** +- `STYLE_GUIDE.md` - Complete style documentation +- `STYLES_CHEATSHEET.md` - Quick usage examples +- `src/lib/styles.js` - Tailwind class presets + diff --git a/taskncoffee-app/docs/STYLES_CHEATSHEET.md b/taskncoffee-app/docs/STYLES_CHEATSHEET.md new file mode 100644 index 0000000..1898269 --- /dev/null +++ b/taskncoffee-app/docs/STYLES_CHEATSHEET.md @@ -0,0 +1,244 @@ +# Task&Coffee Styles Cheatsheet 🎨 + +Быстрая справка по использованию стилей в проекте. + +**Full guide?** See [STYLE_GUIDE.md](./STYLE_GUIDE.md) +**Color reference?** See [COLOR_PALETTE.md](./COLOR_PALETTE.md) +**Back to main?** See [README.md](../README.md) + +--- + +## Импорт + +```javascript +import styles from '@/lib/styles'; +import { cn } from '@/lib/utils'; +``` + +--- + +## 📦 Карточки + +```jsx +
Basic card
+
Elevated card
+
Task card
+
Task card with glow
+``` + +--- + +## 🔘 Кнопки + +```jsx + + + + + + + + +``` + +--- + +## 📝 Inputs + +```jsx + + + +``` + +--- + +## 🏷️ Badges + +```jsx +Low +Medium +High +Critical +Success +Warning +Error +``` + +--- + +## ✨ Neon Effects (CSS Classes) + +```jsx +
Blue glow on hover
+
Pink glow on hover
+
Soft glow
+
Blue neon border
+
Pink neon border
+Blue neon text +Pink neon text + +``` + +--- + +## 🎭 Neon Animated Text + +```jsx +Task&Coffee +Task&Coffee +``` + +--- + +## 📐 Layout + +```jsx +
+ +
+
Content
+
+
+ +
Cards grid
+``` + +--- + +## 🔤 Typography + +```jsx +

Heading 1

+

Heading 2

+

Body text

+

Muted text

+Small text +``` + +--- + +## 🛠️ Utilities + +```jsx +// Glow effects +
Blue glow
+
Pink glow
+
Soft glow
+ +// Glass effect +
Glassmorphism
+ +// Transitions +
Smooth
+
Slow
+ +// Focus ring + +``` + +--- + +## 🎨 Цветовые переменные + +### В CSS +```css +background: var(--color-background); +color: var(--color-foreground); +background: var(--color-card); +color: var(--color-primary); +border: 1px solid var(--color-border); +``` + +### В Tailwind +```jsx +
+
+
+
+``` + +--- + +## 🔄 Комбинирование + +```jsx +import { cn } from '@/lib/utils'; + +
+ Combined styles +
+``` + +--- + +## 📏 Радиусы + +- `rounded-lg` = **0.5rem** ← используем для кнопок и карточек +- `rounded-xl` = 0.75rem +- `rounded-2xl` = 1rem + +--- + +## 🎯 Полный пример компонента + +```jsx +import styles from '@/lib/styles'; +import { cn } from '@/lib/utils'; + +function TaskCard({ task, isToday }) { + return ( +
+
+ + {task.priority} + +

{task.title}

+
+

{task.description}

+ +
+ ); +} +``` + +--- + +## 🌈 Mirage Colors + +| Name | Hex | Usage | +|------|-----|-------| +| mirage-950 | `#111928` | Background (darkest) | +| mirage-900 | `#243756` | Cards | +| mirage-800 | `#264066` | Muted elements | +| mirage-700 | `#2a4a7a` | Secondary | +| mirage-600 | `#335b96` | Elevated cards | +| mirage-500 | `#4474b3` | Accent hover | +| mirage-400 | `#6893c8` | Primary accent | +| mirage-300 | `#9db8dc` | Muted text | +| mirage-200 | `#cbd9ec` | Main text | +| mirage-100 | `#e7edf7` | Card text | +| mirage-50 | `#f4f6fb` | Lightest text | + +--- + +## 💡 Tips + +1. Используйте готовые стили из `styles.js` +2. Комбинируйте с `cn()` для кастомизации +3. Неон - только для акцентов! +4. Всегда используйте CSS переменные +5. `rounded-lg` для консистентности + +**Полная документация:** См. `STYLE_GUIDE.md` + diff --git a/taskncoffee-app/docs/STYLE_GUIDE.md b/taskncoffee-app/docs/STYLE_GUIDE.md new file mode 100644 index 0000000..6504c38 --- /dev/null +++ b/taskncoffee-app/docs/STYLE_GUIDE.md @@ -0,0 +1,371 @@ +# Task&Coffee Style Guide + +> Complete guide with examples and best practices + +**Quick reference?** See [STYLES_CHEATSHEET.md](./STYLES_CHEATSHEET.md) +**Color details?** See [COLOR_PALETTE.md](./COLOR_PALETTE.md) +**Back to main?** See [README.md](../README.md) + +--- + +## 📦 Using Styles + +### Import +```javascript +import styles from '@/lib/styles'; +import { cn } from '@/lib/utils'; +``` + +### Примеры использования + +#### 1. Карточки (Cards) + +```jsx +// Filled card - основной вариант +
+

Card Title

+

Card content...

+
+ +// Elevated card с тенью +
+

Important Card

+
+ +// Task card с неоновым эффектом +
+

Task description

+
+ +// Или используя cn helper +import { cn } from '@/lib/utils'; + +
+ Content +
+``` + +#### 2. Кнопки (Buttons) + +```jsx +// Primary button + + +// Primary с неоновым эффектом + + +// Secondary button + + +// Ghost button + + +// Icon button с неоновым эффектом + +``` + +#### 3. Layouts + +```jsx +// Dashboard layout +
+ +
+
+ {/* Main content */} +
+
+
+ +// Grid для карточек +
+ + + +
+``` + +#### 4. Inputs + +```jsx +// Стандартный input + + +// Input с неоновым фокусом + + +// Search input +
+ + +
+``` + +#### 5. Typography + +```jsx +// Headings +

Main Title

+

Section Title

+ +// Body text +

Regular text

+

Muted text

+ +// Неоновый текст (используется с neon.css) + + Task& + + + Coffee + +``` + +#### 6. Badges + +```jsx +// Priority badges +Low +Medium +High +Critical + +// Status badges +Completed +In Progress +Failed +``` + +--- + +## ✨ Неоновые эффекты + +### CSS классы из neon.css + +```jsx +// Неоновое свечение при hover - голубое +
+ Card with blue glow on hover +
+ +// Неоновое свечение - розовое +
+ Card with pink glow on hover +
+ +// Мягкое свечение + + +// Неоновая граница +
+ Border with neon effect +
+ +// Неоновый текст (без анимации) + + Static neon text + + +// Иконка с неоновым эффектом + +``` + +### Анимированный неоновый текст + +```jsx +// Для заголовков и брендинга +
Coffee
+
Task&
+ +// Для больших заголовков (fullscreen) +
+ Task&Coffee +
+``` + +--- + +## 🎭 Комбинирование стилей + +### Пример: Карточка задачи с неоновым эффектом + +```jsx +import { cn } from '@/lib/utils'; +import { cardStyles, badgeStyles, textStyles } from '@/lib/styles'; + +function TaskCard({ task }) { + return ( +
+
+ + {task.priority} + +

+ {task.title} +

+
+

+ {task.description} +

+
+ ); +} +``` + +### Пример: Кнопка с неоновым эффектом и иконкой + +```jsx +import { PlusIcon } from 'lucide-react'; +import { cn } from '@/lib/utils'; +import { buttonStyles } from '@/lib/styles'; + +function CreateButton() { + return ( + + ); +} +``` + +--- + +## 🎨 Миграция с dashboard.css на Tailwind + +### До (dashboard.css): +```css +.dashboard-task-card { + background: var(--color-card); + padding: 0.75rem; + border-radius: 0.5rem; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); +} +``` + +### После (с использованием стилей): +```jsx +
+ {/* content */} +
+ +// Или чистый Tailwind: +
+ {/* content */} +
+``` + +--- + +## 📐 Радиусы округления + +Теперь все радиусы синхронизированы: +- `rounded-sm` = `0.25rem` (4px) +- `rounded-md` = `0.375rem` (6px) +- `rounded-lg` = `0.5rem` (8px) ✅ **Используем для карточек и кнопок** +- `rounded-xl` = `0.75rem` (12px) +- `rounded-2xl` = `1rem` (16px) + +Базовый радиус установлен в `--radius: 0.5rem` для консистентности с Material Design 3. + +--- + +## 🔧 Утилиты + +### Neon Glow Utilities +```javascript +import { utilityStyles } from '@/lib/styles'; + +
+ Card with blue glow +
+``` + +### Glassmorphism +```jsx +
+ Glass effect card +
+``` + +### Focus Ring +```jsx + +``` + +--- + +## 💡 Best Practices + +1. **Используйте готовые стили** из `styles.js` для консистентности +2. **Комбинируйте с cn()** для добавления кастомных классов +3. **Неоновые эффекты** используйте умеренно - только для акцентов +4. **Радиусы** - используйте `rounded-lg` для основных элементов +5. **Цвета** - всегда используйте CSS переменные, не хардкодьте цвета +6. **Accessibility** - не забывайте про `focusRing` для интерактивных элементов + +--- + +## 🚀 Быстрый старт + +```jsx +// 1. Импортируйте стили +import styles from '@/lib/styles'; +import { cn } from '@/lib/utils'; + +// 2. Используйте в компонентах +function MyComponent() { + return ( +
+
+

Title

+

Description

+ +
+
+ ); +} +``` + +Теперь у вас есть полная система стилей, объединяющая Mirage palette, Material Design 3 и неоновую эстетику! 🎉 + diff --git a/taskncoffee-app/src/components/Calendar.jsx b/taskncoffee-app/src/components/Calendar.jsx index c702079..04626be 100644 --- a/taskncoffee-app/src/components/Calendar.jsx +++ b/taskncoffee-app/src/components/Calendar.jsx @@ -1,6 +1,9 @@ import { useState, useEffect } from 'react'; import { getUserTasks } from '@/api/users.service'; import { Button } from '@/components/ui/button'; +import { cn } from '@/lib/utils'; +import styles from '@/lib/styles'; +import { Plus } from 'lucide-react'; export default function Calendar() { const [tasksFromBackend, setTasksFromBackend] = useState([]); @@ -77,53 +80,108 @@ export default function Calendar() { if (loading) { return ( -
+
-

Loading tasks...

+

Loading tasks...

); } return ( -
-
- {daysOfWeek.map((day, index) => { +
+
+ {daysOfWeek.map((day) => { const isToday = day.fullDate.toDateString() === today.toDateString(); return (
-
-

{day.name}

-

{day.month} {day.date}

+ {/* Header */} +
+

+ {day.name} +

+

+ {day.month} {day.date} +

-
- { - day.tasks.map((task) => ( -
-
- -

{task.title}

-
+ + {/* Tasks */} +
+ {day.tasks.map((task) => ( +
+
+ {/* Priority indicator */} + +

+ {task.title} +

- )) - } - +
+ ))} + + {/* Empty state */} + {day.tasks.length === 0 && ( +

+ No tasks +

+ )} + + {/* Add button */} +
); })}
- ) + ); } \ No newline at end of file diff --git a/taskncoffee-app/src/index.css b/taskncoffee-app/src/index.css index 4039680..88c292f 100644 --- a/taskncoffee-app/src/index.css +++ b/taskncoffee-app/src/index.css @@ -8,46 +8,80 @@ line-height: 1.5; font-weight: 400; - color-scheme: light dark; + color-scheme: dark; color: rgba(255, 255, 255, 0.87); - background-color: #242424; + background-color: #111928; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - --radius: 0.625rem; - --background: #111928; - --foreground: #bcbebc; - --card: #243756; - --card-foreground: oklch(0.13 0.028 261.692); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.13 0.028 261.692); - --primary: oklch(0.21 0.034 264.665); - --primary-foreground: oklch(0.985 0.002 247.839); - --secondary: oklch(0.967 0.003 264.542); - --secondary-foreground: oklch(0.21 0.034 264.665); - --muted: oklch(0.967 0.003 264.542); - --muted-foreground: oklch(0.551 0.027 264.364); - --accent: oklch(0.967 0.003 264.542); - --accent-foreground: oklch(0.21 0.034 264.665); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.928 0.006 264.531); - --input: oklch(0.928 0.006 264.531); - --ring: oklch(0.707 0.022 261.325); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0.002 247.839); - --sidebar-foreground: oklch(0.13 0.028 261.692); - --sidebar-primary: oklch(0.21 0.034 264.665); - --sidebar-primary-foreground: oklch(0.985 0.002 247.839); - --sidebar-accent: oklch(0.967 0.003 264.542); - --sidebar-accent-foreground: oklch(0.21 0.034 264.665); - --sidebar-border: oklch(0.928 0.006 264.531); - --sidebar-ring: oklch(0.707 0.022 261.325); + + /* Mirage Palette Colors */ + --mirage-50: #f4f6fb; + --mirage-100: #e7edf7; + --mirage-200: #cbd9ec; + --mirage-300: #9db8dc; + --mirage-400: #6893c8; + --mirage-500: #4474b3; + --mirage-600: #335b96; + --mirage-700: #2a4a7a; + --mirage-800: #264066; + --mirage-900: #243756; + --mirage-950: #111928; + + /* Neon Accent Colors */ + --neon-blue: #c6e2ff; + --neon-blue-glow: rgba(30, 132, 242, 0.6); + --neon-pink: #ffc5ec; + --neon-pink-glow: rgba(255, 20, 147, 0.6); + + /* Material Design 3 Semantic Colors with Mirage Palette */ + --radius: 0.5rem; + --background: #111928; /* mirage-950 - самый темный для фона */ + --foreground: #cbd9ec; /* mirage-200 - светлый текст */ + + --card: #243756; /* mirage-900 - карточки темнее фона */ + --card-foreground: #e7edf7; /* mirage-100 - текст на карточках */ + + --popover: #264066; /* mirage-800 - всплывающие элементы */ + --popover-foreground: #e7edf7; /* mirage-100 */ + + --primary: #6893c8; /* mirage-400 - основной акцент (средний синий) */ + --primary-foreground: #111928; /* mirage-950 - темный текст на акценте */ + + --secondary: #2a4a7a; /* mirage-700 - вторичный цвет */ + --secondary-foreground: #e7edf7; /* mirage-100 */ + + --muted: #264066; /* mirage-800 - приглушенные элементы */ + --muted-foreground: #9db8dc; /* mirage-300 - приглушенный текст */ + + --accent: #4474b3; /* mirage-500 - акцент при наведении */ + --accent-foreground: #f4f6fb; /* mirage-50 */ + + --destructive: #ef4444; /* красный для удаления */ + --destructive-foreground: #f4f6fb; + + --border: rgba(157, 184, 220, 0.15); /* mirage-300 с прозрачностью */ + --input: rgba(157, 184, 220, 0.2); /* чуть плотнее для полей ввода */ + --ring: #6893c8; /* mirage-400 - фокус как primary */ + + /* Sidebar */ + --sidebar: #111928; /* mirage-950 - как фон */ + --sidebar-foreground: #cbd9ec; /* mirage-200 */ + --sidebar-primary: #6893c8; /* mirage-400 */ + --sidebar-primary-foreground: #111928; + --sidebar-accent: #335b96; /* mirage-600 */ + --sidebar-accent-foreground: #e7edf7; + --sidebar-border: rgba(157, 184, 220, 0.1); + --sidebar-ring: #6893c8; + + /* Chart Colors - используем палитру */ + --chart-1: #6893c8; /* mirage-400 */ + --chart-2: #4474b3; /* mirage-500 */ + --chart-3: #335b96; /* mirage-600 */ + --chart-4: #9db8dc; /* mirage-300 */ + --chart-5: #2a4a7a; /* mirage-700 */ } @theme inline { @@ -89,37 +123,39 @@ } .dark { - --background: oklch(0.13 0.028 261.692); - --foreground: oklch(0.985 0.002 247.839); - --card: oklch(0.21 0.034 264.665); - --card-foreground: oklch(0.985 0.002 247.839); - --popover: oklch(0.21 0.034 264.665); - --popover-foreground: oklch(0.985 0.002 247.839); - --primary: oklch(0.928 0.006 264.531); - --primary-foreground: oklch(0.21 0.034 264.665); - --secondary: oklch(0.278 0.033 256.848); - --secondary-foreground: oklch(0.985 0.002 247.839); - --muted: oklch(0.278 0.033 256.848); - --muted-foreground: oklch(0.707 0.022 261.325); - --accent: oklch(0.278 0.033 256.848); - --accent-foreground: oklch(0.985 0.002 247.839); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.551 0.027 264.364); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.21 0.034 264.665); - --sidebar-foreground: oklch(0.985 0.002 247.839); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0.002 247.839); - --sidebar-accent: oklch(0.278 0.033 256.848); - --sidebar-accent-foreground: oklch(0.985 0.002 247.839); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.551 0.027 264.364); + /* Темная тема немного светлее основной (для toggle режима) */ + --background: #243756; /* mirage-900 */ + --foreground: #e7edf7; /* mirage-100 */ + --card: #2a4a7a; /* mirage-700 */ + --card-foreground: #f4f6fb; /* mirage-50 */ + --popover: #264066; /* mirage-800 */ + --popover-foreground: #e7edf7; + --primary: #9db8dc; /* mirage-300 - светлее для контраста */ + --primary-foreground: #111928; + --secondary: #335b96; /* mirage-600 */ + --secondary-foreground: #f4f6fb; + --muted: #264066; + --muted-foreground: #9db8dc; + --accent: #6893c8; /* mirage-400 */ + --accent-foreground: #111928; + --destructive: #ef4444; + --destructive-foreground: #f4f6fb; + --border: rgba(157, 184, 220, 0.2); + --input: rgba(157, 184, 220, 0.25); + --ring: #9db8dc; + --chart-1: #9db8dc; + --chart-2: #6893c8; + --chart-3: #4474b3; + --chart-4: #cbd9ec; + --chart-5: #335b96; + --sidebar: #243756; + --sidebar-foreground: #e7edf7; + --sidebar-primary: #9db8dc; + --sidebar-primary-foreground: #111928; + --sidebar-accent: #4474b3; + --sidebar-accent-foreground: #f4f6fb; + --sidebar-border: rgba(157, 184, 220, 0.15); + --sidebar-ring: #9db8dc; } @layer base { diff --git a/taskncoffee-app/src/lib/styles.js b/taskncoffee-app/src/lib/styles.js new file mode 100644 index 0000000..c46fae8 --- /dev/null +++ b/taskncoffee-app/src/lib/styles.js @@ -0,0 +1,168 @@ +/** + * Tailwind CSS Class Presets for Task&Coffee + * Material Design 3 + Neon Aesthetic + * Using Mirage Color Palette + */ + +// Card Styles - Material Design 3 Variants +export const cardStyles = { + // Filled card - основной вариант для большинства карточек + filled: "bg-card text-card-foreground p-6 rounded-lg shadow-sm", + + // Elevated card - карточки с эффектом поднятия + elevated: "bg-card text-card-foreground p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300", + + // Outlined card - карточки с границей + outlined: "bg-background border-2 border-border text-foreground p-6 rounded-lg", + + // Task card - компактные карточки для задач + task: "bg-card text-card-foreground p-3 rounded-lg shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200", + + // Task card with neon accent + taskNeon: "bg-card text-card-foreground p-3 rounded-lg shadow-sm hover:shadow-[0_0_15px_rgba(104,147,200,0.3)] hover:-translate-y-0.5 transition-all duration-200", +}; + +// Button Styles +export const buttonStyles = { + // Primary button - основные действия + primary: "bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md", + + // Primary with neon glow + primaryNeon: "bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:shadow-[0_0_20px_rgba(104,147,200,0.5)]", + + // Secondary button - вторичные действия + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2 rounded-lg font-medium transition-all duration-200", + + // Outline button - менее важные действия + outline: "border-2 border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground px-4 py-2 rounded-lg font-medium transition-all duration-200", + + // Ghost button - минималистичные кнопки + ghost: "text-foreground hover:bg-accent hover:text-accent-foreground px-4 py-2 rounded-lg font-medium transition-all duration-200", + + // Destructive button - опасные действия + destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 px-4 py-2 rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md", + + // Icon button + icon: "p-2 rounded-lg hover:bg-accent transition-all duration-200", + + // Icon button with neon effect + iconNeon: "p-2 rounded-lg hover:bg-accent transition-all duration-200 hover:shadow-[0_0_15px_rgba(104,147,200,0.4)]", +}; + +// Layout Styles +export const layoutStyles = { + // Main container + container: "flex min-h-screen bg-background text-foreground", + + // Sidebar/Navigation rail + sidebar: "w-20 bg-sidebar border-r border-sidebar-border flex flex-col items-center py-4 gap-4", + + // Main content area + main: "flex-1 p-6 bg-background flex flex-col", + + // Content wrapper with max width + content: "max-w-7xl mx-auto w-full flex flex-1 flex-col gap-6", + + // Grid layouts + gridCards: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", + gridTasks: "grid grid-cols-1 gap-3", +}; + +// Input Styles +export const inputStyles = { + // Standard input + default: "w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-all duration-200", + + // Input with neon focus effect + neon: "w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:shadow-[0_0_15px_rgba(104,147,200,0.3)] transition-all duration-200", + + // Search input + search: "w-full px-4 py-2 pl-10 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-all duration-200", +}; + +// Text Styles +export const textStyles = { + // Headings + h1: "text-4xl font-bold text-foreground", + h2: "text-3xl font-semibold text-foreground", + h3: "text-2xl font-semibold text-foreground", + h4: "text-xl font-semibold text-foreground", + + // Body text + body: "text-base text-foreground", + bodyMuted: "text-base text-muted-foreground", + + // Small text + small: "text-sm text-foreground", + smallMuted: "text-sm text-muted-foreground", + + // Neon text (to be combined with neon.css animations) + neonBlue: "text-[#c6e2ff]", + neonPink: "text-[#ffc5ec]", +}; + +// Badge/Chip Styles +export const badgeStyles = { + // Default badge + default: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary/20 text-primary border border-primary/30", + + // Priority badges + low: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30", + medium: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30", + high: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-orange-500/20 text-orange-400 border border-orange-500/30", + critical: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30", + + // Status badges + success: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30", + warning: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30", + error: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30", + info: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-500/20 text-blue-400 border border-blue-500/30", +}; + +// Utility Styles +export const utilityStyles = { + // Neon glow effects (for hover states) + glowBlue: "hover:shadow-[0_0_20px_rgba(104,147,200,0.6)]", + glowPink: "hover:shadow-[0_0_20px_rgba(255,20,147,0.6)]", + glowSoft: "hover:shadow-[0_0_15px_rgba(104,147,200,0.3)]", + + // Glassmorphism effect + glass: "bg-card/50 backdrop-blur-md border border-border/50", + + // Smooth transitions + transition: "transition-all duration-200 ease-in-out", + transitionSlow: "transition-all duration-300 ease-in-out", + + // Focus visible states + focusRing: "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background", +}; + +// Complete component compositions +export const componentStyles = { + // Day column in calendar + dayColumn: "flex-1 min-w-[180px] flex flex-col bg-background rounded-lg p-4 transition-all duration-300", + dayColumnToday: "flex-1 min-w-[180px] flex flex-col bg-primary/10 border-2 border-primary rounded-lg p-4 transition-all duration-300", + + // Avatar + avatar: "w-14 h-14 rounded-lg overflow-hidden", + avatarLarge: "w-20 h-20 rounded-xl overflow-hidden", + + // Divider + divider: "h-px bg-border w-full", + dividerVertical: "w-px bg-border h-full", +}; + +// Export all styles as a single object for convenience +export const styles = { + card: cardStyles, + button: buttonStyles, + layout: layoutStyles, + input: inputStyles, + text: textStyles, + badge: badgeStyles, + utility: utilityStyles, + component: componentStyles, +}; + +export default styles; + diff --git a/taskncoffee-app/src/neon.css b/taskncoffee-app/src/neon.css index 94d4c08..34b0aff 100644 --- a/taskncoffee-app/src/neon.css +++ b/taskncoffee-app/src/neon.css @@ -135,4 +135,87 @@ 0 0 11px rgba(30,132,242,0.78), 0 0 16px rgba(30,132,242,0.92); } +} + +/*-- Utility Neon Classes for Cards and Buttons --*/ + +/* Neon glow on hover - blue */ +.neon-glow-blue { + transition: box-shadow 0.3s ease-in-out; +} + +.neon-glow-blue:hover { + box-shadow: 0 0 20px rgba(104, 147, 200, 0.6), + 0 0 30px rgba(104, 147, 200, 0.4), + 0 0 40px rgba(104, 147, 200, 0.2); +} + +/* Neon glow on hover - pink */ +.neon-glow-pink { + transition: box-shadow 0.3s ease-in-out; +} + +.neon-glow-pink:hover { + box-shadow: 0 0 20px rgba(255, 20, 147, 0.6), + 0 0 30px rgba(255, 20, 147, 0.4), + 0 0 40px rgba(255, 20, 147, 0.2); +} + +/* Soft neon glow - for subtle effects */ +.neon-glow-soft { + transition: box-shadow 0.3s ease-in-out; +} + +.neon-glow-soft:hover { + box-shadow: 0 0 15px rgba(104, 147, 200, 0.3), + 0 0 25px rgba(104, 147, 200, 0.2); +} + +/* Neon border - blue */ +.neon-border-blue { + border: 1px solid rgba(104, 147, 200, 0.4); + box-shadow: 0 0 10px rgba(104, 147, 200, 0.2); + transition: all 0.3s ease-in-out; +} + +.neon-border-blue:hover { + border-color: rgba(104, 147, 200, 0.8); + box-shadow: 0 0 15px rgba(104, 147, 200, 0.4), + 0 0 25px rgba(104, 147, 200, 0.2); +} + +/* Neon border - pink */ +.neon-border-pink { + border: 1px solid rgba(255, 20, 147, 0.4); + box-shadow: 0 0 10px rgba(255, 20, 147, 0.2); + transition: all 0.3s ease-in-out; +} + +.neon-border-pink:hover { + border-color: rgba(255, 20, 147, 0.8); + box-shadow: 0 0 15px rgba(255, 20, 147, 0.4), + 0 0 25px rgba(255, 20, 147, 0.2); +} + +/* Text with subtle neon effect (non-animated) */ +.neon-text-blue { + color: #c6e2ff; + text-shadow: 0 0 10px rgba(30, 132, 242, 0.5), + 0 0 20px rgba(30, 132, 242, 0.3); +} + +.neon-text-pink { + color: #ffc5ec; + text-shadow: 0 0 10px rgba(255, 20, 147, 0.5), + 0 0 20px rgba(255, 20, 147, 0.3); +} + +/* Icon with neon glow on hover */ +.neon-icon { + transition: filter 0.3s ease-in-out; +} + +.neon-icon:hover { + filter: drop-shadow(0 0 8px rgba(104, 147, 200, 0.8)) + drop-shadow(0 0 15px rgba(104, 147, 200, 0.5)); } \ No newline at end of file diff --git a/taskncoffee-app/src/pages/Dashboard.jsx b/taskncoffee-app/src/pages/Dashboard.jsx index 3be689b..0fab941 100644 --- a/taskncoffee-app/src/pages/Dashboard.jsx +++ b/taskncoffee-app/src/pages/Dashboard.jsx @@ -1,13 +1,13 @@ 'use client'; import { useState, useEffect } from 'react'; import '../neon.css'; -import './dashboard.css'; import { MenuDock } from '@/components/ui/shadcn-io/menu-dock'; import { Home, Settings, Bell } from 'lucide-react'; import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; -import { jwtexp } from '@/lib/utils'; +import { jwtexp, cn } from '@/lib/utils'; import Calendar from '@/components/Calendar'; import { useNavigate } from "react-router"; +import styles from '@/lib/styles'; const menuItems = [ { label: 'home', icon: Home, onClick: () => console.log('Home clicked') }, @@ -66,9 +66,9 @@ export default function Dashboard() { if (loading || authError) { return ( -
+
-

+

{loading ? 'Loading dashboard...' : 'Redirecting...'}

@@ -77,14 +77,14 @@ export default function Dashboard() { } return ( -
+
{/* Navigation Rail - Material Design 3 */} -