Skip to content

Redesign UI to match cert-observatory look and feel#12

Draft
JaredHatfield with Copilot wants to merge 3 commits into
mainfrom
copilot/update-app-look-and-feel
Draft

Redesign UI to match cert-observatory look and feel#12
JaredHatfield with Copilot wants to merge 3 commits into
mainfrom
copilot/update-app-look-and-feel

Conversation

Copilot AI commented Feb 28, 2026

Copy link
Copy Markdown
Contributor

Overhaul the certsummary UI to visually align with the companion app cert-observatory. All existing functionality (client-side decoding, URL fragment sharing, crt.sh cross-referencing) is preserved.

Changes

  • Layout: Side-by-side panels → panel-based responsive grid with header/content/footer structure
  • Color scheme: Blue accents (#3b82f6) → orange accents (#ea580c/#f97316) with gradient background
  • Certificate details: HTML table → detail-grid card layout with PEM column, copy button, and color-coded validity dates
  • SANs: Bulleted list → pill components
  • Empty state: Plain text → shield icon with prompt
  • Info panel: Inline paragraph → structured "How it works" list with icons
  • Accessibility: aria-hidden on decorative SVGs, aria-label on buttons, minimum font sizes ≥ 0.625rem

Before

Before

After (empty)

After empty

After (certificate decoded)

After decoded


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 2 commits February 28, 2026 02:42
- Replace blue navbar with orange-accented header matching cert-observatory branding
- Use gradient background (slate-100 via blue-50) instead of flat gray
- Replace side-by-side layout with panel-based grid layout
- Replace table-based cert details with detail-grid card layout
- Add PEM display column with copy button in cert card
- Use SAN pills instead of bulleted list
- Add colored validity indicators (green/red for dates)
- Update footer to use orange accent links
- Add informational panel explaining how the app works
- Add empty state with shield icon placeholder
- Keep all existing functionality (URL hash sharing, crt.sh links, etc.)

Co-authored-by: JaredHatfield <208119+JaredHatfield@users.noreply.github.com>
…aria-label)

Co-authored-by: JaredHatfield <208119+JaredHatfield@users.noreply.github.com>
Copilot AI changed the title [WIP] Update look and feel to match cert-observatory Redesign UI to match cert-observatory look and feel Feb 28, 2026
@JaredHatfield JaredHatfield moved this from Todo to In Progress in UnitVectorY Labs Apr 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: In Progress

Development

Successfully merging this pull request may close these issues.

2 participants