From c9c357bec27d47f07633815798e9dd1d5f0191ce Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Tue, 21 May 2024 19:58:32 +1000
Subject: [PATCH] update store popup to include delete button

---
 src/interface/pages/Store.tsx | 40 +++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/interface/pages/Store.tsx b/src/interface/pages/Store.tsx
index 849c2e28..7ec4817b 100644
--- a/src/interface/pages/Store.tsx
+++ b/src/interface/pages/Store.tsx
@@ -221,19 +221,33 @@ const Store = () => {
                       <motion.p className="mb-4 text-gray-700 dark:text-gray-300" variants={textVariants}>
                         {displayTheme.description}
                       </motion.p>
-                      <motion.button
-                        onClick={() => downloadTheme(displayTheme.id)}
-                        className="flex px-4 py-2 mt-4 ml-auto rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2"
-                        variants={textVariants}
-                      >
-                        { installingThemes.includes(displayTheme.id) ? 
-                          <>
-                          <SpinnerIcon className="w-4 h-4 mr-2" />
-                          Installing...
-                          </> :
-                          <> Install </>
-                        }
-                      </motion.button>
+                      {
+                        currentThemes.includes(displayTheme.id) ?
+                        <motion.button
+                          variants={textVariants}
+                          onClick={() => removeTheme(displayTheme.id)}
+                          className="flex px-4 py-2 mt-4 ml-auto rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2">
+                          { installingThemes.includes(displayTheme.id) ? 
+                            <>
+                            <SpinnerIcon className="w-4 h-4 mr-2" />
+                            Removing...
+                            </> :
+                            <> Remove </>
+                          }
+                        </motion.button> :
+                        <motion.button
+                          variants={textVariants}
+                          onClick={() => downloadTheme(displayTheme.id)}
+                          className="flex px-4 py-2 mt-4 ml-auto rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2">
+                          { installingThemes.includes(displayTheme.id) ? 
+                            <>
+                            <SpinnerIcon className="w-4 h-4 mr-2" />
+                            Installing...
+                            </> :
+                            <> Install </>
+                          }
+                        </motion.button>
+                      }
 
                       <motion.div className="my-8 border-b border-zinc-200 dark:border-zinc-700" variants={textVariants} />