import { usePage } from '@inertiajs/react'; import { useLayoutEffect } from 'react'; import type { SharedProps } from '@/types'; /** * Applies the organisation's app colour scheme (Profile → App appearance) by overriding the * theme's CSS variables on , so buttons, links, focus rings and highlights all follow it, * including dialogs and menus rendered outside the layout. */ export function useAppTheme() { const a = usePage().props.appearance; useLayoutEffect(() => { if (!a) return; const root = document.documentElement.style; const vars: Record = { '--color-accent': a.accent, '--color-accent-fill': a.accent_fill ?? a.accent, '--color-accent-hover': a.accent_hover, '--color-accent-soft': a.accent_soft, '--color-accent-ink': a.accent_ink, '--color-accent-ring': a.accent_ring, '--color-link': a.link, '--color-link-hover': a.link_hover, }; Object.entries(vars).forEach(([k, v]) => root.setProperty(k, v)); document.getElementById('nprogress')?.style.setProperty('--inertia-progress', a.accent); }, [a?.accent, a?.accent_fill, a?.accent_hover, a?.accent_soft, a?.accent_ink, a?.accent_ring, a?.link, a?.link_hover]); return a; } /** The app logo (or the default dot + "Spin Group Quotes" wordmark) for the top-left of the nav. */ export function AppBrand({ large = false }: { large?: boolean }) { const { appearance, appName } = usePage().props; if (appearance?.logo_url) { return

; } return ( {appName} ); }