GnosysLabs/Synapsis
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add accent color setting and apply it dynamically across components

Browse Source
This commit is contained in:
Christopher
2026-01-22 05:21:30 -08:00
parent ce16f6e8dd
commit 0ccacecd8a
7 changed files with 89 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/page.tsx
+20
View File
@@ -61,6 +61,7 @@ export default function AdminPage() {
longDescription: '',
rules: '',
bannerUrl: '',
accentColor: '#00D4AA',
});
const [savingSettings, setSavingSettings] = useState(false);
const [isUploadingBanner, setIsUploadingBanner] = useState(false);
@@ -123,6 +124,7 @@ export default function AdminPage() {
longDescription: data.longDescription || '',
rules: data.rules || '',
bannerUrl: data.bannerUrl || '',
accentColor: data.accentColor || '#00D4AA',
});
} catch {
// error
@@ -501,6 +503,24 @@ export default function AdminPage() {
/>
</div>
<div>
<label style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px', display: 'block' }}>Accent Color</label>
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<input
type="color"
value={nodeSettings.accentColor}
onChange={(e) => setNodeSettings({ ...nodeSettings, accentColor: e.target.value })}
style={{ width: '44px', height: '36px', padding: 0, border: '1px solid var(--border)', background: 'transparent', borderRadius: '8px' }}
/>
<input
className="input"
value={nodeSettings.accentColor}
onChange={(e) => setNodeSettings({ ...nodeSettings, accentColor: e.target.value })}
placeholder="#00D4AA"
/>
</div>
</div>
<div>
<label style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px', display: 'block' }}>Banner image</label>
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>