v0.9.17 branding bug fixes

frontend/package.json

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

frontend/src/components/BrandingModal.jsx

@@ -7,28 +7,33 @@ const DEFAULT_PUBLIC_COLOR = '#1a73e8';
 const DEFAULT_DM_COLOR     = '#a142f4';
 
 const COLOUR_SUGGESTIONS = [
-  '#1a73e8','#a142f4','#e53935','#34a853','#fa7b17',
-  '#00897b','#e91e8c','#0097a7','#5c6bc0','#f4511e',
-  '#616161','#795548','#00acc1','#43a047','#fdd835',
+  '#1a73e8', '#a142f4', '#e53935', '#fa7b17', '#fdd835', '#34a853',
 ];
 
 // A single colour picker card: shows suggestions by default, Custom button opens native picker
-function ColourPicker({ label, description, value, onChange, preview }) {
+function ColourPicker({ label, value, onChange, preview }) {
   const [mode, setMode] = useState('suggestions'); // 'suggestions' | 'custom'
   const inputRef = useRef(null);
 
-  const handleCustomClick = () => {
-    setMode('custom');
-    // Open native colour picker immediately after switching
-    setTimeout(() => inputRef.current?.click(), 50);
+  // 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'
+  };
+
+  const handleCustomInput = (e) => {
+    onChange(e.target.value);
+  };
+
+  const handleCustomChangeClose = (e) => {
+    onChange(e.target.value);
+    setMode('suggestions');
   };
 
   return (
     <div>
       <div className="settings-section-label">{label}</div>
-      {description && (
-        <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 12 }}>{description}</p>
-      )}
 
       {/* Current colour preview */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
@@ -41,8 +46,7 @@ function ColourPicker({ label, description, value, onChange, preview }) {
 
       {mode === 'suggestions' && (
         <>
-          {/* Suggestion swatches */}
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
+          <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
             {COLOUR_SUGGESTIONS.map(hex => (
               <button
                 key={hex}
@@ -58,11 +62,7 @@ function ColourPicker({ label, description, value, onChange, preview }) {
               />
             ))}
           </div>
-          {/* Custom button — styled to match suggestion swatches row */}
-          <button
-            className="btn btn-secondary btn-sm"
-            onClick={handleCustomClick}
-          >
+          <button className="btn btn-secondary btn-sm" onClick={() => setMode('custom')}>
             Custom
           </button>
         </>
@@ -70,26 +70,27 @@ function ColourPicker({ label, description, value, onChange, preview }) {
 
       {mode === 'custom' && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          {/* Colour input rendered as a large clickable swatch — works 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,
+              border: '2px solid var(--border)',
+              boxShadow: '0 1px 4px rgba(0,0,0,0.15)',
+              flexShrink: 0,
+            }} />
             <input
               ref={inputRef}
               type="color"
               value={value}
-              onChange={e => onChange(e.target.value)}
-              style={{
-                width: 56, height: 44, padding: 2,
-                borderRadius: 8, border: '1px solid var(--border)',
-                cursor: 'pointer', background: 'none',
-              }}
+              onInput={handleCustomInput}
+              onChange={handleCustomChangeClose}
+              style={{ position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }}
             />
             <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontFamily: 'monospace' }}>{value}</span>
-          </div>
-          {/* Back button — same style as Custom button */}
+          </label>
           <div>
-            <button
-              className="btn btn-secondary btn-sm"
-              onClick={() => setMode('suggestions')}
-            >
+            <button className="btn btn-secondary btn-sm" onClick={() => setMode('suggestions')}>
               Back
             </button>
           </div>
@@ -285,7 +286,6 @@ export default function BrandingModal({ onClose }) {
           <div className="flex-col gap-3">
             <ColourPicker
               label="App Title Colour"
-              description="The colour of the app name shown in the top bar."
               value={colourTitle}
               onChange={setColourTitle}
             />
@@ -293,7 +293,6 @@ export default function BrandingModal({ onClose }) {
             <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
               <ColourPicker
                 label="Public Message Avatar Colour"
-                description="Background colour for public channel icons (users without a custom avatar)."
                 value={colourPublic}
                 onChange={setColourPublic}
                 preview={(val) => (
@@ -309,7 +308,6 @@ export default function BrandingModal({ onClose }) {
             <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
               <ColourPicker
                 label="Direct Message Avatar Colour"
-                description="Background colour for private group and direct message icons (users without a custom avatar)."
                 value={colourDm}
                 onChange={setColourDm}
                 preview={(val) => (