From c0c32475fdab9ce838ff525ede4d5f05b95207b4 Mon Sep 17 00:00:00 2001
From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com>
Date: Wed, 15 Nov 2023 09:53:09 +0000
Subject: [PATCH] feat: Updated interface/src/components/BackgroundS

---
 .../src/components/BackgroundSelector.tsx     | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/interface/src/components/BackgroundSelector.tsx b/interface/src/components/BackgroundSelector.tsx
index a11a5629..1f9a2c66 100644
--- a/interface/src/components/BackgroundSelector.tsx
+++ b/interface/src/components/BackgroundSelector.tsx
@@ -87,7 +87,14 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
     store.delete(fileId);
     setBackgrounds(prev => prev.filter(bg => bg.id !== fileId));
   
-    // Check if the background being deleted is currently selected
+            <img 
+              className="object-cover w-full h-full rounded-xl" 
+              src={bg.url} 
+              alt="swatch" 
+            />
+          </div>
+        ))}
+        {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (
     if (fileId === selectedBackground) {
       selectNoBackground();  // Disable the current background
     }
@@ -123,16 +130,24 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
           <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
         </div>
         {backgrounds.filter(bg => bg.type === 'image').map(bg => (
-          <div key={bg.id}
+          <div 
+            key={bg.id}
             onClick={() => selectBackground(bg.id)} 
-            className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
+            className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}
+          >
             {isEditMode && (
-              <div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
-                  onClick={() => deleteBackground(bg.id)}>
+              <div 
+                className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
+                onClick={() => deleteBackground(bg.id)}
+              >
                 <div className="w-4 h-0.5 bg-white"></div>
               </div>
             )}
-            <img className="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
+            <img 
+              className="object-cover w-full h-full rounded-xl" 
+              src={bg.url} 
+              alt="swatch" 
+            />
           </div>
         ))}
         {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (