Skip to content

Commit 844354b

Browse files
zebbernzebbern
committed
fix: Settings UI polish - consistent cyan theme, layout cleanup
- Replace all purple accents with site's cyan theme tokens across 18 files - Fix Cloud Providers white border (add border-bolt-elements-borderColor) - Replace emoji in Project Memory with icon (lightbulb) - Simplify Vercel tab: consolidate 3 dashboards into 1, remove placeholder grid, reduce actions from 9 to 3 - Reorganize Event Logs toolbar into 2 rows, migrate hardcoded dark: colors to theme tokens, reduce log spacing - Replace ~50 purple-500 references with bolt-elements-item-contentAccent/backgroundAccent tokens
1 parent cfac9e3 commit 844354b

18 files changed

Lines changed: 298 additions & 524 deletions

File tree

‎app/components/@settings/core/AvatarDropdown.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -82,31 +82,31 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
8282
className={classNames(
8383
'flex items-center gap-2 px-4 py-2.5',
8484
'text-sm text-gray-700 dark:text-gray-200',
85-
'hover:bg-purple-50 dark:hover:bg-purple-500/10',
86-
'hover:text-purple-500 dark:hover:text-purple-400',
85+
'hover:bg-bolt-elements-item-backgroundAccent',
86+
'hover:text-bolt-elements-item-contentAccent',
8787
'cursor-pointer transition-all duration-200',
8888
'outline-none',
8989
'group',
9090
)}
9191
onClick={() => onSelectTab('profile')}
9292
>
93-
<div className="i-ph:user-circle w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
93+
<div className="i-ph:user-circle w-4 h-4 text-gray-400 group-hover:text-bolt-elements-item-contentAccent transition-colors" />
9494
Edit Profile
9595
</DropdownMenu.Item>
9696

9797
<DropdownMenu.Item
9898
className={classNames(
9999
'flex items-center gap-2 px-4 py-2.5',
100100
'text-sm text-gray-700 dark:text-gray-200',
101-
'hover:bg-purple-50 dark:hover:bg-purple-500/10',
102-
'hover:text-purple-500 dark:hover:text-purple-400',
101+
'hover:bg-bolt-elements-item-backgroundAccent',
102+
'hover:text-bolt-elements-item-contentAccent',
103103
'cursor-pointer transition-all duration-200',
104104
'outline-none',
105105
'group',
106106
)}
107107
onClick={() => onSelectTab('settings')}
108108
>
109-
<div className="i-ph:gear-six w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
109+
<div className="i-ph:gear-six w-4 h-4 text-gray-400 group-hover:text-bolt-elements-item-contentAccent transition-colors" />
110110
Settings
111111
</DropdownMenu.Item>
112112

@@ -116,8 +116,8 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
116116
className={classNames(
117117
'flex items-center gap-2 px-4 py-2.5',
118118
'text-sm text-gray-700 dark:text-gray-200',
119-
'hover:bg-purple-50 dark:hover:bg-purple-500/10',
120-
'hover:text-purple-500 dark:hover:text-purple-400',
119+
'hover:bg-bolt-elements-item-backgroundAccent',
120+
'hover:text-bolt-elements-item-contentAccent',
121121
'cursor-pointer transition-all duration-200',
122122
'outline-none',
123123
'group',
@@ -130,7 +130,7 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
130130
)
131131
}
132132
>
133-
<div className="i-ph:bug w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
133+
<div className="i-ph:bug w-4 h-4 text-gray-400 group-hover:text-bolt-elements-item-contentAccent transition-colors" />
134134
Report Bug
135135
</DropdownMenu.Item>
136136
</DropdownMenu.Content>

