Merge pull request #151 from Ehonrie/branding/theme

feat: Branding/theme

Author: jhayniffy

BRANDING.md

@@ -0,0 +1,42 @@
+# NiffyInsur Brand Guidelines
+
+This document outlines the visual identity and styling standards for NiffyInsur.
+
+## Color Palette
+
+### Primary (Azure Blue)
+- **HSL**: `217 91% 60%`
+- **Hex**: `#3b82f6`
+- **Usage**: Buttons, links, primary brand elements.
+
+### Secondary (Slate)
+- **HSL**: `222 47% 11%` (Foreground) / `0 0% 100%` (Background)
+- **Usage**: Typography, borders, subtle UI elements.
+
+### Status Colors
+- **Success**: `142 71% 45%` (Green)
+- **Warning**: `48 96% 53%` (Yellow)
+- **Destructive**: `0 84% 60%` (Red)
+
+## Typography
+
+### Headings & Body
+- **Font**: [Inter](https://rsms.me/inter/)
+- **Weight**: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold)
+
+### Technical & Data
+- **Font**: [IBM Plex Mono](https://github.com/IBM/plex)
+- **Usage**: Addresses, transaction hashes, smart contract code, numbers.
+
+## UI Principles
+
+1. **Glassmorphism**: Use the `.glass` utility for cards and overlays to create depth.
+   - Example: `<div className="glass rounded-lg p-6">...</div>`
+2. **Interactive States**:
+   - **Hover**: Subtle scaling or opacity shift.
+   - **Focus**: Clear Azure Blue ring (`focus-ring` utility).
+3. **Dark Mode**: Automatically respects system preferences, manual override available via `ThemeToggle`.
+
+## Assets
+- **Logo Mark**: [icon.svg](/frontend/public/icon.svg)
+- **Manifest**: [site.webmanifest](/frontend/public/site.webmanifest)

frontend/public/icon.svg

@@ -0,0 +1,20 @@
+{
+  "name": "NiffyInsur",
+  "short_name": "NiffyInsur",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#0062FF",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "start_url": "/"
+}

frontend/public/site.webmanifest

@@ -5,58 +5,58 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 222 47% 11%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 222 47% 11%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
+    --popover-foreground: 222 47% 11%;
+    --primary: 217 91% 60%; /* Stellar Azure Blue */
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 84% 4.9%;
-    --muted: 210 40% 96%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 84% 4.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
-    --radius: 0.5rem;
+    --ring: 217 91% 60%;
+    --radius: 0.75rem;
     --font-inter: 'Inter', system-ui, sans-serif;
     --font-ibm-mono: 'IBM Plex Mono', monospace;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 222 47% 4%;
     --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
+    --card: 222 47% 6%;
     --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
+    --popover: 222 47% 6%;
     --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 217.2 32.6% 17.5%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 12%;
     --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
+    --muted: 217.2 32.6% 12%;
     --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
+    --accent: 217.2 32.6% 12%;
     --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 94.1%;
+    --border: 217.2 32.6% 12%;
+    --input: 217.2 32.6% 12%;
+    --ring: 217 91% 60%;
   }
 }
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/30;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
   }
 }
 

frontend/src/app/globals.css

@@ -70,9 +70,11 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
         <link rel="manifest" href="/site.webmanifest" />
       </head>
-      <body className="font-sans">
-        {children}
-        <Toaster />
+      <body className="font-sans antialiased">
+        <ThemeProvider defaultTheme="system" storageKey="niffyinsur-theme">
+          {children}
+          <Toaster />
+        </ThemeProvider>
       </body>
     </html>
   );

frontend/src/app/layout.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}
+
+interface ThemeProviderState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeProviderContext = React.createContext<ThemeProviderState | undefined>(undefined);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'niffyinsur-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = React.useState<Theme>(
+    () => (typeof window !== 'undefined' ? (localStorage.getItem(storageKey) as Theme) : defaultTheme) || defaultTheme
+  );
+
+  React.useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = React.useMemo(
+    () => ({
+      theme,
+      setTheme: (theme: Theme) => {
+        localStorage.setItem(storageKey, theme);
+        setTheme(theme);
+      },
+    }),
+    [theme, storageKey]
+  );
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error('useTheme must be used within a ThemeProvider');
+
+  return context;
+};

frontend/src/components/theme-provider.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import * as React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useTheme } from '@/components/theme-provider';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+      title="Toggle theme"
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}