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

194
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 * Two-pane auth card: a centered card with a form panel (left) and a branded
* form pane. Standalone (rendered outside the portal chrome and i18n provider), * gradient panel (right, hidden below `lg`). Inspired by the UM login layout.
* so copy here is plain English to match the other auth pages.
*/ */
export function AuthShell({ export function AuthShell({
children, children,
@@ -53,104 +52,115 @@ export function AuthShell({
const heroGradient = theme.other.heroGradient as string; const heroGradient = theme.other.heroGradient as string;
return ( return (
<Flex mih="100vh"> <Flex
{/* ---- Brand panel ---------------------------------------------- */} mih="100vh"
align="center"
justify="center"
style={{ background: '#f7f8fa' }}
p="md"
>
<Box <Box
visibleFrom="md" mx="auto"
w={500} maw={1280}
p={48} w="100%"
pos="relative" bg="white"
style={{ background: heroGradient, overflow: 'hidden' }} p={12}
style={{
borderRadius: rem(16),
boxShadow: '0 20px 60px rgba(0,0,0,0.15)',
overflow: 'hidden',
}}
> >
{/* Decorative blurred orbs for depth */} <Flex direction={{ base: 'column', lg: 'row' }}>
<Box {/* ---- Form panel (left) ---------------------------------------- */}
pos="absolute" <Box
top={-120} w={{ base: '100%', lg: '50%' }}
right={-80} px="xl"
w={360} py={32}
h={360} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }} >
/> {children}
<Box </Box>
pos="absolute"
bottom={-140}
left={-100}
w={320}
h={320}
style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
/>
<Flex {/* ---- Brand panel (right) -------------------------------------- */}
direction="column" <Box
h="100%" visibleFrom="lg"
pos="relative" w="50%"
style={{ zIndex: 1 }} p="lg"
> pos="relative"
<Box style={{ flex: 1 }} /> 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}> <Stack
<Center> gap="lg"
<Box pos="relative"
component="img" style={{ zIndex: 1 }}
src="/brand/ema-white.png" h="100%"
alt="EMA Portal" justify="center"
style={{ display: 'block', maxWidth: '100%', height: 'auto' }} >
/> <Center>
</Center> <Box
component="img"
src="/brand/ema-white.png"
alt="EMA Portal"
style={{ display: 'block', maxWidth: '60%', height: 'auto' }}
/>
</Center>
<Stack gap="sm"> <Stack gap={6}>
<Title order={1} c="white" fz={rem(36)} lh={1.15} fw={700}> <Title order={2} c="white" fz={rem(28)} lh={1.2} fw={700}>
{brandTitle} {brandTitle}
</Title> </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} {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> </Text>
</Stack> </Stack>
</Box>
<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>
</Flex> </Flex>
</Box> </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> </Flex>
); );
} }