From 8313af2d94b800cf4df4fdabd128435f1b277bcb Mon Sep 17 00:00:00 2001
From: Juliet <m@juli.ee>
Date: Sat, 24 Jan 2026 14:44:26 +0100
Subject: [PATCH] restyle buttons

---
 src/components/backlinks.tsx             |  4 ++--
 src/components/button.tsx                |  4 +++-
 src/components/create/confirm-submit.tsx |  4 +++-
 src/components/create/file-upload.tsx    |  4 +++-
 src/components/create/handle-input.tsx   |  4 +++-
 src/components/create/index.tsx          | 11 ++++-------
 src/components/json.tsx                  |  2 +-
 src/components/notification.tsx          |  2 +-
 src/components/permission-prompt.tsx     |  4 +++-
 src/components/search.tsx                |  8 +++-----
 src/components/text-input.tsx            |  2 +-
 src/views/blob.tsx                       | 18 +++++++++++++-----
 src/views/car/shared.tsx                 |  2 +-
 src/views/collection.tsx                 |  9 +++++++--
 src/views/home.tsx                       |  9 +++------
 src/views/labels.tsx                     |  6 ++++--
 src/views/pds.tsx                        | 18 +++++++++++++-----
 src/views/record.tsx                     |  4 +++-
 src/views/stream/index.tsx               | 16 ++++++----------
 19 files changed, 77 insertions(+), 54 deletions(-)

