Skip to content

Commit 8c6526f

Browse files
claudeclaude
committed
Apply cyan color scheme throughout entire application
- Update gradient colors from purple to cyan in index.scss - Change chat prompt gradient from purple (#b44aff) to cyan (#00E5FF) - Replace all purple-* Tailwind classes with accent-* (cyan) classes - Update Expo QR code background to cyan - Update background ray gradients to use cyan colors - Ensure consistent cyan theme across all UI components This completes the full cyan sci-fi color transformation.
1 parent 7acfe3c commit 8c6526f

40 files changed

+178
-181
lines changed

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

Lines changed: 15 additions & 15 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-accent-50 dark:hover:bg-accent-500/10',
86+
'hover:text-accent-500 dark:hover:text-accent-400',
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-accent-500 dark:group-hover:text-accent-400 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-accent-50 dark:hover:bg-accent-500/10',
102+
'hover:text-accent-500 dark:hover:text-accent-400',
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-accent-500 dark:group-hover:text-accent-400 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-accent-50 dark:hover:bg-accent-500/10',
120+
'hover:text-accent-500 dark:hover:text-accent-400',
121121
'cursor-pointer transition-all duration-200',
122122
'outline-none',
123123
'group',
@@ -126,16 +126,16 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
126126
window.open('https://github.com/stackblitz-labs/bolt.diy/issues/new?template=bug_report.yml', '_blank')
127127
}
128128
>
129-
<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" />
129+
<div className="i-ph:bug w-4 h-4 text-gray-400 group-hover:text-accent-500 dark:group-hover:text-accent-400 transition-colors" />
130130
Report Bug
131131
</DropdownMenu.Item>
132132

133133
<DropdownMenu.Item
134134
className={classNames(
135135
'flex items-center gap-2 px-4 py-2.5',
136136
'text-sm text-gray-700 dark:text-gray-200',
137-
'hover:bg-purple-50 dark:hover:bg-purple-500/10',
138-
'hover:text-purple-500 dark:hover:text-purple-400',
137+
'hover:bg-accent-50 dark:hover:bg-accent-500/10',
138+
'hover:text-accent-500 dark:hover:text-accent-400',
139139
'cursor-pointer transition-all duration-200',
140140
'outline-none',
141141
'group',
@@ -149,23 +149,23 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
149149
}
150150
}}
151151
>
152-
<div className="i-ph:download w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
152+
<div className="i-ph:download w-4 h-4 text-gray-400 group-hover:text-accent-500 dark:group-hover:text-accent-400 transition-colors" />
153153
Download Debug Log
154154
</DropdownMenu.Item>
155155

