feat: customize site banners and login notices

frontend/app/ui/SiteStatus.tsx

@@ -1,12 +1,14 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type CSSProperties } from 'react'
 import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
 
 type BannerInfo = {
   enabled: boolean
   message: string
   tone?: string
+  backgroundColor?: string | null
+  borderColor?: string | null
 }
 
 type SiteInfo = {
@@ -52,10 +54,14 @@ export default function SiteStatus() {
 
   const banner = info?.banner
   const tone = banner?.tone || 'info'
+  const bannerStyle = {
+    '--site-banner-background-color': banner?.backgroundColor || undefined,
+    '--site-banner-border-color': banner?.borderColor || undefined,
+  } as CSSProperties
   return (
     <>
       {banner?.enabled && banner.message ? (
-        <div className={`site-banner site-banner--${tone}`}>{banner.message}</div>
+        <div className={`site-banner site-banner--${tone}`} style={bannerStyle}>{banner.message}</div>
       ) : null}
     </>
   )