vielle.dev
forked from
pds.ls/pdsls
atproto explorer
restyle modals
handle.invalid
+3
-3
src/components/account.tsx
+3
-3
src/components/account.tsx
···
68
return (
69
<>
70
<Modal open={openManager()} onClose={() => setOpenManager(false)}>
71
-
<div class="dark:bg-dark-800 dark:shadow-dark-800 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-200 p-4 text-neutral-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
72
<div class="mb-2 flex items-center gap-1 font-semibold">
73
<span class="iconify lucide--user-round"></span>
74
<span>Manage accounts</span>
···
76
<div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">
77
<For each={Object.keys(sessions)}>
78
{(did) => (
79
-
<div class="flex w-full items-center justify-between gap-x-2 rounded-lg hover:bg-neutral-100 active:bg-neutral-100 dark:hover:bg-neutral-600 dark:active:bg-neutral-600">
80
<button
81
class="flex basis-full items-center justify-between gap-1 truncate p-1"
82
onclick={() => resumeSession(did as Did)}
···
113
class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
114
>
115
{agent() && avatar() ?
116
-
<img src={avatar()} class="dark:shadow-dark-800 size-5 rounded-full shadow-sm" />
117
: <span class="iconify lucide--circle-user-round text-xl"></span>}
118
</button>
119
</>
···
68
return (
69
<>
70
<Modal open={openManager()} onClose={() => setOpenManager(false)}>
71
+
<div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-300 sm:w-[24rem] dark:border-neutral-700 starting:opacity-0">
72
<div class="mb-2 flex items-center gap-1 font-semibold">
73
<span class="iconify lucide--user-round"></span>
74
<span>Manage accounts</span>
···
76
<div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">
77
<For each={Object.keys(sessions)}>
78
{(did) => (
79
+
<div class="flex w-full items-center justify-between gap-x-2 rounded-lg hover:bg-neutral-200 active:bg-neutral-200 dark:hover:bg-neutral-600 dark:active:bg-neutral-600">
80
<button
81
class="flex basis-full items-center justify-between gap-1 truncate p-1"
82
onclick={() => resumeSession(did as Did)}
···
113
class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
114
>
115
{agent() && avatar() ?
116
+
<img src={avatar()} class="dark:shadow-dark-800 size-5 rounded-full shadow-xs" />
117
: <span class="iconify lucide--circle-user-round text-xl"></span>}
118
</button>
119
</>
+3
-3
src/components/create.tsx
+3
-3
src/components/create.tsx
···
164
return (
165
<>
166
<Modal open={openDialog()} onClose={() => setOpenDialog(false)} closeOnClick={false}>
167
-
<div class="dark:bg-dark-800 dark:shadow-dark-800 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-200 p-2 text-neutral-900 shadow-md transition-opacity duration-300 sm:w-xl sm:p-4 lg:w-[48rem] dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
168
<div class="mb-2 flex w-full justify-between">
169
<div class="flex items-center gap-1 font-semibold">
170
<span class="iconify lucide--square-pen"></span>
···
202
<select
203
name="validate"
204
id="validate"
205
-
class="dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-1 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
206
>
207
<option value="unset">Unset</option>
208
<option value="true">True</option>
···
211
</div>
212
<div class="flex items-center gap-2">
213
<Show when={!uploading()}>
214
-
<div class="dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs font-semibold shadow-sm hover:bg-neutral-100 active:bg-neutral-100 dark:border-neutral-700">
215
<input type="file" id="blob" hidden onChange={() => uploadBlob()} />
216
<label class="flex items-center gap-1 px-2 py-1.5" for="blob">
217
<span class="iconify lucide--upload text-sm"></span>
···
164
return (
165
<>
166
<Modal open={openDialog()} onClose={() => setOpenDialog(false)} closeOnClick={false}>
167
+
<div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md transition-opacity duration-300 sm:w-xl sm:p-4 lg:w-[48rem] dark:border-neutral-700 starting:opacity-0">
168
<div class="mb-2 flex w-full justify-between">
169
<div class="flex items-center gap-1 font-semibold">
170
<span class="iconify lucide--square-pen"></span>
···
202
<select
203
name="validate"
204
id="validate"
205
+
class="dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-1 py-1 shadow-xs focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
206
>
207
<option value="unset">Unset</option>
208
<option value="true">True</option>
···
211
</div>
212
<div class="flex items-center gap-2">
213
<Show when={!uploading()}>
214
+
<div class="dark:hover:bg-dark-100 dark:shadow-dark-800 dark:bg-dark-300 dark:active:bg-dark-100 flex rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs font-semibold shadow-xs hover:bg-neutral-100 active:bg-neutral-100 dark:border-neutral-700">
215
<input type="file" id="blob" hidden onChange={() => uploadBlob()} />
216
<label class="flex items-center gap-1 px-2 py-1.5" for="blob">
217
<span class="iconify lucide--upload text-sm"></span>
+6
-1
src/components/editor.tsx
+6
-1
src/components/editor.tsx
···
54
window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeEvent),
55
);
56
57
+
return (
58
+
<div
59
+
ref={editorDiv}
60
+
class="dark:shadow-dark-800 border-[0.5px] border-neutral-300 shadow-xs dark:border-neutral-700"
61
+
></div>
62
+
);
63
};
64
65
export { Editor };
+1
-1
src/components/modal.tsx
+1
-1
src/components/modal.tsx
+1
-1
src/components/search.tsx
+1
-1
src/components/search.tsx
···
76
PDS URL, AT URI, or handle
77
</label>
78
<div class="flex w-full items-center gap-2">
79
-
<div class="dark:bg-dark-100 dark:shadow-dark-800 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-sm focus-within:outline-[1.5px] focus-within:outline-neutral-900 dark:border-neutral-700 dark:focus-within:outline-neutral-200">
80
<input
81
type="text"
82
spellcheck={false}
···
76
PDS URL, AT URI, or handle
77
</label>
78
<div class="flex w-full items-center gap-2">
79
+
<div class="dark:bg-dark-100 dark:shadow-dark-800 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus-within:outline-[1.5px] focus-within:outline-neutral-900 dark:border-neutral-700 dark:focus-within:outline-neutral-200">
80
<input
81
type="text"
82
spellcheck={false}
+1
-1
src/components/text-input.tsx
+1
-1
src/components/text-input.tsx
···
25
disabled={props.disabled}
26
required={props.required}
27
class={
28
-
"dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-sm placeholder:text-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200 " +
29
props.class
30
}
31
onInput={props.onInput}
···
25
disabled={props.disabled}
26
required={props.required}
27
class={
28
+
"dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs placeholder:text-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200 " +
29
props.class
30
}
31
onInput={props.onInput}
+1
-1
src/views/labels.tsx
+1
-1
src/views/labels.tsx
···
79
spellcheck={false}
80
rows={3}
81
value={searchParams.uriPatterns ?? "*"}
82
-
class="dark:bg-dark-100 dark:shadow-dark-800 mb-1 grow rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:focus:outline-neutral-200"
83
/>
84
<div class="flex justify-center">
85
<Show when={!response.loading}>
···
79
spellcheck={false}
80
rows={3}
81
value={searchParams.uriPatterns ?? "*"}
82
+
class="dark:bg-dark-100 dark:shadow-dark-800 mb-1 grow rounded-lg bg-white px-2 py-1 shadow-xs focus:outline-[1.5px] focus:outline-neutral-900 dark:focus:outline-neutral-200"
83
/>
84
<div class="flex justify-center">
85
<Show when={!response.loading}>
+3
-3
src/views/record.tsx
+3
-3
src/views/record.tsx
···
120
return (
121
<Show when={record()} keyed>
122
<div class="flex w-full flex-col items-center">
123
-
<div class="dark:shadow-dark-800 dark:bg-dark-300 mb-3 flex w-[22rem] justify-between rounded-lg bg-neutral-50 px-2 py-1.5 shadow-sm sm:w-[24rem]">
124
<div class="flex gap-3 text-sm">
125
<A
126
classList={{
···
157
</button>
158
</Tooltip>
159
<Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
160
-
<div class="dark:bg-dark-800 dark:shadow-dark-800 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-200 p-4 text-neutral-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
161
<h2 class="mb-2 font-semibold">Delete this record?</h2>
162
<div class="flex justify-end gap-2">
163
<Button onClick={() => setOpenDelete(false)}>Cancel</Button>
164
<Button
165
onClick={deleteRecord}
166
-
class="dark:shadow-dark-800 rounded-lg bg-red-500 px-2 py-1.5 text-xs font-semibold text-neutral-200 shadow-sm hover:bg-red-400 active:bg-red-400"
167
>
168
Delete
169
</Button>
···
120
return (
121
<Show when={record()} keyed>
122
<div class="flex w-full flex-col items-center">
123
+
<div class="dark:shadow-dark-800 dark:bg-dark-300 mb-3 flex w-[22rem] justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 shadow-xs sm:w-[24rem] dark:border-neutral-700">
124
<div class="flex gap-3 text-sm">
125
<A
126
classList={{
···
157
</button>
158
</Tooltip>
159
<Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
160
+
<div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-300 dark:border-neutral-700 starting:opacity-0">
161
<h2 class="mb-2 font-semibold">Delete this record?</h2>
162
<div class="flex justify-end gap-2">
163
<Button onClick={() => setOpenDelete(false)}>Cancel</Button>
164
<Button
165
onClick={deleteRecord}
166
+
class="dark:shadow-dark-800 rounded-lg bg-red-500 px-2 py-1.5 text-xs font-semibold text-neutral-200 shadow-xs hover:bg-red-400 active:bg-red-400"
167
>
168
Delete
169
</Button>
+2
-2
src/views/repo.tsx
+2
-2
src/views/repo.tsx
···
110
<div class="flex items-center justify-between">
111
<div class="flex items-center gap-1">
112
<div class="iconify lucide--filter" />
113
-
<div class="dark:shadow-dark-800 dark:bg-dark-300 flex w-fit items-center rounded-full border-[0.5px] border-neutral-300 bg-neutral-50 shadow-sm dark:border-neutral-700">
114
<FilterButton icon="iconify lucide--at-sign" event="handle" />
115
<FilterButton icon="iconify lucide--key-round" event="rotation_key" />
116
<FilterButton icon="iconify lucide--hard-drive" event="service" />
···
273
{error()}
274
</div>
275
</Show>
276
-
<div class="dark:shadow-dark-800 dark:bg-dark-300 flex justify-between rounded-lg bg-neutral-50 px-2 py-1.5 text-sm shadow-sm">
277
<Show when={!error()}>
278
<RepoTab tab="collections" label="Collections" icon="lucide--folder-open" />
279
</Show>
···
110
<div class="flex items-center justify-between">
111
<div class="flex items-center gap-1">
112
<div class="iconify lucide--filter" />
113
+
<div class="dark:shadow-dark-800 dark:bg-dark-300 flex w-fit items-center rounded-full border-[0.5px] border-neutral-300 bg-neutral-50 shadow-xs dark:border-neutral-700">
114
<FilterButton icon="iconify lucide--at-sign" event="handle" />
115
<FilterButton icon="iconify lucide--key-round" event="rotation_key" />
116
<FilterButton icon="iconify lucide--hard-drive" event="service" />
···
273
{error()}
274
</div>
275
</Show>
276
+
<div class="dark:shadow-dark-800 dark:bg-dark-300 flex justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm shadow-xs dark:border-neutral-700">
277
<Show when={!error()}>
278
<RepoTab tab="collections" label="Collections" icon="lucide--folder-open" />
279
</Show>
+2
-2
src/views/stream.tsx
+2
-2
src/views/stream.tsx
···
194
spellcheck={false}
195
placeholder="Comma-separated list of collections"
196
value={searchParams.collections ?? ""}
197
-
class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
198
/>
199
</label>
200
</Show>
···
206
spellcheck={false}
207
placeholder="Comma-separated list of DIDs"
208
value={searchParams.dids ?? ""}
209
-
class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
210
/>
211
</label>
212
</Show>
···
194
spellcheck={false}
195
placeholder="Comma-separated list of collections"
196
value={searchParams.collections ?? ""}
197
+
class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
198
/>
199
</label>
200
</Show>
···
206
spellcheck={false}
207
placeholder="Comma-separated list of DIDs"
208
value={searchParams.dids ?? ""}
209
+
class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
210
/>
211
</label>
212
</Show>