Tweaks + Layout consistency

RPCSX · Oct 11, 2024 · 45c4f84 · 45c4f84
1 parent f202a64
commit 45c4f84
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 16 deletions.
diff --git a/src/app.html b/src/app.html
@@ -7,7 +7,7 @@
     <title>Tauri + SvelteKit + Typescript App</title>
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover" class="overflow-hidden m-h-full h-full text-white bg-gray-700">
+  <body data-sveltekit-preload-data="hover" class="overflow-hidden m-h-full h-full text-white bg-neutral-800">
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
     import { Icon, ArrowPath } from "svelte-hero-icons";
 
-    let gameCount = 0;
+    export let gameCount: number;
+
     let firmwareVersion = "0.0.0";
 
 </script>
 
-<div class="sticky bottom-0 flex flex-row p-2 gap-2 bg-gray-800 items-center">
-    <button class="bg-gray-600 text-white h-6 w-6 px-1 rounded hover:bg-gray-700 active:bg-gray-800 ring-1 ring-white">
+<div class="sticky bottom-0 flex flex-row p-2 gap-2 bg-neutral-800 items-center text-sm">
+    <button class="border border-neutral-600 bg-neutral-700 text-white h-5 w-5 p-1 rounded hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
         <Icon src="{ArrowPath}" solid />
     </button>
     <h1>{gameCount} Games Installed</h1>

diff --git a/src/components/GameGridItem.svelte b/src/components/GameGridItem.svelte
@@ -7,7 +7,7 @@
     let fileSize = FileHelper.humanFileSize(game.size, true);
 </script>
 
-<div class="flex flex-col text-center items-center p-3 gap-3 rounded-lg bg-gray-800">
+<div class="flex flex-col text-center items-center p-3 gap-3 text-sm rounded-lg bg-neutral-700 hover:bg-neutral-600 active:ring-1 shadow-sm">
     <img class="h-[8rem] w-[8rem]" src={game.image} alt="{game.name} Icon" />
     <div class="flex flex-col justify-center items-center w-[8rem] h-[4rem]">
         <h1 class="overflow-hidden line-clamp-2">{game.name}</h1>

diff --git a/src/components/GameLibrary.svelte b/src/components/GameLibrary.svelte
@@ -8,13 +8,13 @@
 </script>
 
 {#if $gridLayout}
-<div class="grid grid-cols-auto-repeat justify-center gap-3 m-3">
+<div class="grid grid-cols-auto-repeat justify-center gap-2 m-2">
     {#each games as game}
         <GameGridItem game={game} />
     {/each}
 </div>
 {:else}
-<div class="flex flex-col gap-3 m-3">
+<div class="flex flex-col gap-2 m-2">
     {#each games as game}
         <GameListItem game={game} />
     {/each}

diff --git a/src/components/GameListItem.svelte b/src/components/GameListItem.svelte
@@ -7,7 +7,7 @@
     let fileSize = FileHelper.humanFileSize(game.size, true);
 </script>
 
-<div class="flex flex-row p-3 gap-3 rounded-lg bg-gray-800">
+<div class="flex flex-row p-3 gap-3 text-sm rounded-lg bg-neutral-700 hover:bg-neutral-600 shadow-sm">
     <img class="h-20 w-20" src={game.image} alt="{game.name} Icon" />
     <div class="flex flex-col">
         <h1 class="font-bold">{game.name}</h1>

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -13,13 +13,13 @@
     }
 </script>
 
-<div class="sticky top-0 flex flex-row p-2 gap-2 bg-gray-800">
-    <div class="inline-flex rounded-md shadow-sm" role="group">
-        <button type="button" on:click={switchList} class="h-10 w-10 p-1 border rounded-s-lg text-white bg-gray-600 hover:bg-gray-700 active:bg-gray-80">
+<div class="sticky top-0 flex flex-row 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">
             <Icon src="{ListBullet}" solid />
         </button>
-
-        <button type="button" on:click={switchGrid} class="h-10 w-10 p-1 border rounded-e-lg text-white bg-gray-600 hover:bg-gray-700 active:bg-gray-80">
+        <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">
             <Icon src="{Squares2x2}" solid />
         </button>
     </div>
@@ -30,7 +30,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 p-4 text-sm placeholder-gray-400 text-white border border-gray-600 rounded-lg bg-gray-700 focus:ring-blue-500 focus:border-blue-500" placeholder="Search..."/>
+                <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..."/>
             </div>
         </form>
     </div>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -10,12 +10,15 @@
     let filteredGames: Game[] = [];
 
     let searchTerm = "";
+    let gameCount = 0;
 
     const searchGames = () => {
-        return filteredGames = games.filter(game => {
+        filteredGames = games.filter(game => {
             let gameTitle = game.name.toLowerCase();
             return gameTitle.includes(searchTerm.toLowerCase())
         });
+
+        gameCount = filteredGames.length;
     }
 
     searchGames()
@@ -27,5 +30,5 @@
         <GameLibrary games={filteredGames} />
         <slot />
     </main>
-    <Footer />
+    <Footer bind:gameCount />
 </div>