add ema logo

2026-08-26 19:12:50 +00:00 · 2026-06-11 09:51:00 +00:00
parent 7373d2e006
commit 50ccf18081
8 changed files with 101 additions and 26 deletions
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -6,7 +6,9 @@
      "Bash(pkill -f \"vite\")",
      "Bash(node -e \"console.log\\(require\\('./node_modules/@mantine/core/package.json'\\).version\\)\")",
      "Bash(node_modules/.bin/tsc --noEmit -p apps/portal/tsconfig.app.json)",
-      "Bash(node_modules/.bin/tsc --noEmit -p apps/portal/tsconfig.json)"
+      "Bash(node_modules/.bin/tsc --noEmit -p apps/portal/tsconfig.json)",
+      "Bash(node_modules/.bin/tsc --noEmit -p tsconfig.json)",
+      "Bash(../../node_modules/.bin/tsc --noEmit -p tsconfig.json)"
    ]
  }
 }
--- a/apps/portal/index.html
+++ b/apps/portal/index.html
@@ -3,6 +3,8 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/brand/logo-mark.svg" />
    <title>EMA Portal</title>
    <script>
      // Apply the saved Mantine color scheme before paint to avoid a flash.
--- a/apps/portal/public/brand/logo-mark-white.svg
+++ b/apps/portal/public/brand/logo-mark-white.svg
@@ -0,0 +1,10 @@
+<!-- PLACEHOLDER app logo — white/mono mark for dark (gradient) backgrounds,
+     e.g. the auth brand panel. Replace this file (keep the same name/path). -->
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="EMA logo">
+  <rect width="48" height="48" rx="11" fill="#ffffff" />
+  <g transform="translate(12 12)" stroke="#3160b7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <circle cx="12" cy="5" r="2" />
+    <line x1="12" y1="22" x2="12" y2="7" />
+    <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
+  </g>
+</svg>
--- a/apps/portal/public/brand/logo-mark.svg
+++ b/apps/portal/public/brand/logo-mark.svg
@@ -0,0 +1,17 @@
+<!-- PLACEHOLDER app logo — color mark for light backgrounds. Replace this file
+     (keep the same name/path) with the real EMA mark. SVG or swap for PNG via
+     the LOGO map in src/app/components/Logo.tsx. -->
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="EMA logo">
+  <defs>
+    <linearGradient id="emaMark" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3160b7" />
+      <stop offset="1" stop-color="#1fc29d" />
+    </linearGradient>
+  </defs>
+  <rect width="48" height="48" rx="11" fill="url(#emaMark)" />
+  <g transform="translate(12 12)" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <circle cx="12" cy="5" r="2" />
+    <line x1="12" y1="22" x2="12" y2="7" />
+    <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
+  </g>
+</svg>
--- a/apps/portal/public/favicon.svg
+++ b/apps/portal/public/favicon.svg
@@ -0,0 +1,15 @@
+<!-- PLACEHOLDER favicon (browser tab). Replace with the real mark; keep name. -->
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="favMark" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3160b7" />
+      <stop offset="1" stop-color="#1fc29d" />
+    </linearGradient>
+  </defs>
+  <rect width="48" height="48" rx="11" fill="url(#favMark)" />
+  <g transform="translate(12 12)" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <circle cx="12" cy="5" r="2" />
+    <line x1="12" y1="22" x2="12" y2="7" />
+    <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
+  </g>
+</svg>
--- a/apps/portal/src/app/components/Logo.tsx
+++ b/apps/portal/src/app/components/Logo.tsx
@@ -0,0 +1,47 @@
+import { Box, type BoxProps } from '@mantine/core';
+
+/**
+ * App logo variants. Each maps to a file in `public/brand/` that is served at
+ * the site root by Vite. To swap the placeholder for the real artwork, just
+ * replace the file (keep the name) — or, if it's a PNG/other format, update the
+ * 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',
+} as const;
+
+export type LogoVariant = keyof typeof LOGO;
+
+interface LogoProps extends BoxProps {
+  /** Which artwork to render. Defaults to the full-colour mark. */
+  variant?: LogoVariant;
+  /** Rendered height (and width — the mark is square) in px. */
+  size?: number;
+  alt?: string;
+}
+
+/**
+ * The EMA app logo. A single source of truth for the brand mark so every
+ * surface (auth pages, portal header, V2 layout) stays in sync.
+ */
+export function Logo({
+  variant = 'color',
+  size = 40,
+  alt = 'EMA Portal',
+  ...boxProps
+}: LogoProps) {
+  return (
+    <Box
+      component="img"
+      src={LOGO[variant]}
+      alt={alt}
+      w={size}
+      h={size}
+      style={{ display: 'block', objectFit: 'contain', flexShrink: 0 }}
+      {...boxProps}
+    />
+  );
+}
--- a/apps/portal/src/app/features/auth/components/AuthShell.tsx
+++ b/apps/portal/src/app/features/auth/components/AuthShell.tsx
@@ -6,12 +6,12 @@ import {
  Group,
  Stack,
  Text,
-  ThemeIcon,
  Title,
  rem,
  useMantineTheme,
 } from '@mantine/core';
