forked from
pds.ls/pdsls
atproto explorer
restyle buttons and inputs
+17
-33
+2
-2
src/components/create.tsx
+2
-2
src/components/create.tsx
···
202
202
<select
203
203
name="validate"
204
204
id="validate"
205
-
class="dark:bg-dark-100 dark:shadow-dark-800 rounded-lg bg-white px-1 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:focus:outline-neutral-200"
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
206
>
207
207
<option value="unset">Unset</option>
208
208
<option value="true">True</option>
···
211
211
</div>
212
212
<div class="flex items-center gap-2">
213
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 bg-white text-xs font-semibold shadow-sm hover:bg-neutral-50 active:bg-neutral-50">
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
215
<input type="file" id="blob" hidden onChange={() => uploadBlob()} />
216
216
<label class="flex items-center gap-1 px-2 py-1.5" for="blob">
217
217
<span class="iconify lucide--upload text-sm"></span>
+1
-1
src/components/search.tsx
+1
-1
src/components/search.tsx
···
76
76
PDS URL, AT URI, or handle
77
77
</label>
78
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 bg-white px-2 py-1 shadow-sm focus-within:outline-[1.5px] focus-within:outline-neutral-900 dark:focus-within:outline-neutral-200">
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
80
<input
81
81
type="text"
82
82
spellcheck={false}
+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 dark:shadow-dark-800 rounded-lg bg-white px-2 py-1 shadow-sm placeholder:text-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:focus:outline-neutral-200 " +
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
29
props.class
30
30
}
31
31
onInput={props.onInput}
+1
-1
src/components/tooltip.tsx
+1
-1
src/components/tooltip.tsx
···
7
7
<Show when={!isTouchDevice}>
8
8
<span
9
9
style={`transform: translate(-50%, 28px)`}
10
-
class={`dark:shadow-dark-800 pointer-events-none absolute left-[50%] z-10 hidden min-w-fit rounded border-[0.5px] border-neutral-300 bg-white p-1 text-center font-sans text-xs whitespace-nowrap text-neutral-900 shadow-md select-none group-hover/tooltip:inline first-letter:capitalize dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200`}
10
+
class={`dark:shadow-dark-800 pointer-events-none absolute left-[50%] z-10 hidden min-w-fit rounded border-[0.5px] border-neutral-300 bg-neutral-50 p-1 text-center font-sans text-xs whitespace-nowrap text-neutral-900 shadow-md select-none group-hover/tooltip:inline first-letter:capitalize dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200`}
11
11
>
12
12
{props.text}
13
13
</span>
+1
-1
src/layout.tsx
+1
-1
src/layout.tsx
···
103
103
</div>
104
104
<Show when={notif().show}>
105
105
<button
106
-
class="dark:shadow-dark-800 dark:bg-dark-100 fixed bottom-10 z-50 flex items-center rounded-lg border-[0.5px] border-neutral-300 bg-white p-2 shadow-md dark:border-neutral-700"
106
+
class="dark:shadow-dark-800 dark:bg-dark-100 fixed bottom-10 z-50 flex items-center rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md dark:border-neutral-700"
107
107
onClick={() => setNotif({ show: false })}
108
108
>
109
109
<span class={`iconify ${notif().icon} mr-1`}></span>
+7
-23
src/views/collection.tsx
+7
-23
src/views/collection.tsx
···
14
14
untrack,
15
15
} from "solid-js";
16
16
import { createStore } from "solid-js/store";
17
-
import { Button, type ButtonProps } from "../components/button.jsx";
17
+
import { Button } from "../components/button.jsx";
18
18
import { JSONType, JSONValue } from "../components/json.jsx";
19
19
import { agent } from "../components/login.jsx";
20
+
import { TextInput } from "../components/text-input.jsx";
20
21
import Tooltip from "../components/tooltip.jsx";
21
22
import { setNotif } from "../layout.jsx";
22
23
import { resolvePDS } from "../utils/api.js";
···
167
168
true,
168
169
);
169
170
170
-
const FilterButton = (props: ButtonProps) => {
171
-
return (
172
-
<Button
173
-
class="flex items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1.5 text-xs font-semibold shadow-sm dark:border-neutral-700"
174
-
classList={{
175
-
"dark:bg-dark-300 dark:hover:bg-dark-100 dark:active:bg-dark-100 bg-white hover:bg-neutral-50 active:bg-neutral-50":
176
-
!filterStuck(),
177
-
"dark:bg-dark-100 dark:hover:bg-dark-50 dark:active:bg-dark-50 bg-neutral-50 hover:bg-neutral-100 active:bg-neutral-100":
178
-
filterStuck(),
179
-
}}
180
-
{...props}
181
-
/>
182
-
);
183
-
};
184
-
185
171
onMount(() => {
186
172
let ticking = false;
187
173
const tick = () => {
···
271
257
<span class="iconify lucide--radio-tower text-lg"></span>
272
258
</A>
273
259
</Tooltip>
274
-
<input
275
-
type="text"
276
-
spellcheck={false}
260
+
<TextInput
277
261
placeholder="Filter by substring"
278
-
class="dark:bg-dark-100 grow 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"
279
262
onInput={(e) => setFilter(e.currentTarget.value)}
263
+
class="grow"
280
264
/>
281
265
</div>
282
266
<Show when={records.length > 1}>
283
267
<div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
284
-
<FilterButton
268
+
<Button
285
269
onClick={() => {
286
270
setReverse(!reverse());
287
271
setRecords([]);
···
293
277
class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`}
294
278
></span>
295
279
Reverse
296
-
</FilterButton>
280
+
</Button>
297
281
<div>
298
282
<Show when={batchDelete()}>
299
283
<span>{records.filter((rec) => rec.toDelete).length}</span>
···
304
288
<div class="flex w-[5rem] items-center justify-end">
305
289
<Show when={cursor()}>
306
290
<Show when={!response.loading}>
307
-
<FilterButton onClick={() => refetch()}>Load More</FilterButton>
291
+
<Button onClick={() => refetch()}>Load More</Button>
308
292
</Show>
309
293
<Show when={response.loading}>
310
294
<div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />
+1
-1
src/views/repo.tsx
+1
-1
src/views/repo.tsx
···
110
110
<div class="flex items-center justify-between">
111
111
<div class="flex items-center gap-1">
112
112
<div class="iconify lucide--filter" />
113
-
<div class="dark:shadow-dark-800 dark:bg-dark-300 flex w-fit items-center rounded-full bg-white shadow-sm">
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
114
<FilterButton icon="iconify lucide--at-sign" event="handle" />
115
115
<FilterButton icon="iconify lucide--key-round" event="rotation_key" />
116
116
<FilterButton icon="iconify lucide--hard-drive" event="service" />
+2
-2
src/views/stream.tsx
+2
-2
src/views/stream.tsx
···
194
194
spellcheck={false}
195
195
placeholder="Comma-separated list of collections"
196
196
value={searchParams.collections ?? ""}
197
-
class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:focus:outline-neutral-200"
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
198
/>
199
199
</label>
200
200
</Show>
···
206
206
spellcheck={false}
207
207
placeholder="Comma-separated list of DIDs"
208
208
value={searchParams.dids ?? ""}
209
-
class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:focus:outline-neutral-200"
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
210
/>
211
211
</label>
212
212
</Show>