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:
@@ -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 && (
|
||||||
|
|||||||
@@ -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't have an account?{' '}
|
Don't have an account?{' '}
|
||||||
|
|||||||
Reference in New Issue
Block a user