‎app/components/@settings/core/ControlPanel.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const ProjectMemoryTab = lazy(() => import('~/components/@settings/tabs/project-
3636
// Loading fallback for lazy-loaded tabs
3737
const TabLoadingFallback = () => (
3838
<div className="flex items-center justify-center h-64">
39-
<div className="animate-spin w-8 h-8 border-2 border-purple-500 border-t-transparent rounded-full" />
39+
<div className="animate-spin w-8 h-8 border-2 border-bolt-elements-item-contentAccent border-t-transparent rounded-full" />
4040
</div>
4141
);
4242

@@ -272,7 +272,7 @@ export const ControlPanel = ({ open, onClose, initialTab }: ControlPanelProps) =
272272
className={classNames(
273273
'w-full flex items-center gap-3 px-4 py-2 text-left text-sm transition-colors duration-150',
274274
isActive
275-
? 'text-bolt-elements-textPrimary border-l-2 border-purple-500'
275+
? 'text-bolt-elements-textPrimary border-l-2 border-bolt-elements-item-contentAccent'
276276
: 'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary border-l-2 border-transparent',
277277
)}
278278
style={{
@@ -282,9 +282,11 @@ export const ControlPanel = ({ open, onClose, initialTab }: ControlPanelProps) =
282282
>
283283
<IconComponent className="w-4 h-4 shrink-0" />
284284
<span className="truncate">{TAB_LABELS[tabId]}</span>
285-
{hasUpdate && <span className="ml-auto w-2 h-2 rounded-full bg-purple-500 shrink-0" />}
285+
{hasUpdate && (
286+
<span className="ml-auto w-2 h-2 rounded-full bg-bolt-elements-item-contentAccent shrink-0" />
287+
)}
286288
{BETA_TABS.has(tabId) && (
287-
<span className="ml-auto text-[10px] px-1.5 py-0.5 rounded bg-purple-500/20 text-purple-400 shrink-0">
289+
<span className="ml-auto text-[10px] px-1.5 py-0.5 rounded bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent shrink-0">
288290
BETA
289291
</span>
290292
)}

‎app/components/@settings/shared/components/TabTile.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const TabTile = memo(
2525
<Tooltip.Root>
2626
<Tooltip.Trigger asChild>
2727
<div className={classNames('min-h-[160px] list-none', className || '')}>
28-
<div className="relative h-full rounded-xl border border-bolt-elements-borderColor hover:border-purple-300 dark:hover:border-purple-800/50 transition-colors duration-150">
28+
<div className="relative h-full rounded-xl border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/30 transition-colors duration-150">
2929
<div
3030
onClick={onClick}
3131
className={classNames(
@@ -34,7 +34,7 @@ export const TabTile = memo(
3434
'group cursor-pointer',
3535
'hover:bg-bolt-elements-bg-depth-2',
3636
'transition-colors duration-150',
37-
isActive ? 'bg-purple-500/5 dark:bg-purple-500/10' : '',
37+
isActive ? 'bg-bolt-elements-item-backgroundAccent' : '',
3838
isLoading ? 'cursor-wait opacity-70 pointer-events-none' : '',
3939
)}
4040
>
@@ -47,21 +47,19 @@ export const TabTile = memo(
4747
'rounded-xl',
4848
'bg-gray-100 dark:bg-gray-800',
4949
'ring-1 ring-gray-200 dark:ring-gray-700',
50-
'group-hover:bg-purple-100 dark:group-hover:bg-gray-700/80',
51-
'group-hover:ring-purple-200 dark:group-hover:ring-purple-800/30',
50+
'group-hover:bg-bolt-elements-item-backgroundAccent',
51+
'group-hover:ring-bolt-elements-borderColorActive/30',
5252
'transition-colors duration-150',
53-
isActive
54-
? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20'
55-
: '',
53+
isActive ? 'bg-bolt-elements-item-backgroundAccent ring-bolt-elements-borderColorActive/30' : '',
5654
)}
5755
>
5856
<IconComponent
5957
className={classNames(
6058
'w-8 h-8',
6159
'text-gray-600 dark:text-gray-300',
62-
'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
60+
'group-hover:text-bolt-elements-item-contentAccent',
6361
'transition-colors duration-150',
64-
isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
62+
isActive ? 'text-bolt-elements-item-contentAccent' : '',
6563
)}
6664
/>
6765
</div>
@@ -72,9 +70,9 @@ export const TabTile = memo(
7270
className={classNames(
7371
'text-[15px] font-medium leading-snug mb-2',
7472
'text-gray-700 dark:text-gray-200',
75-
'group-hover:text-purple-600 dark:group-hover:text-purple-300/90',
73+
'group-hover:text-bolt-elements-item-contentAccent',
7674
'transition-colors duration-150',
77-
isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
75+
isActive ? 'text-bolt-elements-item-contentAccent' : '',
7876
)}
7977
>
8078
{TAB_LABELS[tab.id]}
@@ -86,9 +84,9 @@ export const TabTile = memo(
8684
'text-gray-500 dark:text-gray-400',
8785
'max-w-[85%]',
8886
'text-center',
89-
'group-hover:text-purple-500 dark:group-hover:text-purple-400/70',
87+
'group-hover:text-bolt-elements-item-contentAccent',
9088
'transition-colors duration-150',
91-
isActive ? 'text-purple-400 dark:text-purple-400/80' : '',
89+
isActive ? 'text-bolt-elements-item-contentAccent' : '',
9290
)}
9391
>
9492
{description}
@@ -99,7 +97,7 @@ export const TabTile = memo(
9997
{/* Update Indicator with Tooltip */}
10098
{hasUpdate && (
10199
<>
102-
<div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-400 animate-pulse" />
100+
<div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-bolt-elements-item-contentAccent animate-pulse" />
103101
<Tooltip.Portal>
104102
<Tooltip.Content
105103
className={classNames(

0 commit comments

Comments
 (0)