mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 19:12:50 +00:00
update the design according to the iam module
This commit is contained in:
mengstabketemaw
@@ -40,9 +40,8 @@ interface AuthShellProps {
|
||||
}
|
||||
|
||||
/**
|
||||
* Two-pane auth layout: a branded gradient panel (hidden below `md`) and the
|
||||
* form pane. Standalone (rendered outside the portal chrome and i18n provider),
|
||||
* so copy here is plain English to match the other auth pages.
|
||||
* Two-pane auth card: a centered card with a form panel (left) and a branded
|
||||
* gradient panel (right, hidden below `lg`). Inspired by the UM login layout.
|
||||
*/
|
||||
export function AuthShell({
|
||||
children,
|
||||
@@ -53,104 +52,115 @@ export function AuthShell({
|
||||
const heroGradient = theme.other.heroGradient as string;
|
||||
|
||||
return (
|
||||
<Flex mih="100vh">
|
||||
{/* ---- Brand panel ---------------------------------------------- */}
|
||||
<Flex
|
||||
mih="100vh"
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{ background: '#f7f8fa' }}
|
||||
p="md"
|
||||
>
|
||||
<Box
|
||||
visibleFrom="md"
|
||||
w={500}
|
||||
p={48}
|
||||
pos="relative"
|
||||
style={{ background: heroGradient, overflow: 'hidden' }}
|
||||
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',
|
||||
}}
|
||||
>
|
||||
{/* Decorative blurred orbs for depth */}
|
||||
<Box
|
||||
pos="absolute"
|
||||
top={-120}
|
||||
right={-80}
|
||||
w={360}
|
||||
h={360}
|
||||
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }}
|
||||
/>
|
||||
<Box
|
||||
pos="absolute"
|
||||
bottom={-140}
|
||||
left={-100}
|
||||
w={320}
|
||||
h={320}
|
||||
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
|
||||
/>
|
||||
<Flex direction={{ base: 'column', lg: 'row' }}>
|
||||
{/* ---- Form panel (left) ---------------------------------------- */}
|
||||
<Box
|
||||
w={{ base: '100%', lg: '50%' }}
|
||||
px="xl"
|
||||
py={32}
|
||||
style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
|
||||
<Flex
|
||||
direction="column"
|
||||
h="100%"
|
||||
pos="relative"
|
||||
style={{ zIndex: 1 }}
|
||||
>
|
||||
<Box style={{ flex: 1 }} />
|
||||
{/* ---- Brand panel (right) -------------------------------------- */}
|
||||
<Box
|
||||
visibleFrom="lg"
|
||||
w="50%"
|
||||
p="lg"
|
||||
pos="relative"
|
||||
style={{ background: heroGradient, overflow: 'hidden' }}
|
||||
>
|
||||
{/* Decorative blurred orbs */}
|
||||
<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="xl" maw={400}>
|
||||
<Center>
|
||||
<Box
|
||||
component="img"
|
||||
src="/brand/ema-white.png"
|
||||
alt="EMA Portal"
|
||||
style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
|
||||
/>
|
||||
</Center>
|
||||
<Stack
|
||||
gap="lg"
|
||||
pos="relative"
|
||||
style={{ zIndex: 1 }}
|
||||
h="100%"
|
||||
justify="center"
|
||||
>
|
||||
<Center>
|
||||
<Box
|
||||
component="img"
|
||||
src="/brand/ema-white.png"
|
||||
alt="EMA Portal"
|
||||
style={{ display: 'block', maxWidth: '60%', height: 'auto' }}
|
||||
/>
|
||||
</Center>
|
||||
|
||||
<Stack gap="sm">
|
||||
<Title order={1} c="white" fz={rem(36)} lh={1.15} fw={700}>
|
||||
{brandTitle}
|
||||
</Title>
|
||||
<Text fz="md" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
|
||||
{brandSubtitle}
|
||||
<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="md">
|
||||
{FEATURES.map((feature) => (
|
||||
<Group key={feature} gap="sm" wrap="nowrap">
|
||||
<Center
|
||||
w={24}
|
||||
h={24}
|
||||
style={{
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IconCheck size={14} color="white" stroke={2.4} />
|
||||
</Center>
|
||||
<Text c="white" fz="sm" fw={500}>
|
||||
{feature}
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Box style={{ flex: 1 }} />
|
||||
|
||||
<Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
|
||||
© 2026 Ethiopian Maritime Authority
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
{/* ---- Form panel ----------------------------------------------- */}
|
||||
<Center flex={1} p="xl">
|
||||
<Box w="100%" maw={420}>
|
||||
<Center hiddenFrom="md" mb="xl">
|
||||
<Box
|
||||
component="img"
|
||||
src="/ema-logo.png"
|
||||
alt="EMA Portal"
|
||||
style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
|
||||
/>
|
||||
</Center>
|
||||
{children}
|
||||
</Box>
|
||||
</Center>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user