Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dark mode styling across UI components and update README with roadmap and system requirements.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-03-02 11:29:55 -03:00
parent 8c6cba6d2e
commit 81e1830563
15 changed files with 555 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/components/BrandingSettings.tsx
+32 -32
View File
@@ -61,45 +61,45 @@ export default function BrandingSettings() {
if (!org) return <div className="p-8 text-center text-red-400">Failed to load organization settings.</div>;
return (
<div className="space-y-8 max-w-4xl mx-auto">
<fieldset className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
<legend className="px-2 text-xl font-bold flex items-center gap-2">
<div className="space-y-8 max-w-4xl mx-auto pb-12">
<fieldset className="border border-slate-200 dark:border-white/10 rounded-2xl p-6 bg-white dark:bg-white/5 backdrop-blur-sm shadow-sm">
<legend className="px-2 text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
<span aria-hidden="true">🎨</span> Brand Identity
</legend>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Organization Name */}
<div className="col-span-full">
<label htmlFor="org-name" className="block text-sm font-medium text-gray-400 mb-2">Organization Name</label>
<label htmlFor="org-name" className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Organization Name</label>
<input
id="org-name"
type="text"
value={formData.name || ""}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-blue-500/50 transition-colors"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
placeholder="My Organization"
required
/>
<p className="text-xs text-gray-500 mt-2">The official name of your organization.</p>
<p className="text-xs text-slate-500 dark:text-gray-500 mt-2">The official name of your organization.</p>
</div>
{/* Platform Name */}
<div className="col-span-full">
<label htmlFor="platform-name" className="block text-sm font-medium text-gray-400 mb-2">Platform Name</label>
<label htmlFor="platform-name" className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Platform Name</label>
<input
id="platform-name"
type="text"
value={formData.platform_name || ""}
onChange={(e) => setFormData({ ...formData, platform_name: e.target.value })}
placeholder={org.name}
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-blue-500/50 transition-colors"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
/>
<p className="text-xs text-gray-500 mt-2">Appears in the browser tab and page titles.</p>
<p className="text-xs text-slate-500 dark:text-gray-500 mt-2">Appears in the browser tab and page titles.</p>
</div>
{/* Logo Section */}
<div className="space-y-4">
<span className="block text-sm font-medium text-gray-400">Logo</span>
<div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px] relative">
<span className="block text-sm font-medium text-slate-600 dark:text-gray-400">Logo</span>
<div className="p-4 bg-slate-50 dark:bg-black/20 rounded-xl border border-slate-200 dark:border-white/5 flex items-center justify-center min-h-[120px] relative overflow-hidden">
{org.logo_url ? (
<Image
src={getImageUrl(org.logo_url)}
@@ -109,7 +109,7 @@ export default function BrandingSettings() {
sizes="100px"
/>
) : (
<span className="text-gray-600 text-sm">No logo uploaded</span>
<span className="text-slate-400 dark:text-gray-600 text-sm">No logo uploaded</span>
)}
</div>
<FileUpload
@@ -130,8 +130,8 @@ export default function BrandingSettings() {
{/* Favicon Section */}
<div className="space-y-4">
<span className="block text-sm font-medium text-gray-400">Favicon</span>
<div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px] relative">
<span className="block text-sm font-medium text-slate-600 dark:text-gray-400">Favicon</span>
<div className="p-4 bg-slate-50 dark:bg-black/20 rounded-xl border border-slate-200 dark:border-white/5 flex items-center justify-center min-h-[120px] relative overflow-hidden">
{org.favicon_url ? (
<div className="w-8 h-8 relative">
<Image
@@ -143,7 +143,7 @@ export default function BrandingSettings() {
/>
</div>
) : (
<span className="text-gray-600 text-sm">No favicon</span>
<span className="text-slate-400 dark:text-gray-600 text-sm">No favicon</span>
)}
</div>
<FileUpload
@@ -163,47 +163,47 @@ export default function BrandingSettings() {
</div>
{/* Logo Variant Selection */}
<div className="col-span-full border-t border-white/5 pt-6 mt-2">
<label className="block text-sm font-medium text-gray-400 mb-4">Logo Display Style (Header)</label>
<div className="col-span-full border-t border-slate-100 dark:border-white/5 pt-6 mt-2">
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-4">Logo Display Style (Header)</label>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<button
type="button"
onClick={() => setFormData({ ...formData, logo_variant: "standard" })}
className={`flex flex-col gap-3 p-4 rounded-xl border transition-all text-left ${formData.logo_variant === "standard" ? "bg-blue-600/10 border-blue-500/50" : "bg-black/20 border-white/10 hover:border-white/20"}`}
className={`flex flex-col gap-3 p-4 rounded-xl border transition-all text-left ${formData.logo_variant === "standard" ? "bg-blue-600/10 border-blue-500/50" : "bg-slate-50 dark:bg-black/20 border-slate-200 dark:border-white/10 hover:border-blue-500/30 dark:hover:border-white/20"}`}
>
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center font-bold text-xs">O</div>
<span className="text-sm font-bold">Standard</span>
<div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center font-bold text-xs text-white">O</div>
<span className="text-sm font-bold text-slate-900 dark:text-white">Standard</span>
</div>
<p className="text-xs text-gray-500">Small icon next to the organization name. Best for square logos.</p>
<p className="text-xs text-slate-500 dark:text-gray-500">Small icon next to the organization name. Best for square logos.</p>
</button>
<button
type="button"
onClick={() => setFormData({ ...formData, logo_variant: "wide" })}
className={`flex flex-col gap-3 p-4 rounded-xl border transition-all text-left ${formData.logo_variant === "wide" ? "bg-blue-600/10 border-blue-500/50" : "bg-black/20 border-white/10 hover:border-white/20"}`}
className={`flex flex-col gap-3 p-4 rounded-xl border transition-all text-left ${formData.logo_variant === "wide" ? "bg-blue-600/10 border-blue-500/50" : "bg-slate-50 dark:bg-black/20 border-slate-200 dark:border-white/10 hover:border-blue-500/30 dark:hover:border-white/20"}`}
>
<div className="flex items-center gap-2">
<div className="w-20 h-6 bg-blue-600/20 rounded-md border border-blue-500/30 flex items-center justify-center">
<div className="w-12 h-2 bg-blue-500 rounded-full" />
</div>
<span className="text-sm font-bold">Wide / Horizontal</span>
<span className="text-sm font-bold text-slate-900 dark:text-white">Wide / Horizontal</span>
</div>
<p className="text-xs text-gray-500">Shows the full logo without text. Best for horizontal images like yours.</p>
<p className="text-xs text-slate-500 dark:text-gray-500">Shows the full logo without text. Best for horizontal images like yours.</p>
</button>
</div>
</div>
</div>
</fieldset>
<fieldset className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
<legend className="px-2 text-xl font-bold flex items-center gap-2">
<fieldset className="border border-slate-200 dark:border-white/10 rounded-2xl p-6 bg-white dark:bg-white/5 backdrop-blur-sm shadow-sm">
<legend className="px-2 text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
<span aria-hidden="true">🌈</span> Brand Colors
</legend>
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Primary Color */}
<div>
<label htmlFor="primary-color" className="block text-sm font-medium text-gray-400 mb-2">Primary Color</label>
<label htmlFor="primary-color" className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Primary Color</label>
<div className="flex items-center gap-4">
<input
id="primary-color-picker"
@@ -219,17 +219,17 @@ export default function BrandingSettings() {
type="text"
value={formData.primary_color}
onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })}
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2 text-slate-900 dark:text-white font-mono uppercase focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-bold"
aria-describedby="primary-color-desc"
/>
</div>
</div>
<p id="primary-color-desc" className="text-xs text-gray-500 mt-2">Used for main buttons, active states, and highlights.</p>
<p id="primary-color-desc" className="text-xs text-slate-500 dark:text-gray-500 mt-2">Used for main buttons, active states, and highlights.</p>
</div>
{/* Secondary Color */}
<div>
<label htmlFor="secondary-color" className="block text-sm font-medium text-gray-400 mb-2">Secondary Color</label>
<label htmlFor="secondary-color" className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Secondary Color</label>
<div className="flex items-center gap-4">
<input
id="secondary-color-picker"
@@ -245,12 +245,12 @@ export default function BrandingSettings() {
type="text"
value={formData.secondary_color}
onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })}
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2 text-slate-900 dark:text-white font-mono uppercase focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-bold"
aria-describedby="secondary-color-desc"
/>
</div>
</div>
<p id="secondary-color-desc" className="text-xs text-gray-500 mt-2">Used for accents and gradients.</p>
<p id="secondary-color-desc" className="text-xs text-slate-500 dark:text-gray-500 mt-2">Used for accents and gradients.</p>
</div>
</div>
</fieldset>