Fixed a few colouring issues

jordan-dalby · Nov 25, 2024 · 28c7d05 · 28c7d05
1 parent d4c38e1
commit 28c7d05
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 45 deletions.
diff --git a/client/src/components/categories/CategoryTag.tsx b/client/src/components/categories/CategoryTag.tsx
@@ -24,7 +24,7 @@ const CategoryTag: React.FC<CategoryTagProps> = ({
     return (
       <button
         onClick={handleClick}
-        className={`flex items-center gap-1 px-2 py-1 rounded-md bg-light-surface dark:bg-dark-surface text-sm 
+        className={`flex items-center gap-1 px-2 py-1 rounded-md bg-light-hover/50 dark:bg-dark-hover/50 text-sm 
           hover:bg-light-hover dark:hover:bg-dark-hover transition-colors group ${className}`}
         type="button"
       >

diff --git a/client/src/components/snippets/edit/FragmentEditor.tsx b/client/src/components/snippets/edit/FragmentEditor.tsx
@@ -58,17 +58,17 @@ export const FragmentEditor: React.FC<FragmentEditorProps> = ({
               icon={<ChevronUp size={16} />}
               onClick={onMoveUp}
               disabled={!canMoveUp}
-              variant="secondary"
+              variant="custom"
               size="sm"
-              className="disabled:opacity-50 w-9 h-9 hover:bg-light-hover dark:hover:bg-dark-hover bg-transparent"
+              className="disabled:opacity-50 w-9 h-9 bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
             />
             <IconButton
               icon={<ChevronDown size={16} />}
               onClick={onMoveDown}
               disabled={!canMoveDown}
-              variant="secondary"
+              variant="custom"
               size="sm"
-              className="disabled:opacity-50 w-9 h-9 hover:bg-light-hover dark:hover:bg-dark-hover bg-transparent"
+              className="disabled:opacity-50 w-9 h-9 bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
             />
           </div>
 
@@ -111,16 +111,16 @@ export const FragmentEditor: React.FC<FragmentEditorProps> = ({
             <IconButton
               icon={isCollapsed ? <ChevronRight size={16} /> : <CollapseIcon size={16} />}
               onClick={() => setIsCollapsed(!isCollapsed)}
-              variant="secondary"
+              variant="custom"
               size="sm"
-              className="w-9 h-9 hover:bg-light-hover dark:hover:bg-dark-hover bg-transparent"
+              className="w-9 h-9 bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
             />
             <IconButton
-              icon={<Trash2 size={16} />}
+              icon={<Trash2 size={16} className="hover:text-red-500" />}
               onClick={onDelete}
-              variant="secondary"
+              variant="custom"
               size="sm"
-              className="group-hover:text-red-500 dark:group-hover:text-red-400 w-9 h-9 hover:bg-light-hover dark:hover:bg-dark-hover bg-transparent"
+              className="w-9 h-9 bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
             />
           </div>
         </div>

diff --git a/client/src/components/snippets/list/SnippetCardMenu.tsx b/client/src/components/snippets/list/SnippetCardMenu.tsx
@@ -40,7 +40,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
             }}
             variant="custom"
             size="sm"
-            className="bg-light-surface dark:bg-dark-surface hover:bg-light-hover dark:hover:bg-dark-hover"
+            className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
           />
         )}
         <IconButton
@@ -51,7 +51,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
           }}
           variant="custom"
           size="sm"
-          className="bg-light-surface dark:bg-dark-surface hover:bg-light-hover dark:hover:bg-dark-hover"
+          className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
         />
       </div>
     );
@@ -67,7 +67,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
         }}
         variant="custom"
         size="sm"
-        className="bg-light-surface dark:bg-dark-surface hover:bg-light-hover dark:hover:bg-dark-hover"
+        className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
       />
       <IconButton
         icon={<Trash2 size={16} className="hover:text-red-500" />}
@@ -77,7 +77,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
         }}
         variant="custom"
         size="sm"
-        className="bg-light-surface dark:bg-dark-surface hover:bg-light-hover dark:hover:bg-dark-hover"
+        className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
       />
 
       <div className="relative">
@@ -90,7 +90,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
           }}
           variant="custom"
           size="sm"
-          className="bg-light-surface dark:bg-dark-surface hover:bg-light-hover dark:hover:bg-dark-hover"
+          className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
         />
 
         {isDropdownOpen && (

diff --git a/client/src/components/snippets/share/ShareMenu.tsx b/client/src/components/snippets/share/ShareMenu.tsx
@@ -218,17 +218,17 @@ export const ShareMenu: React.FC<ShareMenuProps> = ({ snippetId, isOpen, onClose
                       title="Copy link"
                     >
                       {copiedStates[share.id] ? (
-                        <Check size={16} className="text-green-500 dark:text-green-400" />
+                        <Check size={16} className="text-light-primary dark:text-dark-primary" />
                       ) : (
                         <LinkIcon size={16} className="text-light-text dark:text-dark-text" />
                       )}
                     </button>
                     <button
                       onClick={() => handleDeleteShare(share.id)}
-                      className="p-2 hover:bg-light-hover dark:hover:bg-dark-hover rounded-md transition-colors text-red-500 dark:text-red-400"
+                      className="p-2 hover:bg-light-hover dark:hover:bg-dark-hover rounded-md transition-colors"
                       title="Delete share link"
                     >
-                      <Trash2 size={16} />
+                      <Trash2 size={16} className="hover:text-red-500" />
                     </button>
                   </div>
                 </div>

diff --git a/client/src/contexts/ThemeContext.tsx b/client/src/contexts/ThemeContext.tsx
@@ -1,39 +1,65 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
-type Theme = 'light' | 'dark';
+type Theme = 'light' | 'dark' | 'system';
 
 interface ThemeContextType {
   theme: Theme;
   toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
 }
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [theme, setTheme] = useState<Theme>(() => {
+  const [theme, setThemeState] = useState<Theme>(() => {
     const savedTheme = localStorage.getItem('theme');
-    if (savedTheme === 'light' || savedTheme === 'dark') {
+    if (savedTheme === 'light' || savedTheme === 'dark' || savedTheme === 'system') {
       return savedTheme;
     }
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    return 'system';
   });
 
   useEffect(() => {
     const root = window.document.documentElement;
-    if (theme === 'dark') {
+    const effectiveTheme = theme === 'system'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      : theme;
+
+    if (effectiveTheme === 'dark') {
       root.classList.add('dark');
     } else {
       root.classList.remove('dark');
     }
     localStorage.setItem('theme', theme);
   }, [theme]);
 
+  useEffect(() => {
+    if (theme === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleChange = () => {
+        const root = window.document.documentElement;
+        if (mediaQuery.matches) {
+          root.classList.add('dark');
+        } else {
+          root.classList.remove('dark');
+        }
+      };
+
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+  }, [theme]);
+
   const toggleTheme = () => {
-    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+    setThemeState(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
   };
 
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
       {children}
     </ThemeContext.Provider>
   );

diff --git a/client/src/contexts/ToastContext.tsx b/client/src/contexts/ToastContext.tsx
@@ -24,27 +24,31 @@ interface ToastProps extends Toast {
 const toastConfig = {
   info: {
     icon: Info,
-    bgColor: 'bg-blue-500',
-    borderColor: 'border-blue-600',
-    textColor: 'text-blue-50',
+    bgColor: 'bg-light-primary dark:bg-dark-primary',
+    borderColor: 'border-light-primary dark:border-dark-primary',
+    textColor: 'text-white',
+    hoverColor: 'hover:bg-light-hover dark:hover:bg-dark-hover'
   },
   success: {
     icon: CheckCircle,
-    bgColor: 'bg-green-500',
-    borderColor: 'border-green-600',
-    textColor: 'text-green-50',
+    bgColor: 'bg-green-500 dark:bg-green-600',
+    borderColor: 'border-green-600 dark:border-green-700',
+    textColor: 'text-white',
+    hoverColor: 'hover:bg-green-600 dark:hover:bg-green-700'
   },
   error: {
     icon: AlertCircle,
-    bgColor: 'bg-red-500',
-    borderColor: 'border-red-600',
-    textColor: 'text-red-50',
+    bgColor: 'bg-red-500 dark:bg-red-600',
+    borderColor: 'border-red-600 dark:border-red-700',
+    textColor: 'text-white',
+    hoverColor: 'hover:bg-red-600 dark:hover:bg-red-700'
   },
   warning: {
     icon: AlertTriangle,
-    bgColor: 'bg-yellow-500',
-    borderColor: 'border-yellow-600',
-    textColor: 'text-yellow-50',
+    bgColor: 'bg-yellow-500 dark:bg-yellow-600',
+    borderColor: 'border-yellow-600 dark:border-yellow-700',
+    textColor: 'text-white',
+    hoverColor: 'hover:bg-yellow-600 dark:hover:bg-yellow-700'
   },
 } as const;
 
@@ -74,7 +78,8 @@ const ToastComponent: React.FC<ToastProps> = ({
 
   return (
     <div className={`${config.bgColor} ${config.textColor} p-4 rounded-lg shadow-lg relative 
-      overflow-hidden border-l-4 ${config.borderColor} flex items-center max-w-md`}>
+      overflow-hidden border-l-4 ${config.borderColor} flex items-center max-w-md 
+      backdrop-blur-sm bg-opacity-95 dark:bg-opacity-95`}>
       <div className="mr-3">
         <Icon size={24} />
       </div>
@@ -83,8 +88,8 @@ const ToastComponent: React.FC<ToastProps> = ({
       </div>
       <button 
         onClick={onClose}
-        className="absolute top-0 right-0 h-full px-4 flex items-center justify-center 
-          hover:bg-black hover:bg-opacity-10 transition-colors duration-200"
+        className={`absolute top-0 right-0 h-full px-4 flex items-center justify-center 
+          transition-colors duration-200 ${config.hoverColor}`}
       >
         <X size={16} />
       </button>
@@ -129,4 +134,4 @@ export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ childre
       </div>
     </ToastContext.Provider>
   );
-};
+};
diff --git a/client/src/hooks/useSettings.ts b/client/src/hooks/useSettings.ts
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
 
 type Theme = 'light' | 'dark' | 'system';
 
@@ -14,6 +15,7 @@ interface Settings {
 }
 
 export const useSettings = () => {
+  const { setTheme: setThemeContext } = useTheme();
   const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => 
     (localStorage.getItem('viewMode') as 'grid' | 'list') || 'grid'
   );
@@ -24,7 +26,7 @@ export const useSettings = () => {
   const [showCategories, setShowCategories] = useState(() => localStorage.getItem('showCategories') !== 'false');
   const [expandCategories, setExpandCategories] = useState(() => localStorage.getItem('expandCategories') === 'true');
   const [showLineNumbers, setShowLineNumbers] = useState(() => localStorage.getItem('showLineNumbers') === 'true');
-  const [theme, setTheme] = useState<Theme>(() => {
+  const [theme, setThemeState] = useState<Theme>(() => {
     const savedTheme = localStorage.getItem('theme');
     return (savedTheme === 'light' || savedTheme === 'dark' || savedTheme === 'system') 
       ? savedTheme 
@@ -65,7 +67,8 @@ export const useSettings = () => {
 
   useEffect(() => {
     localStorage.setItem('theme', theme);
-  }, [theme]);
+    setThemeContext(theme);
+  }, [theme, setThemeContext]);
 
   const updateSettings = (newSettings: Settings) => {
     setCompactView(newSettings.compactView);
@@ -75,7 +78,7 @@ export const useSettings = () => {
     setShowCategories(newSettings.showCategories);
     setExpandCategories(newSettings.expandCategories);
     setShowLineNumbers(newSettings.showLineNumbers);
-    setTheme(newSettings.theme);
+    setThemeState(newSettings.theme);
   };
 
   return {

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -21,7 +21,7 @@ module.exports = {
         'dark-border': '#334155',
         'dark-text': '#e2e8f0',
         'dark-text-secondary': '#94a3b8',
-        'dark-primary': '#60a5fa',
+        'dark-primary': '#2563eb',
         'dark-hover': '#334155',
       },
     },