olaren.dev
forked from
pds.ls/pdsls
atmosphere explorer
restyle buttons
handle.invalid
+77
-54
+2
-2
src/components/backlinks.tsx
+2
-2
src/components/backlinks.tsx
···
46
46
});
47
47
48
48
return (
49
-
<Show when={links()} fallback={<p class="px-3 py-2 text-neutral-500">Loading…</p>}>
49
+
<Show when={links()} fallback={<p class="px-3 py-2 text-center text-neutral-500">Loading…</p>}>
50
50
<For each={links()!.linking_records}>
51
51
{({ did, collection, rkey }) => {
52
52
const timestamp =
···
91
91
<div class="p-2">
92
92
<Button
93
93
onClick={() => setMore(true)}
94
-
class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 w-full items-center justify-center gap-1 rounded border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
94
+
class="dark:hover:bg-dark-200 dark:active:bg-dark-100 w-full rounded-md border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
95
95
>
96
96
Load more
97
97
</Button>
+3
-1
src/components/create/confirm-submit.tsx
+3
-1
src/components/create/confirm-submit.tsx
···
84
84
<Button onClick={props.onClose}>Cancel</Button>
85
85
<Button
86
86
onClick={() => props.onConfirm(validate(), recreate())}
87
-
class="dark:shadow-dark-700 min-w-12 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"
87
+
classList={{
88
+
"bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true,
89
+
}}
88
90
>
89
91
{props.isCreate ? "Create" : "Edit"}
90
92
</Button>
+3
-1
src/components/create/file-upload.tsx
+3
-1
src/components/create/file-upload.tsx
···
90
90
<Show when={!uploading()}>
91
91
<Button
92
92
onClick={uploadBlob}
93
-
class="dark:shadow-dark-700 flex items-center gap-1 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"
93
+
classList={{
94
+
"bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true,
95
+
}}
94
96
>
95
97
Upload
96
98
</Button>
+3
-1
src/components/create/handle-input.tsx
+3
-1
src/components/create/handle-input.tsx
···
75
75
<Show when={!resolving()}>
76
76
<Button
77
77
type="submit"
78
-
class="dark:shadow-dark-700 flex items-center gap-1 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"
78
+
classList={{
79
+
"bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true,
80
+
}}
79
81
>
80
82
Insert
81
83
</Button>
+4
-7
src/components/create/index.tsx
+4
-7
src/components/create/index.tsx
···
347
347
</Show>
348
348
<div class="flex justify-between gap-2">
349
349
<div class="relative" ref={insertMenuRef}>
350
-
<button
351
-
type="button"
352
-
class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-1.5 text-base shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
353
-
onClick={() => setOpenInsertMenu(!openInsertMenu())}
354
-
>
355
-
<span class="iconify lucide--plus select-none"></span>
356
-
</button>
350
+
<Button onClick={() => setOpenInsertMenu(!openInsertMenu())}>
351
+
<span class="iconify lucide--plus"></span>
352
+
<span>Add</span>
353
+
</Button>
357
354
<Show when={openInsertMenu()}>
358
355
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute bottom-full left-0 z-10 mb-1 flex w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-1.5 shadow-md dark:border-neutral-700">
359
356
<MenuItem
+1
-1
src/components/json.tsx
+1
-1
src/components/json.tsx
···
292
292
<Show when={hide()}>
293
293
<button
294
294
onclick={() => setHide(false)}
295
-
class="flex items-center gap-1 rounded-lg bg-neutral-200 px-2 py-1.5 text-sm transition-colors hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"
295
+
class="flex items-center gap-1 rounded-md bg-neutral-200 px-2 py-1.5 text-sm transition-colors hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"
296
296
>
297
297
<span class="iconify lucide--image"></span>
298
298
<span class="font-sans">Show media</span>
+1
-1
src/components/notification.tsx
+1
-1
src/components/notification.tsx
···
87
87
</Show>
88
88
<Show when={notification.onCancel}>
89
89
<button
90
-
class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 mt-1 rounded border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
90
+
class="dark:hover:bg-dark-200 dark:active:bg-dark-100 dark:bg-dark-300 mt-1 rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700"
91
91
onClick={(e) => {
92
92
e.stopPropagation();
93
93
notification.onCancel?.();
+3
-1
src/components/permission-prompt.tsx
+3
-1
src/components/permission-prompt.tsx
···
40
40
<Button onClick={() => setRequestedScope(null)}>Cancel</Button>
41
41
<Button
42
42
onClick={handleEditPermissions}
43
-
class="dark:shadow-dark-700 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"
43
+
classList={{
44
+
"bg-blue-500! text-white! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400! border-none!": true,
45
+
}}
44
46
>
45
47
Edit permissions
46
48
</Button>
+3
-5
src/components/search.tsx
+3
-5
src/components/search.tsx
···
14
14
import { resolveLexiconAuthority, resolveLexiconAuthorityDirect } from "../utils/api";
15
15
import { appHandleLink, appList, AppUrl } from "../utils/app-urls";
16
16
import { createDebouncedValue } from "../utils/hooks/debounced";
17
+
import { Button } from "./button";
17
18
import { Modal } from "./modal";
18
19
19
20
type RecentSearch = {
···
95
96
};
96
97
97
98
return (
98
-
<button
99
-
onclick={() => setShowSearch(!showSearch())}
100
-
class="dark:bg-dark-300 dark:hover:bg-dark-200 dark:active:bg-dark-100 flex w-fit items-center gap-1 rounded-md border border-neutral-300 bg-neutral-50 px-2.5 py-1.5 text-xs text-neutral-700 transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:text-neutral-300"
101
-
>
99
+
<Button onClick={() => setShowSearch(!showSearch())}>
102
100
<span class="iconify lucide--search"></span>
103
101
<span>Search</span>
104
102
<Show when={!isTouchDevice}>
···
106
104
{/Mac/i.test(navigator.platform) ? "⌘" : "⌃"}K
107
105
</kbd>
108
106
</Show>
109
-
</button>
107
+
</Button>
110
108
);
111
109
};
112
110
+1
-1
src/components/text-input.tsx
+1
-1
src/components/text-input.tsx
···
25
25
disabled={props.disabled}
26
26
required={props.required}
27
27
class={
28
-
"dark:bg-dark-100 rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 select-none placeholder:text-sm focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400 " +
28
+
"dark:bg-dark-100 rounded-md bg-white px-2 py-1 outline-1 outline-neutral-200 select-none placeholder:text-sm focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400 " +
29
29
props.class
30
30
}
31
31
onInput={props.onInput}
+13
-5
src/views/blob.tsx
+13
-5
src/views/blob.tsx
···
50
50
<p>
51
51
{blobs()?.length} blob{(blobs()?.length ?? 0 > 1) ? "s" : ""}
52
52
</p>
53
-
<Show when={!response.loading && cursor()}>
54
-
<Button onClick={() => refetch()}>Load more</Button>
55
-
</Show>
56
-
<Show when={response.loading}>
57
-
<span class="iconify lucide--loader-circle animate-spin py-3.5 text-xl"></span>
53
+
<Show when={cursor()}>
54
+
<Button
55
+
onClick={() => refetch()}
56
+
disabled={response.loading}
57
+
classList={{ "w-20 justify-center": true }}
58
+
>
59
+
<Show
60
+
when={!response.loading}
61
+
fallback={<span class="iconify lucide--loader-circle animate-spin text-base" />}
62
+
>
63
+
Load more
64
+
</Show>
65
+
</Button>
58
66
</Show>
59
67
</div>
60
68
</div>
+7
-2
src/views/collection.tsx
+7
-2
src/views/collection.tsx
···
315
315
<Button onClick={() => setOpenDelete(false)}>Cancel</Button>
316
316
<Button
317
317
onClick={deleteRecords}
318
-
class={`dark:shadow-dark-700 rounded-lg px-2 py-1.5 text-xs text-white shadow-xs select-none ${recreate() ? "bg-green-500 hover:bg-green-600 active:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 dark:active:bg-green-800" : "bg-red-500 hover:bg-red-600 active:bg-red-700"}`}
318
+
classList={{
319
+
"bg-blue-500! text-white! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400! border-none!":
320
+
recreate(),
321
+
"text-white! border-none! bg-red-500! hover:bg-red-600! active:bg-red-700!":
322
+
!recreate(),
323
+
}}
319
324
>
320
325
{recreate() ? "Recreate" : "Delete"}
321
326
</Button>
···
372
377
<Button onClick={() => refetch()}>Load more</Button>
373
378
</Show>
374
379
<Show when={response.loading}>
375
-
<div class="iconify lucide--loader-circle w-20 animate-spin text-xl" />
380
+
<div class="iconify lucide--loader-circle w-20 animate-spin text-lg" />
376
381
</Show>
377
382
</Show>
378
383
</div>
+3
-6
src/views/home.tsx
+3
-6
src/views/home.tsx
···
1
1
import { A } from "@solidjs/router";
2
2
import { For, JSX } from "solid-js";
3
3
import { setOpenManager } from "../auth/state";
4
+
import { Button } from "../components/button";
4
5
import { SearchButton } from "../components/search";
5
6
6
7
type ProfileData = {
···
110
111
<span>to find any account</span>
111
112
</div>
112
113
<div class="flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400">
113
-
<button
114
-
type="button"
115
-
onclick={() => setOpenManager(true)}
116
-
class="dark:bg-dark-300 dark:hover:bg-dark-200 dark:active:bg-dark-100 flex w-fit items-center gap-1 rounded-md border border-neutral-300 bg-neutral-50 px-2.5 py-1.5 text-xs text-neutral-700 transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:text-neutral-300"
117
-
>
114
+
<Button onClick={() => setOpenManager(true)}>
118
115
<span class="iconify lucide--user-round"></span>
119
116
Sign in
120
-
</button>
117
+
</Button>
121
118
<span>to manage records</span>
122
119
</div>
123
120
</div>
+4
-2
src/views/labels.tsx
+4
-2
src/views/labels.tsx
···
277
277
<Button
278
278
onClick={handleLoadMore}
279
279
disabled={loading()}
280
-
class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 w-20 items-center justify-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
280
+
classList={{ "w-20 justify-center": true }}
281
281
>
282
282
<Show
283
283
when={!loading()}
284
-
fallback={<span class="iconify lucide--loader-circle animate-spin" />}
284
+
fallback={
285
+
<span class="iconify lucide--loader-circle animate-spin text-base" />
286
+
}
285
287
>
286
288
Load more
287
289
</Show>
+13
-5
src/views/pds.tsx
+13
-5
src/views/pds.tsx
···
253
253
<div class="dark:bg-dark-500 fixed bottom-0 z-5 flex w-screen justify-center bg-neutral-100 pt-2 pb-4">
254
254
<div class="flex flex-col items-center gap-1 pb-2">
255
255
<p>{repos()?.length} loaded</p>
256
-
<Show when={!response.loading && cursor()}>
257
-
<Button onClick={() => refetch()}>Load more</Button>
258
-
</Show>
259
-
<Show when={response.loading}>
260
-
<span class="iconify lucide--loader-circle animate-spin py-3.5 text-xl"></span>
256
+
<Show when={cursor()}>
257
+
<Button
258
+
onClick={() => refetch()}
259
+
disabled={response.loading}
260
+
classList={{ "w-20 justify-center": true }}
261
+
>
262
+
<Show
263
+
when={!response.loading}
264
+
fallback={<span class="iconify lucide--loader-circle animate-spin text-base" />}
265
+
>
266
+
Load more
267
+
</Show>
268
+
</Button>
261
269
</Show>
262
270
</div>
263
271
</div>
+3
-1
src/views/record.tsx
+3
-1
src/views/record.tsx
···
428
428
<Button onClick={() => setOpenDelete(false)}>Cancel</Button>
429
429
<Button
430
430
onClick={deleteRecord}
431
-
class="dark:shadow-dark-700 rounded-lg bg-red-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-red-400 active:bg-red-400"
431
+
classList={{
432
+
"bg-red-500! border-none! text-white! hover:bg-red-400! active:bg-red-400!": true,
433
+
}}
432
434
>
433
435
Delete
434
436
</Button>
+6
-10
src/views/stream/index.tsx
+6
-10
src/views/stream/index.tsx
···
414
414
showAllEvents={searchParams.allEvents === "on"}
415
415
/>
416
416
<div class="flex justify-end gap-2">
417
-
<button
418
-
type="button"
417
+
<Button
419
418
ontouchstart={(e) => {
420
419
e.preventDefault();
421
420
requestAnimationFrame(() => setPaused(!paused()));
422
421
}}
423
-
onclick={() => setPaused(!paused())}
424
-
class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
422
+
onClick={() => setPaused(!paused())}
425
423
>
426
424
{paused() ? "Resume" : "Pause"}
427
-
</button>
428
-
<button
429
-
type="button"
425
+
</Button>
426
+
<Button
430
427
ontouchstart={(e) => {
431
428
e.preventDefault();
432
429
requestAnimationFrame(() => disconnect());
433
430
}}
434
-
onclick={disconnect}
435
-
class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
431
+
onClick={disconnect}
436
432
>
437
433
Disconnect
438
-
</button>
434
+
</Button>
439
435
</div>
440
436
</div>
441
437
</Show>