From 3e5ebe8ef464a7291cc3c5f05fddb1f36b453f17 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Wed, 5 Feb 2025 17:13:36 +1100
Subject: [PATCH] feat: change theme store to use marquee image for everything

---
 src/interface/components/store/ThemeCard.svelte  |  8 +++++---
 src/interface/components/store/ThemeModal.svelte | 14 +++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/interface/components/store/ThemeCard.svelte b/src/interface/components/store/ThemeCard.svelte
index 2bae7ad8..80352da9 100644
--- a/src/interface/components/store/ThemeCard.svelte
+++ b/src/interface/components/store/ThemeCard.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { Theme } from '@/interface/types/Theme'
+
   let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
 
   import { fade } from 'svelte/transition';
@@ -6,12 +8,12 @@
 
 <div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
   <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border" transition:fade>
-    <div class="absolute z-10 mb-1 text-xl font-bold text-white bottom-1 left-3">
+    <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
       {theme.name}
     </div>
-    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent'></div>
+    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t to-transparent from-black/80'></div>
     <div class='w-full'>
-      <img src={theme.coverImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
+      <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
     </div>
   </div>
 </div>
diff --git a/src/interface/components/store/ThemeModal.svelte b/src/interface/components/store/ThemeModal.svelte
index 616190db..7796568d 100644
--- a/src/interface/components/store/ThemeModal.svelte
+++ b/src/interface/components/store/ThemeModal.svelte
@@ -54,7 +54,7 @@
 </script>
 
 <div 
-  class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" 
+  class="flex fixed inset-0 z-50 justify-center items-end bg-black bg-opacity-70" 
   onclick={(e) => {
     if (e.target === e.currentTarget) hideModal();
   }} 
@@ -79,12 +79,12 @@
       <h2 class="mb-4 text-2xl font-bold">
         {theme.name}
       </h2>
-      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover w-full mb-4 rounded-md" />
+      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover mb-4 w-full rounded-md" />
       <p class="mb-4 text-gray-700 dark:text-gray-300">
         {theme.description}
       </p>
       {#if currentThemes.includes(theme.id)}
-        <button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+        <button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
           {#if installing}
             <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
@@ -93,7 +93,7 @@
           <span class="{ installing ? 'opacity-0' : 'opacity-100' }">Remove</span>
         </button>
       {:else}
-        <button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+        <button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
           {#if installing}
             <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
@@ -112,11 +112,11 @@
         {#each getRelatedThemes() as relatedTheme (relatedTheme.id)}
           <button onclick={() => { hideModal(relatedTheme) }} class="w-full cursor-pointer">
             <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border">
-              <div class="absolute z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5 bottom-1 left-3">
+              <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5">
                 {relatedTheme.name}
               </div>
-              <div class="absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent"></div>
-              <img src={relatedTheme.coverImage} alt="Theme Preview" class="object-cover w-full h-48" />
+              <div class="absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t to-transparent from-black/80"></div>
+              <img src={relatedTheme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48" />
             </div>
           </button>
         {/each}