Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-09-07 18:55:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/pencil-design' of github.com:Tria-plc/emaui into feature/pencil-design

Browse Source
This commit is contained in:
Mengisteab
2026-06-12 06:01:52 +00:00
parent c3f1c5b6a8 01e7b9073e
commit ab7ecd351f
9 changed files with 24 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/portal/src/app/components/Logo.tsx
View File

@@ -7,10 +7,8 @@ import { Box, type BoxProps } from '@mantine/core';
* path here.
*/
const LOGO = {
/** Full-colour mark, for light surfaces (portal header, mobile auth header). */
color: '/brand/logo-mark.svg',
/** White/mono mark, for dark surfaces (the auth brand panel). */
white: '/brand/logo-mark-white.svg',
color: '/ema-logo.png',
white: '/brand/ema-white.png',
} as const;
export type LogoVariant = keyof typeof LOGO;

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

@@ -82,24 +82,22 @@ export function AuthShell({
<Flex
direction="column"
justify="space-between"
h="100%"
pos="relative"
style={{ zIndex: 1 }}
>
<Group gap="sm" wrap="nowrap">
<BrandMark variant="white" size={46} />
<div>
<Text c="white" fw={700} fz="lg" lh={1.1}>
EMA Portal
</Text>
<Text fz="xs" lh={1.2} style={{ color: 'rgba(255,255,255,0.75)' }}>
Ethiopian Maritime Authority
</Text>
</div>
</Group>
<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' }}
/>
</Center>
<Stack gap="sm">
<Title order={1} c="white" fz={rem(36)} lh={1.15} fw={700}>
{brandTitle}
@@ -131,6 +129,8 @@ export function AuthShell({
</Stack>
</Stack>
<Box style={{ flex: 1 }} />
<Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
© 2026 Ethiopian Maritime Authority
</Text>
@@ -140,12 +140,14 @@ export function AuthShell({
{/* ---- Form panel ----------------------------------------------- */}
<Center flex={1} p="xl">
<Box w="100%" maw={420}>
<Group hiddenFrom="md" gap="sm" mb="xl">
<BrandMark size={40} />
<Text fw={700} fz="lg">
EMA Portal
</Text>
</Group>
<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>