From a4ae9496a3fdcde323e33b6cedfd84f6678b5495 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Mon, 16 Dec 2024 12:52:18 +0000
Subject: [PATCH] style(weather): preview background

---
 src/components/Layout/Settings/Hero/Hero.jsx |  4 ++-
 src/features/time/options/ClockPreview.jsx   | 38 ++++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/Layout/Settings/Hero/Hero.jsx b/src/components/Layout/Settings/Hero/Hero.jsx
index f29698ae..03ba0b49 100644
--- a/src/components/Layout/Settings/Hero/Hero.jsx
+++ b/src/components/Layout/Settings/Hero/Hero.jsx
@@ -11,7 +11,9 @@ const Preview = (props) => {
     <div className="h-full flex flex-col">
       <h1 className="py-3 uppercase tracking-tight text-neutral-300">Preview</h1>
       <div className="bg-modal-content-light dark:bg-modal-content-dark p-10 rounded flex-grow">
-        {props.children}
+        <div className="relative w-full h-[300px] bg-gradient-to-br from-neutral-900 to-neutral-800 rounded-lg overflow-hidden grid place-items-center">
+          {props.children}
+        </div>
       </div>
     </div>
   );
diff --git a/src/features/time/options/ClockPreview.jsx b/src/features/time/options/ClockPreview.jsx
index ccb45566..b8a0b8eb 100644
--- a/src/features/time/options/ClockPreview.jsx
+++ b/src/features/time/options/ClockPreview.jsx
@@ -8,26 +8,24 @@ const ClockPreview = ({ zoomLevel = 100 }) => {
   previewTime.setHours(10, 10, 30);
 
   return (
-    <div className="relative w-full h-[300px] bg-gradient-to-br from-neutral-900 to-neutral-800 rounded-lg overflow-hidden grid place-items-center">
-      <AnimatePresence mode="crossfade">
-        <motion.div
-          className="absolute"
-          key={`clock-preview-${timeType}`}
-          initial={{ opacity: 0, scale: 0.95 }}
-          animate={{
-            opacity: 1,
-            scale: zoomLevel / 100,
-          }}
-          exit={{ opacity: 0, scale: 0.95 }}
-          transition={{
-            opacity: { duration: 0.2 },
-            scale: { duration: 0.3, ease: 'anticipate' },
-          }}
-        >
-          <Clock isPreview={true} staticTime={previewTime} />
-        </motion.div>
-      </AnimatePresence>
-    </div>
+    <AnimatePresence mode="crossfade">
+      <motion.div
+        className="absolute"
+        key={`clock-preview-${timeType}`}
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{
+          opacity: 1,
+          scale: zoomLevel / 100,
+        }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        transition={{
+          opacity: { duration: 0.2 },
+          scale: { duration: 0.3, ease: 'anticipate' },
+        }}
+      >
+        <Clock isPreview={true} staticTime={previewTime} />
+      </motion.div>
+    </AnimatePresence>
   );
 };