From 420a904efef2fae2b047625bd2a64707c1f73b9a Mon Sep 17 00:00:00 2001 From: Drew Galbraith Date: Mon, 22 Sep 2025 20:43:03 -0700 Subject: [PATCH] Set colorscheme. --- CLAUDE.md | 4 +- PRD.md | 2 +- frontend/README.md | 87 ---- frontend/app/app.css | 59 +-- frontend/app/components/Layout.tsx | 65 +-- frontend/app/root.tsx | 18 +- frontend/app/theme.ts | 204 +++------ frontend/package-lock.json | 643 ----------------------------- frontend/package.json | 2 - frontend/tailwind.config.js | 76 ---- frontend/vite.config.ts | 3 +- plan/01_CORE_MVP/frontend.md | 17 +- plan/01_CORE_MVP/plan.md | 4 +- 13 files changed, 94 insertions(+), 1090 deletions(-) delete mode 100644 frontend/README.md delete mode 100644 frontend/tailwind.config.js diff --git a/CLAUDE.md b/CLAUDE.md index 4443aeb..a84b622 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -50,11 +50,11 @@ backend/ └── migrations/ # SQLx database migrations ``` -### Frontend: Vite + React + Tailwind CSS +### Frontend: Vite + React - **Build Tool**: Vite for fast development and optimized builds - **Framework**: React with functional components and hooks - **Routing**: React Router for client-side navigation -- **Styling**: Tailwind CSS for rapid UI development +- **Styling**: CSS for styling - **State Management**: React state with localStorage persistence - **PWA Features**: Service worker for offline functionality - **Mobile Optimization**: Touch gestures, responsive design diff --git a/PRD.md b/PRD.md index c8794ef..064b1ee 100644 --- a/PRD.md +++ b/PRD.md @@ -89,7 +89,7 @@ - **Build Tool**: Vite for fast development and optimized builds - **Framework**: React with functional components and hooks - **Routing**: React Router for client-side navigation -- **Styling**: Tailwind CSS for rapid UI development +- **Styling**: CSS for styling - **State Management**: React state with localStorage persistence - **PWA Features**: Service worker for offline functionality - **Mobile Optimization**: Touch gestures, responsive design diff --git a/frontend/README.md b/frontend/README.md deleted file mode 100644 index 5c4780a..0000000 --- a/frontend/README.md +++ /dev/null @@ -1,87 +0,0 @@ -# Welcome to React Router! - -A modern, production-ready template for building full-stack React applications using React Router. - -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default) - -## Features - -- 🚀 Server-side rendering -- ⚡️ Hot Module Replacement (HMR) -- 📦 Asset bundling and optimization -- 🔄 Data loading and mutations -- 🔒 TypeScript by default -- 🎉 TailwindCSS for styling -- 📖 [React Router docs](https://reactrouter.com/) - -## Getting Started - -### Installation - -Install the dependencies: - -```bash -npm install -``` - -### Development - -Start the development server with HMR: - -```bash -npm run dev -``` - -Your application will be available at `http://localhost:5173`. - -## Building for Production - -Create a production build: - -```bash -npm run build -``` - -## Deployment - -### Docker Deployment - -To build and run using Docker: - -```bash -docker build -t my-app . - -# Run the container -docker run -p 3000:3000 my-app -``` - -The containerized application can be deployed to any platform that supports Docker, including: - -- AWS ECS -- Google Cloud Run -- Azure Container Apps -- Digital Ocean App Platform -- Fly.io -- Railway - -### DIY Deployment - -If you're familiar with deploying Node applications, the built-in app server is production-ready. - -Make sure to deploy the output of `npm run build` - -``` -├── package.json -├── package-lock.json (or pnpm-lock.yaml, or bun.lockb) -├── build/ -│ ├── client/ # Static assets -│ └── server/ # Server-side code -``` - -## Styling - -This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer. - ---- - -Built with ❤️ using React Router. diff --git a/frontend/app/app.css b/frontend/app/app.css index ba71dcb..e4d1dd9 100644 --- a/frontend/app/app.css +++ b/frontend/app/app.css @@ -1,59 +1,8 @@ -@import 'tailwindcss'; - -@theme { - --font-sans: - 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', - 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - - /* Captain's Log Design Tokens */ - --color-primary-50: #eff6ff; - --color-primary-100: #dbeafe; - --color-primary-500: #3b82f6; - --color-primary-950: #172554; - - --color-task-todo: #3b82f6; - --color-task-done: #22c55e; - --color-task-backlog: #6b7280; -} +/* Captain's Log - Global Styles */ +/* Base font family is handled by Material-UI theme */ html, body { - @apply bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100; - - @media (prefers-color-scheme: dark) { - color-scheme: dark; - } -} - -/* Captain's Log Component Styles */ -.task-card { - @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4 transition-all duration-200; -} - -.task-card:hover { - @apply shadow-md border-gray-300 dark:border-gray-600; -} - -.quick-capture { - @apply bg-white dark:bg-gray-800 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-4 transition-colors duration-200; -} - -.quick-capture:focus-within { - @apply border-blue-500 bg-blue-50 dark:bg-blue-950; -} - -.status-badge { - @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; -} - -.status-todo { - @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200; -} - -.status-done { - @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200; -} - -.status-backlog { - @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200; + margin: 0; + padding: 0; } diff --git a/frontend/app/components/Layout.tsx b/frontend/app/components/Layout.tsx index de7c05f..169e9f5 100644 --- a/frontend/app/components/Layout.tsx +++ b/frontend/app/components/Layout.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import React, { useState } from 'react' import { AppBar, Box, @@ -21,8 +21,6 @@ import { Dashboard as DashboardIcon, Add as AddIcon, Settings as SettingsIcon, - DarkMode as DarkModeIcon, - LightMode as LightModeIcon, } from '@mui/icons-material' const drawerWidth = 240 @@ -35,28 +33,11 @@ interface LayoutProps { export default function Layout({ children, loading = false }: LayoutProps) { const theme = useTheme() const [mobileOpen, setMobileOpen] = useState(false) - const [darkMode, setDarkMode] = useState(false) - - // Check system preference and localStorage on mount - useEffect(() => { - const savedTheme = localStorage.getItem('theme') - const prefersDark = window.matchMedia( - '(prefers-color-scheme: dark)' - ).matches - setDarkMode(savedTheme === 'dark' || (!savedTheme && prefersDark)) - }, []) const handleDrawerToggle = () => { setMobileOpen(!mobileOpen) } - const handleThemeToggle = () => { - const newTheme = !darkMode - setDarkMode(newTheme) - localStorage.setItem('theme', newTheme ? 'dark' : 'light') - document.documentElement.classList.toggle('dark', newTheme) - } - const menuItems = [ { text: 'Tasks', @@ -72,17 +53,7 @@ export default function Layout({ children, loading = false }: LayoutProps) { const drawer = (
- - - Captain's Log - - - + {menuItems.map(item => ( @@ -149,17 +122,21 @@ export default function Layout({ children, loading = false }: LayoutProps) { - - Captain's Log - - - - {darkMode ? : } - + ⚓ Captain's Log + @@ -196,6 +173,8 @@ export default function Layout({ children, loading = false }: LayoutProps) { '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth, + top: '64px', // Position below AppBar + height: 'calc(100% - 64px)', // Adjust height to account for AppBar }, }} open diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx index ffb6f0b..c7b440f 100644 --- a/frontend/app/root.tsx +++ b/frontend/app/root.tsx @@ -10,7 +10,7 @@ import { ThemeProvider } from '@mui/material/styles' import { CssBaseline } from '@mui/material' import type { Route } from './+types/root' -import { theme, darkTheme } from './theme' +import { theme } from './theme' import AppLayout from './components/Layout' import './app.css' @@ -46,14 +46,8 @@ export function Layout({ children }: { children: React.ReactNode }) { } export default function App() { - const isDarkMode = - typeof window !== 'undefined' && - (localStorage.getItem('theme') === 'dark' || - (!localStorage.getItem('theme') && - window.matchMedia('(prefers-color-scheme: dark)').matches)) - return ( - + @@ -78,14 +72,8 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { stack = error.stack } - const isDarkMode = - typeof window !== 'undefined' && - (localStorage.getItem('theme') === 'dark' || - (!localStorage.getItem('theme') && - window.matchMedia('(prefers-color-scheme: dark)').matches)) - return ( - +
diff --git a/frontend/app/theme.ts b/frontend/app/theme.ts index c138103..d89fee5 100644 --- a/frontend/app/theme.ts +++ b/frontend/app/theme.ts @@ -1,5 +1,24 @@ import { createTheme } from '@mui/material/styles' +// Color palette constants +const colors = { + // Primary Colors + deepNavy: '#1e3a5f', // Main brand color for headers and primary actions + oceanBlue: '#2c5282', // Secondary blue for links and active states + compassGold: '#d69e2e', // Accent color for highlights and call-to-actions + + // Status Colors + chartGreen: '#48bb78', // Completed tasks and success states + sunsetCoral: '#f56565', // Urgent tasks and error states + seaFoam: '#4fd1c7', // Information and notification states + + // Neutrals + parchment: '#f7fafc', // Clean background color + fogGray: '#e2e8f0', // Subtle borders and dividers + stormGray: '#718096', // Secondary text + anchorDark: '#2d3748', // Primary text and headings +} + declare module '@mui/material/styles' { interface Theme { custom: { @@ -26,29 +45,37 @@ export const theme = createTheme({ palette: { mode: 'light', primary: { - 50: '#eff6ff', - 100: '#dbeafe', - 500: '#3b82f6', - main: '#3b82f6', + main: colors.deepNavy, + light: colors.oceanBlue, contrastText: '#ffffff', }, + secondary: { + main: colors.compassGold, + contrastText: '#ffffff', + }, + success: { + main: colors.chartGreen, + }, + error: { + main: colors.sunsetCoral, + }, + info: { + main: colors.seaFoam, + }, background: { - default: '#f9fafb', + default: colors.parchment, paper: '#ffffff', }, text: { - primary: '#111827', - secondary: '#6b7280', + primary: colors.anchorDark, + secondary: colors.stormGray, }, grey: { - 50: '#f9fafb', - 100: '#f3f4f6', - 200: '#e5e7eb', - 300: '#d1d5db', - 600: '#4b5563', - 700: '#374151', - 800: '#1f2937', - 900: '#111827', + 100: '#edf2f7', + 200: colors.fogGray, + 300: '#cbd5e0', + 500: colors.stormGray, + 700: colors.anchorDark, }, }, typography: { @@ -84,11 +111,11 @@ export const theme = createTheme({ MuiAppBar: { styleOverrides: { root: { - backgroundColor: '#ffffff', - color: '#111827', + backgroundColor: colors.deepNavy, + color: '#ffffff', boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', - borderBottom: '1px solid #e5e7eb', + borderBottom: 'none', }, }, }, @@ -96,7 +123,7 @@ export const theme = createTheme({ styleOverrides: { paper: { backgroundColor: '#ffffff', - borderRight: '1px solid #e5e7eb', + borderRight: `1px solid ${colors.fogGray}`, }, }, }, @@ -122,11 +149,11 @@ export const theme = createTheme({ borderRadius: '0.75rem', boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', - border: '1px solid #e5e7eb', + border: `1px solid ${colors.fogGray}`, '&:hover': { boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', - borderColor: '#d1d5db', + borderColor: '#cbd5e0', }, }, }, @@ -143,138 +170,9 @@ export const theme = createTheme({ }, custom: { task: { - todo: '#3b82f6', - done: '#22c55e', - backlog: '#6b7280', - }, - }, -}) - -export const darkTheme = createTheme({ - palette: { - mode: 'dark', - primary: { - 50: '#eff6ff', - 100: '#dbeafe', - 500: '#3b82f6', - main: '#3b82f6', - contrastText: '#ffffff', - }, - background: { - default: '#030712', - paper: '#1f2937', - }, - text: { - primary: '#f9fafb', - secondary: '#9ca3af', - }, - grey: { - 50: '#f9fafb', - 100: '#f3f4f6', - 200: '#e5e7eb', - 300: '#d1d5db', - 600: '#4b5563', - 700: '#374151', - 800: '#1f2937', - 900: '#111827', - }, - }, - typography: { - fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif', - h1: { - fontSize: '2rem', - fontWeight: 700, - lineHeight: 1.2, - }, - h2: { - fontSize: '1.5rem', - fontWeight: 600, - lineHeight: 1.3, - }, - h3: { - fontSize: '1.25rem', - fontWeight: 600, - lineHeight: 1.4, - }, - body1: { - fontSize: '1rem', - lineHeight: 1.6, - }, - body2: { - fontSize: '0.875rem', - lineHeight: 1.5, - }, - }, - shape: { - borderRadius: 12, - }, - components: { - MuiAppBar: { - styleOverrides: { - root: { - backgroundColor: '#1f2937', - color: '#f9fafb', - boxShadow: - '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', - borderBottom: '1px solid #374151', - }, - }, - }, - MuiDrawer: { - styleOverrides: { - paper: { - backgroundColor: '#1f2937', - borderRight: '1px solid #374151', - }, - }, - }, - MuiButton: { - styleOverrides: { - root: { - textTransform: 'none', - borderRadius: '0.75rem', - fontWeight: 500, - }, - contained: { - boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)', - '&:hover': { - boxShadow: - '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', - }, - }, - }, - }, - MuiCard: { - styleOverrides: { - root: { - backgroundColor: '#1f2937', - borderRadius: '0.75rem', - boxShadow: - '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', - border: '1px solid #374151', - '&:hover': { - boxShadow: - '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', - borderColor: '#4b5563', - }, - }, - }, - }, - MuiTextField: { - styleOverrides: { - root: { - '& .MuiOutlinedInput-root': { - borderRadius: '0.75rem', - }, - }, - }, - }, - }, - custom: { - task: { - todo: '#3b82f6', - done: '#22c55e', - backlog: '#6b7280', + todo: colors.oceanBlue, + done: colors.chartGreen, + backlog: colors.stormGray, }, }, }) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 981e3aa..c866ebf 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20,7 +20,6 @@ "devDependencies": { "@eslint/js": "^9.36.0", "@react-router/dev": "^7.7.1", - "@tailwindcss/vite": "^4.1.4", "@testing-library/jest-dom": "^6.8.0", "@testing-library/react": "^16.3.0", "@types/eslint__js": "^8.42.3", @@ -33,7 +32,6 @@ "eslint-plugin-react-refresh": "^0.4.20", "jsdom": "^27.0.0", "prettier": "^3.6.2", - "tailwindcss": "^4.1.4", "typescript": "^5.8.3", "typescript-eslint": "^8.44.0", "vite": "^6.3.3", @@ -1586,19 +1584,6 @@ "node": ">=12" } }, - "node_modules/@isaacs/fs-minipass": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz", - "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==", - "dev": true, - "license": "ISC", - "dependencies": { - "minipass": "^7.0.4" - }, - "engines": { - "node": ">=18.0.0" - } - }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", @@ -2463,283 +2448,6 @@ "win32" ] }, - "node_modules/@tailwindcss/node": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz", - "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@jridgewell/remapping": "^2.3.4", - "enhanced-resolve": "^5.18.3", - "jiti": "^2.5.1", - "lightningcss": "1.30.1", - "magic-string": "^0.30.18", - "source-map-js": "^1.2.1", - "tailwindcss": "4.1.13" - } - }, - "node_modules/@tailwindcss/oxide": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz", - "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "dependencies": { - "detect-libc": "^2.0.4", - "tar": "^7.4.3" - }, - "engines": { - "node": ">= 10" - }, - "optionalDependencies": { - "@tailwindcss/oxide-android-arm64": "4.1.13", - "@tailwindcss/oxide-darwin-arm64": "4.1.13", - "@tailwindcss/oxide-darwin-x64": "4.1.13", - "@tailwindcss/oxide-freebsd-x64": "4.1.13", - "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13", - "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13", - "@tailwindcss/oxide-linux-arm64-musl": "4.1.13", - "@tailwindcss/oxide-linux-x64-gnu": "4.1.13", - "@tailwindcss/oxide-linux-x64-musl": "4.1.13", - "@tailwindcss/oxide-wasm32-wasi": "4.1.13", - "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13", - "@tailwindcss/oxide-win32-x64-msvc": "4.1.13" - } - }, - "node_modules/@tailwindcss/oxide-android-arm64": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz", - "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-darwin-arm64": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz", - "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-darwin-x64": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz", - "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-freebsd-x64": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz", - "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz", - "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz", - "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-linux-arm64-musl": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz", - "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-linux-x64-gnu": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz", - "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-linux-x64-musl": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz", - "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-wasm32-wasi": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz", - "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==", - "bundleDependencies": [ - "@napi-rs/wasm-runtime", - "@emnapi/core", - "@emnapi/runtime", - "@tybys/wasm-util", - "@emnapi/wasi-threads", - "tslib" - ], - "cpu": [ - "wasm32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "dependencies": { - "@emnapi/core": "^1.4.5", - "@emnapi/runtime": "^1.4.5", - "@emnapi/wasi-threads": "^1.0.4", - "@napi-rs/wasm-runtime": "^0.2.12", - "@tybys/wasm-util": "^0.10.0", - "tslib": "^2.8.0" - }, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz", - "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/oxide-win32-x64-msvc": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz", - "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/vite": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.13.tgz", - "integrity": "sha512-0PmqLQ010N58SbMTJ7BVJ4I2xopiQn/5i6nlb4JmxzQf8zcS5+m2Cv6tqh+sfDwtIdjoEnOvwsGQ1hkUi8QEHQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@tailwindcss/node": "4.1.13", - "@tailwindcss/oxide": "4.1.13", - "tailwindcss": "4.1.13" - }, - "peerDependencies": { - "vite": "^5.2.0 || ^6 || ^7" - } - }, "node_modules/@testing-library/dom": { "version": "10.4.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", @@ -3830,16 +3538,6 @@ "url": "https://paulmillr.com/funding/" } }, - "node_modules/chownr": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz", - "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==", - "dev": true, - "license": "BlueOak-1.0.0", - "engines": { - "node": ">=18" - } - }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -4161,16 +3859,6 @@ "npm": "1.2.8000 || >= 1.4.16" } }, - "node_modules/detect-libc": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz", - "integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=8" - } - }, "node_modules/dom-accessibility-api": { "version": "0.5.16", "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", @@ -4239,20 +3927,6 @@ "node": ">= 0.8" } }, - "node_modules/enhanced-resolve": { - "version": "5.18.3", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz", - "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==", - "dev": true, - "license": "MIT", - "dependencies": { - "graceful-fs": "^4.2.4", - "tapable": "^2.2.0" - }, - "engines": { - "node": ">=10.13.0" - } - }, "node_modules/entities": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz", @@ -5060,13 +4734,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/graceful-fs": { - "version": "4.2.11", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", - "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", - "dev": true, - "license": "ISC" - }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -5379,16 +5046,6 @@ "@pkgjs/parseargs": "^0.11.0" } }, - "node_modules/jiti": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz", - "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==", - "dev": true, - "license": "MIT", - "bin": { - "jiti": "lib/jiti-cli.mjs" - } - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -5528,245 +5185,6 @@ "node": ">= 0.8.0" } }, - "node_modules/lightningcss": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz", - "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==", - "dev": true, - "license": "MPL-2.0", - "dependencies": { - "detect-libc": "^2.0.3" - }, - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - }, - "optionalDependencies": { - "lightningcss-darwin-arm64": "1.30.1", - "lightningcss-darwin-x64": "1.30.1", - "lightningcss-freebsd-x64": "1.30.1", - "lightningcss-linux-arm-gnueabihf": "1.30.1", - "lightningcss-linux-arm64-gnu": "1.30.1", - "lightningcss-linux-arm64-musl": "1.30.1", - "lightningcss-linux-x64-gnu": "1.30.1", - "lightningcss-linux-x64-musl": "1.30.1", - "lightningcss-win32-arm64-msvc": "1.30.1", - "lightningcss-win32-x64-msvc": "1.30.1" - } - }, - "node_modules/lightningcss-darwin-arm64": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz", - "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-darwin-x64": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz", - "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-freebsd-x64": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz", - "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm-gnueabihf": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz", - "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-gnu": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz", - "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-musl": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz", - "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-gnu": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz", - "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-musl": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz", - "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-win32-arm64-msvc": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz", - "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-win32-x64-msvc": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz", - "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -6011,19 +5429,6 @@ "node": ">=16 || 14 >=14.17" } }, - "node_modules/minizlib": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz", - "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==", - "dev": true, - "license": "MIT", - "dependencies": { - "minipass": "^7.1.2" - }, - "engines": { - "node": ">= 18" - } - }, "node_modules/morgan": { "version": "1.10.1", "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.1.tgz", @@ -7442,54 +6847,6 @@ "dev": true, "license": "MIT" }, - "node_modules/tailwindcss": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz", - "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==", - "dev": true, - "license": "MIT" - }, - "node_modules/tapable": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz", - "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - } - }, - "node_modules/tar": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.4.tgz", - "integrity": "sha512-O1z7ajPkjTgEgmTGz0v9X4eqeEXTDREPTO77pVC1Nbs86feBU1Zhdg+edzavPmYW1olxkwsqA2v4uOw6E8LeDg==", - "dev": true, - "license": "ISC", - "dependencies": { - "@isaacs/fs-minipass": "^4.0.0", - "chownr": "^3.0.0", - "minipass": "^7.1.2", - "minizlib": "^3.1.0", - "yallist": "^5.0.0" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/tar/node_modules/yallist": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz", - "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==", - "dev": true, - "license": "BlueOak-1.0.0", - "engines": { - "node": ">=18" - } - }, "node_modules/tinybench": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index d8d7315..a0c2abe 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -30,7 +30,6 @@ "devDependencies": { "@eslint/js": "^9.36.0", "@react-router/dev": "^7.7.1", - "@tailwindcss/vite": "^4.1.4", "@testing-library/jest-dom": "^6.8.0", "@testing-library/react": "^16.3.0", "@types/eslint__js": "^8.42.3", @@ -43,7 +42,6 @@ "eslint-plugin-react-refresh": "^0.4.20", "jsdom": "^27.0.0", "prettier": "^3.6.2", - "tailwindcss": "^4.1.4", "typescript": "^5.8.3", "typescript-eslint": "^8.44.0", "vite": "^6.3.3", diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js deleted file mode 100644 index 7a4c415..0000000 --- a/frontend/tailwind.config.js +++ /dev/null @@ -1,76 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -export default { - content: [ - "./app/**/*.{js,jsx,ts,tsx}", - ], - theme: { - extend: { - fontFamily: { - sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"], - }, - colors: { - primary: { - 50: '#eff6ff', - 100: '#dbeafe', - 200: '#bfdbfe', - 300: '#93c5fd', - 400: '#60a5fa', - 500: '#3b82f6', - 600: '#2563eb', - 700: '#1d4ed8', - 800: '#1e40af', - 900: '#1e3a8a', - }, - success: { - 50: '#f0fdf4', - 100: '#dcfce7', - 200: '#bbf7d0', - 300: '#86efac', - 400: '#4ade80', - 500: '#22c55e', - 600: '#16a34a', - 700: '#15803d', - 800: '#166534', - 900: '#14532d', - }, - warning: { - 50: '#fffbeb', - 100: '#fef3c7', - 200: '#fde68a', - 300: '#fcd34d', - 400: '#fbbf24', - 500: '#f59e0b', - 600: '#d97706', - 700: '#b45309', - 800: '#92400e', - 900: '#78350f', - }, - danger: { - 50: '#fef2f2', - 100: '#fee2e2', - 200: '#fecaca', - 300: '#fca5a5', - 400: '#f87171', - 500: '#ef4444', - 600: '#dc2626', - 700: '#b91c1c', - 800: '#991b1b', - 900: '#7f1d1d', - }, - }, - spacing: { - '18': '4.5rem', - '88': '22rem', - }, - borderRadius: { - 'xl': '0.75rem', - '2xl': '1rem', - }, - boxShadow: { - 'card': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', - 'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', - }, - }, - }, - plugins: [], -} \ No newline at end of file diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index e6410e2..d2e73cc 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,10 +1,9 @@ import { reactRouter } from "@react-router/dev/vite"; -import tailwindcss from "@tailwindcss/vite"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; export default defineConfig({ - plugins: [tailwindcss(), reactRouter(), tsconfigPaths()], + plugins: [reactRouter(), tsconfigPaths()], server: { proxy: { "/api": { diff --git a/plan/01_CORE_MVP/frontend.md b/plan/01_CORE_MVP/frontend.md index 9188f0a..325f4c7 100644 --- a/plan/01_CORE_MVP/frontend.md +++ b/plan/01_CORE_MVP/frontend.md @@ -1,7 +1,7 @@ # Frontend MVP Implementation Plan ## Overview -This plan details the concrete implementation steps for the Captain's Log frontend MVP using Vite + React + TypeScript + Tailwind CSS with comprehensive testing infrastructure. +This plan details the concrete implementation steps for the Captain's Log frontend MVP using Vite + React + TypeScript with comprehensive testing infrastructure. ## Project Structure (Planned Implementation) ``` @@ -15,7 +15,7 @@ captains-log/ ├── package.json # Node.js project manifest ├── vite.config.ts # Vite configuration ├── tsconfig.json # TypeScript configuration - ├── tailwind.config.js # Tailwind CSS configuration + ├── postcss.config.js # PostCSS configuration ├── index.html # Entry HTML file ├── src/ │ ├── main.tsx # Application entry point @@ -35,7 +35,7 @@ captains-log/ │ ├── types/ │ │ └── task.ts # TypeScript type definitions │ └── styles/ - │ └── index.css # Tailwind imports and custom styles + │ └── index.css # CSS imports and custom styles └── tests/ └── components/ # Component unit tests ``` @@ -45,16 +45,16 @@ captains-log/ ### Task 1.1: Initialize Frontend Project - [x] **File**: `frontend/package.json` - Create new Vite + React + TypeScript project - - Add dependencies: react, react-dom, react-router-dom, tailwindcss, @types/* + - Add dependencies: react, react-dom, react-router-dom, @types/* - Add dev dependencies: vitest, @testing-library/react, @testing-library/jest-dom - Configure scripts for dev, build, test, lint - **Expected outcome**: `npm install` succeeds ### Task 1.2: Setup Build Tools and Configuration -- [x] **Files**: `frontend/vite.config.ts`, `frontend/tsconfig.json`, `frontend/tailwind.config.js` +- [x] **Files**: `frontend/vite.config.ts`, `frontend/tsconfig.json`, `frontend/postcss.config.js` - Configure Vite with React plugin and proxy to backend - Setup TypeScript with strict mode and path aliases - - Configure Tailwind CSS with custom design tokens + - Configure CSS styling framework - Setup Vitest for testing - **Expected outcome**: `npm run dev` starts frontend development server @@ -107,13 +107,13 @@ captains-log/ ## Phase 3: Core Components (Days 5-6) -**UI Framework**: Use Material-UI (MUI) for consistent design system and components alongside Tailwind CSS for custom styling. +**UI Framework**: Use Material-UI (MUI) for consistent design system and components alongside CSS for custom styling. ### Task 3.1: Main App Component and Routing - [ ] **Files**: `frontend/src/App.tsx`, `frontend/src/main.tsx` - Setup React Router with basic navigation - Create main layout with MUI AppBar/Drawer and task area - - Implement responsive design with MUI breakpoints and Tailwind utilities + - Implement responsive design with MUI breakpoints and CSS - Add MUI loading states (CircularProgress) and error boundaries - Configure MUI theme with custom colors - **Expected outcome**: Full application loads and navigates properly with Material Design @@ -235,7 +235,6 @@ captains-log/ "@vitejs/plugin-react": "^4.3.0", "vite": "^5.4.0", "typescript": "^5.5.0", - "tailwindcss": "^3.4.0", "vitest": "^2.0.0", "@testing-library/react": "^16.0.0", "@testing-library/jest-dom": "^6.5.0" diff --git a/plan/01_CORE_MVP/plan.md b/plan/01_CORE_MVP/plan.md index 28c1c88..9776281 100644 --- a/plan/01_CORE_MVP/plan.md +++ b/plan/01_CORE_MVP/plan.md @@ -34,7 +34,7 @@ CREATE TABLE tasks ( ); ``` -#### Frontend: Vite + React + Tailwind +#### Frontend: Vite + React - Single-page task management interface with React Router - Quick capture form with React hooks - Task list with inline editing using React components @@ -81,7 +81,7 @@ CREATE TABLE tasks ( #### Week 2: Frontend Foundation 1. **Vite + React Setup** - Initialize Vite project with React template - - Configure Tailwind CSS + - Configure CSS styling - Setup React Router for navigation - Setup API client utilities - **Testing**: Setup Vitest, React Testing Library, and Playwright