Merge pull request #91 from FoxedDev/main

Did some styling stuff to the sidebar

Author: Silabear

src/lib/Topbar.svelte

@@ -78,7 +78,7 @@
       <span class="hidden sm:block">Edit</span>
     </a>
     <button
-      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus-visible:outline-2 focus-visible:outline-dph-orange"
+      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus-visible:outline-2 focus-visible:outline-dph-orange cursor-pointer"
       aria-label="Copy URL"
       onclick={copyUrl}>
       <IconShare />

src/lib/sidebar/SearchBox.svelte

@@ -14,7 +14,7 @@
 
 <button
   aria-label="Open Search Modal"
-  class="bg-black/45 px-2 py-1 rounded-lg flex justify-between items-center mt-1 mb-2 w-full focus-visible:outline-2 focus-visible:outline-dph-orange"
+  class="bg-black/45 px-3 py-1 rounded-lg flex justify-between items-center mt-1 mb-2 w-full focus-visible:outline-2 focus-visible:outline-dph-orange cursor-text"
   onclick={async () => await dialog.showModal()}>
   <div class="flex items-center gap-2">
     <IconSearch />

src/lib/sidebar/Sidebar.svelte

@@ -91,7 +91,7 @@
     {/if}
     <button
       aria-label="{windowInfo.isNavOpen ? 'Collapse' : 'Expand'} Sidebar"
-      class="hidden sm:block text-stone-200 text-lg motion-safe:transition-all focus-visible:outline-2 focus-visible:outline-dph-orange {windowInfo.isNavOpen
+      class="hidden sm:block rounded-lg cursor-pointer text-stone-200 text-lg hover:bg-stone-700 hover:text-white motion-safe:transition-all focus-visible:outline-2 focus-visible:outline-dph-orange {windowInfo.isNavOpen
         ? 'rotate-0'
         : 'rotate-180'}"
       onclick={() => (windowInfo.isNavOpen = !windowInfo.isNavOpen)}>

src/lib/sidebar/SidebarSearchDialog.svelte

@@ -73,13 +73,15 @@
       {/each}
     </div>
     <p class="text-stone-400 mt-2">
-      {searchState === "waiting"
-        ? "Loading data..."
-        : results.length === 0
-          ? "No results"
-          : results.length + " result(s) found!"}
+      {searchTerm === ""
+        ? ""
+        : searchState === "waiting"
+          ? "Loading data..."
+          : results.length === 0
+            ? "No results"
+            : results.length + " result(s) found!"}
     </p>
 
-    <button class="bg-stone-700 w-full rounded-sm p-2 mt-2 text-white" onclick={() => dialog.close()}>Close</button>
+    <button class="bg-stone-700 w-full rounded-sm p-2 mt-2 text-white cursor-pointer" onclick={() => dialog.close()}>Close</button>
   </div>
 </dialog>

src/styles/app.css

@@ -16,6 +16,14 @@
   --color-dph-orange: oklch(69.27% 0.2042 40.82);
 }
 
+#content a {
+  color: var(--color-orange-400);
+}
+
+#content a:hover, #content a:focus {
+  color: var(--color-orange-300);
+}
+
 ::-webkit-scrollbar {
   width: 4px;
 }