feat(templates): integrate brand logo and favicons#237
Merged
Conversation
- Add brand icon, light/dark logos, and PNG app icon as embedded static assets - Replace the legacy favicon with the new branded icon - Add favicon, SVG icon, apple-touch-icon, and theme-color tags to the page head - Show the brand mark beside the wordmark in the navbar - Swap the placeholder login glyph for the brand icon with a tinted drop-shadow - Add a hero logo with light/dark switching to the README Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR integrates AuthGate’s updated brand assets into the UI and repository docs by adding new logo/icon images, updating login + navbar visuals to use the brand mark, and enhancing the HTML <head> with favicon/app-icon metadata.
Changes:
- Add new brand SVG assets (logo light/dark + icon) and update README with a light/dark-switching hero logo.
- Update navbar and login templates/CSS to display the new brand icon with drop-shadow styling.
- Add favicon + app icon
<link>tags andtheme-colormetadata to the shared layout head.
Reviewed changes
Copilot reviewed 7 out of 14 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| README.md | Adds a centered hero logo with light/dark <picture> switching. |
| internal/templates/static/images/authgate-logo.svg | Adds light theme SVG logo asset for embedded static serving. |
| internal/templates/static/images/authgate-logo-dark.svg | Adds dark theme SVG logo asset for embedded static serving. |
| internal/templates/static/images/authgate-icon.svg | Adds SVG brand icon asset for embedded static serving. |
| internal/templates/static/css/pages/login.css | Updates login brand icon sizing and applies drop-shadow styling. |
| internal/templates/static/css/components/navbar.css | Updates navbar brand layout to include a brand mark + drop-shadow. |
| internal/templates/static/css/components/dark-mode.css | Removes dark-mode overrides for the login brand icon. |
| internal/templates/navbar_component.templ | Renders the brand mark SVG next to the AuthGate wordmark in the navbar. |
| internal/templates/login_page.templ | Replaces the legacy login glyph with the new brand icon SVG. |
| internal/templates/layout_component.templ | Adds favicon/app icon <link> tags and theme-color metadata. |
| images/authgate-logo.svg | Adds light theme SVG logo for README rendering. |
| images/authgate-logo-dark.svg | Adds dark theme SVG logo for README rendering. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
402
to
403
| /* Login brand icon — use theme primary color token instead of hardcoded rgba() */ | ||
| [data-theme="dark"] .login-brand-icon { | ||
| /* Fallbacks for browsers without color-mix() support */ | ||
| background: linear-gradient(135deg, var(--color-primary-pale), rgba(88, 166, 255, 0.12)); | ||
| border-color: rgba(88, 166, 255, 0.2); | ||
| /* Enhanced versions using theme token; override fallback when supported */ | ||
| background: linear-gradient( | ||
| 135deg, | ||
| var(--color-primary-pale), | ||
| color-mix(in srgb, var(--color-primary) 12%, transparent) | ||
| ); | ||
| border-color: color-mix(in srgb, var(--color-primary) 20%, transparent); | ||
| } | ||
|
|
||
| /* Login security label — derive border/bg from theme primary color token */ |
| <path d="M18 19V16C18 12.69 20.69 10 24 10C27.31 10 30 12.69 30 16V19" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path> | ||
| <circle cx="24" cy="24" r="1.5" fill="currentColor"></circle> | ||
| <line x1="24" y1="25.5" x2="24" y2="27.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line> | ||
| <svg width="56" height="56" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" focusable="false"> |
Comment on lines
+11
to
+15
| <svg width="32" height="32" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" focusable="false"> | ||
| <defs> | ||
| <linearGradient id="navbar-ag-bg" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse"> | ||
| <stop offset="0" stop-color="#00C8E8"></stop> | ||
| <stop offset="1" stop-color="#0077A8"></stop> |
Comment on lines
+16
to
+20
| <defs> | ||
| <linearGradient id="login-ag-bg" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse"> | ||
| <stop offset="0" stop-color="#00C8E8"></stop> | ||
| <stop offset="1" stop-color="#0077A8"></stop> | ||
| </linearGradient> |
Comment on lines
+25
to
+27
| <link rel="icon" href="/favicon.ico" sizes="any"/> | ||
| <link rel="icon" type="image/svg+xml" href="/static/images/authgate-icon.svg"/> | ||
| <link rel="apple-touch-icon" href="/static/images/favicon-512x512.png"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Integrates the official AuthGate brand assets (from
files/) into both the web UI and the README./static/images/)favicon.ico(519B)<link rel="icon">(.ico+ SVG),apple-touch-icon, andtheme-color(#0095C4) to the page<head>drop-shadow<picture>switching to the READMEDesign notes
filter: drop-shadow()is used instead ofbox-shadowso the shadow follows the rounded silhouette; redundantborder-radiuson the SVGs was dropped.Verification
make generate+make buildpass/favicon.ico(image/x-icon, 519B),authgate-icon.svg,favicon-512x512.png, and the logos all return 200🤖 Generated with Claude Code