futur.blue
this caught my eye more when the smaller nav icons were always visible, less clear-cut now but I figured it's still worth a try
also gets you an extra 2px of padding on the header buttons with the same total height
+2
-2
src/components/account.tsx
+2
-2
src/components/account.tsx
···
147
147
</Modal>
148
148
<button
149
149
onclick={() => setOpenManager(true)}
150
-
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"
150
+
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"
151
151
>
152
152
{agent() && avatars[agent()!.sub] ?
153
153
<img
154
154
src={avatars[agent()!.sub].replace("img/avatar/", "img/avatar_thumbnail/")}
155
155
class="size-5 rounded-full"
156
156
/>
157
-
: <span class="iconify lucide--circle-user-round text-xl"></span>}
157
+
: <span class="iconify lucide--circle-user-round text-lg"></span>}
158
158
</button>
159
159
</>
160
160
);
+3
-3
src/components/create.tsx
+3
-3
src/components/create.tsx
···
367
367
<button
368
368
id="close"
369
369
onclick={() => setOpenDialog(false)}
370
-
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"
370
+
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"
371
371
>
372
372
<span class="iconify lucide--x"></span>
373
373
</button>
···
479
479
</Modal>
480
480
<Tooltip text={`${props.create ? "Create" : "Edit"} record`}>
481
481
<button
482
-
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"}`}
482
+
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"}`}
483
483
onclick={() => {
484
484
setNotice("");
485
485
setOpenDialog(true);
486
486
}}
487
487
>
488
488
<div
489
-
class={props.create ? "iconify lucide--square-pen text-xl" : "iconify lucide--pencil"}
489
+
class={props.create ? "iconify lucide--square-pen text-lg" : "iconify lucide--pencil"}
490
490
/>
491
491
</button>
492
492
</Tooltip>
+3
-3
src/components/search.tsx
+3
-3
src/components/search.tsx
···
29
29
return (
30
30
<button
31
31
onclick={() => setShowSearch(!showSearch())}
32
-
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"}`}
32
+
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"}`}
33
33
>
34
-
<span class="iconify lucide--search"></span>
34
+
<span class={`iconify lucide--search ${isTouchDevice ? "text-lg" : ""}`}></span>
35
35
<Show when={!isTouchDevice}>
36
-
<kbd class="font-sans text-neutral-500 select-none dark:text-neutral-400">
36
+
<kbd class="font-sans leading-none text-neutral-500 select-none dark:text-neutral-400">
37
37
{/Mac/i.test(navigator.platform) ? "⌘" : "⌃"}K
38
38
</kbd>
39
39
</Show>
+4
-4
src/layout.tsx
+4
-4
src/layout.tsx
···
113
113
</Show>
114
114
</MetaProvider>
115
115
<header
116
-
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%)]" : ""}`}
116
+
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%)]" : ""}`}
117
117
style={{
118
118
"background-image":
119
119
props.params.repo in headers ?
···
129
129
<span class="iconify tabler--binary-tree-filled text-[#76c4e5]"></span>
130
130
<span>PDSls</span>
131
131
</A>
132
-
<div class="dark:bg-dark-300/60 relative flex items-center gap-1 rounded-lg bg-neutral-50/60">
132
+
<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">
133
133
<Show when={location.pathname !== "/"}>
134
134
<SearchButton />
135
135
</Show>
···
139
139
<AccountManager />
140
140
<MenuProvider>
141
141
<DropdownMenu
142
-
icon="lucide--menu text-xl"
143
-
buttonClass="rounded-lg p-1"
142
+
icon="lucide--menu text-lg"
143
+
buttonClass="rounded-lg p-1.5"
144
144
menuClass="top-11 p-3 text-sm"
145
145
>
146
146
<NavMenu href="/jetstream" label="Jetstream" />