Add Alt Button

src/components/dashboard/SchematicList.svelte

@@ -150,32 +150,32 @@
 <div class="w-full flex justify-center mt-4">
     <ul class="inline-flex">
         <li>
-            <button on:click={() => page = 0} class="btn btn-gray h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
+            <button on:click={() => page = 0} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
                 <span class="sr-only">Next</span>
                 <ChevronDoubleLeftOutline class="w-3 h-3" />
             </button>
         </li>
         <li>
-            <button on:click={previous} class="btn btn-gray h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
+            <button on:click={previous} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
                 <span class="sr-only">Previous</span>
                 <ChevronLeftOutline class="w-3 h-3" />
             </button>
         </li>
         {#each pages as p}
             <li>
-                <button on:click={() => page = p.i} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-gray={!p.active}>
+                <button on:click={() => page = p.i} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
                     <span>{p.name}</span>
                 </button>
             </li>
         {/each}
         <li>
-            <button on:click={next} class="btn btn-gray h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
+            <button on:click={next} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
                 <span class="sr-only">Next</span>
                 <ChevronRightOutline class="w-3 h-3" />
             </button>
         </li>
         <li>
-            <button on:click={() => page = maxPage - 1} class="btn btn-gray h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
+            <button on:click={() => page = maxPage - 1} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
                 <span class="sr-only">Next</span>
                 <ChevronDoubleRightOutline class="w-3 h-3" />
             </button>

src/styles/button.css

@@ -53,6 +53,10 @@
     @apply bg-gray-800 text-white;
 }
 
+.btn-neutral {
+    @apply bg-neutral-800 text-white;
+}
+
 .btn-text {
     @apply bg-transparent underline text-white;
     @apply hover:bg-transparent hover:outline hover:outline-1;