From 1159cea2dcfd060dccaa56f9517b51f44722063c Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Thu, 2 Nov 2023 17:16:14 +1100
Subject: [PATCH] added darkening on hover of non-downloaded background images
 and videos

---
 .../src/components/BackgroundSelector.tsx     |  4 +-
 interface/src/components/ThemeSelector.tsx    | 47 ++++++++++---------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/interface/src/components/BackgroundSelector.tsx b/interface/src/components/BackgroundSelector.tsx
index 05aa1c12..439efe73 100644
--- a/interface/src/components/BackgroundSelector.tsx
+++ b/interface/src/components/BackgroundSelector.tsx
@@ -141,7 +141,7 @@ export default function BackgroundSelector() {
                 </svg>
               </div>
             )}
-            <div className="relative top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center">
+            <div className={`relative transition top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center ${downloadProgress[bg.id] === undefined ? 'hover:bg-black/20' : ''}`}>
               <span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
                 {downloadProgress[bg.id] === undefined ? '' : ''}
               </span>
@@ -187,7 +187,7 @@ export default function BackgroundSelector() {
                 </svg>
               </div>
             )}
-            <div className="relative top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center">
+            <div className={`relative transition top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center ${downloadProgress[bg.id] === undefined ? 'hover:bg-black/20' : ''}`}>
               <span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
                 {downloadProgress[bg.id] === undefined ? '' : ''}
               </span>
diff --git a/interface/src/components/ThemeSelector.tsx b/interface/src/components/ThemeSelector.tsx
index 2d27e61f..97c37895 100644
--- a/interface/src/components/ThemeSelector.tsx
+++ b/interface/src/components/ThemeSelector.tsx
@@ -99,29 +99,32 @@ const ThemeSelector = () => {
   };
 
   return (
-    <div className="flex flex-col gap-4">
-      {themes.map((theme) => (
-        <button
-          key={theme.name}
-          className={`relative w-full h-16 flex justify-center items-center rounded-md overflow-hidden ${theme.isDownloaded ? 'bg-blue-500' : 'bg-green-500'} ${theme.isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
-          onClick={() => handleThemeAction(theme.name, theme.url)}
-          disabled={theme.isLoading}
-        >
-          {/* Position the cover image absolutely so that it doesn't affect the button's content layout */}
-          <div className="absolute inset-0 z-0">
-            {theme.coverImage}
-          </div>
-
-          {/* Content */}
-          {theme.isLoading ? (
-            <div className="z-10 inline-block w-6 h-6 border-4 border-current rounded-full animate-spin border-t-transparent" role="status">
-              <span className="sr-only">Loading...</span>
+    <div className="my-2">
+      <h2 className="pb-2 text-lg font-bold">Themes</h2>
+      <div className="flex flex-col gap-4">
+        {themes.map((theme) => (
+          <button
+            key={theme.name}
+            className={`relative w-full h-16 flex justify-center items-center rounded-lg overflow-hidden ${theme.isDownloaded ? 'bg-zinc-700' : 'bg-green-500'} ${theme.isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+            onClick={() => handleThemeAction(theme.name, theme.url)}
+            disabled={theme.isLoading}
+          >
+            {/* Position the cover image absolutely so that it doesn't affect the button's content layout */}
+            <div className="absolute inset-0 z-0">
+              {theme.coverImage}
             </div>
-          ) : (
-            <span className="z-10 text-lg font-bold text-white">{theme.name}</span>
-          )}
-        </button>
-      ))}
+
+            {/* Content */}
+            {theme.isLoading ? (
+              <div className="z-10 inline-block w-6 h-6 border-4 border-current rounded-full animate-spin border-t-transparent" role="status">
+                <span className="sr-only">Loading...</span>
+              </div>
+            ) : (
+              <span className="z-10 text-lg font-bold text-white">{theme.name}</span>
+            )}
+          </button>
+        ))}
+      </div>
     </div>
   );
 };