-import { IconAnchor, IconCheck } from '@tabler/icons-react';
+import { IconCheck } from '@tabler/icons-react';
+import { Logo } from '../../../components/Logo';

 const FEATURES = [
  'Submit applications online, 24/7',
@@ -20,8 +20,8 @@ const FEATURES = [
 ];

 /**
- * EMA brand mark — mirrors the logo used in the portal header
- * (gradient tile + anchor glyph). Use `variant="white"` on dark backgrounds.
+ * EMA brand mark — the app logo, kept in sync across the portal via `<Logo>`.
+ * Use `variant="white"` on dark backgrounds (e.g. the auth brand panel).
 */
 export function BrandMark({
  size = 44,
@@ -30,17 +30,7 @@ export function BrandMark({
  size?: number;
  variant?: 'gradient' | 'white';
 }) {
-  return (
-    <ThemeIcon
-      size={size}
-      radius="md"
-      variant={variant === 'white' ? 'white' : 'gradient'}
-      color={variant === 'white' ? 'emaPrimary' : undefined}
-      gradient={{ from: 'emaPrimary.7', to: 'emaTeal.5', deg: 135 }}
-    >
-      <IconAnchor size={Math.round(size * 0.52)} />
-    </ThemeIcon>
-  );
+  return <Logo variant={variant === 'white' ? 'white' : 'color'} size={size} />;
 }

 interface AuthShellProps {
--- a/apps/portal/src/app/layouts/PortalLayout.tsx
+++ b/apps/portal/src/app/layouts/PortalLayout.tsx
@@ -6,7 +6,6 @@ import {
  ScrollArea,
  Stack,
  Text,
-  ThemeIcon,
  Menu,
  Avatar,
  UnstyledButton,
@@ -23,11 +22,11 @@ import {
  IconHelpCircle,
  IconLogin,
  IconLogout,
-  IconAnchor,
  IconChevronRight,
 } from '@tabler/icons-react';
 import type { Icon } from '@tabler/icons-react';
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import { Logo } from '../components/Logo';
 import { useTranslation } from 'react-i18next';
 import { LanguageSwitcher } from '../components/LanguageSwitcher';
 import { ColorSchemeToggle } from '../components/ColorSchemeToggle';
@@ -84,14 +83,7 @@ export function PortalLayout() {
            <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
            <UnstyledButton onClick={() => go('/dashboard')}>
              <Group gap="xs" wrap="nowrap">
-                <ThemeIcon
-                  size={36}
-                  radius="md"
-                  variant="gradient"
-                  gradient={{ from: 'emaPrimary.7', to: 'emaPrimary.5', deg: 135 }}
-                >
-                  <IconAnchor size={22} />
-                </ThemeIcon>
+                <Logo variant="color" size={36} />
                <div>
                  <Text fw={700} lh={1.1}>
                    {t('app.name')}