Skip to content

Commit 06cdc62

Browse files
emiflakeemiflake
authored
improve light mode for datums (#14)
1 parent ceccc00 commit 06cdc62

File tree

4 files changed

+46
-19
lines changed

4 files changed

+46
-19
lines changed

‎src/components/Datum.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,10 @@ export const ViewDatum = ({ datum }: { datum: string }) => {
111111
};
112112

113113
return (
114-
<div className="border-black border-1 bg-gray-900 text-white overflow-hidden">
114+
<div className="dark:border-black/10 dark:inset-shadow-black border-gray-200 border-1 bg-amber-50/10 dark:bg-gray-900 text-gray-200 dark:text-white overflow-hidden shadow-md">
115115
<div className="flex flex-col">
116116
{/* Toolbar with buttons always visible at the top */}
117-
<div className="flex justify-between items-center p-1 border-b border-gray-800">
117+
<div className="flex justify-between items-center p-1 border-b border-gray-200 dark:border-gray-800">
118118
<ViewModeSelector />
119119
<div className="flex gap-1">
120120
<DiffCheckbox
@@ -128,11 +128,11 @@ export const ViewDatum = ({ datum }: { datum: string }) => {
128128
!datumContext?.selectedDatums.some((d) => d.ref === ref) &&
129129
(datumContext?.selectedDatums?.length ?? 0) >= 2
130130
}
131-
className="text-white hover:text-blue-300"
131+
className="dark:text-white hover:text-blue-300"
132132
/>
133133
<button
134134
onClick={toggleExpand}
135-
className="text-white hover:text-blue-300 p-1"
135+
className="text-gray-900 dark:text-white hover:text-blue-300 p-1"
136136
title={isExpanded ? 'Collapse' : 'Expand'}
137137
>
138138
{isExpanded ? (
@@ -143,18 +143,18 @@ export const ViewDatum = ({ datum }: { datum: string }) => {
143143
</button>
144144
<ExternalLinkButton
145145
href={cborNemo}
146-
className="text-white hover:text-blue-300"
146+
className="text-gray-900 dark:text-white hover:text-blue-300"
147147
/>
148148
<ClipboardButton
149149
text={textToDisplay}
150-
className="text-white hover:text-blue-300"
150+
className="text-gray-900 dark:text-white hover:text-blue-300"
151151
/>
152152
</div>
153153
</div>
154154
{/* Content area */}
155155
<div className="p-2 overflow-x-auto leading-none">
156156
<span
157-
className={`text-xs font-mono break-all dark:text-white ${
157+
className={`text-xs font-mono break-all text-gray-600 dark:text-white ${
158158
isExpanded ? 'whitespace-pre-wrap' : ''
159159
}`}
160160
>
@@ -259,7 +259,7 @@ export const ViewDatumDiff = ({
259259
}, [diff]);
260260

261261
return (
262-
<div className="border-black border-1 bg-gray-900 text-white overflow-hidden">
262+
<div className="dark:border-black/10 dark:inset-shadow-black border-gray-200 border-1 bg-amber-50/10 dark:bg-gray-900 text-gray-200 dark:text-white overflow-hidden shadow-md">
263263
<div className="flex flex-col">
264264
<div className="flex justify-between items-center p-1 border-b border-gray-800">
265265
<ViewModeSelector />
@@ -269,15 +269,15 @@ export const ViewDatumDiff = ({
269269
<div className="flex flex-1 gap-2">
270270
<div className="flex w-1/2">
271271
<span
272-
className={`text-xs font-mono break-all dark:text-white whitespace-pre-wrap`}
272+
className={`text-xs font-mono break-all text-gray-600 dark:text-white whitespace-pre-wrap`}
273273
>
274274
{nodesA}
275275
</span>
276276
</div>
277277
{
278278
<div className="flex border-l border-gray-00 pl-5 w-1/2">
279279
<span
280-
className={`text-xs font-mono break-all dark:text-white whitespace-pre-wrap`}
280+
className={`text-xs font-mono break-all text-gray-600 dark:text-white whitespace-pre-wrap`}
281281
>
282282
{nodesB}
283283
</span>
@@ -301,7 +301,10 @@ export const ViewModeSelector = () => {
301301
onValueChange={(value) => datumContext?.setViewMode(value as ViewMode)}
302302
value={datumContext?.viewMode}
303303
>
304-
<SelectTrigger className="w-[180px] border-0 border-r-1 border-gray-800 dark:bg-gray-900 bg-gray-900 hover:bg-gray-800">
304+
<SelectTrigger
305+
className="w-[180px] border-0 border-r-1 dark:border-gray-800 dark:bg-gray-900 bg-amber-50/10 hover:bg-gray-100 dark:hover:bg-gray-800
306+
text-gray-900 dark:text-white"
307+
>
305308
<SelectValue placeholder="Theme" />
306309
</SelectTrigger>
307310
<SelectContent onAnimationStart={(e) => e.stopPropagation()}>
@@ -336,20 +339,20 @@ export const ViewMetadatum = ({
336339
}, [hastTree]);
337340

338341
return (
339-
<div className="bg-gray-900 text-white overflow-hidden">
342+
<div className="dark:border-gray-800 border-gray-200 border-1 bg-amber-50/10 dark:bg-gray-900 text-gray-200 dark:text-white overflow-hidden shadow-md">
340343
<div className="flex flex-col">
341-
<div className="flex justify-between items-center p-2 border-b border-gray-800">
342-
<span className="text-sm text-slate-100 dark:text-white">
344+
<div className="flex justify-between items-center p-2 border-b border-gray-200 dark:border-gray-800">
345+
<span className="text-sm text-gray-900 dark:text-white">
343346
Label {label}
344347
</span>
345348
<ClipboardButton
346349
text={asYaml}
347-
className="text-white hover:text-blue-300"
350+
className="text-gray-700 hover:text-blue-600 dark:text-white dark:hover:text-blue-300"
348351
/>
349352
</div>
350353
<div className="p-2 overflow-x-auto leading-none">
351354
<span
352-
className={`text-xs font-mono break-all dark:text-white whitespace-pre-wrap`}
355+
className={`text-xs font-mono break-all text-gray-600 dark:text-white whitespace-pre-wrap`}
353356
>
354357
{jsxRuntime}
355358
</span>

‎src/components/DiffCheck.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const DiffCheckbox = ({
2929
<div className="flex items-center">
3030
<label className="gap-1 relative inline-flex items-center cursor-pointer">
3131
{label && (
32-
<span className="ml-3 text-sm font-medium text-white dark:text-gray-300 visible">
32+
<span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300 visible">
3333
{label}:
3434
</span>
3535
)}
@@ -46,7 +46,9 @@ export const DiffCheckbox = ({
4646
}}
4747
/>
4848
<div
49-
className={`w-5 min-w-5 h-5 min-h-5 bg-gray-800 transition-all duration-200 hover:bg-gray-700 hover:border-blue-400 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 dark:peer-focus:ring-blue-600 peer dark:bg-gray-900 border-[3px] border-gray-600 flex items-center justify-center shadow-md ${className}`}
49+
className={`w-5 min-w-5 h-5 min-h-5 bg-gray-100 dark:bg-gray-800 transition-all duration-200 dark:hover:bg-gray-700 hover:border-blue-400 peer-focus:outline-none
50+
peer-focus:ring-2 peer-focus:ring-blue-500 dark:peer-focus:ring-blue-600 peer
51+
border-[3px] border-gray-200 dark:border-gray-600 flex items-center justify-center dark:shadow-md ${className}`}
5052
>
5153
{checked && <CheckIcon className="w-4 h-4 text-blue-400" />}
5254
</div>

‎src/components/tx.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ export const ViewUnit = ({
193193
<div
194194
role="listitem"
195195
aria-label="UTxO unit"
196-
className="flex flex-row justify-between gap-4 border-1 shadow-xs bg-gray-50/20 dark:bg-gray-900/20 border-gray-200 dark:border-gray-600 p-2 break-all"
196+
className="flex flex-row justify-between gap-4 border-1 shadow-xs bg-gray-50/20 dark:bg-gray-900/20 border-gray-200 dark:border-gray-700 p-2 break-all"
197197
>
198198
<span className="text-sm self-center" id={labelId} aria-hidden>
199199
{unit === 'lovelace' ? (

‎src/index.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -296,18 +296,39 @@
296296
*/
297297
.token.property,
298298
.token.key {
299+
@apply text-amber-700;
300+
}
301+
302+
.token {
303+
@apply text-gray-900 dark:text-white;
304+
}
305+
306+
.dark .token.property,
307+
.dark .token.key {
299308
@apply text-amber-200;
300309
}
301310

302311
.token.number {
312+
@apply text-blue-600;
313+
}
314+
315+
.dark .token.number {
303316
@apply text-blue-200;
304317
}
305318

306319
.token.string {
320+
@apply text-green-600;
321+
}
322+
323+
.dark .token.string {
307324
@apply text-green-200;
308325
}
309326

310327
.token.comment {
328+
@apply text-gray-600;
329+
}
330+
331+
.dark .token.comment {
311332
@apply text-gray-200;
312333
}
313334

@@ -353,6 +374,7 @@
353374
* {
354375
@apply border-border outline-ring/50;
355376
}
377+
356378
body {
357379
@apply bg-background text-foreground;
358380
}

0 commit comments

Comments
 (0)