feat: add accent color setting and apply it dynamically across components
This commit is contained in:
Christopher
@@ -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' }}>
|
||||
|
||||
@@ -33,6 +33,7 @@ export async function PATCH(req: NextRequest) {
|
||||
longDescription: data.longDescription,
|
||||
rules: data.rules,
|
||||
bannerUrl: data.bannerUrl,
|
||||
accentColor: data.accentColor,
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(eq(nodes.id, node.id))
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { SynapsisLogo } from '@/components/Icons';
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
@@ -58,7 +59,7 @@ export default function LoginPage() {
|
||||
{/* Logo */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '32px' }}>
|
||||
<div className="logo" style={{ marginBottom: '8px', fontSize: '32px' }}>
|
||||
<img className="logo-icon" src="/logo.svg" alt="Synapsis" width={28} height={28} />
|
||||
<SynapsisLogo />
|
||||
<span>Synapsis</span>
|
||||
</div>
|
||||
<p style={{ color: 'var(--foreground-secondary)', marginTop: '0' }}>
|
||||
|
||||
@@ -79,10 +79,30 @@ export const UsersIcon = () => (
|
||||
);
|
||||
|
||||
export const SynapsisLogo = () => (
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="var(--foreground)" />
|
||||
<path d="M16 6C10.477 6 6 10.477 6 16C6 21.523 10.477 26 16 26C21.523 26 26 21.523 26 16C26 10.477 21.523 6 16 6ZM16 24C11.5817 24 8 20.4183 8 16C8 11.5817 11.5817 8 16 8C20.4183 8 24 11.5817 24 16C24 20.4183 20.4183 24 16 24Z" fill="var(--background)" />
|
||||
<path d="M16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12Z" fill="var(--background)" />
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
|
||||
<path d="M9 13a4.5 4.5 0 0 0 3-4" />
|
||||
<path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
|
||||
<path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
|
||||
<path d="M6 18a4 4 0 0 1-1.967-.516" />
|
||||
<path d="M12 13h4" />
|
||||
<path d="M12 18h6a2 2 0 0 1 2 2v1" />
|
||||
<path d="M12 8h8" />
|
||||
<path d="M16 8V5a2 2 0 0 1 2-2" />
|
||||
<circle cx="16" cy="13" r=".5" />
|
||||
<circle cx="18" cy="3" r=".5" />
|
||||
<circle cx="20" cy="21" r=".5" />
|
||||
<circle cx="20" cy="8" r=".5" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Sidebar } from './Sidebar';
|
||||
import { RightSidebar } from './RightSidebar';
|
||||
@@ -14,6 +15,37 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
||||
pathname?.startsWith('/install') ||
|
||||
pathname?.startsWith('/admin');
|
||||
|
||||
useEffect(() => {
|
||||
const applyAccent = (color?: string | null) => {
|
||||
if (!color) return;
|
||||
const cleaned = color.trim();
|
||||
const normalized = cleaned.startsWith('#') ? cleaned : `#${cleaned}`;
|
||||
const hexMatch = /^#([0-9a-fA-F]{6})$/.exec(normalized);
|
||||
if (!hexMatch) return;
|
||||
|
||||
const hex = hexMatch[1];
|
||||
const r = parseInt(hex.slice(0, 2), 16);
|
||||
const g = parseInt(hex.slice(2, 4), 16);
|
||||
const b = parseInt(hex.slice(4, 6), 16);
|
||||
|
||||
const mix = (channel: number, target: number, amount: number) =>
|
||||
Math.round(channel + (target - channel) * amount);
|
||||
|
||||
const hover = `rgb(${mix(r, 255, 0.12)}, ${mix(g, 255, 0.12)}, ${mix(b, 255, 0.12)})`;
|
||||
const muted = `rgba(${r}, ${g}, ${b}, 0.12)`;
|
||||
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty('--accent', `#${hex}`);
|
||||
root.style.setProperty('--accent-hover', hover);
|
||||
root.style.setProperty('--accent-muted', muted);
|
||||
};
|
||||
|
||||
fetch('/api/node', { cache: 'no-store' })
|
||||
.then((res) => res.json())
|
||||
.then((data) => applyAccent(data?.accentColor))
|
||||
.catch(() => { });
|
||||
}, []);
|
||||
|
||||
if (isStandalone) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@@ -31,22 +31,18 @@ export function RightSidebar() {
|
||||
|
||||
return (
|
||||
<aside className="aside">
|
||||
<div className="card" style={{ position: 'relative', overflow: 'hidden', padding: 0 }}>
|
||||
<div className="card" style={{ overflow: 'hidden', padding: 0 }}>
|
||||
{nodeInfo.bannerUrl && (
|
||||
<>
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0,
|
||||
<div
|
||||
style={{
|
||||
height: '140px',
|
||||
background: `url(${nodeInfo.bannerUrl}) center/cover no-repeat`,
|
||||
opacity: 0.6
|
||||
}} />
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0,
|
||||
background: 'linear-gradient(to bottom, transparent 0%, var(--background-secondary) 90%)'
|
||||
}} />
|
||||
</>
|
||||
borderBottom: '1px solid var(--border)',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 1, padding: '16px' }}>
|
||||
<div style={{ padding: '16px' }}>
|
||||
<h3 style={{ fontWeight: 600, marginBottom: '12px' }}>Welcome to {nodeInfo.name}</h3>
|
||||
<p style={{ color: 'var(--foreground-secondary)', fontSize: '14px', lineHeight: 1.6 }}>
|
||||
{nodeInfo.description}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
import { HomeIcon, SearchIcon, BellIcon, UserIcon, ShieldIcon } from './Icons';
|
||||
import { HomeIcon, SearchIcon, BellIcon, UserIcon, ShieldIcon, SynapsisLogo } from './Icons';
|
||||
|
||||
export function Sidebar() {
|
||||
const { user, isAdmin } = useAuth();
|
||||
@@ -15,7 +15,7 @@ export function Sidebar() {
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<Link href="/" className="logo">
|
||||
<img className="logo-icon" src="/logo.svg" alt="Synapsis" width={28} height={28} />
|
||||
<SynapsisLogo />
|
||||
<span>Synapsis</span>
|
||||
</Link>
|
||||
<nav>
|
||||
|
||||
Reference in New Issue
Block a user