Oliver/cinema-studio-pro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: change selected toggle buttons from gold to off-white

Browse source 
Replace bg-cinema-gold with bg-slate-200 on all 21 toggle/selector
buttons. Gold now reserved exclusively for primary CTA buttons
(Generate Image, Generate Video). Creates quieter UI that lets
generated images and video stand out.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Simeon.Schecter 2026-03-09 22:52:57 -04:00
parent 036884bf91
commit 4c4c8575e5
3 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/CinePromptStudio.jsx
View file

@ -1586,7 +1586,7 @@ Return ONLY the final prompt text. No markdown, no preamble, no "Here is your pr
onClick={() => setAspectRatio(ratio)}
className={`px-4 py-2 rounded font-normal transition-all ${
aspectRatio === ratio
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1858,7 +1858,7 @@ Return ONLY the final prompt text. No markdown, no preamble, no "Here is your pr
onClick={() => setImageModelType(opt.value)}
className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
imageModelType === opt.value
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1879,7 +1879,7 @@ Return ONLY the final prompt text. No markdown, no preamble, no "Here is your pr
onClick={() => setImageResolution(res)}
className={`px-4 py-2 rounded text-sm font-normal transition-all ${
imageResolution === res
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>

12
frontend/src/components/ProjectsTab.jsx
View file

@ -788,7 +788,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
}}
className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm transition-all ${
isSelecting
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -875,7 +875,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
<button
onClick={() => setViewMode('grid')}
className={`p-2 rounded transition-all ${
viewMode === 'grid' ? 'bg-cinema-gold text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
viewMode === 'grid' ? 'bg-slate-200 text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
<Grid className="w-4 h-4" />
@ -883,7 +883,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
<button
onClick={() => setViewMode('list')}
className={`p-2 rounded transition-all ${
viewMode === 'list' ? 'bg-cinema-gold text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
viewMode === 'list' ? 'bg-slate-200 text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
<List className="w-4 h-4" />
@ -1114,7 +1114,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
<div className="absolute top-2 right-2 z-10">
<div className={`w-6 h-6 rounded flex items-center justify-center transition-all ${
selectedImageIds.includes(item.id)
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-900/80 border border-slate-600 text-transparent'
}`}>
<Check className="w-4 h-4" />
@ -1215,7 +1215,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
{isSelecting && item.type === 'image' && (
<div className={`w-6 h-6 rounded flex items-center justify-center flex-shrink-0 transition-all ${
selectedImageIds.includes(item.id)
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-900 border border-slate-600 text-transparent'
}`}>
<Check className="w-4 h-4" />
@ -1578,7 +1578,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
onClick={() => setMovingItemId(movingItemId === previewItem.id ? null : previewItem.id)}
className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm font-normal transition-colors ${
movingItemId === previewItem.id
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-700 hover:bg-slate-600 text-slate-300'
}`}
>

24
frontend/src/components/VideoGenTab.jsx
View file

@ -1048,7 +1048,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setEngine(opt.value)}
className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
engine === opt.value
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1076,7 +1076,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setModelType(opt.value)}
className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
modelType === opt.value
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1102,7 +1102,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
disabled={isDisabledByInterpolation}
className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
duration === opt.value
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: isDisabledByInterpolation
? 'bg-slate-800/50 text-slate-600 cursor-not-allowed'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
@ -1133,7 +1133,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setAspectRatio(ratio)}
className={`flex-1 px-4 py-2 rounded font-normal transition-all ${
aspectRatio === ratio
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1158,7 +1158,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
disabled={isHighResDisabled}
className={`flex-1 px-4 py-2 rounded font-normal transition-all ${
resolution === res
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: isHighResDisabled
? 'bg-slate-800/50 text-slate-600 cursor-not-allowed'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
@ -1218,7 +1218,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setKlingWorkflow(opt.value)}
className={`flex-1 px-2 py-1.5 rounded font-normal transition-all text-sm ${
klingWorkflow === opt.value
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1243,7 +1243,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setKlingModel(opt.value)}
className={`px-2 py-1.5 rounded font-normal transition-all text-sm ${
klingModel === opt.value
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1264,7 +1264,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setDuration(d)}
className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
duration === d
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1284,7 +1284,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setAspectRatio(ratio)}
className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
aspectRatio === ratio
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1304,7 +1304,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setKlingMode(opt.value)}
className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
klingMode === opt.value
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1364,7 +1364,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setKlingCameraControl(preset.value)}
className={`px-2 py-1.5 rounded font-normal transition-all text-xs ${
klingCameraControl === preset.value
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
@ -1531,7 +1531,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
onClick={() => setKlingLipSyncMode(opt.value)}
className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
klingLipSyncMode === opt.value
? 'bg-cinema-gold text-slate-950'
? 'bg-slate-200 text-slate-950'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>