demo download functionality

src/interface/components/store/header.tsx

@@ -5,8 +5,8 @@ export default function header({ searchTerm, setSearchTerm }: { searchTerm: stri
   return <header className="sticky top-0 z-50 w-full bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-800/90 backdrop-blur-xl">
     <div className="flex items-center justify-between px-4 py-1">
       <div className="cursor-pointer" onClick={() => setSearchTerm('')}>
-        <img src={logo} className="h-16 dark:hidden" />
-        <img src={logoDark} className="hidden h-16 dark:block" />
+        <img src={logo} className="h-14 dark:hidden" />
+        <img src={logoDark} className="hidden h-14 dark:block" />
       </div>
       <div className="relative">
         <input

src/interface/pages/Store.tsx

@@ -45,8 +45,12 @@ const Store = () => {
     ));
   }, [searchTerm, gridThemes]);
 
+  const downloadTheme = (id: string) => {
+    window.open(`https://betterseqta.pockethost.io/api/v1/themes/${id}/download`, '_blank');
+  };
+
   return (
-    <div className="w-screen h-screen overflow-y-scroll bg-zinc-100 dark:bg-zinc-900">
+    <div className="w-screen h-screen overflow-y-scroll bg-zinc-200/50 dark:bg-zinc-900">
       
       <Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
 
@@ -131,7 +135,9 @@ const Store = () => {
                   <img src={theme.coverImage} alt="Theme Preview" className="object-cover w-full h-48 rounded-md" />
                 </div>
                 <div>
-                  <button className="px-4 py-2 mt-4 transition rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-800 dark:hover:bg-zinc-700 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2">
+                  <button
+                    onClick={() => downloadTheme(theme.id)}
+                    className="px-4 py-2 mt-4 transition rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-800 dark:hover:bg-zinc-700 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2">
                     Download
                   </button>
                 </div>

src/interface/pages/Theme.tsx

@@ -100,11 +100,11 @@ const Theme = () => {
                 <h2 className="mb-2 text-2xl font-bold">{theme.name}</h2>
                 <p className="mb-8">{theme.description}</p>
                 {
-                  /* currentThemes.includes((theme.theme as { id: string }).id) */ false ?
+                  currentThemes.includes((theme.theme as { id: string }).id) ?
                   <button
                       className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-not-allowed rounded-2xl ring-white/20 ring-1 bg-zinc-950/20"
                   >
-                    Theme Installed
+                    Theme Downloaded!
                   </button>
                 :
                   <button
@@ -114,7 +114,7 @@ const Theme = () => {
                         setCurrentThemes([...currentThemes, (theme.theme as { id: string }).id]);
                       }}
                   >
-                    Install Theme
+                    Download Theme
                   </button>
                 }
               </>