Repository navigation
Theme the Payload admin and self-host fonts - #316
Merged
Merged
Conversation
- Restyle the admin with the public site's palette and Rubik/Unbounded fonts: abyss sidebar, cream pages, green main actions. - Lock the admin to one light theme so everyone sees the same thing. - AUCC logo on the login screen and in the nav; page titles end in "AUCC Admin" instead of "Payload". - Welcome panel on the dashboard with shortcuts to the everyday tasks and a one-line explanation of each section. - Group the navigation into Club Content, Photos & Videos, Website Pages and Admin Accounts, everyday content first. - Usability: prominent Create New and Save buttons, readable labels and column headings, outlined rich text areas, visible focus rings. The root layout loads the public stylesheet into the admin as well, so the body background is reset under html[data-theme]. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Replace the Google Fonts @import in the public and admin stylesheets with next/font, so Rubik, Rubik Mono One, Caveat and Unbounded are served from the app instead of fetched from Google at page load. The generated family names are exposed as --font-face-* variables from the root layout, and both stylesheets map them onto the existing --font-* tokens. They are set on :root from a hoisted <style> rather than a class on <html>, because the Payload admin renders its own <html>. Storybook has no root layout, so it loads the fonts directly. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
yrska
changed the title
danielchen06
approved these changes
Oct 12, 2026
|
🚀 Preview deployment is live: Preview Link |
This branch was successfully deployed
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.
🌟 Context
The Payload admin still looked like stock Payload: grey, Payload-branded, and with every collection and global in one flat list. This restyles it with the public site's palette and makes it easier for committee members who are not technical to find and edit things.
No linked issue.
📝 Description
Theme (
src/app/(payload)/custom.scss): the site palette (abyss, cream, grass, algae, water, seafoam) mapped onto Payload's own CSS variables, plus Rubik/Unbounded. Dark abyss sidebar like the site header, cream pages, green main actions.Branding: AUCC logo on the login screen and in the nav (
src/components/admin/AdminLogo.tsx,AdminIcon.tsx); page titles end in "AUCC Admin".Welcome panel on the dashboard (
WelcomePanel.tsx): shortcuts to Add an event, Write a trip report, Add gallery photos and Review swims, a one-line explanation of each section, and a link to the website.Navigation groups: Club Content, Photos & Videos, Admin Accounts, Website Pages. Collections are reordered in
payload.config.tsso everyday content comes first.Usability: larger green Create New and Save buttons, darker labels and column headings, a visible box around rich text areas, clear focus rings.
The admin is locked to one light theme (
admin.theme: 'light'), so Payload's dark mode toggle is gone.Self-hosted fonts (
src/app/fonts.ts): the Google Fonts@importin the public and admin stylesheets is replaced withnext/font, so Rubik, Rubik Mono One, Caveat and Unbounded are served by the app. The generated family names are set as--font-face-*variables on:rootfrom the root layout and mapped onto the existing--font-*tokens, so no component changes. Storybook has no root layout, so.storybook/preview-head.htmlloads the fonts directly.No migration. The changes are admin config and CSS only;
payload migrate:create --skip-emptyon this branch produced nothing.📋 Notes
WelcomePanel.tsxand theadmin.groupline of each collection/global.src/app/layout.tsxwraps Payload's own layout, so the public stylesheet (including the abyss body background) loads inside the admin, and admin pages log hydration errors about nestedhtml/body. That is already the case onmain. This PR only resets the background underhtml[data-theme]; the layout itself is untouched.admin: { group: 'Website Pages' }to sit with the other pages.woff2files and makes no request to Google; the built CSS keeps thevar(--font-face-…)references. Innext dev --turbopackan already-running server kept serving the old plain font names until restarted.WelcomePaneltest), lint andpnpm buildpass. Checked in the browser: login, dashboard, events list, create-event form, open sidebar. The phone-width dashboard has no horizontal overflow, but I did not get a screenshot of it.🤖 Generated with Claude Code