512 lines
20 KiB
JavaScript
512 lines
20 KiB
JavaScript
import { useState, useEffect, useCallback, useRef } from 'react'
|
||
import { DEFAULT_COLOURS } from '../../../store/tableColourStore'
|
||
import client from '../../../api/client'
|
||
import toast from 'react-hot-toast'
|
||
|
||
// ─── Colour slot metadata ────────────────────────────────────────────────────
|
||
|
||
const SLOTS = [
|
||
{ key: 'cardBg', label: 'Primary Background', hint: 'Card background' },
|
||
{ key: 'badgeBg', label: 'Secondary Background', hint: 'Status badge container' },
|
||
{ key: 'nameText', label: 'Primary Text', hint: 'Table name' },
|
||
{ key: 'badgeText', label: 'Secondary Text', hint: 'Badge label' },
|
||
]
|
||
|
||
const STATUSES = [
|
||
{ key: 'free', label: 'Free Table' },
|
||
{ key: 'open', label: 'Open Table (not mine)' },
|
||
{ key: 'mine', label: 'Open Table (assigned to me)' },
|
||
{ key: 'partially_paid', label: 'Partially Paid Table' },
|
||
{ key: 'paid', label: 'Fully Paid Table' },
|
||
]
|
||
|
||
const STATUS_LABELS_MOCK = {
|
||
free: 'ΕΛΕΥΘΕΡΟ',
|
||
open: 'ΑΝΟΙΧΤΟ',
|
||
mine: 'ΔΙΚΟ ΜΟΥ',
|
||
partially_paid: 'ΜΕΡ. ΠΛHΡ.',
|
||
paid: 'ΠΛΗΡΩΜΕΝΟ',
|
||
}
|
||
|
||
// Quick-suggest palettes per slot type
|
||
const QUICK_SWATCHES = {
|
||
cardBg: ['#dde5ef', '#243044', '#FF8F60', '#e8610a', '#FFDC67', '#81D264', '#a78bfa', '#38bdf8', '#f43f5e', '#1e293b'],
|
||
badgeBg: ['rgba(255,255,255,0.92)', 'rgba(0,0,0,0.55)', 'rgba(255,255,255,0.6)', 'rgba(30,41,59,0.85)', '#ffffff', '#000000'],
|
||
nameText: ['#ffffff', '#1e293b', '#3d5270', '#94b8d4', '#f8fafc', '#111827', '#fef3c7', '#dcfce7'],
|
||
badgeText: ['#3d5270', '#94b8d4', '#e8610a', '#FF8F60', '#FFDC67', '#d4a800', '#81D264', '#ffffff', '#1e293b'],
|
||
}
|
||
|
||
// ─── Color picker modal ──────────────────────────────────────────────────────
|
||
|
||
// Parse any css colour string into { hex, alpha }.
|
||
// Handles: #rrggbb, #rgb, rgba(r,g,b,a), rgb(r,g,b)
|
||
function parseColour(v) {
|
||
if (!v) return { hex: '#ffffff', alpha: 1 }
|
||
const s = v.trim()
|
||
// rgba / rgb
|
||
const rgbaMatch = s.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/)
|
||
if (rgbaMatch) {
|
||
const r = parseInt(rgbaMatch[1]).toString(16).padStart(2, '0')
|
||
const g = parseInt(rgbaMatch[2]).toString(16).padStart(2, '0')
|
||
const b = parseInt(rgbaMatch[3]).toString(16).padStart(2, '0')
|
||
const a = rgbaMatch[4] != null ? parseFloat(rgbaMatch[4]) : 1
|
||
return { hex: `#${r}${g}${b}`, alpha: Math.min(1, Math.max(0, a)) }
|
||
}
|
||
// #rgb shorthand
|
||
if (/^#[0-9a-fA-F]{3}$/.test(s)) {
|
||
const [, r, g, b] = s
|
||
return { hex: `#${r}${r}${g}${g}${b}${b}`, alpha: 1 }
|
||
}
|
||
// #rrggbb
|
||
if (/^#[0-9a-fA-F]{6}$/.test(s)) return { hex: s, alpha: 1 }
|
||
return { hex: '#ffffff', alpha: 1 }
|
||
}
|
||
|
||
function buildColour(hex, alpha) {
|
||
if (alpha >= 1) return hex
|
||
const r = parseInt(hex.slice(1, 3), 16)
|
||
const g = parseInt(hex.slice(3, 5), 16)
|
||
const b = parseInt(hex.slice(5, 7), 16)
|
||
return `rgba(${r},${g},${b},${alpha.toFixed(2)})`
|
||
}
|
||
|
||
function ColourPickerModal({ value, onClose, onChange, slot }) {
|
||
const parsed = parseColour(value)
|
||
const [hex, setHex] = useState(parsed.hex)
|
||
const [alpha, setAlpha] = useState(parsed.alpha)
|
||
|
||
// keep parent in sync whenever hex or alpha changes
|
||
useEffect(() => { onChange(buildColour(hex, alpha)) }, [hex, alpha])
|
||
|
||
function commitSwatch(v) {
|
||
const p = parseColour(v)
|
||
setHex(p.hex)
|
||
setAlpha(p.alpha)
|
||
}
|
||
|
||
const preview = buildColour(hex, alpha)
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
position: 'fixed', inset: 0, zIndex: 1000,
|
||
background: 'rgba(0,0,0,0.45)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
padding: 24,
|
||
}}
|
||
onClick={onClose}
|
||
>
|
||
<div
|
||
style={{
|
||
background: '#fff', borderRadius: 20, padding: 28, width: '100%', maxWidth: 400,
|
||
boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
|
||
}}
|
||
onClick={e => e.stopPropagation()}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
|
||
<div>
|
||
<div style={{ fontSize: 16, fontWeight: 700, color: '#111827' }}>Pick a Colour</div>
|
||
<div style={{ fontSize: 12, color: '#6b7280', marginTop: 2 }}>{SLOTS.find(s => s.key === slot)?.label}</div>
|
||
</div>
|
||
<button onClick={onClose} style={{ background: 'none', border: 'none', fontSize: 22, cursor: 'pointer', color: '#6b7280', lineHeight: 1 }}>×</button>
|
||
</div>
|
||
|
||
{/* Preview swatch — checkerboard behind so alpha is visible */}
|
||
<div style={{
|
||
width: '100%', height: 56, borderRadius: 12, marginBottom: 20,
|
||
border: '1px solid #e5e7eb', overflow: 'hidden', position: 'relative',
|
||
backgroundImage: 'linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%)',
|
||
backgroundSize: '12px 12px',
|
||
backgroundPosition: '0 0,0 6px,6px -6px,-6px 0',
|
||
}}>
|
||
<div style={{
|
||
position: 'absolute', inset: 0, background: preview,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
fontSize: 11, fontFamily: 'monospace', color: alpha > 0.5 ? '#fff' : '#374151',
|
||
textShadow: alpha > 0.5 ? '0 1px 3px rgba(0,0,0,0.5)' : 'none',
|
||
}}>
|
||
{preview}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Colour picker + hex input */}
|
||
<div style={{ marginBottom: 16 }}>
|
||
<div style={{ fontSize: 12, fontWeight: 600, color: '#374151', marginBottom: 8 }}>Colour</div>
|
||
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
|
||
<input
|
||
type="color"
|
||
value={hex}
|
||
onChange={e => setHex(e.target.value)}
|
||
style={{ width: 48, height: 40, borderRadius: 8, border: '1px solid #e5e7eb', cursor: 'pointer', padding: 2, flexShrink: 0 }}
|
||
/>
|
||
<input
|
||
type="text"
|
||
value={hex}
|
||
onChange={e => {
|
||
const v = e.target.value
|
||
setHex(v)
|
||
}}
|
||
spellCheck={false}
|
||
style={{
|
||
flex: 1, height: 40, borderRadius: 8, border: '1px solid #e5e7eb',
|
||
padding: '0 12px', fontSize: 13, fontFamily: 'monospace', color: '#111827',
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Opacity slider — always visible */}
|
||
<div style={{ marginBottom: 20 }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
|
||
<div style={{ fontSize: 12, fontWeight: 600, color: '#374151' }}>Opacity</div>
|
||
<div style={{ fontSize: 12, fontFamily: 'monospace', color: '#6b7280' }}>{Math.round(alpha * 100)}%</div>
|
||
</div>
|
||
{/* Gradient track so you can see what you're dragging */}
|
||
<div style={{
|
||
position: 'relative', height: 28,
|
||
background: `linear-gradient(to right, transparent, ${hex})`,
|
||
borderRadius: 8, border: '1px solid #e5e7eb',
|
||
backgroundImage: `linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%),linear-gradient(to right,transparent,${hex})`,
|
||
backgroundSize: '10px 10px,10px 10px,10px 10px,10px 10px,100% 100%',
|
||
backgroundPosition: '0 0,0 5px,5px -5px,-5px 0,0 0',
|
||
}}>
|
||
<input
|
||
type="range"
|
||
min={0} max={1} step={0.01}
|
||
value={alpha}
|
||
onChange={e => setAlpha(parseFloat(e.target.value))}
|
||
style={{
|
||
position: 'absolute', inset: 0, width: '100%', height: '100%',
|
||
opacity: 0, cursor: 'pointer', margin: 0,
|
||
}}
|
||
/>
|
||
{/* thumb indicator */}
|
||
<div style={{
|
||
position: 'absolute', top: '50%', transform: 'translate(-50%,-50%)',
|
||
left: `${alpha * 100}%`,
|
||
width: 20, height: 20, borderRadius: '50%',
|
||
background: preview, border: '2px solid #fff',
|
||
boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
|
||
pointerEvents: 'none',
|
||
}} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick swatches */}
|
||
<div>
|
||
<div style={{ fontSize: 12, fontWeight: 600, color: '#374151', marginBottom: 8 }}>Quick select</div>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
||
{(QUICK_SWATCHES[slot] || []).map(c => {
|
||
const p = parseColour(c)
|
||
const built = buildColour(p.hex, p.alpha)
|
||
return (
|
||
<button
|
||
key={c}
|
||
title={c}
|
||
onClick={() => commitSwatch(c)}
|
||
style={{
|
||
width: 36, height: 36, borderRadius: 8,
|
||
backgroundImage: `linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%)`,
|
||
backgroundSize: '8px 8px',
|
||
backgroundPosition: '0 0,0 4px,4px -4px,-4px 0',
|
||
position: 'relative', overflow: 'hidden',
|
||
border: built === preview ? '3px solid #3758c9' : '2px solid #e5e7eb',
|
||
cursor: 'pointer', flexShrink: 0,
|
||
boxShadow: '0 1px 4px rgba(0,0,0,0.10)',
|
||
}}
|
||
>
|
||
<div style={{ position: 'absolute', inset: 0, background: c }} />
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid #f3f4f6', display: 'flex', gap: 10 }}>
|
||
<button
|
||
onClick={onClose}
|
||
style={{
|
||
flex: 1, height: 40, borderRadius: 10, border: '1px solid #e5e7eb',
|
||
background: '#f9fafb', fontSize: 14, fontWeight: 600, cursor: 'pointer', color: '#374151',
|
||
}}
|
||
>Done</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Single colour slot row ──────────────────────────────────────────────────
|
||
|
||
function ColourSlotRow({ mode, status, slotKey, label, value, onOpen }) {
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
|
||
<button
|
||
onClick={() => onOpen(mode, status, slotKey, value)}
|
||
style={{
|
||
width: 44, height: 28, borderRadius: 8, background: value,
|
||
border: '1.5px solid #e5e7eb', cursor: 'pointer', flexShrink: 0,
|
||
boxShadow: '0 1px 4px rgba(0,0,0,0.10)',
|
||
}}
|
||
/>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ fontSize: 13, fontWeight: 600, color: '#374151' }}>{label}</div>
|
||
<div style={{ fontSize: 11, color: '#9ca3af', fontFamily: 'monospace', marginTop: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Mini mock table card (for preview) ──────────────────────────────────────
|
||
|
||
function MockCard({ cfg, label, mockName, groupName = 'ΜΕΣΑ' }) {
|
||
return (
|
||
<div style={{
|
||
width: '100%', height: 90, borderRadius: 12, background: cfg.cardBg,
|
||
position: 'relative', flexShrink: 0,
|
||
boxShadow: '0 2px 8px rgba(0,0,0,0.18)',
|
||
overflow: 'hidden',
|
||
}}>
|
||
{/* Table name + group */}
|
||
<div style={{ position: 'absolute', top: 8, left: 10, display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||
<span style={{
|
||
fontSize: 17, fontWeight: 800, color: cfg.nameText,
|
||
lineHeight: 1, letterSpacing: -0.5,
|
||
}}>{mockName}</span>
|
||
<span style={{
|
||
fontSize: 7, fontWeight: 600, letterSpacing: 0.8,
|
||
color: cfg.nameText + '80',
|
||
textTransform: 'uppercase',
|
||
}}>{groupName}</span>
|
||
</div>
|
||
{/* Status badge — tight equal padding on all sides */}
|
||
<div style={{
|
||
position: 'absolute', bottom: 7, left: 7,
|
||
background: cfg.badgeBg,
|
||
borderRadius: 4, padding: '2px 5px',
|
||
lineHeight: 1,
|
||
}}>
|
||
<span style={{ fontSize: 7, fontWeight: 700, color: cfg.badgeText, whiteSpace: 'nowrap', lineHeight: 1 }}>
|
||
{label}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Preview panel (6 mock cards per theme) ──────────────────────────────────
|
||
|
||
function PreviewPanel({ colours, mode }) {
|
||
const isDark = mode === 'dark'
|
||
const panelBg = isDark ? '#0d1520' : '#f1f5f9'
|
||
const panelLabel = isDark ? '🌙 Dark Mode Preview' : '☀️ Light Mode Preview'
|
||
const labelCol = isDark ? '#94a3b8' : '#64748b'
|
||
|
||
const mockCards = [
|
||
{ status: 'free', name: 'TABLE 1', group: 'ΜΕΣΑ' },
|
||
{ status: 'open', name: 'TABLE 2', group: 'ΜΕΣΑ' },
|
||
{ status: 'mine', name: 'TABLE 3', group: 'ΜΕΣΑ' },
|
||
{ status: 'partially_paid', name: 'TABLE 4', group: 'ΞΑΠΛΩΣΤΡΕΣ' },
|
||
{ status: 'paid', name: 'TABLE 5', group: 'ΞΑΠΛΩΣΤΡΕΣ' },
|
||
{ status: 'free', name: 'TABLE 6', group: 'ΞΑΠΛΩΣΤΡΕΣ' },
|
||
]
|
||
|
||
return (
|
||
<div style={{
|
||
background: panelBg, borderRadius: 16, padding: 16,
|
||
border: '1px solid ' + (isDark ? '#253245' : '#cbd5e1'),
|
||
}}>
|
||
<div style={{ fontSize: 12, fontWeight: 700, color: labelCol, marginBottom: 12, letterSpacing: 0.3 }}>
|
||
{panelLabel}
|
||
</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
|
||
{mockCards.map((mc, i) => (
|
||
<MockCard
|
||
key={i}
|
||
cfg={colours[mode][mc.status]}
|
||
label={STATUS_LABELS_MOCK[mc.status]}
|
||
mockName={mc.name}
|
||
groupName={mc.group}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Status block (one status, showing all 4 slots) ──────────────────────────
|
||
|
||
function StatusBlock({ mode, status, label, colours, onOpen }) {
|
||
const cfg = colours[mode][status]
|
||
return (
|
||
<div style={{ background: '#f9fafb', borderRadius: 12, padding: '14px 16px', border: '1px solid #f0f0f0' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
|
||
<div style={{ width: 88, flexShrink: 0 }}>
|
||
<MockCard cfg={cfg} label={STATUS_LABELS_MOCK[status]} mockName="T1" />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 14, fontWeight: 700, color: '#111827' }}>{label}</div>
|
||
<div style={{ fontSize: 11, color: '#9ca3af', marginTop: 2 }}>Click a swatch to edit</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid #ebebeb', paddingTop: 8 }}>
|
||
{SLOTS.map(slot => (
|
||
<ColourSlotRow
|
||
key={slot.key}
|
||
mode={mode}
|
||
status={status}
|
||
slotKey={slot.key}
|
||
label={slot.label}
|
||
value={cfg[slot.key]}
|
||
onOpen={onOpen}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Mode section (light or dark) ────────────────────────────────────────────
|
||
|
||
function ModeSection({ mode, colours, onOpen }) {
|
||
const label = mode === 'light' ? '☀️ Light Mode' : '🌙 Dark Mode'
|
||
return (
|
||
<div>
|
||
<div style={{ fontSize: 15, fontWeight: 700, color: '#111827', marginBottom: 14 }}>{label}</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
{STATUSES.map(s => (
|
||
<StatusBlock
|
||
key={s.key}
|
||
mode={mode}
|
||
status={s.key}
|
||
label={s.label}
|
||
colours={colours}
|
||
onOpen={onOpen}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Main tab ────────────────────────────────────────────────────────────────
|
||
|
||
export default function ColoursTab() {
|
||
const [colours, setColours] = useState(DEFAULT_COLOURS)
|
||
const [modal, setModal] = useState(null) // { mode, status, slot, value }
|
||
const [saving, setSaving] = useState(false)
|
||
const saveTimer = useRef(null)
|
||
|
||
// Load from backend on mount
|
||
useEffect(() => {
|
||
client.get('/api/settings/').then(r => {
|
||
const raw = r.data?.['ui.table_colours']?.value
|
||
if (raw) {
|
||
try { setColours(JSON.parse(raw)) } catch {}
|
||
}
|
||
})
|
||
}, [])
|
||
|
||
// Debounced save to backend — 600 ms after last change
|
||
const saveToBackend = useCallback((next) => {
|
||
clearTimeout(saveTimer.current)
|
||
setSaving(true)
|
||
saveTimer.current = setTimeout(() => {
|
||
client.put('/api/settings/ui.table_colours', { value: JSON.stringify(next) })
|
||
.then(() => setSaving(false))
|
||
.catch(() => { toast.error('Failed to save colours'); setSaving(false) })
|
||
}, 600)
|
||
}, [])
|
||
|
||
function setColour(mode, status, slot, value) {
|
||
setColours(prev => {
|
||
const next = {
|
||
...prev,
|
||
[mode]: {
|
||
...prev[mode],
|
||
[status]: { ...prev[mode][status], [slot]: value },
|
||
},
|
||
}
|
||
saveToBackend(next)
|
||
return next
|
||
})
|
||
}
|
||
|
||
function openModal(mode, status, slot, value) {
|
||
setModal({ mode, status, slot, value })
|
||
}
|
||
|
||
function handleChange(value) {
|
||
setColour(modal.mode, modal.status, modal.slot, value)
|
||
setModal(m => ({ ...m, value }))
|
||
}
|
||
|
||
function handleReset() {
|
||
if (window.confirm('Reset ALL colours to defaults? This cannot be undone.')) {
|
||
setColours(DEFAULT_COLOURS)
|
||
saveToBackend(DEFAULT_COLOURS)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
{/* Section header */}
|
||
<div style={{ marginBottom: 24 }}>
|
||
<h2 style={{ fontSize: 18, fontWeight: 700, color: '#111827', marginBottom: 4 }}>UI Personalization</h2>
|
||
<p style={{ fontSize: 13, color: '#6b7280' }}>
|
||
Customise how the Waiter App looks. Changes are saved to the server and sync to all devices automatically.
|
||
{saving && <span style={{ marginLeft: 8, color: '#9ca3af' }}>Saving…</span>}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Section: Waiter App — Table Colour Schemes */}
|
||
<div className="card" style={{ padding: 24 }}>
|
||
<div style={{ marginBottom: 20 }}>
|
||
<div style={{ fontSize: 14, fontWeight: 700, color: '#111827', marginBottom: 4 }}>
|
||
Waiter App — Table Colour Schemes
|
||
</div>
|
||
<p style={{ fontSize: 12, color: '#6b7280' }}>
|
||
Each table card has four colour slots. Click any colour swatch below to open the colour picker.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Live previews side by side */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 32 }}>
|
||
<PreviewPanel colours={colours} mode="light" />
|
||
<PreviewPanel colours={colours} mode="dark" />
|
||
</div>
|
||
|
||
{/* Light + Dark mode settings */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
|
||
<ModeSection mode="light" colours={colours} onOpen={openModal} />
|
||
<ModeSection mode="dark" colours={colours} onOpen={openModal} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Reset all button at bottom */}
|
||
<div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid #e5e7eb', display: 'flex', justifyContent: 'flex-end' }}>
|
||
<button
|
||
onClick={handleReset}
|
||
style={{
|
||
height: 40, padding: '0 20px', borderRadius: 10,
|
||
border: '1.5px solid #fca5a5', background: '#fff5f5',
|
||
color: '#dc2626', fontSize: 14, fontWeight: 600, cursor: 'pointer',
|
||
}}
|
||
>
|
||
Reset All to Defaults
|
||
</button>
|
||
</div>
|
||
|
||
{/* Colour picker modal */}
|
||
{modal && (
|
||
<ColourPickerModal
|
||
value={modal.value}
|
||
slot={modal.slot}
|
||
onClose={() => setModal(null)}
|
||
onChange={handleChange}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|