diff --git a/src/components/backlinks.tsx b/src/components/backlinks.tsx
index a767852..c39453d 100644
--- a/src/components/backlinks.tsx
+++ b/src/components/backlinks.tsx
@@ -46,7 +46,7 @@ const BacklinkRecords = (props: BacklinksProps & { cursor?: string }) => {
   });
 
   return (
-    <Show when={links()} fallback={<p class="px-3 py-2 text-neutral-500">Loading…</p>}>
+    <Show when={links()} fallback={<p class="px-3 py-2 text-center text-neutral-500">Loading…</p>}>
       <For each={links()!.linking_records}>
         {({ did, collection, rkey }) => {
           const timestamp =
@@ -91,7 +91,7 @@ const BacklinkRecords = (props: BacklinksProps & { cursor?: string }) => {
             <div class="p-2">
               <Button
                 onClick={() => setMore(true)}
-                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"
+                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"
               >
                 Load more
               </Button>
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 6bdf2f0..8c7986e 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -6,6 +6,7 @@ export interface ButtonProps {
   class?: string;
   classList?: Record<string, boolean | undefined>;
   onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+  ontouchstart?: (e: TouchEvent) => void;
   children?: JSX.Element;
 }
 
@@ -16,10 +17,11 @@ export const Button = (props: ButtonProps) => {
       disabled={props.disabled ?? false}
       class={
         props.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"
+        "dark:bg-dark-300 dark:hover:bg-dark-200 dark:active:bg-dark-100 flex 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 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:text-neutral-300"
       }
       classList={props.classList}
       onClick={props.onClick}
+      ontouchstart={props.ontouchstart}
     >
       {props.children}
     </button>
diff --git a/src/components/create/confirm-submit.tsx b/src/components/create/confirm-submit.tsx
index dbde4bc..68012c5 100644
--- a/src/components/create/confirm-submit.tsx
+++ b/src/components/create/confirm-submit.tsx
@@ -84,7 +84,9 @@ export const ConfirmSubmit = (props: {
           <Button onClick={props.onClose}>Cancel</Button>
           <Button
             onClick={() => props.onConfirm(validate(), recreate())}
-            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"
+            classList={{
+              "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,
+            }}
           >
             {props.isCreate ? "Create" : "Edit"}
           </Button>
diff --git a/src/components/create/file-upload.tsx b/src/components/create/file-upload.tsx
index 6322011..ee82b2e 100644
--- a/src/components/create/file-upload.tsx
+++ b/src/components/create/file-upload.tsx
@@ -90,7 +90,9 @@ export const FileUpload = (props: {
           <Show when={!uploading()}>
             <Button
               onClick={uploadBlob}
-              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"
+              classList={{
+                "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,
+              }}
             >
               Upload
             </Button>
diff --git a/src/components/create/handle-input.tsx b/src/components/create/handle-input.tsx
index 1c82cd8..6a6d44b 100644
--- a/src/components/create/handle-input.tsx
+++ b/src/components/create/handle-input.tsx
@@ -75,7 +75,9 @@ export const HandleInput = (props: { onClose: () => void }) => {
           <Show when={!resolving()}>
             <Button
               type="submit"
-              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"
+              classList={{
+                "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,
+              }}
             >
               Insert
             </Button>
diff --git a/src/components/create/index.tsx b/src/components/create/index.tsx
index dbefedc..6b0c545 100644
--- a/src/components/create/index.tsx
+++ b/src/components/create/index.tsx
@@ -347,13 +347,10 @@ export const RecordEditor = (props: {
             </Show>
             <div class="flex justify-between gap-2">
               <div class="relative" ref={insertMenuRef}>
-                <button
-                  type="button"
-                  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"
-                  onClick={() => setOpenInsertMenu(!openInsertMenu())}
-                >
-                  <span class="iconify lucide--plus select-none"></span>
-                </button>
+                <Button onClick={() => setOpenInsertMenu(!openInsertMenu())}>
+                  <span class="iconify lucide--plus"></span>
+                  <span>Add</span>
+                </Button>
                 <Show when={openInsertMenu()}>
                   <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">
                     <MenuItem
diff --git a/src/components/json.tsx b/src/components/json.tsx
index d9be00a..998f10e 100644
--- a/src/components/json.tsx
+++ b/src/components/json.tsx
@@ -292,7 +292,7 @@ const JSONObject = (props: { data: { [x: string]: JSONType } }) => {
         <Show when={hide()}>
           <button
             onclick={() => setHide(false)}
-            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"
+            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"
           >
             <span class="iconify lucide--image"></span>
             <span class="font-sans">Show media</span>
diff --git a/src/components/notification.tsx b/src/components/notification.tsx
index 806fb43..5e45fd5 100644
--- a/src/components/notification.tsx
+++ b/src/components/notification.tsx
@@ -87,7 +87,7 @@ export const NotificationContainer = () => {
                 </Show>
                 <Show when={notification.onCancel}>
                   <button
-                    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"
+                    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"
                     onClick={(e) => {
                       e.stopPropagation();
                       notification.onCancel?.();
diff --git a/src/components/permission-prompt.tsx b/src/components/permission-prompt.tsx
index a66d864..f2ef32f 100644
--- a/src/components/permission-prompt.tsx
+++ b/src/components/permission-prompt.tsx
@@ -40,7 +40,9 @@ export const PermissionPromptContainer = () => {
         <Button onClick={() => setRequestedScope(null)}>Cancel</Button>
         <Button
           onClick={handleEditPermissions}
-          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"
+          classList={{
+            "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,
+          }}
         >
           Edit permissions
         </Button>
diff --git a/src/components/search.tsx b/src/components/search.tsx
index 6cad5f7..18cae19 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -14,6 +14,7 @@ import { isTouchDevice } from "../layout";
 import { resolveLexiconAuthority, resolveLexiconAuthorityDirect } from "../utils/api";
 import { appHandleLink, appList, AppUrl } from "../utils/app-urls";
 import { createDebouncedValue } from "../utils/hooks/debounced";
+import { Button } from "./button";
 import { Modal } from "./modal";
 
 type RecentSearch = {
@@ -95,10 +96,7 @@ export const SearchButton = () => {
   };
 
   return (
-    <button
-      onclick={() => setShowSearch(!showSearch())}
-      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"
-    >
+    <Button onClick={() => setShowSearch(!showSearch())}>
       <span class="iconify lucide--search"></span>
       <span>Search</span>
       <Show when={!isTouchDevice}>
@@ -106,7 +104,7 @@ export const SearchButton = () => {
           {/Mac/i.test(navigator.platform) ? "⌘" : "⌃"}K
         </kbd>
       </Show>
-    </button>
+    </Button>
   );
 };
 
diff --git a/src/components/text-input.tsx b/src/components/text-input.tsx
index 65baaca..0a577cc 100644
--- a/src/components/text-input.tsx
+++ b/src/components/text-input.tsx
@@ -25,7 +25,7 @@ export const TextInput = (props: TextInputProps) => {
       disabled={props.disabled}
       required={props.required}
       class={
-        "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 " +
+        "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 " +
         props.class
       }
       onInput={props.onInput}
diff --git a/src/views/blob.tsx b/src/views/blob.tsx
index 91aee40..fc7ae0a 100644
--- a/src/views/blob.tsx
+++ b/src/views/blob.tsx
@@ -50,11 +50,19 @@ const BlobView = (props: { pds: string; repo: string }) => {
           <p>
             {blobs()?.length} blob{(blobs()?.length ?? 0 > 1) ? "s" : ""}
           </p>
-          <Show when={!response.loading && cursor()}>
-            <Button onClick={() => refetch()}>Load more</Button>
-          </Show>
-          <Show when={response.loading}>
-            <span class="iconify lucide--loader-circle animate-spin py-3.5 text-xl"></span>
+          <Show when={cursor()}>
+            <Button
+              onClick={() => refetch()}
+              disabled={response.loading}
+              classList={{ "w-20 justify-center": true }}
+            >
+              <Show
+                when={!response.loading}
+                fallback={<span class="iconify lucide--loader-circle animate-spin text-base" />}
+              >
+                Load more
+              </Show>
+            </Button>
           </Show>
         </div>
       </div>
diff --git a/src/views/car/shared.tsx b/src/views/car/shared.tsx
index c6d47fe..f3cbcf5 100644
--- a/src/views/car/shared.tsx
+++ b/src/views/car/shared.tsx
@@ -123,7 +123,7 @@ export const WelcomeView = (props: {
             </p>
             <p class="text-xs text-neutral-500 dark:text-neutral-400">or</p>
           </div>
-          <label class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-8 items-center justify-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-3 py-1.5 text-sm shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
+          <label class="dark:bg-dark-300 dark:hover:bg-dark-200 dark:active:bg-dark-100 flex items-center gap-1 rounded-md border border-neutral-300 bg-neutral-50 px-2.5 py-1.5 text-sm text-neutral-700 transition-colors select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:text-neutral-300">
             <input
               type="file"
               accept={isIOS ? undefined : ".car,application/vnd.ipld.car"}
diff --git a/src/views/collection.tsx b/src/views/collection.tsx
index 19153b1..d247da0 100644
--- a/src/views/collection.tsx
+++ b/src/views/collection.tsx
@@ -315,7 +315,12 @@ const CollectionView = () => {
                       <Button onClick={() => setOpenDelete(false)}>Cancel</Button>
                       <Button
                         onClick={deleteRecords}
-                        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"}`}
+                        classList={{
+                          "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!":
+                            recreate(),
+                          "text-white! border-none! bg-red-500! hover:bg-red-600! active:bg-red-700!":
+                            !recreate(),
+                        }}
                       >
                         {recreate() ? "Recreate" : "Delete"}
                       </Button>
@@ -372,7 +377,7 @@ const CollectionView = () => {
                         <Button onClick={() => refetch()}>Load more</Button>
                       </Show>
                       <Show when={response.loading}>
-                        <div class="iconify lucide--loader-circle w-20 animate-spin text-xl" />
+                        <div class="iconify lucide--loader-circle w-20 animate-spin text-lg" />
                       </Show>
                     </Show>
                   </div>
diff --git a/src/views/home.tsx b/src/views/home.tsx
index 5c0e9b2..24ff687 100644
--- a/src/views/home.tsx
+++ b/src/views/home.tsx
@@ -1,6 +1,7 @@
 import { A } from "@solidjs/router";
 import { For, JSX } from "solid-js";
 import { setOpenManager } from "../auth/state";
+import { Button } from "../components/button";
 import { SearchButton } from "../components/search";
 
 type ProfileData = {
@@ -110,14 +111,10 @@ export const Home = () => {
           <span>to find any account</span>
         </div>
         <div class="flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400">
-          <button
-            type="button"
-            onclick={() => setOpenManager(true)}
-            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"
-          >
+          <Button onClick={() => setOpenManager(true)}>
             <span class="iconify lucide--user-round"></span>
             Sign in
-          </button>
+          </Button>
           <span>to manage records</span>
         </div>
       </div>
diff --git a/src/views/labels.tsx b/src/views/labels.tsx
index c7c9011..4f6f279 100644
--- a/src/views/labels.tsx
+++ b/src/views/labels.tsx
@@ -277,11 +277,13 @@ export const LabelView = () => {
                   <Button
                     onClick={handleLoadMore}
                     disabled={loading()}
-                    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"
+                    classList={{ "w-20 justify-center": true }}
                   >
                     <Show
                       when={!loading()}
-                      fallback={<span class="iconify lucide--loader-circle animate-spin" />}
+                      fallback={
+                        <span class="iconify lucide--loader-circle animate-spin text-base" />
+                      }
                     >
                       Load more
                     </Show>
diff --git a/src/views/pds.tsx b/src/views/pds.tsx
index 7341efa..d47439d 100644
--- a/src/views/pds.tsx
+++ b/src/views/pds.tsx
@@ -253,11 +253,19 @@ const PdsView = () => {
           <div class="dark:bg-dark-500 fixed bottom-0 z-5 flex w-screen justify-center bg-neutral-100 pt-2 pb-4">
             <div class="flex flex-col items-center gap-1 pb-2">
               <p>{repos()?.length} loaded</p>
-              <Show when={!response.loading && cursor()}>
-                <Button onClick={() => refetch()}>Load more</Button>
-              </Show>
-              <Show when={response.loading}>
-                <span class="iconify lucide--loader-circle animate-spin py-3.5 text-xl"></span>
+              <Show when={cursor()}>
+                <Button
+                  onClick={() => refetch()}
+                  disabled={response.loading}
+                  classList={{ "w-20 justify-center": true }}
+                >
+                  <Show
+                    when={!response.loading}
+                    fallback={<span class="iconify lucide--loader-circle animate-spin text-base" />}
+                  >
+                    Load more
+                  </Show>
+                </Button>
               </Show>
             </div>
           </div>
diff --git a/src/views/record.tsx b/src/views/record.tsx
index ad4f7b3..20ce753 100644
--- a/src/views/record.tsx
+++ b/src/views/record.tsx
@@ -428,7 +428,9 @@ export const RecordView = () => {
                       <Button onClick={() => setOpenDelete(false)}>Cancel</Button>
                       <Button
                         onClick={deleteRecord}
-                        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"
+                        classList={{
+                          "bg-red-500! border-none! text-white! hover:bg-red-400! active:bg-red-400!": true,
+                        }}
                       >
                         Delete
                       </Button>
diff --git a/src/views/stream/index.tsx b/src/views/stream/index.tsx
index 82b1b58..d6c2b31 100644
--- a/src/views/stream/index.tsx
+++ b/src/views/stream/index.tsx
@@ -414,28 +414,24 @@ export const StreamView = () => {
               showAllEvents={searchParams.allEvents === "on"}
             />
             <div class="flex justify-end gap-2">
-              <button
-                type="button"
+              <Button
                 ontouchstart={(e) => {
                   e.preventDefault();
                   requestAnimationFrame(() => setPaused(!paused()));
                 }}
-                onclick={() => setPaused(!paused())}
-                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"
+                onClick={() => setPaused(!paused())}
               >
                 {paused() ? "Resume" : "Pause"}
-              </button>
-              <button
-                type="button"
+              </Button>
+              <Button
                 ontouchstart={(e) => {
                   e.preventDefault();
                   requestAnimationFrame(() => disconnect());
                 }}
-                onclick={disconnect}
-                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"
+                onClick={disconnect}
               >
                 Disconnect
-              </button>
+              </Button>
             </div>
           </div>
         </Show>
-- 
2.51.2