Admin: Header theme, remove darkmode toggle & breadcrumb theme #2773

machikoyasuda · 2025-03-20T19:59:19Z

closes #2738
closes #2739
closes #2742

What this PR does, in order

Delete unnecessary templates
Removes dark mode, in 1 spot only: in base.html
Favicon, Branding (logo icons), Bootstrap CSS, Styles (old code), Theme (new code), Analytics and are declared in 1 spot: in base.html
Universal header: All admin pages have the same header. The only new HTML necessary to make this happen is branding.html. It is used on all pages, including login/log out, agency flows and Django admin pages, to add the logo images to the header. The rest of the header is the default.
Breadcrumb colors added to theme
How overriding works, as demonstrated with branding.html across 2 different template styles: The theme.css file uses a body class, CSS variables to add per-page/per-template styling. For example, although all pages have the logo image, the login/log out page's logo size is different. That is declared in the theme.css file.

Notes

The goal of this overall effort is to have:

A theme.css file that gives the admin the look of the header that has been designed on Figma.
Demonstrate how to write the theme.css file in various scenarios.
Avoid writing HTML for Django header overrides like Admin: Header and Theme Toggle #2766 did.

This PR does not achieve:

Pixel perfect comps from Figma, but gets pretty close within constraints (like not changing to Noto yet, not touching button CSS).
Some things are impossible to change - like, there is no way to add spacing after the Welcome, username. There is no way to remove the View site link (in a clean way - there are hacky ways to remove this with CSS, probably).

The way I'd like to move forward after the primitives Design work (#2648) on Admin is done, is to slowly move code from styles.css into theme.css.

Page-specific changes

Logged out

Entirely refactors logged_out template to be a lot simpler.
logged_out template now inherits from login.html.

Log in / Logged out

Adds border

Django admin

Adds universal header.
Fixes any weird Bootstrap regressions

In-person flow

Adds universal header
Adds a few Bootstrap font utility classes to get the title font sizes right.
Future work necessary to get buttons sized right.

Documentation of best practices

Get the override blocks in order. Easier to read. Then all pages have the blocks in the same order. For example, the title block should come before the body block.
When setting a variable override, comment how it is being used https://github.com/cal-itp/benefits/pull/2773/files#diff-cb8b26fb41fa3037fd9dc5ddd0f9cbea93abff15ad8e73277040466c189dd8f2R3-R18

github-actions · 2025-03-20T19:59:43Z

Coverage report

This PR does not seem to contain any modification to coverable code.

machikoyasuda · 2025-03-21T00:07:26Z

@thekaveman New PR is up, based on what we discussed today.

Started drafting but did not complete a README.md. I wanted to see how this PR lands first with everyone.

machikoyasuda · 2025-03-21T00:08:15Z

benefits/templates/admin/base_site.html

-{% extends "admin/base_site.html" %}
+{% extends "admin/base.html" %}

-{% block extrahead %}
-  {% include "admin/includes/favicon.html" %}
-{% endblock extrahead %}


Originally had intended to delete this file entirely, but all of the Admin app won't get this new branding unless we override this here as well.

I guess I don't fully understand the difference between admin/base.html and admin/base_site.html and why we need both? But I can leave that aside for the moment.

My main question is, if admin/base_site.html (this template) extends admin/base.html (our custom version of that template) -- then why do we need the same {% block branding %} here?

I.e. maybe it is enough to just have this template {% extends "admin/base.html" %} and that's all?

I will try this!

Deleting the base_site.html file entirely leads to this:

Keeping base_site.html but taking out the branding override behaves as expected. The branding override inherits from our base.html.

@thekaveman Fixed here: 1dca839

machikoyasuda · 2025-03-21T00:09:22Z

benefits/static/css/admin/theme.css

+  --primary: #ffffff;
+  --bs-body-font-size: 1rem;
+  --bs-body-color: #212121; /* Body text color */
+  --bs-dark-rgb: 33, 33, 33; /* Background color for Header */
+  --bs-heading-color: #212121; /* Header text color */
+  --bs-secondary-bg-subtle: #f1f1f1; /* Background color for Admin, lighter than bs-secondary, used with bg-secondary-subtle */
+  --bs-secondary-rgb:
+    210, 210, 210; /* Border color for Admin, used with border-secondary */
+  --bs-secondary: #c5c4c4;
+}


I am leaving this as is, but wanted to note that I'm still noodling with how to format this better overall. In the future, I may explore separating out the Bootstrap variables from Django, etc. It's all still a little overwhelming to have all the variables from variables.css and these hanging over our heads on this app. Hard to have a mental model about it. This will be improved in future refactors once #2648 is done.

machikoyasuda · 2025-03-21T00:11:14Z

benefits/static/css/admin/theme.css

