From 1d1073cba1305ca7d1bbdb62745f98b193481a16 Mon Sep 17 00:00:00 2001
From: olsch01 <olson2cm@icloud.com>
Date: Mon, 16 Mar 2026 15:02:04 -0400
Subject: [PATCH] style: add white glow outline to logo in dark mode

Use CSS drop-shadow filter on the logo img in dark mode to create a
subtle white outline that helps the transparent-background logo stand
out against the dark header and login page backgrounds.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/AppLayout.tsx | 11 ++++++++++-
 frontend/src/pages/auth/LoginPage.tsx        | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index 6d448cf..3d4c243 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -106,7 +106,16 @@ export function AppLayout() {
         <Group h={60} px="md" justify="space-between">
           <Group>
             <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-            <img src={logoSrc} alt="HOA LedgerIQ" style={{ height: 40 }} />
+            <img
+              src={logoSrc}
+              alt="HOA LedgerIQ"
+              style={{
+                height: 40,
+                ...(colorScheme === 'dark' ? {
+                  filter: 'drop-shadow(0 0 1px rgba(255,255,255,0.8)) drop-shadow(0 0 2px rgba(255,255,255,0.4))',
+                } : {}),
+              }}
+            />
           </Group>
           <Group>
             {currentOrg && (
diff --git a/frontend/src/pages/auth/LoginPage.tsx b/frontend/src/pages/auth/LoginPage.tsx
index 08d3749..90e1465 100644
--- a/frontend/src/pages/auth/LoginPage.tsx
+++ b/frontend/src/pages/auth/LoginPage.tsx
@@ -16,6 +16,7 @@ import { IconAlertCircle } from '@tabler/icons-react';
 import { useNavigate, Link } from 'react-router-dom';
 import api from '../../services/api';
 import { useAuthStore } from '../../stores/authStore';
+import { usePreferencesStore } from '../../stores/preferencesStore';
 import logoSrc from '../../assets/logo.png';
 
 export function LoginPage() {
@@ -23,6 +24,7 @@ export function LoginPage() {
   const [error, setError] = useState('');
   const navigate = useNavigate();
   const setAuth = useAuthStore((s) => s.setAuth);
+  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
 
   const form = useForm({
     initialValues: { email: '', password: '' },
@@ -57,7 +59,16 @@ export function LoginPage() {
   return (
     <Container size={420} my={80}>
       <Center>
-        <img src={logoSrc} alt="HOA LedgerIQ" style={{ height: 60 }} />
+        <img
+          src={logoSrc}
+          alt="HOA LedgerIQ"
+          style={{
+            height: 60,
+            ...(isDark ? {
+              filter: 'drop-shadow(0 0 1px rgba(255,255,255,0.8)) drop-shadow(0 0 2px rgba(255,255,255,0.4))',
+            } : {}),
+          }}
+        />
       </Center>
       <Text c="dimmed" size="sm" ta="center" mt={5}>
         Don&apos;t have an account?{' '}