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>
This commit is contained in:
2026-03-16 15:02:04 -04:00
parent cf061c1505
commit 1d1073cba1
2 changed files with 22 additions and 2 deletions

View File

@@ -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 && (

View File

@@ -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?{' '}