156156
<DropdownMenu.Item
157157
className={classNames(
158158
'flex items-center gap-2 px-4 py-2.5',
159159
'text-sm text-gray-700 dark:text-gray-200',
160-
'hover:bg-purple-50 dark:hover:bg-purple-500/10',
161-
'hover:text-purple-500 dark:hover:text-purple-400',
160+
'hover:bg-accent-50 dark:hover:bg-accent-500/10',
161+
'hover:text-accent-500 dark:hover:text-accent-400',
162162
'cursor-pointer transition-all duration-200',
163163
'outline-none',
164164
'group',
165165
)}
166166
onClick={() => window.open('https://stackblitz-labs.github.io/bolt.diy/', '_blank')}
167167
>
168-
<div className="i-ph:question w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
168+
<div className="i-ph:question w-4 h-4 text-gray-400 group-hover:text-accent-500 dark:group-hover:text-accent-400 transition-colors" />
169169
Help & Documentation
170170
</DropdownMenu.Item>
171171
</DropdownMenu.Content>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ interface ControlPanelProps {
3939
const BETA_TABS = new Set<TabType>(['local-providers', 'mcp']);
4040

4141
const BetaLabel = () => (
42-
<div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20">
43-
<span className="text-[10px] font-medium text-purple-600 dark:text-purple-400">BETA</span>
42+
<div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-full bg-accent-500/10 dark:bg-accent-500/20">
43+
<span className="text-[10px] font-medium text-accent-600 dark:text-accent-400">BETA</span>
4444
</div>
4545
);
4646

@@ -255,9 +255,9 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
255255
{(activeTab || showTabManagement) && (
256256
<button
257257
onClick={handleBack}
258-
className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-colors duration-150"
258+
className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-accent-500/10 dark:hover:bg-accent-500/20 group transition-colors duration-150"
259259
>
260-
<div className="i-ph:arrow-left w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
260+
<div className="i-ph:arrow-left w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-accent-500 transition-colors" />
261261
</button>
262262
)}
263263
<DialogTitle className="text-xl font-semibold text-gray-900 dark:text-white">
@@ -274,9 +274,9 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
274274
{/* Close Button */}
275275
<button
276276
onClick={handleClose}
277-
className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
277+
className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-accent-500/10 dark:hover:bg-accent-500/20 group transition-all duration-200"
278278
>
279-
<div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
279+
<div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-accent-500 transition-colors" />
280280
</button>
281281
</div>
282282
</div>

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ export const TabTile: React.FC<TabTileProps> = ({
4949
'relative flex flex-col items-center justify-center h-full p-4 rounded-lg',
5050
'bg-white dark:bg-[#141414]',
5151
'group cursor-pointer',
52-
'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
52+
'hover:bg-accent-50 dark:hover:bg-[#1a1a1a]',
5353
'transition-colors duration-100 ease-out',
54-
isActive ? 'bg-purple-500/5 dark:bg-purple-500/10' : '',
54+
isActive ? 'bg-accent-500/5 dark:bg-accent-500/10' : '',
5555
isLoading ? 'cursor-wait opacity-70 pointer-events-none' : '',
5656
)}
5757
>
@@ -64,10 +64,10 @@ export const TabTile: React.FC<TabTileProps> = ({
6464
'rounded-xl',
6565
'bg-gray-100 dark:bg-gray-800',
6666
'ring-1 ring-gray-200 dark:ring-gray-700',
67-
'group-hover:bg-purple-100 dark:group-hover:bg-gray-700/80',
68-
'group-hover:ring-purple-200 dark:group-hover:ring-purple-800/30',
67+
'group-hover:bg-accent-100 dark:group-hover:bg-gray-700/80',
68+
'group-hover:ring-accent-200 dark:group-hover:ring-accent-800/30',
6969
'transition-all duration-100 ease-out',
70-
isActive ? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20' : '',
70+
isActive ? 'bg-accent-500/10 dark:bg-accent-500/10 ring-accent-500/30 dark:ring-accent-500/20' : '',
7171
)}
7272
>
7373
{(() => {
@@ -77,9 +77,9 @@ export const TabTile: React.FC<TabTileProps> = ({
7777
className={classNames(
7878
'w-8 h-8',
7979
'text-gray-600 dark:text-gray-300',
80-
'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
80+
'group-hover:text-accent-500 dark:group-hover:text-accent-400/80',
8181
'transition-colors duration-100 ease-out',
82-
isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
82+
isActive ? 'text-accent-500 dark:text-accent-400/90' : '',
8383
)}
8484
/>
8585
);
@@ -92,9 +92,9 @@ export const TabTile: React.FC<TabTileProps> = ({
9292
className={classNames(
9393
'text-[15px] font-medium leading-snug mb-2',
9494
'text-gray-700 dark:text-gray-200',
95-
'group-hover:text-purple-600 dark:group-hover:text-purple-300/90',
95+
'group-hover:text-accent-600 dark:group-hover:text-accent-300/90',
9696
'transition-colors duration-100 ease-out',
97-
isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
97+
isActive ? 'text-accent-500 dark:text-accent-400/90' : '',
9898
)}
9999
>
100100
{TAB_LABELS[tab.id]}
@@ -106,9 +106,9 @@ export const TabTile: React.FC<TabTileProps> = ({
106106
'text-gray-500 dark:text-gray-400',
107107
'max-w-[85%]',
108108
'text-center',
109-
'group-hover:text-purple-500 dark:group-hover:text-purple-400/70',
109+
'group-hover:text-accent-500 dark:group-hover:text-accent-400/70',
110110
'transition-colors duration-100 ease-out',
111-
isActive ? 'text-purple-400 dark:text-purple-400/80' : '',
111+
isActive ? 'text-accent-400 dark:text-accent-400/80' : '',
112112
)}
113113
>
114114
{description}
@@ -119,7 +119,7 @@ export const TabTile: React.FC<TabTileProps> = ({
119119
{/* Update Indicator with Tooltip */}
120120
{hasUpdate && (
121121
<>
122-
<div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-400 animate-pulse" />
122+
<div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-accent-500 dark:bg-accent-400 animate-pulse" />
123123
<Tooltip.Portal>
124124
<Tooltip.Content
125125
className={classNames(

‎app/components/@settings/tabs/event-logs/EventLogsTab.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ const LogEntryItem = ({ log, isExpanded: forceExpanded, use24Hour, showTimestamp
230230
<>
231231
<button
232232
onClick={() => setLocalExpanded(!localExpanded)}
233-
className="text-xs text-gray-500 dark:text-gray-400 hover:text-purple-500 dark:hover:text-purple-400 transition-colors"
233+
className="text-xs text-gray-500 dark:text-gray-400 hover:text-accent-500 dark:hover:text-accent-400 transition-colors"
234234
>
235235
{localExpanded ? 'Hide' : 'Show'} Details
236236
</button>
@@ -808,11 +808,11 @@ export function EventLogsTab() {
808808
'text-sm text-gray-900 dark:text-white',
809809
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
810810
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
811-
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
811+
'hover:bg-accent-500/10 dark:hover:bg-accent-500/20',
812812
'transition-all duration-200',
813813
)}
814814
>
815-
<span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
815+
<span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-accent-500 transition-colors" />
816816
Export
817817
</button>
818818

@@ -832,8 +832,8 @@ export function EventLogsTab() {
832832
'flex items-center gap-3 px-4 py-3 text-sm rounded-lg transition-colors w-full text-left',
833833
'bg-white dark:bg-[#0A0A0A]',
834834
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
835-
'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
836-
'hover:border-purple-200 dark:hover:border-purple-900/30',
835+
'hover:bg-accent-50 dark:hover:bg-[#1a1a1a]',
836+
'hover:border-accent-200 dark:hover:border-accent-900/30',
837837
'text-bolt-elements-textPrimary',
838838
)}
839839
>
@@ -868,7 +868,7 @@ export function EventLogsTab() {
868868
'text-sm text-gray-900 dark:text-white',
869869
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
870870
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
871-
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
871+
'hover:bg-accent-500/10 dark:hover:bg-accent-500/20',
872872
'transition-all duration-200',
873873
)}
874874
>
@@ -891,16 +891,16 @@ export function EventLogsTab() {
891891
{logLevelOptions.map((option) => (
892892
<DropdownMenu.Item
893893
key={option.value}
894-
className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
894+
className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-accent-500/10 dark:hover:bg-accent-500/20 cursor-pointer transition-colors"
895895
onClick={() => handleLevelFilterChange(option.value)}
896896
>
897897
<div className="mr-3 flex h-5 w-5 items-center justify-center">
898898
<div
899-
className={classNames(option.icon, 'text-lg group-hover:text-purple-500 transition-colors')}
899+
className={classNames(option.icon, 'text-lg group-hover:text-accent-500 transition-colors')}
900900
style={{ color: option.color }}
901901
/>
902902
</div>
903-
<span className="group-hover:text-purple-500 transition-colors">{option.label}</span>
903+
<span className="group-hover:text-accent-500 transition-colors">{option.label}</span>
904904
</DropdownMenu.Item>
905905
))}
906906
</DropdownMenu.Content>
@@ -912,7 +912,7 @@ export function EventLogsTab() {
912912
<Switch
913913
checked={showTimestamps}
914914
onCheckedChange={(value) => handlePreferenceChange('timestamps', value)}
915-
className="data-[state=checked]:bg-purple-500"
915+
className="data-[state=checked]:bg-accent-500"
916916
/>
917917
<span className="text-sm text-gray-500 dark:text-gray-400">Show Timestamps</span>
918918
</div>
@@ -921,7 +921,7 @@ export function EventLogsTab() {
921921
<Switch
922922
checked={use24Hour}
923923
onCheckedChange={(value) => handlePreferenceChange('24hour', value)}
924-
className="data-[state=checked]:bg-purple-500"
924+
className="data-[state=checked]:bg-accent-500"
925925
/>
926926
<span className="text-sm text-gray-500 dark:text-gray-400">24h Time</span>
927927
</div>
@@ -930,7 +930,7 @@ export function EventLogsTab() {
930930
<Switch
931931
checked={autoExpand}
932932
onCheckedChange={(value) => handlePreferenceChange('autoExpand', value)}
933-
className="data-[state=checked]:bg-purple-500"
933+
className="data-[state=checked]:bg-accent-500"
934934
/>
935935
<span className="text-sm text-gray-500 dark:text-gray-400">Auto Expand</span>
936936
</div>
@@ -945,12 +945,12 @@ export function EventLogsTab() {
945945
'text-sm text-gray-900 dark:text-white',
946946
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
947947
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
948-
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
948+
'hover:bg-accent-500/10 dark:hover:bg-accent-500/20',
949949
'transition-all duration-200',
950950
{ 'animate-spin': isRefreshing },
951951
)}
952952
>
953-
<span className="i-ph:arrows-clockwise text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
953+
<span className="i-ph:arrows-clockwise text-lg text-gray-500 dark:text-gray-400 group-hover:text-accent-500 transition-colors" />
954954
Refresh
955955
</button>
956956

@@ -970,7 +970,7 @@ export function EventLogsTab() {
970970
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
971971
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
972972
'text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400',
973-
'focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500',
973+
'focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500',
974974
'transition-all duration-200',
975975
)}
976976
/>

0 commit comments

Comments
 (0)