From d38392ac9a3f28a49eb4d56ab0cf7db9f54d9535 Mon Sep 17 00:00:00 2001 From: Evan Reichard Date: Sun, 22 Mar 2026 13:05:00 -0400 Subject: [PATCH] theme draft 1 --- frontend/AGENTS.md | 2 + frontend/src/components/Button.tsx | 6 +- frontend/src/components/HamburgerMenu.tsx | 42 ++-- frontend/src/components/Layout.tsx | 57 ++++-- frontend/src/components/LoadingState.tsx | 9 +- frontend/src/components/Skeleton.tsx | 30 ++- frontend/src/components/Table.tsx | 21 +- frontend/src/components/Toast.tsx | 18 +- frontend/src/icons/BaseIcon.tsx | 4 +- frontend/src/icons/GitIcon.tsx | 2 +- frontend/src/index.css | 228 ++++++++++++++++++++-- frontend/src/main.tsx | 10 +- frontend/src/pages/DocumentsPage.tsx | 96 ++++----- frontend/src/pages/LoginPage.tsx | 10 +- frontend/src/pages/SettingsPage.tsx | 112 ++++++++--- frontend/src/theme/ThemeProvider.tsx | 126 ++++++++++++ frontend/src/utils/localSettings.ts | 66 +++++++ frontend/tailwind.config.js | 48 ++++- 18 files changed, 678 insertions(+), 209 deletions(-) create mode 100644 frontend/src/theme/ThemeProvider.tsx create mode 100644 frontend/src/utils/localSettings.ts diff --git a/frontend/AGENTS.md b/frontend/AGENTS.md index 2fcc3d4..397c290 100644 --- a/frontend/AGENTS.md +++ b/frontend/AGENTS.md @@ -20,6 +20,8 @@ Also follow the repository root guide at `../AGENTS.md`. - Avoid custom class names in JSX `className` values unless the Tailwind lint config already allows them. - For decorative icons in inputs or labels, disable hover styling via the icon component API rather than overriding it ad hoc. - Prefer `LoadingState` for result-area loading indicators; avoid early returns that unmount search/filter forms during fetches. +- Use theme tokens from `tailwind.config.js` / `src/index.css` (`bg-surface`, `text-content`, `border-border`, `primary`, etc.) for new UI work instead of adding raw light/dark color pairs. +- Store frontend-only preferences in `src/utils/localSettings.ts` so appearance and view settings share one local-storage shape. ## 3) Generated API client diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx index 2a2495d..0621291 100644 --- a/frontend/src/components/Button.tsx +++ b/frontend/src/components/Button.tsx @@ -11,13 +11,13 @@ type LinkProps = BaseButtonProps & AnchorHTMLAttributes & { h const getVariantClasses = (variant: 'default' | 'secondary' = 'default'): string => { const baseClass = - 'transition duration-100 ease-in font-medium w-full h-full px-2 py-1 text-white disabled:cursor-not-allowed disabled:opacity-50'; + 'h-full w-full px-2 py-1 font-medium transition duration-100 ease-in disabled:cursor-not-allowed disabled:opacity-50'; if (variant === 'secondary') { - return `${baseClass} bg-black shadow-md hover:text-black hover:bg-white disabled:hover:text-white disabled:hover:bg-black`; + return `${baseClass} bg-content text-content-inverse shadow-md hover:bg-content-muted disabled:hover:bg-content`; } - return `${baseClass} bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100 disabled:hover:bg-gray-500 dark:disabled:hover:bg-transparent`; + return `${baseClass} bg-primary-500 text-primary-foreground hover:bg-primary-700 disabled:hover:bg-primary-500`; }; export const Button = forwardRef( diff --git a/frontend/src/components/HamburgerMenu.tsx b/frontend/src/components/HamburgerMenu.tsx index d625708..bc7a663 100644 --- a/frontend/src/components/HamburgerMenu.tsx +++ b/frontend/src/components/HamburgerMenu.tsx @@ -26,7 +26,6 @@ const adminSubItems: NavItem[] = [ { path: '/admin/logs', label: 'Logs', icon: SettingsIcon, title: 'Logs' }, ]; -// Helper function to check if pathname has a prefix function hasPrefix(path: string, prefix: string): boolean { return path.startsWith(prefix); } @@ -37,10 +36,9 @@ export default function HamburgerMenu() { const [isOpen, setIsOpen] = useState(false); const isAdmin = user?.is_admin ?? false; - // Fetch server info for version const { data: infoData } = useGetInfo({ query: { - staleTime: Infinity, // Info doesn't change frequently + staleTime: Infinity, }, }); const version = @@ -50,7 +48,6 @@ export default function HamburgerMenu() { return (
- {/* Checkbox input for state management */} setIsOpen(e.target.checked)} /> - {/* Hamburger icon lines with CSS animations - hidden on desktop */} - {/* Navigation menu with slide animation */}