joshuaandClaude Sonnet 5
86af7093ac
Site Settings -> Branding now supports a Primary/Secondary/Accent brand color system applied site-wide (buttons, nav, hover states, links) and to outgoing email header/CTA colors, plus a favicon upload alongside the existing logo upload, a live preview panel (website/email x desktop/mobile), and logo-based color suggestions. The setup wizard's Branding step got the same treatment. Fixes two related bugs found along the way: the setup wizard's logo/favicon upload was missing its auth token, and a static favicon.ico in Next's special app/ convention path was silently overriding the dynamic one. Also replaces every "Hope Events"/"Hope Family Church" default (org name, email subjects, WhatsApp messages, report metadata, API docs) with a neutral "Cross Code" placeholder, and the optional legal settings (operator name, IO details, website URL, effective date) with obviously-generic placeholders instead of defaulting to real personal/organisational details -- since this platform is deployed for multiple organisations. Adds SETTINGS.md documenting every setting's default behaviour. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
/**
|
|
* Static fallback for BRAND_600 — used as the initial value before the
|
|
* client can read the live CSS custom property (see useBrandColorVar below),
|
|
* and as the SSR/first-paint value. Keep in sync with globals.css's
|
|
* `--brand-600` default.
|
|
*/
|
|
const BRAND_600_FALLBACK = "#4F46E5";
|
|
|
|
/**
|
|
* Reads a live brand CSS custom property (e.g. `--brand-600`) off the
|
|
* document root. Needed by the rare spot that requires a literal color value
|
|
* instead of a Tailwind class (SVG stroke/fill, canvas, etc.) — Tailwind
|
|
* classes like `text-brand-600` pick up the admin-configurable primary color
|
|
* automatically via CSS variables (see tailwind.config.js), but a literal
|
|
* hex string has to be read explicitly since it can't reference `var()`.
|
|
*/
|
|
export function useBrandColorVar(cssVar: string, fallback: string = BRAND_600_FALLBACK): string {
|
|
const [color, setColor] = useState(fallback);
|
|
|
|
useEffect(() => {
|
|
const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
|
|
if (value) setColor(value);
|
|
}, [cssVar]);
|
|
|
|
return color;
|
|
}
|