557 lines
22 KiB
JavaScript
557 lines
22 KiB
JavaScript
import { useState, useEffect, useRef, useCallback } from 'react';
|
||
import { api } from '../utils/api.js';
|
||
import { useToast } from '../contexts/ToastContext.jsx';
|
||
|
||
const DEFAULT_TITLE_COLOR = '#1a73e8'; // light mode default
|
||
const DEFAULT_TITLE_DARK_COLOR = '#60a5fa'; // dark mode default (lighter blue readable on dark bg)
|
||
const DEFAULT_PUBLIC_COLOR = '#1a73e8';
|
||
const DEFAULT_DM_COLOR = '#a142f4';
|
||
|
||
const COLOUR_SUGGESTIONS = [
|
||
'#1a73e8', '#a142f4', '#e53935', '#fa7b17', '#fdd835', '#34a853',
|
||
];
|
||
|
||
// ── Title Colour Row — one row per mode ──────────────────────────────────────
|
||
|
||
function TitleColourRow({ bgColor, bgLabel, textColor, onChange }) {
|
||
const [mode, setMode] = useState('idle'); // 'idle' | 'custom'
|
||
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
{/* Preview box */}
|
||
<div style={{
|
||
background: bgColor, borderRadius: 8, padding: '0 14px',
|
||
height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
border: '1px solid var(--border)', minWidth: 110, flexShrink: 0,
|
||
boxShadow: '0 1px 4px rgba(0,0,0,0.1)',
|
||
}}>
|
||
<span style={{ color: textColor, fontWeight: 700, fontSize: 16 }}>
|
||
Title
|
||
</span>
|
||
</div>
|
||
|
||
{mode === 'idle' && (
|
||
<>
|
||
<span style={{ fontSize: 12, color: 'var(--text-tertiary)', fontFamily: 'monospace', minWidth: 64 }}>{textColor}</span>
|
||
<button className="btn btn-secondary btn-sm" onClick={() => setMode('custom')}>Custom</button>
|
||
</>
|
||
)}
|
||
|
||
{mode === 'custom' && (
|
||
<div style={{ flex: 1 }}>
|
||
<CustomPicker
|
||
initial={textColor}
|
||
onSet={(hex) => { onChange(hex); setMode('idle'); }}
|
||
onBack={() => setMode('idle')} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Colour math helpers ──────────────────────────────────────────────────────
|
||
|
||
function hexToHsv(hex) {
|
||
const r = parseInt(hex.slice(1,3),16)/255;
|
||
const g = parseInt(hex.slice(3,5),16)/255;
|
||
const b = parseInt(hex.slice(5,7),16)/255;
|
||
const max = Math.max(r,g,b), min = Math.min(r,g,b), d = max - min;
|
||
let h = 0;
|
||
if (d !== 0) {
|
||
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
|
||
else if (max === g) h = ((b - r) / d + 2) / 6;
|
||
else h = ((r - g) / d + 4) / 6;
|
||
}
|
||
return { h: h * 360, s: max === 0 ? 0 : d / max, v: max };
|
||
}
|
||
|
||
function hsvToHex(h, s, v) {
|
||
h = h / 360;
|
||
const i = Math.floor(h * 6);
|
||
const f = h * 6 - i;
|
||
const p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
|
||
let r, g, b;
|
||
switch (i % 6) {
|
||
case 0: r=v; g=t; b=p; break; case 1: r=q; g=v; b=p; break;
|
||
case 2: r=p; g=v; b=t; break; case 3: r=p; g=q; b=v; break;
|
||
case 4: r=t; g=p; b=v; break; default: r=v; g=p; b=q;
|
||
}
|
||
return '#' + [r,g,b].map(x => Math.round(x*255).toString(16).padStart(2,'0')).join('');
|
||
}
|
||
|
||
function isValidHex(h) { return /^#[0-9a-fA-F]{6}$/.test(h); }
|
||
|
||
// ── SV (saturation/value) square ─────────────────────────────────────────────
|
||
|
||
function SvSquare({ hue, s, v, onChange }) {
|
||
const canvasRef = useRef(null);
|
||
const dragging = useRef(false);
|
||
|
||
useEffect(() => {
|
||
const canvas = canvasRef.current;
|
||
if (!canvas) return;
|
||
const ctx = canvas.getContext('2d');
|
||
const W = canvas.width, H = canvas.height;
|
||
// White → hue gradient (left→right)
|
||
const hGrad = ctx.createLinearGradient(0, 0, W, 0);
|
||
hGrad.addColorStop(0, '#fff');
|
||
hGrad.addColorStop(1, `hsl(${hue},100%,50%)`);
|
||
ctx.fillStyle = hGrad; ctx.fillRect(0, 0, W, H);
|
||
// Transparent → black gradient (top→bottom)
|
||
const vGrad = ctx.createLinearGradient(0, 0, 0, H);
|
||
vGrad.addColorStop(0, 'transparent');
|
||
vGrad.addColorStop(1, '#000');
|
||
ctx.fillStyle = vGrad; ctx.fillRect(0, 0, W, H);
|
||
}, [hue]);
|
||
|
||
const getPos = (e, canvas) => {
|
||
const r = canvas.getBoundingClientRect();
|
||
const cx = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
|
||
const cy = (e.touches ? e.touches[0].clientY : e.clientY) - r.top;
|
||
return {
|
||
s: Math.max(0, Math.min(1, cx / r.width)),
|
||
v: Math.max(0, Math.min(1, 1 - cy / r.height)),
|
||
};
|
||
};
|
||
|
||
const handle = (e) => {
|
||
e.preventDefault();
|
||
const p = getPos(e, canvasRef.current);
|
||
onChange(p.s, p.v);
|
||
};
|
||
|
||
return (
|
||
<div style={{ position: 'relative', userSelect: 'none', touchAction: 'none' }}>
|
||
<canvas
|
||
ref={canvasRef} width={260} height={160}
|
||
style={{ display: 'block', width: '100%', height: 160, borderRadius: 8, cursor: 'crosshair', border: '1px solid var(--border)' }}
|
||
onMouseDown={e => { dragging.current = true; handle(e); }}
|
||
onMouseMove={e => { if (dragging.current) handle(e); }}
|
||
onMouseUp={() => { dragging.current = false; }}
|
||
onMouseLeave={() => { dragging.current = false; }}
|
||
onTouchStart={handle} onTouchMove={handle} />
|
||
{/* Cursor circle */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
left: `calc(${s * 100}% - 7px)`,
|
||
top: `calc(${(1 - v) * 100}% - 7px)`,
|
||
width: 14, height: 14, borderRadius: '50%',
|
||
border: '2px solid white',
|
||
boxShadow: '0 0 0 1.5px rgba(0,0,0,0.4)',
|
||
pointerEvents: 'none',
|
||
background: 'transparent',
|
||
}} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Hue bar ───────────────────────────────────────────────────────────────────
|
||
|
||
function HueBar({ hue, onChange }) {
|
||
const barRef = useRef(null);
|
||
const dragging = useRef(false);
|
||
|
||
const handle = (e) => {
|
||
e.preventDefault();
|
||
const r = barRef.current.getBoundingClientRect();
|
||
const cx = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
|
||
onChange(Math.max(0, Math.min(360, (cx / r.width) * 360)));
|
||
};
|
||
|
||
return (
|
||
<div style={{ position: 'relative', userSelect: 'none', touchAction: 'none', marginTop: 10 }}>
|
||
<div
|
||
ref={barRef}
|
||
style={{
|
||
height: 20, borderRadius: 10,
|
||
background: 'linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)',
|
||
border: '1px solid var(--border)', cursor: 'pointer',
|
||
}}
|
||
onMouseDown={e => { dragging.current = true; handle(e); }}
|
||
onMouseMove={e => { if (dragging.current) handle(e); }}
|
||
onMouseUp={() => { dragging.current = false; }}
|
||
onMouseLeave={() => { dragging.current = false; }}
|
||
onTouchStart={handle} onTouchMove={handle} />
|
||
<div style={{
|
||
position: 'absolute',
|
||
left: `calc(${(hue / 360) * 100}% - 9px)`,
|
||
top: -2, width: 18, height: 24, borderRadius: 4,
|
||
background: `hsl(${hue},100%,50%)`,
|
||
border: '2px solid white',
|
||
boxShadow: '0 0 0 1.5px rgba(0,0,0,0.3)',
|
||
pointerEvents: 'none',
|
||
}} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Custom HSV picker ─────────────────────────────────────────────────────────
|
||
|
||
function CustomPicker({ initial, onSet, onBack }) {
|
||
const { h: ih, s: is, v: iv } = hexToHsv(initial);
|
||
const [hue, setHue] = useState(ih);
|
||
const [sat, setSat] = useState(is);
|
||
const [val, setVal] = useState(iv);
|
||
const [hexInput, setHexInput] = useState(initial);
|
||
const [hexError, setHexError] = useState(false);
|
||
|
||
const current = hsvToHex(hue, sat, val);
|
||
|
||
// Sync hex input when sliders change
|
||
useEffect(() => { setHexInput(current); setHexError(false); }, [current]);
|
||
|
||
const handleHexInput = (e) => {
|
||
const v = e.target.value;
|
||
setHexInput(v);
|
||
if (isValidHex(v)) {
|
||
const { h, s, v: bv } = hexToHsv(v);
|
||
setHue(h); setSat(s); setVal(bv);
|
||
setHexError(false);
|
||
} else {
|
||
setHexError(true);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
<SvSquare hue={hue} s={sat} v={val} onChange={(s, v) => { setSat(s); setVal(v); }} />
|
||
<HueBar hue={hue} onChange={setHue} />
|
||
|
||
{/* Preview + hex input */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 2 }}>
|
||
<div style={{
|
||
width: 40, height: 40, borderRadius: 8, background: current,
|
||
border: '2px solid var(--border)', flexShrink: 0,
|
||
boxShadow: '0 1px 4px rgba(0,0,0,0.15)',
|
||
}} />
|
||
<input
|
||
value={hexInput}
|
||
onChange={handleHexInput}
|
||
maxLength={7}
|
||
style={{
|
||
fontFamily: 'monospace', fontSize: 14,
|
||
padding: '6px 10px', borderRadius: 8,
|
||
border: `1px solid ${hexError ? '#e53935' : 'var(--border)'}`,
|
||
width: 110, background: 'var(--surface)',
|
||
color: 'var(--text-primary)',
|
||
}}
|
||
placeholder="#000000" autoComplete="new-password" />
|
||
<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>Chosen colour</span>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div style={{ display: 'flex', gap: 8, marginTop: 2 }}>
|
||
<button className="btn btn-primary btn-sm" onClick={() => onSet(current)} disabled={hexError}>
|
||
Set
|
||
</button>
|
||
<button className="btn btn-secondary btn-sm" onClick={onBack}>
|
||
Back
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── ColourPicker card ─────────────────────────────────────────────────────────
|
||
|
||
function ColourPicker({ label, value, onChange, preview }) {
|
||
const [mode, setMode] = useState('suggestions'); // 'suggestions' | 'custom'
|
||
|
||
return (
|
||
<div>
|
||
<div className="settings-section-label">{label}</div>
|
||
|
||
{/* Current colour preview */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
|
||
{preview
|
||
? preview(value)
|
||
: <div style={{ width: 36, height: 36, borderRadius: 8, background: value, border: '2px solid var(--border)', flexShrink: 0 }} />
|
||
}
|
||
<span style={{ fontSize: 13, color: 'var(--text-secondary)', fontFamily: 'monospace' }}>{value}</span>
|
||
</div>
|
||
|
||
{mode === 'suggestions' && (
|
||
<>
|
||
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
|
||
{COLOUR_SUGGESTIONS.map(hex => (
|
||
<button
|
||
key={hex}
|
||
onClick={() => onChange(hex)}
|
||
style={{
|
||
width: 32, height: 32, borderRadius: 8,
|
||
background: hex, border: hex === value ? '3px solid var(--text-primary)' : '2px solid var(--border)',
|
||
cursor: 'pointer', flexShrink: 0,
|
||
boxShadow: hex === value ? '0 0 0 2px var(--surface), 0 0 0 4px var(--text-primary)' : 'none',
|
||
transition: 'box-shadow 0.15s',
|
||
}}
|
||
title={hex} />
|
||
))}
|
||
</div>
|
||
<button className="btn btn-secondary btn-sm" onClick={() => setMode('custom')}>
|
||
Custom
|
||
</button>
|
||
</>
|
||
)}
|
||
|
||
{mode === 'custom' && (
|
||
<CustomPicker
|
||
initial={value}
|
||
onSet={(hex) => { onChange(hex); setMode('suggestions'); }}
|
||
onBack={() => setMode('suggestions')} />
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function BrandingModal({ onClose }) {
|
||
const toast = useToast();
|
||
const [tab, setTab] = useState('general'); // 'general' | 'colours'
|
||
const [settings, setSettings] = useState({});
|
||
const [appName, setAppName] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
const [resetting, setResetting] = useState(false);
|
||
const [showResetConfirm, setShowResetConfirm] = useState(false);
|
||
|
||
const [colourTitle, setColourTitle] = useState(DEFAULT_TITLE_COLOR);
|
||
const [colourTitleDark, setColourTitleDark] = useState(DEFAULT_TITLE_DARK_COLOR);
|
||
const [colourPublic, setColourPublic] = useState(DEFAULT_PUBLIC_COLOR);
|
||
const [colourDm, setColourDm] = useState(DEFAULT_DM_COLOR);
|
||
const [savingColours, setSavingColours] = useState(false);
|
||
|
||
useEffect(() => {
|
||
api.getSettings().then(({ settings }) => {
|
||
setSettings(settings);
|
||
setAppName(settings.app_name || 'rosterchirp');
|
||
setColourTitle(settings.color_title || DEFAULT_TITLE_COLOR);
|
||
setColourTitleDark(settings.color_title_dark || DEFAULT_TITLE_DARK_COLOR);
|
||
setColourPublic(settings.color_avatar_public || DEFAULT_PUBLIC_COLOR);
|
||
setColourDm(settings.color_avatar_dm || DEFAULT_DM_COLOR);
|
||
}).catch(() => {});
|
||
}, []);
|
||
|
||
const notifySidebarRefresh = () => window.dispatchEvent(new Event('rosterchirp:settings-changed'));
|
||
|
||
const handleSaveName = async () => {
|
||
if (!appName.trim()) return;
|
||
setLoading(true);
|
||
try {
|
||
await api.updateAppName(appName.trim());
|
||
setSettings(prev => ({ ...prev, app_name: appName.trim() }));
|
||
toast('App name updated', 'success');
|
||
notifySidebarRefresh();
|
||
} catch (e) {
|
||
toast(e.message, 'error');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleLogoUpload = async (e) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
if (file.size > 1024 * 1024) return toast('Logo must be less than 1MB', 'error');
|
||
try {
|
||
const { logoUrl } = await api.uploadLogo(file);
|
||
setSettings(prev => ({ ...prev, logo_url: logoUrl }));
|
||
toast('Logo updated', 'success');
|
||
notifySidebarRefresh();
|
||
} catch (e) {
|
||
toast(e.message, 'error');
|
||
}
|
||
};
|
||
|
||
const handleSaveColours = async () => {
|
||
setSavingColours(true);
|
||
try {
|
||
await api.updateColors({
|
||
colorTitle: colourTitle,
|
||
colorTitleDark: colourTitleDark,
|
||
colorAvatarPublic: colourPublic,
|
||
colorAvatarDm: colourDm,
|
||
});
|
||
setSettings(prev => ({
|
||
...prev,
|
||
color_title: colourTitle,
|
||
color_title_dark: colourTitleDark,
|
||
color_avatar_public: colourPublic,
|
||
color_avatar_dm: colourDm,
|
||
}));
|
||
toast('Colours updated', 'success');
|
||
notifySidebarRefresh();
|
||
} catch (e) {
|
||
toast(e.message, 'error');
|
||
} finally {
|
||
setSavingColours(false);
|
||
}
|
||
};
|
||
|
||
const handleReset = async () => {
|
||
setResetting(true);
|
||
try {
|
||
await api.resetSettings();
|
||
const { settings: fresh } = await api.getSettings();
|
||
setSettings(fresh);
|
||
setAppName(fresh.app_name || 'rosterchirp');
|
||
setColourTitle(DEFAULT_TITLE_COLOR);
|
||
setColourTitleDark(DEFAULT_TITLE_DARK_COLOR);
|
||
setColourPublic(DEFAULT_PUBLIC_COLOR);
|
||
setColourDm(DEFAULT_DM_COLOR);
|
||
toast('Settings reset to defaults', 'success');
|
||
notifySidebarRefresh();
|
||
setShowResetConfirm(false);
|
||
} catch (e) {
|
||
toast(e.message, 'error');
|
||
} finally {
|
||
setResetting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
|
||
<div className="modal" style={{ maxWidth: 460 }}>
|
||
<div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
|
||
<h2 className="modal-title" style={{ margin: 0 }}>Branding</h2>
|
||
<button className="btn-icon" onClick={onClose}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="flex gap-2" style={{ marginBottom: 24 }}>
|
||
<button className={`btn btn-sm ${tab === 'general' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('general')}>General</button>
|
||
<button className={`btn btn-sm ${tab === 'colours' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('colours')}>Colours</button>
|
||
</div>
|
||
|
||
{tab === 'general' && (
|
||
<>
|
||
{/* App Logo */}
|
||
<div style={{ marginBottom: 24 }}>
|
||
<div className="settings-section-label">App Logo</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||
<div style={{
|
||
width: 72, height: 72, borderRadius: 16, background: 'var(--background)',
|
||
border: '1px solid var(--border)', overflow: 'hidden', display: 'flex',
|
||
alignItems: 'center', justifyContent: 'center', flexShrink: 0
|
||
}}>
|
||
<img src={settings.logo_url || '/icons/rosterchirp.png'} alt="logo" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
|
||
</div>
|
||
<div>
|
||
<label className="btn btn-secondary btn-sm" style={{ cursor: 'pointer', display: 'inline-block' }}>
|
||
Upload Logo
|
||
<input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleLogoUpload} />
|
||
</label>
|
||
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 6 }}>
|
||
Square format, max 1MB. Used in sidebar, login page and browser tab.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* App Name */}
|
||
<div style={{ marginBottom: 24 }}>
|
||
<div className="settings-section-label">App Name</div>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<input
|
||
className="input flex-1"
|
||
value={appName}
|
||
maxLength={16}
|
||
onChange={e => setAppName(e.target.value)} autoComplete="new-password" onKeyDown={e => e.key === 'Enter' && handleSaveName()} />
|
||
<button className="btn btn-primary btn-sm" onClick={handleSaveName} disabled={loading}>{loading ? '...' : 'Save'}</button>
|
||
</div>
|
||
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 6 }}>
|
||
Maximum 16 characters including spaces. Currently {appName.length}/16.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Reset */}
|
||
<div style={{ marginBottom: settings.pw_reset_active === 'true' ? 16 : 0 }}>
|
||
<div className="settings-section-label">Reset</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
|
||
{!showResetConfirm ? (
|
||
<button className="btn btn-secondary btn-sm" onClick={() => setShowResetConfirm(true)}>Reset All to Defaults</button>
|
||
) : (
|
||
<div style={{ background: '#fce8e6', border: '1px solid #f5c6c2', borderRadius: 'var(--radius)', padding: '12px 14px' }}>
|
||
<p style={{ fontSize: 13, color: 'var(--error)', marginBottom: 12 }}>
|
||
This will reset the app name, logo and all colours to their install defaults. This cannot be undone.
|
||
</p>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<button className="btn btn-sm" style={{ background: 'var(--error)', color: 'white' }} onClick={handleReset} disabled={resetting}>
|
||
{resetting ? 'Resetting...' : 'Yes, Reset Everything'}
|
||
</button>
|
||
<button className="btn btn-secondary btn-sm" onClick={() => setShowResetConfirm(false)}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{settings.app_version && (
|
||
<span style={{ fontSize: 11, color: 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>v{settings.app_version}</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{settings.pw_reset_active === 'true' && (
|
||
<div className="warning-banner">
|
||
<span>⚠️</span>
|
||
<span><strong>ADMPW_RESET is active.</strong> The default admin password is being reset on every restart. Set ADMPW_RESET=false in your environment variables to stop this.</span>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{tab === 'colours' && (
|
||
<div className="flex-col gap-3">
|
||
<div>
|
||
<div className="settings-section-label">App Title Colour</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
|
||
<TitleColourRow
|
||
bgColor="#f1f3f4"
|
||
bgLabel="Light mode"
|
||
textColor={colourTitle}
|
||
onChange={setColourTitle} />
|
||
<TitleColourRow
|
||
bgColor="#13131f"
|
||
bgLabel="Dark mode"
|
||
textColor={colourTitleDark}
|
||
onChange={setColourTitleDark} />
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
|
||
<ColourPicker
|
||
label="Public Message Avatar Colour"
|
||
value={colourPublic}
|
||
onChange={setColourPublic}
|
||
preview={(val) => (
|
||
<div style={{
|
||
width: 36, height: 36, borderRadius: '50%', background: val,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
color: 'white', fontWeight: 700, fontSize: 15, flexShrink: 0,
|
||
}}>A</div>
|
||
)} />
|
||
</div>
|
||
|
||
<div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
|
||
<ColourPicker
|
||
label="Direct Message Avatar Colour"
|
||
value={colourDm}
|
||
onChange={setColourDm}
|
||
preview={(val) => (
|
||
<div style={{
|
||
width: 36, height: 36, borderRadius: '50%', background: val,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
color: 'white', fontWeight: 700, fontSize: 15, flexShrink: 0,
|
||
}}>B</div>
|
||
)} />
|
||
</div>
|
||
|
||
<div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
|
||
<button className="btn btn-primary" onClick={handleSaveColours} disabled={savingColours}>
|
||
{savingColours ? 'Saving...' : 'Save Colours'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|