Update to heroicons, media query for game list.

src/lib/components/game/index.svelte

@@ -31,11 +31,11 @@
   </div>
   {#if existsInCollection}
     <button aria-label="Remove from collection" class="btn" type="button" on:click={() => removeFromCollection(game)}
-      >Remove <MinusCircleIcon class="icon" /></button
+      >Remove <MinusCircleIcon width="24" height="24" /></button
     >
   {:else}
     <button aria-label="Add to collection" class="btn" type="button" on:click={() => addToCollection(game)}
-      >Add to collection <PlusCircleIcon class="icon" /></button
+      >Add to collection <PlusCircleIcon width="24" height="24" /></button
     >
   {/if}
 </article>
@@ -52,6 +52,7 @@
   button {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     gap: 1rem;
     width: 100%;
     border-radius: 10px;
@@ -67,9 +68,11 @@
   .game-container {
     display: flex;
     flex-wrap: wrap;
-    /* grid-template-columns: repeat(minmax(100px, 1fr), 3); */
-    /* grid-template-columns: 1fr 1fr; */
-    max-width: 300px;
+    
+    @media (max-width: 650px) {
+      max-width: none;
+    }
+    
     gap: var(--spacing-16);
     padding: var(--spacing-16) var(--spacing-16);
     transition: all 0.3s;

src/lib/components/preferences/gameCollection.svelte

@@ -26,20 +26,15 @@
   </div>
   <div class="collection-buttons">
     <button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
-      ><SaveIcon class="preferences-icon" />Save</button
+      ><SaveIcon width="24" height="24" />Save</button
     >
     <button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}
-      ><TrashIcon class="preferences-icon" />Clear</button
+      ><TrashIcon width="24" height="24" />Clear</button
     >
   </div>
 </div>
 
 <style>
-  :global(.preferences-icon) {
-    height: 24px;
-    width: 24px;
-  }
-
   :global(.collection-title) {
     padding-bottom: var(--spacing-8);
     font-size: var(--font-24);

src/lib/components/search/random/index.svelte

@@ -31,17 +31,8 @@
 </form>
 
 <style lang="scss">
-  h1 {
-    width: 100%;
-  }
-
   fieldset {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
-
-  label {
-    display: grid;
-    margin: 1rem;
-  }
 </style>

src/routes/__layout.svelte

@@ -16,7 +16,7 @@
 
   $: {
 		if ($navigating) {
-      debounce(() => boredState.set({ loading: true }), 250);
+      debounce(() => {boredState.set({ loading: true });}, 250);
 		}
 		if (!$navigating) {
 			boredState.set({ loading: false });
@@ -118,10 +118,11 @@
     max-width: 850px;
     margin: 0 auto;
     padding: 2rem 0rem;
+    max-width: 80%;
 
-    @media (max-width: 850px) {
+    /* @media (max-width: 850px) {
       max-width: 80%;
-    }
+    } */
     box-sizing: border-box;
   }
 

src/routes/game/[id].svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
-  import Icon from '$lib/components/Icon.svelte';
+  import ExternalLink from '@rgossiaux/svelte-heroicons/outline/ExternalLink';
   import { collectionStore } from '$lib/stores/collectionStore';
   import type { GameType, SavedGameType } from '$lib/types';
   import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
+import { MinusCircleIcon, MinusIcon, PlusCircleIcon, PlusIcon } from '@rgossiaux/svelte-heroicons/outline';
 
   $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
   export let game: GameType;
@@ -42,15 +43,15 @@
       target="_blank"
       rel="noreferrer"
       aria-label={`Board Game Atlas Link for ${game.name}`}
-      >Board Game Atlas Link <Icon name="external-link" /></a
+      >Board Game Atlas Link <ExternalLink width="24" height="24" /></a
     >
     {#if existsInCollection}
       <button class="btn" type="button" on:click={() => removeFromCollection(game)}
-        >Remove from collection -</button
+        >Remove from collection <MinusCircleIcon width="24" height="24" /></button
       >
     {:else}
       <button class="btn" type="button" on:click={() => addToCollection(game)}
-        >Add to collection +</button
+        >Add to collection <PlusCircleIcon width="24" height="24" /></button
       >
     {/if}
   </div>
@@ -67,8 +68,13 @@
         </span>
       {/if}
       <button class="btn" type="button" on:click={() => (seeMore = !seeMore)}
-        >See {!seeMore ? 'More +' : 'Less -'}</button
-      >
+        >See 
+        {#if !seeMore}
+          More <PlusIcon width="24" height="24" />
+        {:else}
+          Less <MinusIcon width="24" height="24" />
+        {/if}
+      </button>
     {/if}
   </section>
 {/if}
@@ -82,6 +88,9 @@
   }
 
   button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     border-radius: 4px;
     margin: 0;
     padding: 1rem;
@@ -113,15 +122,4 @@
     gap: 1.5rem;
     margin: 1rem;
   }
-
-  .game-form {
-    display: flex;
-    place-items: center;
-  }
-
-  .game-form fieldset {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(3, minmax(200px, 1fr));
-  }
 </style>

src/routes/index.svelte

@@ -2,7 +2,6 @@
   // import { Checkbox, NumberInput } from 'carbon-components-svelte';
   import Game from '$lib/components/game/index.svelte';
   import TextSearch from '$lib/components/search/textSearch/index.svelte';
-  import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
   import RandomSearch from '$lib/components/search/random/index.svelte';
   import Random from '$lib/components/random/index.svelte';
   import { gameStore } from '$lib/stores/gameSearchStore';
@@ -34,7 +33,6 @@
   <form on:submit|preventDefault={handleSearch} method="post">
     <TextSearch showButton advancedSearch />
   </form>
-  <!-- <AdvancedSearch /> -->
   <div class="random-buttons">
     <RandomSearch />
     <Random />
@@ -42,7 +40,7 @@
 </div>
 
 <div class="games">
-  <h1>Games</h1>
+  <h1>Games Found:</h1>
   <div class="games-list">
     {#each $gameStore as game}
       <Game {game} />
@@ -87,12 +85,16 @@
   }
 
   .games {
-    margin-top: 2rem;
+    margin: 2rem 0rem;
+
+    h1 {
+      margin-bottom: 2rem;
+    }
   }
 
   .games-list {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(200px, 1fr));
     gap: 2rem;
 
     @media (max-width: 800px) {