+/* Login page */
+
+.login .main {
+  border: 1px solid #000000;


Opted not to use a variable here, b/c it's not being repeated everywhere. Again, will be improved when #2648 is done.

machikoyasuda · 2025-03-25T18:07:17Z

Known small visual things (not quite bugs), but can be fixed in future tickets during Slush:

Hovering over the Log out button moves the text up oe pixel Appears on both sides of admin.
Button font size is too big. It is 20px (which is what it is on Benefits), but should be 16px as per Figma.

I can create tickets for these as soon as this PR is merged.

thekaveman

This looks great. We're getting closer to a true "admin theme".

machikoyasuda self-assigned this Mar 20, 2025

github-actions bot added deployment-dev [auto] Changes that will trigger a deploy if merged to dev front-end HTML/CSS/JavaScript and Django templates labels Mar 20, 2025

machikoyasuda changed the title ~~Big WIP~~ Admin: Header and theme toggle Mar 20, 2025

machikoyasuda mentioned this pull request Mar 20, 2025

Admin: Breadcrumb colors #2775

Merged

machikoyasuda changed the title ~~Admin: Header and theme toggle~~ Admin: Header theme and remove darkmode toggle Mar 20, 2025

machikoyasuda marked this pull request as ready for review March 21, 2025 00:06

machikoyasuda requested a review from a team as a code owner March 21, 2025 00:06

machikoyasuda commented Mar 21, 2025

View reviewed changes

thekaveman mentioned this pull request Mar 21, 2025

Admin: organize distinct app components #2778

Open

4 tasks

thekaveman added this to the Benefits admin tool (app components) milestone Mar 24, 2025

machikoyasuda added 15 commits March 25, 2025 17:44

refactor(admin): remove favicon.html template

60fd65b

refactor(admin): remove style-admin

1522454

refactor(admin): delete usertools tempalte

89b36cf

refactor(login): remove favicon, inherits from base_site

f851047

refactor(admin): put darkmode override in base_site only

1a9b891

refactor(admin): rewrite logged_out, inherit from login

ce6495b

refactor(base): change base_site to base, remove favicon include

dd75020

fix: formatting override style - darkmode, style, head

7e5926b

refactor(agency-base): delete unnecessary overrides

ca6383e

refactor(agency-base): order overrides in order of code

ad48402

feat(base): move base css overrides into base

f36a68d

feat(admin): start theme.css

54117d5

refactor(theme): move logo sizing into theme.css

87b714c

feat(header): make header bg black

e88d3f9

fix(admin): bring back base_site for branding override

c02c86a

machikoyasuda added 14 commits March 25, 2025 17:44

refactor(header): consolidate header css into theme

b066e5e

refactor(admin): all h1 starts same spot

0ede999

refactor(header): match typefaces to figma

7180434

refactor(theme): reorganize page

3f31af4

feat(header): site name is bold

f0036da

feat(login): add black border

d5ae015

fix(branding): add margin/sizing on all pages

c91c703

fix(agency): make minor changes to agency flow for fonts

10d4404

fix: add 1-off code for regression from bootstrap

3d1caab

refactor(header): prefer code in css rather than class

8035021

fix(login): fix login/header margins

1c6cd3e

fix(logged_out): add title

02b42b2

fix(agency): lowercase P

82b41ab

feat(theme): add breadcrumb colors and spacing

51604a0

machikoyasuda force-pushed the feat/2739-admin--theme-refactor branch from f17aba6 to 51604a0 Compare March 25, 2025 17:44

machikoyasuda changed the title ~~Admin: Header theme and remove darkmode toggle~~ Admin: Header theme, remove darkmode toggle & breadcrumb theme Mar 25, 2025

refactor(base_site): inherit branding from bases

1dca839

machikoyasuda requested a review from thekaveman March 25, 2025 22:53

thekaveman approved these changes Mar 26, 2025

View reviewed changes

machikoyasuda merged commit e02c4f2 into main Mar 27, 2025
9 checks passed

machikoyasuda deleted the feat/2739-admin--theme-refactor branch March 27, 2025 16:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Admin: Header theme, remove darkmode toggle & breadcrumb theme #2773

Admin: Header theme, remove darkmode toggle & breadcrumb theme #2773

machikoyasuda commented Mar 20, 2025 •

edited

Loading

github-actions bot commented Mar 20, 2025 •

edited

Loading

machikoyasuda commented Mar 21, 2025

machikoyasuda Mar 21, 2025

thekaveman Mar 21, 2025 •

edited

Loading

machikoyasuda Mar 25, 2025

machikoyasuda Mar 25, 2025

machikoyasuda Mar 25, 2025

machikoyasuda Mar 21, 2025 •

edited

Loading

machikoyasuda Mar 21, 2025

machikoyasuda commented Mar 25, 2025

thekaveman left a comment

Admin: Header theme, remove darkmode toggle & breadcrumb theme #2773

Admin: Header theme, remove darkmode toggle & breadcrumb theme #2773

Conversation

machikoyasuda commented Mar 20, 2025 • edited Loading

What this PR does, in order

Notes

Page-specific changes

Logged out

Log in / Logged out

Django admin

In-person flow

Documentation of best practices

github-actions bot commented Mar 20, 2025 • edited Loading

Coverage report

machikoyasuda commented Mar 21, 2025

machikoyasuda Mar 21, 2025

Choose a reason for hiding this comment

thekaveman Mar 21, 2025 • edited Loading

Choose a reason for hiding this comment

machikoyasuda Mar 25, 2025

Choose a reason for hiding this comment

machikoyasuda Mar 25, 2025

Choose a reason for hiding this comment

machikoyasuda Mar 25, 2025

Choose a reason for hiding this comment

machikoyasuda Mar 21, 2025 • edited Loading

Choose a reason for hiding this comment

machikoyasuda Mar 21, 2025

Choose a reason for hiding this comment

machikoyasuda commented Mar 25, 2025

thekaveman left a comment

Choose a reason for hiding this comment

machikoyasuda commented Mar 20, 2025 •

edited

Loading

github-actions bot commented Mar 20, 2025 •

edited

Loading

thekaveman Mar 21, 2025 •

edited

Loading

machikoyasuda Mar 21, 2025 •

edited

Loading