[PR #1452] [MERGED] Fix dark-mode shield + dedup About paper CTA #9121

New Issue

GiteaMirror · 2026-05-03T01:21:42-05:00

GiteaMirror commented

2026-05-03 01:21:42 -05:00

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1452
Author: @profvjreddi
Created: 4/22/2026
Status: ✅ Merged
Merged: 4/22/2026
Merged by: @profvjreddi

Base: dev ← Head: fix/dark-shield-and-about-dedup

📝 Commits (2)

00fe6f7 fix(brand): make SEAS shield PNG transparent so it works in dark mode
3edbddb fix(staffml/about): drop duplicate "Read the Research Paper" CTA

📊 Changes

5 files changed (+15 additions, -20 deletions)

View changed files

📝 book/quarto/assets/images/icons/logo-seas-shield.png (+0 -0)
📝 interviews/staffml/public/logo-seas-shield.png (+0 -0)
📝 interviews/staffml/src/app/about/page.tsx (+14 -19)
📝 shared/assets/img/logo-seas-shield.png (+0 -0)
📝 shared/scripts/sync-mirrors.sh (+1 -1)

📄 Description

Summary

Two related polish fixes the user flagged on the StaffML site:

1. Shield logo had a white box around it in dark mode

The canonical shared/assets/img/logo-seas-shield.png shipped as RGB no-alpha with white pixels in the rectangular bleed around the curved shield outline. In light mode the white was invisible against light navbar bgs; in dark mode it rendered as a stark white tile around the shield (clearly visible on StaffML's dark navbar at the small 28px brand size).

Flood-filled the exterior white from the corners with PIL and saved as RGBA. The interior white "VERITAS" books are isolated from the corners by the shield's black border and so are preserved (they are the actual design, not background bleed).

Also added interviews/staffml/public/logo-seas-shield.png to sync-mirrors.sh so the StaffML mirror stays in lockstep with the canonical asset on future regenerations.

Before / after (StaffML dark navbar, zoomed):

Before: visible white tile bordering the shield.
After: shield blends seamlessly into the dark #212529 navbar.

2. `/about` had two competing "Read the paper" surfaces

The page had:

<PaperCitationCard /> at the top (above the fold, PDF + BibTeX). Phase 6 academic-citation entry point.
A second large bordered "Read the Research Paper" CTA card inside the "How Questions Are Built" section, with effectively the same pitch in different words.

Replaced the bottom card with a single inline link inside the methodology prose ("…is described in our paper"). This preserves the in-context pointer (this section IS the methodology) without the duplicate visual surface. Also drops the now-unused FileText import.

Test plan

npm run build passes; out/logo-seas-shield.png reports 8-bit/color RGBA.
npx tsc --noEmit passes (no type errors from the import drop).
Local Playwright probe: dark / body bg = #111117, shield URL loads, navbar visually clean (no white tile).
Local Playwright probe on /about.html: exactly one "read the paper" headline (the top card) and two StaffML-Paper.pdf links (top "Download PDF" button + new inline "our paper").
pre-commit hooks pass on both commits (codespell, mirror-sync check, etc.).
Production verify after merge: dark-mode StaffML home shield, /about paper-card count.

Scope notes

The shield change touches the canonical asset so it benefits every site that consumes the shared SEAS shield (book/Quarto vol1/vol2 mirrors are auto-synced via sync-mirrors.sh). Light-mode rendering is unchanged because the now-transparent pixels were previously white-on-white anyway, so there is no Quarto regression risk.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1452 **Author:** [@profvjreddi](https://github.com/profvjreddi) **Created:** 4/22/2026 **Status:** ✅ Merged **Merged:** 4/22/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/dark-shield-and-about-dedup` --- ### 📝 Commits (2) - [`00fe6f7`](https://github.com/harvard-edge/cs249r_book/commit/00fe6f7dd16f602c7be96414a2125e8a13ef2f5c) fix(brand): make SEAS shield PNG transparent so it works in dark mode - [`3edbddb`](https://github.com/harvard-edge/cs249r_book/commit/3edbddbdddc6ca840d634fb11dc69c6b0012c1c2) fix(staffml/about): drop duplicate "Read the Research Paper" CTA ### 📊 Changes **5 files changed** (+15 additions, -20 deletions) <details> <summary>View changed files</summary> 📝 `book/quarto/assets/images/icons/logo-seas-shield.png` (+0 -0) 📝 `interviews/staffml/public/logo-seas-shield.png` (+0 -0) 📝 `interviews/staffml/src/app/about/page.tsx` (+14 -19) 📝 `shared/assets/img/logo-seas-shield.png` (+0 -0) 📝 `shared/scripts/sync-mirrors.sh` (+1 -1) </details> ### 📄 Description ## Summary Two related polish fixes the user flagged on the StaffML site: ### 1. Shield logo had a white box around it in dark mode The canonical `shared/assets/img/logo-seas-shield.png` shipped as **RGB no-alpha** with white pixels in the rectangular bleed around the curved shield outline. In light mode the white was invisible against light navbar bgs; in dark mode it rendered as a stark white tile around the shield (clearly visible on StaffML's dark navbar at the small 28px brand size). Flood-filled the exterior white from the corners with PIL and saved as **RGBA**. The interior white "VERITAS" books are isolated from the corners by the shield's black border and so are preserved (they are the actual design, not background bleed). Also added `interviews/staffml/public/logo-seas-shield.png` to `sync-mirrors.sh` so the StaffML mirror stays in lockstep with the canonical asset on future regenerations. **Before / after** (StaffML dark navbar, zoomed): - Before: visible white tile bordering the shield. - After: shield blends seamlessly into the dark `#212529` navbar. ### 2. `/about` had two competing "Read the paper" surfaces The page had: 1. `<PaperCitationCard />` at the top (above the fold, PDF + BibTeX). Phase 6 academic-citation entry point. 2. A second large bordered "Read the Research Paper" CTA card inside the "How Questions Are Built" section, with effectively the same pitch in different words. Replaced the bottom card with a single inline link inside the methodology prose (*"…is described in [our paper](…)"*). This preserves the in-context pointer (this section IS the methodology) without the duplicate visual surface. Also drops the now-unused `FileText` import. ## Test plan - [x] `npm run build` passes; `out/logo-seas-shield.png` reports `8-bit/color RGBA`. - [x] `npx tsc --noEmit` passes (no type errors from the import drop). - [x] Local Playwright probe: dark `/` body bg = `#111117`, shield URL loads, navbar visually clean (no white tile). - [x] Local Playwright probe on `/about.html`: exactly **one** "read the paper" headline (the top card) and **two** `StaffML-Paper.pdf` links (top "Download PDF" button + new inline "our paper"). - [x] `pre-commit` hooks pass on both commits (codespell, mirror-sync check, etc.). - [ ] Production verify after merge: dark-mode StaffML home shield, `/about` paper-card count. ## Scope notes The shield change touches the **canonical** asset so it benefits every site that consumes the shared SEAS shield (book/Quarto vol1/vol2 mirrors are auto-synced via `sync-mirrors.sh`). Light-mode rendering is unchanged because the now-transparent pixels were previously white-on-white anyway, so there is no Quarto regression risk. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-05-03 01:21:42 -05:00

GiteaMirror closed this issue

2026-05-03 01:21:43 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#9121

[PR #1452] [MERGED] Fix dark-mode shield + dedup About paper CTA #9121