Skip to content

Commit 8e45fa3

Browse files
CodyKoInABoxCodyKoInABox
committed
make text more readable
1 parent ec975f9 commit 8e45fa3

File tree

1 file changed

+63
-61
lines changed

1 file changed

+63
-61
lines changed

‎spicecloud/pages/index.tsx‎

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -106,19 +106,20 @@ export default function Home() {
106106

107107
const getMetricColor = (key: string): string => {
108108
if (key.includes('count') || key.includes('line'))
109-
return 'linear-gradient(135deg, #D7B377, #A0783A)'; // sand gradients
109+
return 'linear-gradient(135deg, #e3d6b0, #c9b67a)'; // lighter sand
110110
if (key.includes('ratio'))
111-
return 'linear-gradient(135deg, #D94F04, #A13E02)'; // spice orange
111+
return 'linear-gradient(135deg, #d97304, #a35402)'; // spice orange
112112
if (key.includes('dependencies'))
113-
return 'linear-gradient(135deg, #6B4C1B, #4A2C0B)'; // deep brown
113+
return 'linear-gradient(135deg, #a67c23, #6b4c1b)'; // brown earth
114114
if (key.includes('indentation'))
115-
return 'linear-gradient(135deg, #B07A3A, #D7B377)'; // lighter sand
115+
return 'linear-gradient(135deg, #d7b377, #f0e3c8)'; // light sand
116116
if (key.includes('method'))
117-
return 'linear-gradient(135deg, #A13E02, #D94F04)'; // spice strong orange
118-
return 'linear-gradient(135deg, #4A2C0B, #362C3A)'; // dark earth/sky
117+
return 'linear-gradient(135deg, #a35402, #d97304)'; // spice orange
118+
return 'linear-gradient(135deg, #6b4c1b, #4a2c0b)'; // darker earth tones
119119
};
120120

121121

122+
122123
const formatAge = (age: number): string => {
123124
const hours = Math.floor(age / (1000 * 60 * 60));
124125
const minutes = Math.floor((age % (1000 * 60 * 60)) / (1000 * 60));
@@ -138,19 +139,19 @@ export default function Home() {
138139
const styles = {
139140
container: {
140141
minHeight: '100vh',
141-
background: 'linear-gradient(135deg, #362C3A, #4A2C0B, #D7B377)', // dark night to desert sand
142+
background: 'linear-gradient(135deg, #f0e3c8, #e3d6b0, #d7b377)', // lighter sand gradient
142143
fontFamily: 'system-ui, -apple-system, sans-serif',
143-
color: '#F5F0E6'
144+
color: '#000000' // black text globally
144145
},
145146
header: {
146-
background: 'rgba(74, 44, 11, 0.8)', // deep brown translucent
147+
background: 'rgba(215, 179, 119, 0.9)', // light sand with opacity for clarity
147148
backdropFilter: 'blur(10px)',
148-
borderBottom: '1px solid rgba(215, 179, 119, 0.4)', // light sand border
149+
borderBottom: '1px solid rgba(160, 130, 60, 0.8)', // darker sand border
149150
position: 'sticky' as const,
150151
top: 0,
151152
zIndex: 40,
152153
padding: '1rem 1.5rem',
153-
color: '#F5F0E6',
154+
color: '#000000',
154155
},
155156
headerContent: {
156157
display: 'flex',
@@ -162,13 +163,13 @@ export default function Home() {
162163
title: {
163164
fontSize: '1.5rem',
164165
fontWeight: 'bold',
165-
color: '#F5F0E6',
166+
color: '#000000',
166167
display: 'flex',
167168
alignItems: 'center',
168169
gap: '0.75rem'
169170
},
170171
subtitle: {
171-
color: 'rgba(245, 240, 230, 0.7)', // lighter sand
172+
color: 'rgba(0, 0, 0, 0.7)',
172173
marginTop: '0.25rem'
173174
},
174175
refreshButton: {
@@ -178,8 +179,8 @@ export default function Home() {
178179
transition: 'all 0.2s',
179180
border: 'none',
180181
cursor: 'pointer',
181-
background: loading ? '#6B4C1B' : '#D94F04', // dark brown or spice orange
182-
color: loading ? '#BFAF85' : '#F5F0E6',
182+
background: loading ? '#bfa865' : '#d97304', // lighter brown / orange
183+
color: '#000000',
183184
},
184185
mainContent: {
185186
maxWidth: '1200px',
@@ -190,20 +191,20 @@ export default function Home() {
190191
gap: '2rem'
191192
},
192193
sidebar: {
193-
background: 'rgba(215, 179, 119, 0.15)', // light sand translucent
194+
background: 'rgba(215, 179, 119, 0.25)',
194195
backdropFilter: 'blur(10px)',
195196
borderRadius: '1rem',
196197
padding: '1.5rem',
197-
border: '1px solid rgba(74, 44, 11, 0.4)', // deep brown border
198+
border: '1px solid rgba(160, 130, 60, 0.5)',
198199
height: 'fit-content',
199200
position: 'sticky' as const,
200201
top: '6rem',
201-
color: '#4A2C0B'
202+
color: '#000000'
202203
},
203204
sidebarTitle: {
204205
fontSize: '1.25rem',
205206
fontWeight: '600',
206-
color: '#4A2C0B', // deep brown
207+
color: '#000000',
207208
marginBottom: '1.5rem',
208209
display: 'flex',
209210
alignItems: 'center',
@@ -221,19 +222,19 @@ export default function Home() {
221222
borderRadius: '0.75rem',
222223
cursor: 'pointer',
223224
transition: 'all 0.2s',
224-
border: '1px solid rgba(74, 44, 11, 0.1)', // subtle brown border
225-
background: 'rgba(215, 179, 119, 0.05)', // subtle sand background
226-
color: '#4A2C0B',
225+
border: '1px solid rgba(160, 130, 60, 0.3)',
226+
background: 'rgba(215, 179, 119, 0.1)',
227+
color: '#000000',
227228
},
228229
fileItemSelected: {
229-
background: 'linear-gradient(45deg, #D94F04, #A13E02)', // spice orange gradient
230-
color: '#F5F0E6',
230+
background: 'linear-gradient(45deg, #d97304, #a35402)',
231+
color: '#000000',
231232
transform: 'scale(1.02)',
232-
boxShadow: '0 10px 25px rgba(217, 79, 4, 0.5)'
233+
boxShadow: '0 10px 25px rgba(217, 115, 4, 0.5)'
233234
},
234235
fileItemDefault: {
235-
background: 'rgba(215, 179, 119, 0.05)',
236-
color: '#4A2C0B'
236+
background: 'rgba(215, 179, 119, 0.1)',
237+
color: '#000000'
237238
},
238239
fileInfo: {
239240
display: 'flex',
@@ -255,7 +256,7 @@ export default function Home() {
255256
},
256257
fileAge: {
257258
fontSize: '0.75rem',
258-
opacity: 0.6,
259+
opacity: 0.7,
259260
display: 'flex',
260261
alignItems: 'center',
261262
gap: '0.25rem'
@@ -266,12 +267,12 @@ export default function Home() {
266267
gap: '1.5rem'
267268
},
268269
fileHeader: {
269-
background: 'linear-gradient(135deg, rgba(215, 179, 119, 0.15), rgba(74, 44, 11, 0.1))',
270+
background: 'linear-gradient(135deg, rgba(215, 179, 119, 0.3), rgba(160, 130, 60, 0.2))',
270271
backdropFilter: 'blur(10px)',
271272
borderRadius: '1rem',
272273
padding: '1.5rem',
273-
border: '1px solid rgba(74, 44, 11, 0.4)',
274-
color: '#4A2C0B'
274+
border: '1px solid rgba(160, 130, 60, 0.5)',
275+
color: '#000000'
275276
},
276277
fileHeaderContent: {
277278
display: 'flex',
@@ -284,11 +285,11 @@ export default function Home() {
284285
fileHeaderTitle: {
285286
fontSize: '1.5rem',
286287
fontWeight: 'bold',
287-
color: '#4A2C0B',
288+
color: '#000000',
288289
marginBottom: '0.5rem'
289290
},
290291
fileHeaderPath: {
291-
color: 'rgba(74, 44, 11, 0.7)',
292+
color: 'rgba(0, 0, 0, 0.7)',
292293
fontSize: '0.875rem',
293294
marginBottom: '0.5rem'
294295
},
@@ -297,7 +298,7 @@ export default function Home() {
297298
alignItems: 'center',
298299
gap: '1rem',
299300
fontSize: '0.875rem',
300-
color: 'rgba(74, 44, 11, 0.5)'
301+
color: 'rgba(0, 0, 0, 0.5)'
301302
},
302303
metricsGrid: {
303304
display: 'grid',
@@ -307,53 +308,53 @@ export default function Home() {
307308
metricCard: {
308309
borderRadius: '1rem',
309310
padding: '1.5rem',
310-
border: '1px solid rgba(74, 44, 11, 0.4)',
311+
border: '1px solid rgba(160, 130, 60, 0.5)',
311312
backdropFilter: 'blur(10px)',
312-
background: 'rgba(217, 79, 4, 0.15)', // light spice orange tint
313+
background: 'rgba(217, 115, 4, 0.15)',
313314
transition: 'all 0.2s',
314315
cursor: 'default',
315-
color: '#4A2C0B'
316+
color: '#000000'
316317
},
317318
metricHeader: {
318319
display: 'flex',
319320
alignItems: 'center',
320321
gap: '0.75rem',
321322
marginBottom: '1rem',
322-
color: '#4A2C0B'
323+
color: '#000000'
323324
},
324325
metricIcon: {
325326
fontSize: '1.5rem',
326327
transition: 'transform 0.2s'
327328
},
328329
metricTitle: {
329330
fontWeight: '600',
330-
color: '#4A2C0B',
331+
color: '#000000',
331332
fontSize: '1.125rem'
332333
},
333334
metricValue: {
334335
fontSize: '2rem',
335336
fontWeight: 'bold',
336-
color: '#4A2C0B',
337+
color: '#000000',
337338
marginBottom: '0.5rem'
338339
},
339340
progressBar: {
340341
width: '100%',
341342
height: '0.5rem',
342-
background: 'rgba(74, 44, 11, 0.3)',
343+
background: 'rgba(160, 130, 60, 0.3)',
343344
borderRadius: '0.25rem',
344345
marginTop: '0.75rem',
345346
overflow: 'hidden'
346347
},
347348
progressFill: {
348349
height: '100%',
349-
background: 'linear-gradient(90deg, #D94F04, #A13E02)',
350+
background: 'linear-gradient(90deg, #d97304, #a35402)',
350351
borderRadius: '0.25rem',
351352
transition: 'width 1s ease'
352353
},
353354
methodTypeCard: {
354-
background: 'linear-gradient(135deg, rgba(217, 79, 4, 0.2), rgba(161, 62, 2, 0.2))',
355-
border: '1px solid rgba(217, 79, 4, 0.2)',
356-
color: '#4A2C0B'
355+
background: 'linear-gradient(135deg, rgba(217, 115, 4, 0.2), rgba(161, 84, 2, 0.2))',
356+
border: '1px solid rgba(217, 115, 4, 0.2)',
357+
color: '#000000'
357358
},
358359
methodTypeList: {
359360
display: 'flex',
@@ -365,9 +366,9 @@ export default function Home() {
365366
justifyContent: 'space-between',
366367
alignItems: 'center',
367368
padding: '0.75rem',
368-
background: 'rgba(74, 44, 11, 0.1)',
369+
background: 'rgba(160, 130, 60, 0.1)',
369370
borderRadius: '0.5rem',
370-
color: '#4A2C0B'
371+
color: '#000000'
371372
},
372373
methodTypeLabel: {
373374
display: 'flex',
@@ -380,17 +381,17 @@ export default function Home() {
380381
borderRadius: '50%'
381382
},
382383
methodTypeText: {
383-
color: '#4A2C0B'
384+
color: '#000000'
384385
},
385386
methodTypeValue: {
386387
fontSize: '1.25rem',
387388
fontWeight: 'bold',
388-
color: '#4A2C0B'
389+
color: '#000000'
389390
},
390391
indentationCard: {
391-
background: 'linear-gradient(135deg, rgba(217, 79, 4, 0.2), rgba(161, 62, 2, 0.2))',
392-
border: '1px solid rgba(217, 79, 4, 0.2)',
393-
color: '#4A2C0B'
392+
background: 'linear-gradient(135deg, rgba(217, 115, 4, 0.2), rgba(161, 84, 2, 0.2))',
393+
border: '1px solid rgba(217, 115, 4, 0.2)',
394+
color: '#000000'
394395
},
395396
indentationList: {
396397
display: 'flex',
@@ -401,29 +402,29 @@ export default function Home() {
401402
display: 'flex',
402403
justifyContent: 'space-between',
403404
alignItems: 'center',
404-
color: '#4A2C0B'
405+
color: '#000000'
405406
},
406407
indentationLabel: {
407-
color: '#4A2C0B'
408+
color: '#000000'
408409
},
409410
indentationValue: {
410411
fontSize: '1.125rem',
411412
fontWeight: '600',
412-
color: '#4A2C0B'
413+
color: '#000000'
413414
},
414415
loading: {
415416
display: 'flex',
416417
justifyContent: 'center',
417418
alignItems: 'center',
418419
minHeight: '100vh',
419-
background: 'linear-gradient(135deg, #362C3A, #4A2C0B, #D7B377)',
420-
color: '#F5F0E6'
420+
background: 'linear-gradient(135deg, #f0e3c8, #e3d6b0, #d7b377)',
421+
color: '#000000'
421422
},
422423
loadingSpinner: {
423424
width: '4rem',
424425
height: '4rem',
425-
border: '4px solid rgba(217, 79, 4, 0.3)',
426-
borderTop: '4px solid #D94F04',
426+
border: '4px solid rgba(217, 115, 4, 0.3)',
427+
borderTop: '4px solid #d97304',
427428
borderRadius: '50%',
428429
animation: 'spin 1s linear infinite'
429430
},
@@ -432,7 +433,7 @@ export default function Home() {
432433
justifyContent: 'center',
433434
alignItems: 'center',
434435
height: '24rem',
435-
color: '#4A2C0B'
436+
color: '#000000'
436437
},
437438
emptyStateContent: {
438439
textAlign: 'center' as const
@@ -443,12 +444,13 @@ export default function Home() {
443444
opacity: 0.5
444445
},
445446
emptyStateText: {
446-
color: 'rgba(74, 44, 11, 0.7)',
447+
color: 'rgba(0, 0, 0, 0.7)',
447448
fontSize: '1.25rem'
448449
}
449450
};
450451

451452

453+
452454
if (loading && data.length === 0) {
453455
return (
454456
<div style={styles.loading}>

0 commit comments

Comments
 (0)