fix: correct UM portal branding asset

This commit is contained in:
Brent Perteet
2026-08-23 20:54:07 -05:00
parent d0b2f28762
commit 081ff485fa
4 changed files with 27 additions and 10 deletions

View File

@@ -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 && (

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -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 {

View File

@@ -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", () => {