Skip to content

fix(frontend): replace hardcoded colors with theme-aware CSS variables #323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thrawn-sh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(frontend): replace hardcoded colors with theme-aware CSS variables #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions frontend/src/components/model/ModelQuickSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,17 +453,17 @@ export function ModelQuickSelect({
return (
<div
key={item.key}
className={`group flex w-full items-center gap-2 rounded-xl py-2 text-left transition-colors hover:bg-white/5 ${isSelected ? 'bg-orange-500/10' : ''}`}
className={`group flex w-full items-center gap-2 rounded-xl py-2 text-left transition-colors hover:bg-accent ${isSelected ? 'bg-orange-500/10' : ''}`}
>
<button
type="button"
onClick={() => handleModelSelect(item.providerID, item.modelID)}
className="min-w-0 flex-1 px-2 text-left"
>
<span className="block truncate text-sm font-medium text-white">
<span className="block truncate text-sm font-medium text-foreground">
{getPrimaryLabel(item)}
</span>
<span className="mt-0.5 block truncate text-xs text-white/50">
<span className="mt-0.5 block truncate text-xs text-muted-foreground">
{getDescription(item)}
</span>
</button>
Expand All @@ -474,7 +474,7 @@ export function ModelQuickSelect({
event.stopPropagation()
removeRecentModel({ providerID: item.providerID, modelID: item.modelID })
}}
className="rounded-full p-1.5 text-white/30 hover:bg-white/10 hover:text-white/70"
className="rounded-full p-1.5 text-muted-foreground/50 hover:bg-accent hover:text-foreground/70"
aria-label="Remove from recent"
>
<Trash2 className="h-3.5 w-3.5 text-red-400" />
Expand All @@ -486,7 +486,7 @@ export function ModelQuickSelect({
event.stopPropagation()
toggleFavorite({ providerID: item.providerID, modelID: item.modelID })
}}
className="rounded-full p-1.5 text-white/50 transition-opacity hover:bg-white/10 hover:text-white"
className="rounded-full p-1.5 text-muted-foreground transition-opacity hover:bg-accent hover:text-foreground"
aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
>
<Star className={`h-4 w-4 ${isFavorite ? 'fill-yellow-400 text-yellow-400' : ''}`} />
Expand All @@ -504,13 +504,13 @@ export function ModelQuickSelect({
key={provider.id}
type="button"
onClick={() => handleProviderSelect(provider.id)}
className="flex w-full items-center gap-3 rounded-xl py-2.5 text-left transition-colors hover:bg-white/5"
className="flex w-full items-center gap-3 rounded-xl py-2.5 text-left transition-colors hover:bg-accent"
>
<span className="min-w-0 flex-1">
<span className="block truncate text-sm font-medium text-white">{provider.label}</span>
<span className="mt-0.5 block truncate text-xs text-white/50">{provider.count} {provider.count === 1 ? 'model' : 'models'}</span>
<span className="block truncate text-sm font-medium text-foreground">{provider.label}</span>
<span className="mt-0.5 block truncate text-xs text-muted-foreground">{provider.count} {provider.count === 1 ? 'model' : 'models'}</span>
</span>
<ChevronRight className="h-5 w-5 shrink-0 text-white/40" />
<ChevronRight className="h-5 w-5 shrink-0 text-muted-foreground" />
</button>
)
}
Expand Down Expand Up @@ -559,7 +559,7 @@ export function ModelQuickSelect({
isOpen={isOpen}
onClose={() => handleOpenChange(false)}
heightClass="h-[70dvh] max-h-[720px]"
className="z-[300] border-white/10 bg-zinc-950 text-white shadow-2xl md:mx-auto md:max-w-lg"
className="z-[300] border-border bg-popover text-foreground shadow-2xl md:mx-auto md:max-w-lg"
ariaLabel="Select model"
>
<div className={`flex items-center justify-between gap-2 px-4 ${showAllModels ? 'pb-2 pt-2' : 'pb-3 pt-0'}`}>
Expand All @@ -568,18 +568,18 @@ export function ModelQuickSelect({
<button
type="button"
onClick={handleMoreModelsBack}
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/80 hover:bg-white/10"
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground hover:bg-accent"
aria-label="Back to quick models"
>
<ChevronLeft className="h-5 w-5" />
</button>
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
value={searchQuery}
onChange={(event) => setSearchQuery(event.target.value)}
placeholder={selectedProviderId ? 'Search models...' : 'Search providers...'}
className="h-9 border-white/10 bg-white/5 pl-9 text-sm text-white placeholder:text-white/40"
className="h-9 border-border bg-muted pl-9 text-sm text-foreground placeholder:text-muted-foreground"
autoComplete="off"
name="model-search"
/>
Expand All @@ -590,7 +590,7 @@ export function ModelQuickSelect({
<button
type="button"
onClick={() => handleOpenChange(false)}
className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/80 hover:bg-white/10"
className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground hover:bg-accent"
aria-label="Close model selector"
>
<X className="h-5 w-5" />
Expand All @@ -600,7 +600,7 @@ export function ModelQuickSelect({
{selectedModelLabel}
<span className="ml-1.5 inline-block h-2 w-2 rounded-full bg-orange-500" />
</h2>
<p className="truncate text-xs text-white/45">
<p className="truncate text-xs text-muted-foreground">
{currentVariant ? `${selectedModelDescription} · ${currentVariant}` : selectedModelDescription}
</p>
</div>
Expand All @@ -610,11 +610,11 @@ export function ModelQuickSelect({
<button
type="button"
disabled={!model && !hasVariants}
className="flex h-9 w-24 items-center justify-center gap-1 rounded-md border border-white/10 bg-white/5 px-1.5 text-sm font-medium capitalize text-white/70 hover:bg-white/10 disabled:opacity-30"
className="flex h-9 w-24 items-center justify-center gap-1 rounded-md border border-border bg-muted px-1.5 text-sm font-medium capitalize text-muted-foreground hover:bg-accent disabled:opacity-30"
aria-label={`Current variant: ${selectedVariantLabel}`}
>
<span className="truncate">{selectedVariantLabel}</span>
<ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/40" />
<ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="z-[350] min-w-56">
Expand All @@ -629,11 +629,11 @@ export function ModelQuickSelect({
{showAllModels ? (
<div className="flex-1 flex overflow-hidden min-h-0">
{/* Provider sidebar — desktop only */}
<div className="hidden md:flex md:flex-col w-48 lg:w-56 border-r border-white/10 overflow-y-auto flex-shrink-0">
<div className="hidden md:flex md:flex-col w-48 lg:w-56 border-r border-border overflow-y-auto flex-shrink-0">
<div className="p-3 space-y-1">
{connectedProviderItems.length > 0 && (
<>
<p className="px-3 pb-1 text-xs font-medium text-white/45">Connected</p>
<p className="px-3 pb-1 text-xs font-medium text-muted-foreground">Connected</p>
{connectedProviderItems.map(provider => (
<button
key={provider.id}
Expand All @@ -642,19 +642,19 @@ export function ModelQuickSelect({
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
selectedProviderId === provider.id
? 'bg-orange-500/20 text-orange-300 font-medium'
: 'text-white/70 hover:bg-white/5'
: 'text-muted-foreground hover:bg-accent'
}`}
>
<div className="truncate">{provider.label}</div>
<div className="text-xs text-white/40">{provider.count} {provider.count === 1 ? 'model' : 'models'}</div>
<div className="text-xs text-muted-foreground/70">{provider.count} {provider.count === 1 ? 'model' : 'models'}</div>
</button>
))}
{availableProviderItems.length > 0 && <div className="mx-3 my-1 h-px bg-white/10" />}
{availableProviderItems.length > 0 && <div className="mx-3 my-1 h-px bg-border" />}
</>
)}
{availableProviderItems.length > 0 && (
<>
<p className="px-3 pb-1 text-xs font-medium text-white/45">Available</p>
<p className="px-3 pb-1 text-xs font-medium text-muted-foreground">Available</p>
{availableProviderItems.map(provider => (
<button
key={provider.id}
Expand All @@ -663,11 +663,11 @@ export function ModelQuickSelect({
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
selectedProviderId === provider.id
? 'bg-orange-500/20 text-orange-300 font-medium'
: 'text-white/70 hover:bg-white/5'
: 'text-muted-foreground hover:bg-accent'
}`}
>
<div className="truncate">{provider.label}</div>
<div className="text-xs text-white/40">{provider.count} {provider.count === 1 ? 'model' : 'models'}</div>
<div className="text-xs text-muted-foreground/70">{provider.count} {provider.count === 1 ? 'model' : 'models'}</div>
</button>
))}
</>
Expand Down Expand Up @@ -707,20 +707,20 @@ export function ModelQuickSelect({
<div className="space-y-1">
{connectedProviderItems.length > 0 && (
<>
<p className="px-1 pb-1 text-xs font-medium text-white/45">Connected</p>
<p className="px-1 pb-1 text-xs font-medium text-muted-foreground">Connected</p>
{connectedProviderItems.map(renderProviderOption)}
{availableProviderItems.length > 0 && <div className="-mx-4 my-2 h-px bg-white/10" />}
{availableProviderItems.length > 0 && <div className="-mx-4 my-2 h-px bg-border" />}
</>
)}
{availableProviderItems.length > 0 && (
<>
<p className="px-1 pb-1 text-xs font-medium text-white/45">Available</p>
<p className="px-1 pb-1 text-xs font-medium text-muted-foreground">Available</p>
{availableProviderItems.map(renderProviderOption)}
</>
)}
</div>
{filteredProviderItems.length === 0 && (
<div className="py-10 text-center text-sm text-white/50">No providers found</div>
<div className="py-10 text-center text-sm text-muted-foreground">No providers found</div>
)}
</div>
)}
Expand All @@ -732,7 +732,7 @@ export function ModelQuickSelect({
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 pb-3">
{quickSections.map(section => (
<section key={section.title}>
<h3 className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-white/45">
<h3 className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
{section.icon}
{section.title}
</h3>
Expand All @@ -742,14 +742,14 @@ export function ModelQuickSelect({
</section>
))}
</div>
<div className="flex-shrink-0 border-t border-white/10">
<div className="flex-shrink-0 border-t border-border">
<button
type="button"
onClick={() => setShowAllModels(true)}
className="flex w-full items-center justify-between bg-card px-6 py-4 text-left text-sm font-semibold text-white transition-colors hover:bg-accent active:bg-card"
className="flex w-full items-center justify-between bg-card px-6 py-4 text-left text-sm font-semibold text-foreground transition-colors hover:bg-accent active:bg-card"
>
<span>More models</span>
<ChevronRight className="h-5 w-5 text-white/50" />
<ChevronRight className="h-5 w-5 text-muted-foreground" />
</button>
</div>
</div>
Expand Down
21 changes: 19 additions & 2 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ html {
overscroll-behavior-x: none;
}

:root:not(.dark) html {
html:not(.dark) {
background-color: #ffffff;
}

Expand Down Expand Up @@ -147,7 +147,7 @@ body {
}

.shine-loading {
background: linear-gradient(90deg,
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.2) 40%,
rgba(255, 255, 255, 0.4) 50%,
Expand All @@ -163,6 +163,23 @@ body {
animation: shine-loading 3s linear infinite;
}

:root:not(.dark) .shine-loading {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.3) 40%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.7) 60%,
rgba(0, 0, 0, 0.85) 70%,
rgba(0, 0, 0, 1) 80%,
rgba(0, 0, 0, 0.3) 100%
);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine-loading 3s linear infinite;
}

.prose-enhanced {
line-height: 1.7;
word-break: break-word;
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/AssistantRedirect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@ export function AssistantRedirect() {
<div className="flex items-center gap-1">
<PendingActionsGroup />
</div>
<Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} size="sm" className="hidden sm:inline-flex bg-blue-600 hover:bg-blue-700 text-white transition-all duration-200 hover:scale-105">
<Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} size="sm" className="hidden sm:inline-flex bg-primary hover:bg-primary-hover text-primary-foreground transition-all duration-200 hover:scale-105">
<Plus className="w-4 h-4 mr-2" />
<span>New Session</span>
</Button>
<Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} aria-label="New Session" size="sm" className="sm:hidden h-10 w-10 p-0 bg-blue-600 hover:bg-blue-700 text-white transition-all duration-200 hover:scale-105">
<Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} aria-label="New Session" size="sm" className="sm:hidden h-10 w-10 p-0 bg-primary hover:bg-primary-hover text-primary-foreground transition-all duration-200 hover:scale-105">
<Plus className="w-5 h-5" />
</Button>
</Header.Actions>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export function Login() {
id="email"
type="email"
placeholder=""
className="border-border focus:border-primary"
className="bg-input border-border focus:border-primary"
{...register('email')}
aria-invalid={!!errors.email}
/>
Expand All @@ -219,7 +219,7 @@ export function Login() {
id="password"
type="password"
placeholder=""
className="border-border focus:border-primary"
className="bg-input border-border focus:border-primary"
{...register('password')}
aria-invalid={!!errors.password}
/>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/RepoDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ export function RepoDetail() {
onClick={() => handleCreateSession()}
disabled={!opcodeUrl || createSessionMutation.isPending}
size="sm"
className="sm:hidden h-10 w-10 p-0 bg-blue-600 hover:bg-blue-700 text-white transition-all duration-200 hover:scale-105"
className="sm:hidden h-10 w-10 p-0 bg-primary hover:bg-primary-hover text-primary-foreground transition-all duration-200 hover:scale-105"
>
<Plus className="w-5 h-5" />
</Button>
Expand Down Expand Up @@ -351,7 +351,7 @@ function CreateWorkspaceDialog({ open, onOpenChange, onCreate, isCreating }: Cre
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={isCreating}>
Cancel
</Button>
<Button onClick={() => { void onCreate(); }} disabled={isCreating} className="bg-blue-600 hover:bg-blue-700 text-white">
<Button onClick={() => { void onCreate(); }} disabled={isCreating} className="bg-primary hover:bg-primary-hover text-primary-foreground">
{isCreating ? (
<>
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/SessionDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ export function SessionDetail() {
data-testid="session-header-region"
className="flex-shrink-0 overflow-hidden bg-background max-h-72 sm:max-h-80"
>
<Header className="bg-background [&_button]:bg-black [&_button]:text-white [&_button]:border-zinc-700 [&_button:hover]:bg-zinc-900">
<Header className="bg-background">
<div className="flex items-center gap-1.5 sm:gap-3 min-w-0 flex-1">
{session?.parentID ? (
<>
Expand All @@ -489,7 +489,7 @@ export function SessionDetail() {
subtitle={<span className="text-orange-600 dark:text-orange-400">{workspaceDisplayName}</span>}
/>
</div>
<Header.Actions className="gap-2 sm:gap-4">
<Header.Actions className="gap-2 sm:gap-4 [&_button]:bg-secondary [&_button]:text-secondary-foreground [&_button]:border-border [&_button:hover]:bg-accent">
<div className="flex items-center gap-1">
<PendingActionsGroup />
</div>
Expand Down