feat: customize site banners and login notices

frontend/app/admin/SettingField.tsx

@@ -26,6 +26,11 @@ const SELECTS: Record<string, Option[]> = {
   requests_data_source: [{ value: 'always_js', label: 'Read directly from Seerr' }, { value: 'prefer_cache', label: 'Use saved requests' }],
 }
 
+const COLOR_DEFAULTS: Record<string, string> = {
+  site_banner_background_color: '#332814',
+  site_banner_border_color: '#a27b32',
+}
+
 export default function SettingField(props: Props) {
   const { setting, label, value, help, placeholder, onChange } = props
   const id = `setting-${setting.key}`
@@ -36,13 +41,15 @@ export default function SettingField(props: Props) {
   const zeroAllowed = setting.key === 'log_file_backup_count'
   const minimum = zeroAllowed ? 0 : 1
   const maximum = setting.key === 'issue_confirmation_interval_value' ? 365 : setting.key.endsWith('_port') ? 65535 : undefined
+  const colorDefault = COLOR_DEFAULTS[setting.key]
+  const pickerValue = /^#[0-9a-f]{6}$/i.test(value) ? value : colorDefault
   const aria = { id, name: setting.key, 'aria-describedby': help ? `${id}-help` : undefined }
 
   if (props.boolean) {
     return (
       <div className="setting-field setting-switch">
         <div><label htmlFor={id}>{label}</label>{help && <p id={`${id}-help`}>{help}</p>}</div>
-        <input {...aria} type="checkbox" role="switch" checked={value.toLowerCase() === 'true'} onChange={(event) => onChange(String(event.target.checked))} />
+        <input {...aria} type="checkbox" role="switch" aria-checked={value.toLowerCase() === 'true'} checked={value.toLowerCase() === 'true'} onChange={(event) => onChange(String(event.target.checked))} />
       </div>
     )
   }
@@ -52,6 +59,27 @@ export default function SettingField(props: Props) {
       <label htmlFor={id}>{label}{setting.sensitive && setting.isSet && <small>Saved</small>}</label>
       {props.optionsUnavailable ? (
         <select {...aria} disabled value={value}><option value={value}>Save the connection, then reload available options</option></select>
+      ) : colorDefault ? (
+        <div className="setting-color-control">
+          <input
+            id={`${id}-picker`}
+            type="color"
+            aria-label={`Choose ${label.toLowerCase()}`}
+            value={pickerValue}
+            onChange={(event) => onChange(event.target.value)}
+          />
+          <input
+            {...aria}
+            type="text"
+            value={value}
+            pattern="#[0-9A-Fa-f]{6}"
+            placeholder={colorDefault}
+            autoComplete="off"
+            spellCheck={false}
+            onChange={(event) => onChange(event.target.value)}
+          />
+          {value ? <button type="button" className="ghost-button" onClick={() => onChange('')}>Use tone default</button> : null}
+        </div>
       ) : selectedOptions ? (
         <select {...aria} value={value} onChange={(event) => onChange(event.target.value)}>
           {!value && <option value="">Choose an option</option>}