atproto explorer pdsls.dev
atproto tool

header icon sizes and spacing

Changed files
+12 -12
src
+2 -2
src/components/account.tsx
···
</Modal>
<button
onclick={() => setOpenManager(true)}
-
class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+
class="flex items-center rounded-lg p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
>
{agent() && avatars[agent()!.sub] ?
<img
src={avatars[agent()!.sub].replace("img/avatar/", "img/avatar_thumbnail/")}
class="size-5 rounded-full"
/>
-
: <span class="iconify lucide--circle-user-round text-xl"></span>}
+
: <span class="iconify lucide--circle-user-round text-lg"></span>}
</button>
</>
);
+3 -3
src/components/create.tsx
···
<button
id="close"
onclick={() => setOpenDialog(false)}
-
class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+
class="flex items-center rounded-lg p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
>
<span class="iconify lucide--x"></span>
</button>
···
</Modal>
<Tooltip text={`${props.create ? "Create" : "Edit"} record`}>
<button
-
class={`flex items-center ${props.create ? "p-1" : "p-1.5"} hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 ${props.create ? "rounded-lg" : "rounded-sm"}`}
+
class={`flex items-center p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 ${props.create ? "rounded-lg" : "rounded-sm"}`}
onclick={() => {
setNotice("");
setOpenDialog(true);
}}
>
<div
-
class={props.create ? "iconify lucide--square-pen text-xl" : "iconify lucide--pencil"}
+
class={props.create ? "iconify lucide--square-pen text-lg" : "iconify lucide--pencil"}
/>
</button>
</Tooltip>
+3 -3
src/components/search.tsx
···
return (
<button
onclick={() => setShowSearch(!showSearch())}
-
class={`flex items-center gap-0.5 rounded-lg ${isTouchDevice ? "p-1 text-xl hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" : "dark:bg-dark-100/70 box-border h-7 border-[0.5px] border-neutral-300 bg-neutral-100/70 p-1.5 text-xs hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"}`}
+
class={`flex items-center gap-1 rounded-md ${isTouchDevice ? "p-1.5 text-xl hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" : "dark:bg-dark-100/70 box-border h-7 border-[0.5px] border-neutral-300 bg-neutral-100/70 px-2 mr-1 text-baseline text-xs hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"}`}
>
-
<span class="iconify lucide--search"></span>
+
<span class={`iconify lucide--search ${isTouchDevice ? "text-lg" : ""}`}></span>
<Show when={!isTouchDevice}>
-
<kbd class="font-sans text-neutral-500 select-none dark:text-neutral-400">
+
<kbd class="font-sans leading-none text-neutral-500 select-none dark:text-neutral-400">
{/Mac/i.test(navigator.platform) ? "⌘" : "⌃"}K
</kbd>
</Show>
+4 -4
src/layout.tsx
···
</Show>
</MetaProvider>
<header
-
class={`dark:shadow-dark-700 dark:bg-dark-300 mb-3 flex w-full items-center justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-3 shadow-xs [--header-bg:#fafafa] dark:border-neutral-700 dark:[--header-bg:#2d2d2d] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]" : ""}`}
+
class={`dark:shadow-dark-700 dark:bg-dark-300 mb-3 flex w-full items-center justify-between rounded-xl border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 pl-3 shadow-xs [--header-bg:#fafafa] dark:border-neutral-700 dark:[--header-bg:#2d2d2d] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]" : ""}`}
style={{
"background-image":
props.params.repo in headers ?
···
<span class="iconify tabler--binary-tree-filled text-[#76c4e5]"></span>
<span>PDSls</span>
</A>
-
<div class="dark:bg-dark-300/60 relative flex items-center gap-1 rounded-lg bg-neutral-50/60">
+
<div class="dark:bg-dark-300/60 relative flex items-center gap-0.5 py-0.5 px-1 rounded-lg bg-neutral-50/60">
<Show when={location.pathname !== "/"}>
<SearchButton />
</Show>
···
<AccountManager />
<MenuProvider>
<DropdownMenu
-
icon="lucide--menu text-xl"
-
buttonClass="rounded-lg p-1"
+
icon="lucide--menu text-lg"
+
buttonClass="rounded-lg p-1.5"
menuClass="top-11 p-3 text-sm"
>
<NavMenu href="/jetstream" label="Jetstream" />