From 9cba8b48297cebdcdfe7839475820ce6f7baab38 Mon Sep 17 00:00:00 2001
From: Cory Hawklvelt <cory@hawkvelt.id.au>
Date: Sun, 26 Apr 2026 17:06:45 +0930
Subject: [PATCH] feat: add visual theme indicators and fix logo colors for
 dev/staging environments

---
 src/components/branding/SecuirdLogo.tsx       | 28 ++++++---
 src/components/branding/ThemeIndicator.tsx    | 42 +++++++++++++
 .../layouts/AuthenticatedLayout.tsx           |  4 +-
 src/components/layouts/MarketingLayout.tsx    | 20 ++++---
 src/components/layouts/PublicLayout.tsx       |  8 ++-
 src/index.css                                 | 59 ++++++++++++++++++-
 6 files changed, 139 insertions(+), 22 deletions(-)
 create mode 100644 src/components/branding/ThemeIndicator.tsx

diff --git a/src/components/branding/SecuirdLogo.tsx b/src/components/branding/SecuirdLogo.tsx
index aa80334..f8fd0dc 100644
--- a/src/components/branding/SecuirdLogo.tsx
+++ b/src/components/branding/SecuirdLogo.tsx
@@ -10,6 +10,9 @@ interface SecuirdLogoProps {
  * Secuird Logo - Abstract gate/doorway mark
  * Represents controlled entry and policy enforcement
  * Two vertical pillars forming a gateway with negative space
+ * 
+ * Uses inline styles for theme colors to ensure they work correctly
+ * across all theme configurations (default, dev, preprod)
  */
 export function SecuirdLogo({ 
   size = "md", 
@@ -22,31 +25,38 @@ export function SecuirdLogo({
     lg: "w-12 h-12",
   };
 
-  const bgClasses = {
-    default: "bg-primary",
-    light: "bg-sidebar-primary",
+  // Use inline styles for theme colors to ensure they work at runtime
+  const getBgStyle = () => {
+    if (variant === "light") {
+      return { 
+        backgroundColor: "hsl(var(--theme-sidebar-primary, 173 65% 36%))",
+        color: "hsl(var(--theme-sidebar-primary-foreground, 0 0% 100%))"
+      };
+    }
+    return { 
+      backgroundColor: "hsl(var(--theme-primary, 173 65% 36%))",
+      color: "hsl(var(--theme-primary-foreground, 0 0% 100%))"
+    };
   };
-
-  const iconColor = variant === "light" 
-    ? "text-sidebar-primary-foreground" 
-    : "text-primary-foreground";
+  
+  const bgStyle = getBgStyle();
 
   return (
     <div 
       className={cn(
         "rounded-lg flex items-center justify-center flex-shrink-0",
         sizeClasses[size],
-        bgClasses[variant],
         className
       )}
+      style={bgStyle}
     >
       <svg 
         viewBox="0 0 24 24" 
         fill="none" 
         className={cn(
-          iconColor,
           size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6"
         )}
+        style={{ color: bgStyle.color }}
       >
         {/* Abstract gate - two pillars with archway */}
         <path 
diff --git a/src/components/branding/ThemeIndicator.tsx b/src/components/branding/ThemeIndicator.tsx
new file mode 100644
index 0000000..8b600b7
--- /dev/null
+++ b/src/components/branding/ThemeIndicator.tsx
@@ -0,0 +1,42 @@
+import { config } from "@/config";
+
+interface ThemeIndicatorProps {
+  showBanner?: boolean;
+  className?: string;
+}
+
+/**
+ * Visual theme indicator - shows environment name and color
+ * Appears as a banner in dev/preprod modes
+ */
+export function ThemeIndicator({ showBanner = true, className }: ThemeIndicatorProps) {
+  const theme = config.theme.name;
+  const appName = config.app.name;
+  
+  // Only show for non-default themes
+  if (theme === "default") {
+    return null;
+  }
+  
+  const themeLabels: Record<string, string> = {
+    dev: "Development Environment",
+    preprod: "Staging / Pre-Production",
+  };
+  
+  const themeLabel = themeLabels[theme] || theme;
+  
+  if (showBanner) {
+    return (
+      <div className="env-banner">
+        {themeLabel} — {appName}
+      </div>
+    );
+  }
+  
+  return (
+    <span className={`theme-badge ${className || ""}`}>
+      <span className="env-indicator" />
+      {themeLabel}
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/src/components/layouts/AuthenticatedLayout.tsx b/src/components/layouts/AuthenticatedLayout.tsx
index 73ab8d6..b192e7e 100644
--- a/src/components/layouts/AuthenticatedLayout.tsx
+++ b/src/components/layouts/AuthenticatedLayout.tsx
@@ -3,11 +3,13 @@ import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/navigation/AppSidebar";
 import { TopBar } from "@/components/navigation/TopBar";
 import ApiDevTools from "@/components/dev/ApiDevTools";
+import { ThemeIndicator } from "@/components/branding/ThemeIndicator";
 
 export default function AuthenticatedLayout() {
   return (
     <SidebarProvider>
-      <div className="min-h-screen flex w-full bg-background">
+      <ThemeIndicator />
+      <div className="min-h-screen flex w-full bg-background pt-8">
         <AppSidebar />
         <div className="flex-1 flex flex-col min-w-0">
           <TopBar />
diff --git a/src/components/layouts/MarketingLayout.tsx b/src/components/layouts/MarketingLayout.tsx
index e5998f2..d957dbc 100644
--- a/src/components/layouts/MarketingLayout.tsx
+++ b/src/components/layouts/MarketingLayout.tsx
@@ -1,16 +1,17 @@
 import { Link, Outlet, useLocation } from "react-router-dom";
 import { SecuirdLogo as GatehouseLogo } from "@/components/branding/SecuirdLogo";
+import { ThemeIndicator } from "@/components/branding/ThemeIndicator";
 import { Button } from "@/components/ui/button";
 import { config } from "@/config";
 import { cn } from "@/lib/utils";
 import {
-Shield,
-Key,
-CreditCard,
-Play,
-Lock,
-Menu,
-X
+  Shield,
+  Key,
+  CreditCard,
+  Play,
+  Lock,
+  Menu,
+  X
 } from "lucide-react";
 import { useState } from "react";
 
@@ -29,8 +30,11 @@ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
 return (
 <div className="min-h-screen bg-background flex flex-col">
+  {/* Theme indicator banner for dev/staging */}
+  <ThemeIndicator />
+  
   {/* Header */}
-  <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+  <header className="sticky top-8 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 marketing-header">
     <nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
       <div className="flex h-16 items-center justify-between">
         {/* Logo */}
diff --git a/src/components/layouts/PublicLayout.tsx b/src/components/layouts/PublicLayout.tsx
index 2966d3c..b77cc33 100644
--- a/src/components/layouts/PublicLayout.tsx
+++ b/src/components/layouts/PublicLayout.tsx
@@ -1,15 +1,19 @@
 import { Outlet, Link } from "react-router-dom";
 import { SecuirdLogo } from "@/components/branding/SecuirdLogo";
+import { ThemeIndicator } from "@/components/branding/ThemeIndicator";
 import { config } from "@/config";
 
 export default function PublicLayout() {
   return (
     <div className="min-h-screen bg-background flex flex-col">
+      {/* Theme indicator banner for dev/staging */}
+      <ThemeIndicator />
+      
       {/* Subtle gradient background */}
       <div className="fixed inset-0 bg-gradient-to-br from-background via-background to-secondary/30 pointer-events-none" />
       
-      {/* Header */}
-      <header className="relative z-10 w-full py-6 px-4">
+      {/* Header with theme-colored border */}
+      <header className="relative z-10 w-full py-6 px-4 marketing-header">
         <div className="max-w-md mx-auto">
           <Link to="/" className="flex items-center gap-2.5 justify-center">
             <SecuirdLogo size="md" />
diff --git a/src/index.css b/src/index.css
index adc4663..3c0d577 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-@import './styles/theme-vars.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -153,6 +151,40 @@
 }
 
 @layer components {
+  /* Theme-specific branding enhancements */
+  
+  /* Marketing header - theme colored */
+  .marketing-header {
+    @apply border-b transition-colors duration-300;
+    background-color: hsl(var(--theme-primary) / 0.03);
+    border-color: hsl(var(--theme-primary) / 0.2);
+  }
+  
+  /* Theme indicator badge */
+  .theme-badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+    background-color: hsl(var(--theme-primary) / 0.15);
+    color: hsl(var(--theme-primary));
+  }
+  
+  /* Theme-colored sidebar header */
+  .sidebar-header-theme {
+    background: linear-gradient(135deg, 
+      hsl(var(--theme-sidebar-primary)) 0%, 
+      hsl(var(--theme-sidebar-primary) / 0.85) 100%
+    );
+  }
+  
+  /* Theme-colored buttons */
+  .btn-theme {
+    @apply bg-primary text-primary-foreground hover:opacity-90 transition-opacity;
+  }
+  
+  /* Theme ring focus */
+  .focus-ring:focus-visible {
+    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
+  }
+  
   /* Auth card for public pages */
   .auth-card {
     @apply bg-card rounded-xl p-8 shadow-card border border-border;
@@ -204,6 +236,29 @@
   .page-description {
     @apply text-muted-foreground mt-1;
   }
+  
+  /* Dev/Staging environment banner */
+  .env-banner {
+    @apply fixed top-0 left-0 right-0 z-50 px-3 py-1 text-center text-xs font-bold uppercase tracking-wider;
+    background: linear-gradient(90deg, 
+      hsl(var(--theme-primary)) 0%, 
+      hsl(var(--theme-primary) / 0.8) 50%, 
+      hsl(var(--theme-primary)) 100%
+    );
+    color: hsl(var(--theme-primary-foreground));
+  }
+  
+  /* Additional env indicator on page */
+  .env-indicator {
+    @apply inline-block w-2 h-2 rounded-full ml-2;
+    background-color: hsl(var(--theme-primary));
+    animation: pulse 2s ease-in-out infinite;
+  }
+  
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
 }
 
 @layer utilities {