t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
Improve modal and form theming in web app
Update SignInModal copy and classes for the handle prompt and link. Add
z-index and dialog/background overrides to the ApiKeys modal and adjust
the Close color. Set input backgrounds, borders, text and caret colors
and restyle Cancel/Create buttons (colors, hover and shape).
tsiry-sandratraina.com
+86
-8
+8
-5
apps/web/src/components/SignInModal/SignInModal.tsx
+8
-5
apps/web/src/components/SignInModal/SignInModal.tsx
···
65
65
</p>
66
66
<div style={{ marginBottom: 20 }}>
67
67
<div style={{ marginBottom: 15 }}>
68
-
<LabelMedium>Bluesky handle</LabelMedium>
68
+
<LabelMedium className="!text-[var(--color-text)]">
69
+
Handle
70
+
</LabelMedium>
69
71
</div>
70
72
<Input
71
73
name="handle"
···
126
128
marginTop={"20px"}
127
129
className="!text-[var(--color-text-muted)] text-center"
128
130
>
129
-
Don't have an account?
131
+
Don't have an atproto handle yet?
130
132
</LabelMedium>
131
-
<div className="text-[var(--color-text-muted)] text-center">
133
+
<div className="text-[var(--color-text-muted)] text-center text-[16px]">
134
+
You can create one at{" "}
132
135
<a
133
136
href="https://bsky.app"
134
137
className="text-[var(--color-primary)] no-underline cursor-pointer text-center"
135
138
target="_blank"
136
139
>
137
-
Sign up for Bluesky
140
+
Bluesky
138
141
</a>{" "}
139
-
to create one now!
142
+
or any other AT Protocol service.
140
143
</div>
141
144
</ModalBody>
142
145
</Modal>
+78
-3
apps/web/src/pages/apikeys/ApiKeys.tsx
+78
-3
apps/web/src/pages/apikeys/ApiKeys.tsx
···
305
305
overrides={{
306
306
Root: {
307
307
style: {
308
-
zIndex: 1,
308
+
zIndex: 50,
309
+
},
310
+
},
311
+
Dialog: {
312
+
style: {
313
+
backgroundColor: "var(--color-background)",
314
+
},
315
+
},
316
+
Close: {
317
+
style: {
318
+
color: "var(--color-text)",
319
+
":hover": {
320
+
color: "var(--color-text)",
321
+
opacity: 0.8,
322
+
},
309
323
},
310
324
},
311
325
}}
312
326
>
313
-
<ModalHeader>Create a new API key</ModalHeader>
327
+
<ModalHeader className="!text-[var(--color-text)]">
328
+
Create a new API key
329
+
</ModalHeader>
314
330
<ModalBody>
315
331
<Controller
316
332
name="name"
···
321
337
placeholder="Name"
322
338
clearOnEscape
323
339
error={!!errors.name}
340
+
overrides={{
341
+
Root: {
342
+
style: {
343
+
backgroundColor: "var(--color-input-background)",
344
+
borderColor: "var(--color-input-background)",
345
+
},
346
+
},
347
+
StartEnhancer: {
348
+
style: {
349
+
backgroundColor: "var(--color-input-background)",
350
+
},
351
+
},
352
+
InputContainer: {
353
+
style: {
354
+
backgroundColor: "var(--color-input-background)",
355
+
},
356
+
},
357
+
Input: {
358
+
style: {
359
+
color: "var(--color-text)",
360
+
caretColor: "var(--color-text)",
361
+
},
362
+
},
363
+
}}
324
364
/>
325
365
)}
326
366
/>
···
336
376
overrides={{
337
377
Root: {
338
378
style: {
379
+
backgroundColor: "var(--color-input-background)",
380
+
borderColor: "var(--color-input-background)",
339
381
marginTop: "20px",
340
382
},
341
383
},
384
+
InputContainer: {
385
+
style: {
386
+
backgroundColor: "var(--color-input-background)",
387
+
},
388
+
},
389
+
Input: {
390
+
style: {
391
+
color: "var(--color-text)",
392
+
caretColor: "var(--color-text)",
393
+
},
394
+
},
342
395
}}
343
396
/>
344
397
)}
···
352
405
BaseButton: {
353
406
style: {
354
407
marginRight: "10px",
408
+
backgroundColor: "var(--color-background) !important",
409
+
color: "var(--color-text) !important",
410
+
":hover": {
411
+
backgroundColor: "var(--color-background)",
412
+
},
355
413
},
356
414
},
357
415
}}
358
416
>
359
417
Cancel
360
418
</Button>
361
-
<Button onClick={onCreate}>Create</Button>
419
+
<Button
420
+
onClick={onCreate}
421
+
shape="pill"
422
+
overrides={{
423
+
BaseButton: {
424
+
style: {
425
+
backgroundColor: "var(--color-purple) !important",
426
+
color: "var(--color-button-text) !important",
427
+
":hover": {
428
+
backgroundColor: "var(--color-purple)",
429
+
color: "var(--color-button-text) !important",
430
+
},
431
+
},
432
+
},
433
+
}}
434
+
>
435
+
Create
436
+
</Button>
362
437
</ModalFooter>
363
438
</Modal>
364
439
</Main>