Tweaks

RPCSX · Oct 12, 2024 · b2541dc · b2541dc
1 parent fe91736
commit b2541dc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -31,18 +31,18 @@
     }
 </script>
 
-<div class="sticky top-0 flex flex-row p-2 gap-2 bg-neutral-900">
+<div class="sticky top-0 flex flex-row items-center p-2 gap-2 bg-neutral-900">
     <div class="inline-flex shadow-sm rounded-md" role="group">
-        <button disabled={!$gridLayout} type="button" on:click={switchList} class="border border-r-0 border-neutral-600 text-white disabled:text-neutral-400 h-10 w-[3rem] p-1 rounded-s-lg bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
+        <button disabled={!$gridLayout} type="button" on:click={switchList} class="border border-r-0 border-neutral-600 text-white disabled:text-neutral-400 h-8 w-10 p-1 rounded-s-lg bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
             <Icon src="{ListBullet}" solid />
         </button>
-        <div class="border-[0.1px] h-10 border-neutral-900"/>
-        <button disabled={$gridLayout} type="button" on:click={switchGrid} class="border border-l-0 border-neutral-600 text-white disabled:text-neutral-400 h-10 w-[3rem] p-1 rounded-e-lg bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
+        <div class="border-[0.1px] h-full border-neutral-900"/>
+        <button disabled={$gridLayout} type="button" on:click={switchGrid} class="border border-l-0 border-neutral-600 text-white disabled:text-neutral-400 h-8 w-10 p-1 rounded-e-lg bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
             <Icon src="{Squares2x2}" solid />
         </button>
     </div>
 
-    <button type="button" on:click={createSettings} class="border border-neutral-600 text-white disabled:text-neutral-400 h-10 w-10 p-1 rounded-lg bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
+    <button type="button" on:click={createSettings} class="border border-neutral-600 text-white disabled:text-neutral-400 h-8 w-8 p-1 rounded-lg bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
         <Icon src="{Cog6Tooth}" solid />
     </button>
 
@@ -52,7 +52,7 @@
         <form class="max-w-md mx-auto">
             <label for="default-search" class="mb-2 text-sm font-medium text-white sr-only">Search</label>
             <div class="relative">
-                <input bind:value={searchTerm} on:input type="search" class="block w-full h-10 p-2 text-sm placeholder-neutral-400 text-white border border-neutral-600 rounded-lg bg-neutral-700 focus:ring-blue-500 focus:border-blue-500" placeholder="Search..."/>
+                <input bind:value={searchTerm} on:input type="search" class="block w-full h-8 p-2 text-sm placeholder-neutral-400 text-white border border-neutral-600 rounded-lg bg-neutral-700 focus:ring-blue-500 focus:border-blue-500" placeholder="Search..."/>
             </div>
         </form>
     </div>

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -48,12 +48,13 @@
     <ul class="flex-col space-y-2">
         {#each tabs as tab}
         <li>
-            <button on:click={() => {setActiveTab(tab)}} class="{activeTab == tab ? "ring-1" : ""} inline-flex items-center p-2 w-full rounded-lg border border-neutral-600 bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
+            <button on:click={() => {setActiveTab(tab)}} class="inline-flex items-center p-2 pe-10 w-full rounded-lg hover:bg-neutral-700 active:bg-neutral-800 shadow-sm">
                 <div class="w-5 h-5 me-2 text-white">
                     <Icon src="{tab.icon}" solid />
                 </div>
                 {tab.label}
             </button>
+            <div class="{activeTab == tab ? "" : "invisible"} relative bottom-[2px] border border-blue-500 rounded-lg mx-2" />
         </li>
         {/each}
     </ul>