futur.blue / pdsls
forked from pds.ls/pdsls
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

restyle navbar buttons

Juliet d0c8bb28 9d38830e

+12 -12
+12 -12
src/components/navbar.tsx
··· 15 15 e.stopPropagation(); 16 16 addToClipboard(props.content); 17 17 }} 18 - class={`hidden items-center rounded p-0.5 text-base text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 sm:p-1 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`} 18 + class={`-mr-2 hidden items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`} 19 19 aria-label="Copy to clipboard" 20 20 > 21 21 <span class="iconify lucide--link"></span> ··· 39 39 }); 40 40 41 41 return ( 42 - <nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base"> 42 + <nav class="flex w-full flex-col wrap-anywhere"> 43 43 {/* PDS Level */} 44 44 <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 45 - <div class="flex min-h-6 basis-full items-center gap-1.5 sm:min-h-7"> 45 + <div class="flex min-h-7 basis-full items-center gap-2"> 46 46 <Tooltip text="PDS"> 47 47 <span class="iconify lucide--hard-drive shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 48 48 </Tooltip> ··· 70 70 <Show when={props.params.repo}> 71 71 {/* Repository Level */} 72 72 <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 73 - <div class="-ml-1 flex basis-full items-center gap-0.5"> 73 + <div class="-ml-2 flex basis-full items-center"> 74 74 <Tooltip text={showHandle() ? "Show DID" : "Show handle"}> 75 75 <button 76 76 type="button" 77 - class="relative flex items-center rounded p-1 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70" 77 + class="relative flex items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70" 78 78 onclick={() => { 79 79 localStorage.showHandle = !showHandle(); 80 80 setShowHandle(!showHandle()); ··· 111 111 (props.params.repo in labelerCache || location.pathname.endsWith("/labels")) 112 112 } 113 113 > 114 - <div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 115 - <div class="flex basis-full items-center gap-1.5"> 114 + <div class="group flex items-center justify-between gap-2 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 115 + <div class="flex basis-full items-center gap-2"> 116 116 <span class="iconify lucide--tag text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 117 117 <A 118 118 end ··· 129 129 130 130 {/* Collection Level */} 131 131 <Show when={props.params.collection}> 132 - <div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 133 - <div class="flex basis-full items-center gap-1.5"> 132 + <div class="group flex items-center justify-between gap-2 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 133 + <div class="flex basis-full items-center gap-2"> 134 134 <Tooltip text="Collection"> 135 135 <span class="iconify lucide--folder-open text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 136 136 </Tooltip> ··· 153 153 154 154 {/* Record Level */} 155 155 <Show when={props.params.rkey}> 156 - <div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 157 - <div class="flex basis-full items-center gap-1.5"> 156 + <div class="group flex items-center justify-between gap-2 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 157 + <div class="flex basis-full items-center gap-2"> 158 158 <Tooltip text="Record"> 159 159 <span class="iconify lucide--file-json text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 160 160 </Tooltip> 161 - <span class="font-medium">{props.params.rkey}</span> 161 + <span class="py-0.5 font-medium">{props.params.rkey}</span> 162 162 </div> 163 163 <CopyButton 164 164 content={`at://${props.params.repo}/${props.params.collection}/${props.params.rkey}`}