header icon sizes and spacing · pds.ls/pdsls@454daf8

+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

··· 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

··· 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

··· 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" />

Configure Feed

Configure Feed