groombook/app
Archived
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: address QA feedback on site theming PR (GH #91)

Browse Source 
- Fix gradient regression in ReportCards.tsx: use distinct color stops
  (--color-accent-lighter → --color-accent-light) to restore subtle gradient
- Fix BrandingContext meta tag accumulation: cache ref with useRef instead
  of querying DOM on every render to prevent duplicate elements on remount
- Add BrandingContext.test.tsx: verify CSS vars applied, theme-color meta
  created/updated, and no duplicate meta tags on rerender

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scrubs McBarkley
2026-03-22 00:12:57 +00:00
parent 4060d5b515
commit a15585a8e6
3 changed files with 117 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/BrandingContext.tsx
+10 -7
View File
@@ -1,4 +1,4 @@
import { createContext, useContext, useEffect, useState, useCallback } from "react";
import { createContext, useContext, useEffect, useRef, useState, useCallback } from "react";
export interface Branding {
businessName: string;
@@ -27,6 +27,7 @@ export function useBranding() {
export function BrandingProvider({ children }: { children: React.ReactNode }) {
const [branding, setBranding] = useState<Branding>(DEFAULT_BRANDING);
const metaThemeColorRef = useRef<HTMLMetaElement | null>(null);
const fetchBranding = useCallback(() => {
fetch("/api/branding")
@@ -46,13 +47,15 @@ export function BrandingProvider({ children }: { children: React.ReactNode }) {
document.documentElement.style.setProperty("--color-primary", branding.primaryColor);
document.documentElement.style.setProperty("--color-accent", branding.accentColor);
// Keep PWA theme-color meta tag in sync with primary color
let metaThemeColor = document.querySelector<HTMLMetaElement>("meta[name='theme-color']");
if (!metaThemeColor) {
metaThemeColor = document.createElement("meta");
metaThemeColor.name = "theme-color";
document.head.appendChild(metaThemeColor);
if (!metaThemeColorRef.current) {
metaThemeColorRef.current = document.querySelector<HTMLMetaElement>("meta[name='theme-color']");
if (!metaThemeColorRef.current) {
metaThemeColorRef.current = document.createElement("meta");
metaThemeColorRef.current.name = "theme-color";
document.head.appendChild(metaThemeColorRef.current);
}
}
metaThemeColor.content = branding.primaryColor;
metaThemeColorRef.current.content = branding.primaryColor;
}, [branding.primaryColor, branding.accentColor]);
return (