From 081ff485faf8291603f814b57c950f673b379c98 Mon Sep 17 00:00:00 2001
From: Brent Perteet <brent.perteet@gmail.com>
Date: Sun, 23 Aug 2026 20:54:07 -0500
Subject: [PATCH] fix: correct UM portal branding asset

---
 web/components/Layout.tsx    |  13 ++++++++++---
 web/public/um-trace-mark.png | Bin 0 -> 4258 bytes
 web/styles/global.css        |  13 ++++++-------
 web/tests/s3-portal.test.mjs |  11 +++++++++++
 4 files changed, 27 insertions(+), 10 deletions(-)
 create mode 100644 web/public/um-trace-mark.png

diff --git a/web/components/Layout.tsx b/web/components/Layout.tsx
index cbf6fd0..be3e3ec 100644
--- a/web/components/Layout.tsx
+++ b/web/components/Layout.tsx
@@ -1,4 +1,5 @@
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ReactNode } from "react";
@@ -53,9 +54,15 @@ export default function Layout({
       </a>
       <header className="ul-shell__header">
         <Link href="/" className="ul-shell__brand" aria-label="UlHub jobs home">
-          <span className="ul-shell__brand-mark" aria-hidden="true">
-            UL
-          </span>
+          <Image
+            className="ul-shell__brand-mark"
+            src="/um-trace-mark.png"
+            alt=""
+            width={40}
+            height={40}
+            priority
+            unoptimized
+          />
           <span>UlHub</span>
         </Link>
         {user && (
diff --git a/web/public/um-trace-mark.png b/web/public/um-trace-mark.png
new file mode 100644
index 0000000000000000000000000000000000000000..3807f20ea2fc496ee7de305a037923d06591c985
GIT binary patch
literal 4258
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

literal 0
HcmV?d00001

diff --git a/web/styles/global.css b/web/styles/global.css
index 55e153b..9a5a7b2 100644
--- a/web/styles/global.css
+++ b/web/styles/global.css
@@ -131,16 +131,15 @@ textarea {
 }
 
 .ul-shell__brand-mark {
-  display: inline-grid;
+  display: block;
+  box-sizing: border-box;
   width: 2.5rem;
   height: 2.5rem;
-  place-items: center;
+  object-fit: contain;
+  padding: 0.375rem;
   border-radius: var(--portal-radius-sm);
-  background: var(--portal-primary);
-  color: var(--portal-on-primary);
-  font-family: var(--portal-font-mono);
-  font-size: 0.875rem;
-  letter-spacing: 0.04em;
+  border: 1px solid var(--portal-border);
+  background: var(--portal-surface);
 }
 
 .ul-shell__nav {
diff --git a/web/tests/s3-portal.test.mjs b/web/tests/s3-portal.test.mjs
index 6888e78..ea17164 100644
--- a/web/tests/s3-portal.test.mjs
+++ b/web/tests/s3-portal.test.mjs
@@ -58,6 +58,17 @@ test("the authenticated shell keeps organization and navigation context accessib
   assert.match(layout, /aria-current=/);
   assert.match(layout, /Skip to main content/);
   assert.match(layout, /aria-label="Primary navigation"/);
+  assert.match(layout, /src="\/um-trace-mark\.png"/);
+  assert.doesNotMatch(layout, />\s*UL\s*</);
+});
+
+test("the portal uses the cropped UM foreground without nested icon padding", () => {
+  const layout = read("components/Layout.tsx");
+  const css = read("styles/global.css");
+  assert.match(layout, /src="\/um-trace-mark\.png"/);
+  assert.doesNotMatch(layout, /um-trace-icon\.svg/);
+  assert.match(css, /\.ul-shell__brand-mark\s*\{[^}]*object-fit:\s*contain;/s);
+  assert.match(css, /\.ul-shell__brand-mark\s*\{[^}]*padding:\s*0\.375rem;/s);
 });
 
 test("status presentation always combines a readable label with an icon", () => {