v0.9.79 colour picker update

frontend/src/components/SchedulePage.jsx

@@ -5,6 +5,7 @@ import { useToast } from '../contexts/ToastContext.jsx';
 import { useAuth } from '../contexts/AuthContext.jsx';
 import UserFooter from './UserFooter.jsx';
 import MobileEventForm from './MobileEventForm.jsx';
+import ColourPickerSheet from './ColourPickerSheet.jsx';
 import MobileGroupManager from './MobileGroupManager.jsx';
 
 // ── Utilities ─────────────────────────────────────────────────────────────────
@@ -605,6 +606,7 @@ function EventTypesPanel({ eventTypes, userGroups, onUpdated, isMobile=false })
   const [sheetMode,setSheetMode]=useState(null); // null | 'create' | 'edit'
   const [sheetName,setSheetName]=useState('');
   const [sheetColour,setSheetColour]=useState('#6366f1');
+  const [showColourPicker,setShowColourPicker]=useState(false);
   const [sheetSaving,setSheetSaving]=useState(false);
   const openCreateSheet=()=>{setSheetName('');setSheetColour('#6366f1');setSheetMode('create');};
   const openEditSheet=(et)=>{setSheetName(et.name);setSheetColour(et.colour);setEditingType(et);setSheetMode('edit');};
@@ -660,7 +662,7 @@ function EventTypesPanel({ eventTypes, userGroups, onUpdated, isMobile=false })
               style={{width:'100%',padding:'12px 14px',border:'1px solid var(--border)',borderRadius:'var(--radius)',fontSize:16,marginBottom:12,boxSizing:'border-box',background:'var(--background)',color:'var(--text-primary)'}}/>
             <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:16}}>
               <label style={{fontSize:14,color:'var(--text-tertiary)',flexShrink:0}}>Colour</label>
-              <input type="color" value={sheetColour} onChange={e=>setSheetColour(e.target.value)} style={{flex:1,height:40,border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:3,cursor:'pointer'}}/>
+              <button onClick={()=>setShowColourPicker(true)} style={{flex:1,height:40,borderRadius:'var(--radius)',border:'2px solid var(--border)',background:sheetColour,cursor:'pointer'}}/>
             </div>
             <button onClick={saveSheet} disabled={sheetSaving||!sheetName.trim()}
               style={{width:'100%',padding:'14px',background:'var(--primary)',color:'white',border:'none',borderRadius:'var(--radius)',fontSize:16,fontWeight:700,cursor:'pointer',opacity:sheetSaving?0.6:1}}>
@@ -669,6 +671,9 @@ function EventTypesPanel({ eventTypes, userGroups, onUpdated, isMobile=false })
           </div>
         </div>
       )}
+      {showColourPicker && (
+        <ColourPickerSheet value={sheetColour} onChange={setSheetColour} onClose={()=>setShowColourPicker(false)} title="Event Type Colour"/>
+      )}
     </div>
   );
 }