convert buttons to gray

src/App.svelte

@@ -114,7 +114,7 @@
       }
     }
 
-    printSolutions(1)
+    printSolutions(-1)
   }
 
   const undo = () => {
@@ -245,6 +245,10 @@
   }
 
   const printSolutions = maxSolutionCount => {
+    if (maxSolutionCount < 0) {
+      return
+    }
+
     let depth = 0
     let solutions = []
     let gameovers = []

src/Button.svelte

@@ -1,6 +1,5 @@
 <script>
-  export let icon = "restart"
+  export let icon = ""
-  export let color = "green"
 
   const d = []
   d["restart"] =
@@ -13,9 +12,12 @@
 
 <button
   on:click
-  class="capitalize flex-auto inline-flex items-center rounded fill-current text-{color}-lighter px-2 py-2 border-0 border-b-2 bg-{color} border-{color}-darker active:text-{color} active:bg-{color}-darker">
+  class="capitalize flex-auto inline-flex items-center rounded fill-current text-blue-darker px-2 py-2 border-0 border-b-2 bg-gray-lighter border-gray-darker active:text-gray active:bg-gray-darker active:border-t-2 active:border-green-lighter">
-  <svg
+  {#if icon}
-    class="w-5 h-5 mr-2"
+    <svg
-    xmlns="http://www.w3.org/2000/svg"
+      class="w-5 h-5 mr-2"
-    viewBox="0 0 20 20"><path d={d[icon]} /></svg>{icon}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"><path d={d[icon]} /></svg>
+  {/if}
+  {icon}
 </button>

src/LevelButton.svelte

@@ -6,17 +6,21 @@
 </script>
 
 <style>
+  .completed {
+    @apply text-blue-darker;
+  }
+
   .active {
-    @apply font-bold;
+    @apply bg-blue-lighter text-blue-darker border-blue;
   }
 
-  .completed {
+  .active:not(.completed) {
-    @apply text-blue-darker;
+    @apply text-gray-lighter;
   }
 </style>
 
 <button
-  class="block py-1 rounded border-0 border-b-2 border-gray-darker bg-gray-lighter flex-1 text-center"
+  class="block py-2 rounded border-0 border-b-2 border-gray-darker bg-gray-lighter flex-1 text-center text-gray active:text-blue-lighter active:bg-gray-darker"
   on:click
   value={i}
   class:completed={$completed.includes(i)}