mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-29 22:18:13 +00:00
fix: remove unused routes and errors
This commit is contained in:
mengstabketemaw
@@ -7,11 +7,14 @@ import {
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
UnstyledButton,
|
||||
rem,
|
||||
useComputedColorScheme,
|
||||
useMantineColorScheme,
|
||||
useMantineTheme,
|
||||
type BoxProps,
|
||||
} from '@mantine/core';
|
||||
import { IconCheck } from '@tabler/icons-react';
|
||||
import { IconCheck, IconMoon, IconSun } from '@tabler/icons-react';
|
||||
import { useAuthConfig } from '../AuthConfig';
|
||||
|
||||
export function BrandMark({ size = 44, ...boxProps }: BoxProps & { size?: number }) {
|
||||
@@ -29,6 +32,34 @@ export function BrandMark({ size = 44, ...boxProps }: BoxProps & { size?: number
|
||||
);
|
||||
}
|
||||
|
||||
function ThemeToggle() {
|
||||
const { setColorScheme } = useMantineColorScheme();
|
||||
const computed = useComputedColorScheme('light');
|
||||
const isDark = computed === 'dark';
|
||||
|
||||
return (
|
||||
<UnstyledButton
|
||||
onClick={() => setColorScheme(isDark ? 'light' : 'dark')}
|
||||
aria-label="Toggle theme"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: rem(36),
|
||||
height: rem(36),
|
||||
borderRadius: rem(10),
|
||||
border: '1px solid var(--mantine-color-default-border)',
|
||||
background: 'var(--mantine-color-body)',
|
||||
color: 'var(--mantine-color-dimmed)',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 150ms ease',
|
||||
}}
|
||||
>
|
||||
{isDark ? <IconSun size={18} /> : <IconMoon size={18} />}
|
||||
</UnstyledButton>
|
||||
);
|
||||
}
|
||||
|
||||
const FEATURES = [
|
||||
'Submit applications online, 24/7',
|
||||
'Real-time status tracking & alerts',
|
||||
@@ -49,114 +80,137 @@ export function AuthShell({
|
||||
const theme = useMantineTheme();
|
||||
const { logoUrl } = useAuthConfig();
|
||||
const heroGradient = theme.other.heroGradient as string;
|
||||
const computed = useComputedColorScheme('light');
|
||||
const isDark = computed === 'dark';
|
||||
|
||||
return (
|
||||
<Flex
|
||||
<Box
|
||||
mih="100vh"
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{ background: '#f7f8fa' }}
|
||||
style={{
|
||||
background: 'var(--mantine-color-body)',
|
||||
position: 'relative',
|
||||
}}
|
||||
p="md"
|
||||
>
|
||||
{/* Theme toggle — top-right corner */}
|
||||
<Box
|
||||
mx="auto"
|
||||
maw={1280}
|
||||
w="100%"
|
||||
bg="white"
|
||||
p={12}
|
||||
style={{
|
||||
borderRadius: rem(16),
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.15)',
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: rem(16),
|
||||
right: rem(16),
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<Flex direction={{ base: 'column', lg: 'row' }}>
|
||||
<Box
|
||||
w={{ base: '100%', lg: '50%' }}
|
||||
px={48}
|
||||
py={48}
|
||||
style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
<ThemeToggle />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
visibleFrom="lg"
|
||||
w="50%"
|
||||
p="lg"
|
||||
pos="relative"
|
||||
style={{ background: heroGradient, overflow: 'hidden' }}
|
||||
>
|
||||
<Flex
|
||||
mih="100vh"
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<Box
|
||||
mx="auto"
|
||||
maw={1280}
|
||||
w="100%"
|
||||
p={12}
|
||||
style={{
|
||||
borderRadius: rem(16),
|
||||
background: 'var(--mantine-color-body)',
|
||||
boxShadow: isDark
|
||||
? '0 20px 60px rgba(0,0,0,0.5)'
|
||||
: '0 20px 60px rgba(0,0,0,0.15)',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Flex direction={{ base: 'column', lg: 'row' }}>
|
||||
<Box
|
||||
pos="absolute"
|
||||
top={-80}
|
||||
right={-40}
|
||||
w={240}
|
||||
h={240}
|
||||
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }}
|
||||
/>
|
||||
<Box
|
||||
pos="absolute"
|
||||
bottom={-80}
|
||||
left={-60}
|
||||
w={220}
|
||||
h={220}
|
||||
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
|
||||
/>
|
||||
|
||||
<Stack
|
||||
gap="lg"
|
||||
pos="relative"
|
||||
style={{ zIndex: 1 }}
|
||||
h="100%"
|
||||
justify="center"
|
||||
w={{ base: '100%', lg: '50%' }}
|
||||
px={48}
|
||||
py={48}
|
||||
style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
|
||||
>
|
||||
<Center>
|
||||
<Box
|
||||
component="img"
|
||||
src={logoUrl}
|
||||
alt="EMA Portal"
|
||||
style={{ display: 'block', maxWidth: '60%', height: 'auto' }}
|
||||
/>
|
||||
</Center>
|
||||
{children}
|
||||
</Box>
|
||||
|
||||
<Stack gap={6}>
|
||||
<Title order={2} c="white" fz={rem(28)} lh={1.2} fw={700}>
|
||||
{brandTitle}
|
||||
</Title>
|
||||
<Text fz="sm" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
|
||||
{brandSubtitle}
|
||||
<Box
|
||||
visibleFrom="lg"
|
||||
w="50%"
|
||||
p="lg"
|
||||
pos="relative"
|
||||
style={{ background: heroGradient, overflow: 'hidden' }}
|
||||
>
|
||||
<Box
|
||||
pos="absolute"
|
||||
top={-80}
|
||||
right={-40}
|
||||
w={240}
|
||||
h={240}
|
||||
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }}
|
||||
/>
|
||||
<Box
|
||||
pos="absolute"
|
||||
bottom={-80}
|
||||
left={-60}
|
||||
w={220}
|
||||
h={220}
|
||||
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
|
||||
/>
|
||||
|
||||
<Stack
|
||||
gap="lg"
|
||||
pos="relative"
|
||||
style={{ zIndex: 1 }}
|
||||
h="100%"
|
||||
justify="center"
|
||||
>
|
||||
<Center>
|
||||
<Box
|
||||
component="img"
|
||||
src={logoUrl}
|
||||
alt="EMA Portal"
|
||||
style={{ display: 'block', maxWidth: '60%', height: 'auto' }}
|
||||
/>
|
||||
</Center>
|
||||
|
||||
<Stack gap={6}>
|
||||
<Title order={2} c="white" fz={rem(28)} lh={1.2} fw={700}>
|
||||
{brandTitle}
|
||||
</Title>
|
||||
<Text fz="sm" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
|
||||
{brandSubtitle}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap="sm">
|
||||
{FEATURES.map((feature) => (
|
||||
<Group key={feature} gap="sm" wrap="nowrap">
|
||||
<Center
|
||||
w={22}
|
||||
h={22}
|
||||
style={{
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IconCheck size={12} color="white" stroke={2.4} />
|
||||
</Center>
|
||||
<Text c="white" fz="sm" fw={500}>
|
||||
{feature}
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
|
||||
© 2026 Ethiopian Maritime Authority
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap="sm">
|
||||
{FEATURES.map((feature) => (
|
||||
<Group key={feature} gap="sm" wrap="nowrap">
|
||||
<Center
|
||||
w={22}
|
||||
h={22}
|
||||
style={{
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IconCheck size={12} color="white" stroke={2.4} />
|
||||
</Center>
|
||||
<Text c="white" fz="sm" fw={500}>
|
||||
{feature}
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
|
||||
© 2026 Ethiopian Maritime Authority
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user