Refactor: Improve Novu Inbox theming

index.html

@@ -16,6 +16,11 @@
     <meta name="twitter:site" content="@lovable_dev" />
     <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
     
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
     <!-- Uppy CSS for photo upload functionality -->
     <link href="https://releases.transloadit.com/uppy/v3.25.3/uppy.min.css" rel="stylesheet">
   </head>

src/hooks/useNovuTheme.ts

@@ -5,13 +5,9 @@ export function useNovuTheme() {
   const { theme } = useTheme();
   
   const appearance = useMemo(() => {
-    // Get computed styles to access CSS variables
-    const root = document.documentElement;
-    const style = getComputedStyle(root);
-    
     return {
       variables: {
-        // Colors
+        // Colors - using semantic tokens
         colorBackground: `hsl(var(--background))`,
         colorForeground: `hsl(var(--foreground))`,
         colorPrimary: `hsl(var(--primary))`,
@@ -29,16 +25,20 @@ export function useNovuTheme() {
         colorBorder: `hsl(var(--border))`,
         
         // Border radius
-        borderRadius: `var(--radius)`,
+        borderRadius: `calc(var(--radius) + 2px)`,
         
-        // Font
-        fontFamily: style.getPropertyValue('font-family') || 'inherit',
+        // Typography
+        fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
         fontSize: '14px',
+        fontWeightRegular: '400',
+        fontWeightMedium: '500',
+        fontWeightBold: '600',
+        lineHeight: '1.5',
       },
       elements: {
         bellContainer: {
-          width: '40px',
-          height: '40px',
+          width: '36px',
+          height: '36px',
         },
         bell: {
           width: '20px',
@@ -47,84 +47,130 @@ export function useNovuTheme() {
         },
         bellDot: {
           backgroundColor: `hsl(var(--primary))`,
+          width: '8px',
+          height: '8px',
+          boxShadow: `0 0 8px hsl(var(--primary) / 0.5)`,
         },
         popover: {
+          width: '400px',
+          maxWidth: '90vw',
+          maxHeight: '600px',
           boxShadow: `var(--shadow-card)`,
           border: `1px solid hsl(var(--border))`,
           borderRadius: `calc(var(--radius) + 4px)`,
+          backgroundColor: `hsl(var(--background))`,
+          overflow: 'hidden',
+        },
+        notificationList: {
+          maxHeight: '480px',
+          overflowY: 'auto',
         },
         notificationItem: {
+          padding: '16px',
+          borderBottom: `1px solid hsl(var(--border) / 0.5)`,
           transition: 'var(--transition-smooth)',
-          '&:hover': {
-            backgroundColor: `hsl(var(--muted) / 0.5)`,
-          },
+          cursor: 'pointer',
         },
         notificationItemRead: {
-          opacity: '0.7',
+          opacity: '0.65',
+          backgroundColor: `hsl(var(--muted) / 0.2)`,
         },
         notificationItemUnread: {
-          backgroundColor: `hsl(var(--muted) / 0.3)`,
-          borderLeft: `3px solid hsl(var(--primary))`,
+          backgroundColor: `hsl(var(--muted) / 0.4)`,
+          borderLeft: `4px solid hsl(var(--primary))`,
+          fontWeight: '500',
         },
         notificationDot: {
           backgroundColor: `hsl(var(--primary))`,
-          width: '8px',
-          height: '8px',
+          width: '10px',
+          height: '10px',
+          borderRadius: '50%',
+          boxShadow: `0 0 6px hsl(var(--primary) / 0.6)`,
         },
         notificationTitle: {
-          fontWeight: '500',
+          fontSize: '15px',
+          fontWeight: '600',
+          lineHeight: '1.4',
           color: `hsl(var(--foreground))`,
+          marginBottom: '4px',
         },
         notificationDescription: {
+          fontSize: '14px',
+          lineHeight: '1.5',
           color: `hsl(var(--muted-foreground))`,
+          marginBottom: '8px',
         },
         notificationTimestamp: {
           fontSize: '12px',
           color: `hsl(var(--muted-foreground))`,
+          fontWeight: '400',
         },
         notificationPrimaryAction: {
           backgroundColor: `hsl(var(--primary))`,
           color: `hsl(var(--primary-foreground))`,
           borderRadius: `var(--radius)`,
-          padding: '8px 16px',
+          padding: '10px 20px',
+          fontSize: '14px',
+          fontWeight: '500',
+          border: 'none',
           transition: 'var(--transition-smooth)',
-          '&:hover': {
-            opacity: '0.9',
-          },
+          cursor: 'pointer',
         },
         notificationSecondaryAction: {
           backgroundColor: `hsl(var(--secondary))`,
           color: `hsl(var(--secondary-foreground))`,
           borderRadius: `var(--radius)`,
-          padding: '8px 16px',
+          padding: '10px 20px',
+          fontSize: '14px',
+          fontWeight: '500',
+          border: 'none',
           transition: 'var(--transition-smooth)',
-          '&:hover': {
-            backgroundColor: `hsl(var(--secondary) / 0.8)`,
-          },
+          cursor: 'pointer',
         },
         loader: {
           color: `hsl(var(--primary))`,
+          width: '32px',
+          height: '32px',
         },
         emptyNotifications: {
           color: `hsl(var(--muted-foreground))`,
           textAlign: 'center',
-          padding: '32px 16px',
+          padding: '48px 24px',
+          fontSize: '15px',
+          lineHeight: '1.6',
         },
         header: {
           borderBottom: `1px solid hsl(var(--border))`,
-          padding: '16px',
+          padding: '16px 20px',
+          backgroundColor: `hsl(var(--muted) / 0.3)`,
         },
         headerTitle: {
-          fontSize: '16px',
+          fontSize: '17px',
           fontWeight: '600',
           color: `hsl(var(--foreground))`,
+          letterSpacing: '-0.01em',
+        },
+        headerMarkAllAsReadButton: {
+          fontSize: '13px',
+          color: `hsl(var(--primary))`,
+          fontWeight: '500',
+          cursor: 'pointer',
+          transition: 'var(--transition-smooth)',
         },
         footer: {
           borderTop: `1px solid hsl(var(--border))`,
-          padding: '12px 16px',
+          padding: '12px 20px',
+          backgroundColor: `hsl(var(--muted) / 0.3)`,
+        },
+        footerViewAllButton: {
+          fontSize: '14px',
+          color: `hsl(var(--primary))`,
+          fontWeight: '500',
+          cursor: 'pointer',
+          transition: 'var(--transition-smooth)',
         },
       },
-    };
+    } as const;
   }, [theme]);
   
   return appearance;

tailwind.config.ts

@@ -13,6 +13,10 @@ export default {
       },
     },
     extend: {
+      fontFamily: {
+        sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+        inter: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",