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 h={60} px="md" justify="space-between">
<Group> <Group>
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" /> <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>
<Group> <Group>
{currentOrg && ( {currentOrg && (

View File

@@ -16,6 +16,7 @@ import { IconAlertCircle } from '@tabler/icons-react';
import { useNavigate, Link } from 'react-router-dom'; import { useNavigate, Link } from 'react-router-dom';
import api from '../../services/api'; import api from '../../services/api';
import { useAuthStore } from '../../stores/authStore'; import { useAuthStore } from '../../stores/authStore';
import { usePreferencesStore } from '../../stores/preferencesStore';
import logoSrc from '../../assets/logo.png'; import logoSrc from '../../assets/logo.png';
export function LoginPage() { export function LoginPage() {
@@ -23,6 +24,7 @@ export function LoginPage() {
const [error, setError] = useState(''); const [error, setError] = useState('');
const navigate = useNavigate(); const navigate = useNavigate();
const setAuth = useAuthStore((s) => s.setAuth); const setAuth = useAuthStore((s) => s.setAuth);
const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
const form = useForm({ const form = useForm({
initialValues: { email: '', password: '' }, initialValues: { email: '', password: '' },
@@ -57,7 +59,16 @@ export function LoginPage() {
return ( return (
<Container size={420} my={80}> <Container size={420} my={80}>
<Center> <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> </Center>
<Text c="dimmed" size="sm" ta="center" mt={5}> <Text c="dimmed" size="sm" ta="center" mt={5}>
Don&apos;t have an account?{' '} Don&apos;t have an account?{' '}