v0.9.18 branding fixes

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jama-frontend",
-  "version": "0.9.17",
+  "version": "0.9.18",
   "private": true,
   "scripts": {
     "dev": "vite",

frontend/src/components/BrandingModal.jsx

@@ -13,21 +13,13 @@ const COLOUR_SUGGESTIONS = [
 // A single colour picker card: shows suggestions by default, Custom button opens native picker
 function ColourPicker({ label, value, onChange, preview }) {
   const [mode, setMode] = useState('suggestions'); // 'suggestions' | 'custom'
-  const inputRef = useRef(null);
+  const [draft, setDraft] = useState(value);
 
-  // Auto-close custom mode as soon as a new colour is committed
-  const handleCustomChange = (e) => {
-    onChange(e.target.value);
-    // 'change' fires on close of native picker on most platforms;
-    // we also listen to 'input' for live preview but only close on 'change'
-  };
+  // Keep draft in sync if parent value changes (e.g. reset)
+  useEffect(() => { setDraft(value); }, [value]);
 
-  const handleCustomInput = (e) => {
-    onChange(e.target.value);
-  };
-
-  const handleCustomChangeClose = (e) => {
-    onChange(e.target.value);
+  const handleSet = () => {
+    onChange(draft);
     setMode('suggestions');
   };
 
@@ -62,7 +54,7 @@ function ColourPicker({ label, value, onChange, preview }) {
               />
             ))}
           </div>
-          <button className="btn btn-secondary btn-sm" onClick={() => setMode('custom')}>
+          <button className="btn btn-secondary btn-sm" onClick={() => { setDraft(value); setMode('custom'); }}>
             Custom
           </button>
         </>
@@ -70,26 +62,28 @@ function ColourPicker({ label, value, onChange, preview }) {
 
       {mode === 'custom' && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          {/* Colour input rendered as a large clickable swatch — works on mobile and desktop */}
+          {/* Large label-wrapped swatch triggers the colour input — reliable on mobile and desktop */}
           <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
             <span style={{
               display: 'inline-block', width: 56, height: 44,
-              borderRadius: 8, background: value,
+              borderRadius: 8, background: draft,
               border: '2px solid var(--border)',
               boxShadow: '0 1px 4px rgba(0,0,0,0.15)',
               flexShrink: 0,
             }} />
             <input
-              ref={inputRef}
               type="color"
-              value={value}
-              onInput={handleCustomInput}
-              onChange={handleCustomChangeClose}
+              value={draft}
+              onInput={e => setDraft(e.target.value)}
+              onChange={e => setDraft(e.target.value)}
               style={{ position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }}
             />
-            <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontFamily: 'monospace' }}>{value}</span>
+            <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontFamily: 'monospace' }}>{draft}</span>
           </label>
-          <div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <button className="btn btn-primary btn-sm" onClick={handleSet}>
+              Set
+            </button>
             <button className="btn btn-secondary btn-sm" onClick={() => setMode('suggestions')}>
               Back
             </button>