Repository navigation
Add the TACC branding strip, the footer and the dark header to ui-react #206
Description
Part of #79.
Question
Add the TACC and UT Austin chrome to ui-react, behind a runtime switch.
Today the flip in #77 drops the co-branding that mint.tacc.utexas.edu shows now.
ui-react renders the stock shadcn slate palette. It has no branding strip and no footer.
tailwind.config.ts:14 calls those slate values "TACC brand tokens (stubs)". They are not.
What Lit ships
Measured in mint-ui-lit, src/app/mint-app.ts
and src/components/my-footer.ts:
| Surface | Values |
|---|---|
| Branding strip | #222222, 50px, centred, logos 24px, white separator 1px, white bottom border |
| Nav bar | #222222, white text, 50px, bottom border 1px solid #7F7F7F, Roboto 13px/400 |
| Footer | #222222, 50px, right aligned, text #888888, "Powered by MINT" link |
Decisions
A /wayfinder grilling session settled these. Do not re-open them here.
- Chrome only. Add the strip, add the footer, and repaint the existing
Headerdark.
TheSidebarstays light. Do not adopt Lit's top nav. Do not reshapeAppShell. - Runtime switch. One flat string key,
BRANDING, valuestaccornone.
The default isnone. An unbranded deployment must be the default, not an accident.
The logo paths, link targets and alt text live in the app as a named preset. They do
not live in the config. This keeps the alt text under code review. - Chrome-scoped CSS variables only. Do not repoint
--primaryor any other shadcn
token. That recolours every button, badge and focus ring, and it is out of scope. - Copy the two PNG files from
mint-ui-lit/src/assets/images/intoui-react/public/images/.
Do not wait for the brand guidelines. See the research ticket. - Footer position. Pin it to the bottom of the viewport, as a sibling of the content row.
AppShellalready owns the full height, so the scroll container does not change.
Work
AppShell.tsx— add the strip aboveHeader, add the footer below the content row.- New
BrandingStripandFootercomponents insrc/components/layout/. BRANDINGin all four config files. They must stay in step:
src/vite-env.d.ts,scripts/generate-env-config.mjs,scripts/generate-env-config.d.ts,
public/env-config.js.- Correct the wrong comment at
tailwind.config.ts:14.
Acceptance
- Tests assert that the strip and the footer render under
BRANDING=tacc, and that the
strip does not render undernoneor when the key is absent. Shipping UT logos to ISI
is the one failure here with real consequences. - Max compares the result side by side against the live Lit app.
Activity
mosoriob commentedon Sep 1, 2026
Two corrections from #205. Apply them
while building. Do not re-open the decisions.
1. Logo height is 28px, not 24px. UT's minimum size rule governs shield height, not
image height. At
height:24pxthe shield renders 21.7px against a 25px minimum.28pxclearsit and still fits the 50px strip.
2. Separator margin is 17px, not 15px. Required side clearance equals the shield width,
16.9px.
Everything else in the table above is confirmed correct. #205 measured TACC's own live
stylesheet:
height:50px, background#222, centred,--branding-logo-height— the strip inmint-app.tsis a copy of TACC'sbranding-header, so those values are TACC's, not MINT'sinvention.
The two PNGs are byte-identical to the files TACC serves today, so copy them with
confidence. No permission is needed.
Optional, if it is cheap:
tacc-white.pngis 100x30 shown at ~80x24, so it is soft on aretina screen. TACC serves a vector of its own at
https://tacc.utexas.edu/static/site_cms/img/org_logos/tacc-formal.svg, drawn withfill="currentColor", so it turns white from CSS. Take it or leave it. There is no UT SVG —only EPS and PDF.
Chart and values work moved to #207. This
ticket is
ui-reactonly.mosoriob commentedon Sep 1, 2026
Built in #209.
What shipped
BrandingStripabove the header,Footerbelow the content row,Headerrepainted dark. TheSidebarstays light,AppShellkeeps its shape.BRANDINGin all four config files, defaultnone. The preset lives insrc/lib/branding.ts..mint-chrome. No shadcn token moved.mint-ui-litintoui-react/public/images/.tailwind.config.ts:14is corrected.Both corrections from #205 are applied: 28px logos, 17px separator margin.
Acceptance
Tests assert the strip renders under
taccand does not render undernone, under an absent key, or under any other value. 950 tests pass; build and lint are clean. I rendered it at 1280x800 and the chrome is right.The side-by-side against the live Lit app is still open — that is yours.
One thing to decide
Roboto is not bundled. The chrome asks for it and falls back to the platform sans. A Google Fonts link would match Lit exactly but adds a third-party request to an app that also runs in-cluster. I left it out. Say if you want it.
I left the optional
tacc-formal.svgswap out too, to keep the diff to the PNGs you confirmed.