Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

update the design according to the iam module

Browse Source
This commit is contained in:
mengstabketemaw
2026-06-13 10:20:42 +03:00
parent 01c10777e5
commit cf72572944
1 changed files with 102 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
apps/portal/src/app/features/auth/components/AuthShell.tsx
View File

@@ -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,73 +52,100 @@ 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}
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',
}}
>
<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>
{/* ---- Brand panel (right) -------------------------------------- */}
<Box
visibleFrom="lg"
w="50%"
p="lg"
pos="relative"
style={{ background: heroGradient, overflow: 'hidden' }}
>
{/* Decorative blurred orbs for depth */}
{/* Decorative blurred orbs */}
<Box
pos="absolute"
top={-120}
right={-80}
w={360}
h={360}
top={-80}
right={-40}
w={240}
h={240}
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }}
/>
<Box
pos="absolute"
bottom={-140}
left={-100}
w={320}
h={320}
bottom={-80}
left={-60}
w={220}
h={220}
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
/>
<Flex
direction="column"
h="100%"
<Stack
gap="lg"
pos="relative"
style={{ zIndex: 1 }}
h="100%"
justify="center"
>
<Box style={{ flex: 1 }} />
<Stack gap="xl" maw={400}>
<Center>
<Box
component="img"
src="/brand/ema-white.png"
alt="EMA Portal"
style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
style={{ display: 'block', maxWidth: '60%', height: 'auto' }}
/>
</Center>
<Stack gap="sm">
<Title order={1} c="white" fz={rem(36)} lh={1.15} fw={700}>
<Stack gap={6}>
<Title order={2} c="white" fz={rem(28)} lh={1.2} fw={700}>
{brandTitle}
</Title>
<Text fz="md" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
<Text fz="sm" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
{brandSubtitle}
</Text>
</Stack>
<Stack gap="md">
<Stack gap="sm">
{FEATURES.map((feature) => (
<Group key={feature} gap="sm" wrap="nowrap">
<Center
w={24}
h={24}
w={22}
h={22}
style={{
borderRadius: '50%',
background: 'rgba(255,255,255,0.2)',
flexShrink: 0,
}}
>
<IconCheck size={14} color="white" stroke={2.4} />
<IconCheck size={12} color="white" stroke={2.4} />
</Center>
<Text c="white" fz="sm" fw={500}>
{feature}
@@ -127,30 +153,14 @@ export function AuthShell({
</Group>
))}
</Stack>
</Stack>
<Box style={{ flex: 1 }} />
<Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
© 2026 Ethiopian Maritime Authority
</Text>
</Stack>
</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>
);
}