style(clock preview): have transition between types of clock on preview

src/features/time/clock.scss

@@ -4,6 +4,7 @@
   font-size: 4em;
   margin: 0;
   cursor: initial;
+  -webkit-user-select: none;
   user-select: none;
   font-weight: 600;
   animation: fadeIn 1s;
@@ -26,7 +27,7 @@
   @include themed {
     border: 1px solid t($color) !important;
   }
-
+  -webkit-user-select: none;
   cursor: initial;
   user-select: none;
 }
@@ -52,6 +53,7 @@
 
 .vertical-clock {
   line-height: 100%;
+  -webkit-user-select: none;
   user-select: none;
   font-size: 4em;
 

src/features/time/options/ClockPreview.jsx

@@ -1,14 +1,32 @@
 import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import Clock from 'features/time/Clock';
 
 const ClockPreview = ({ zoomLevel = 100 }) => {
-  // Create a static time - 10:10:30
+  const timeType = localStorage.getItem('timeType') || 'digital';
   const previewTime = new Date();
   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">
-      <Clock isPreview={true} staticTime={previewTime} />
+      <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>
   );
 };

src/features/time/options/TimeOptions.jsx

@@ -1,7 +1,7 @@
 import variables from 'config/variables';
 import React, { useState } from 'react';
 
-import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
+import { Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
 import { Checkbox, Dropdown, Radio } from 'components/Form/Settings';
 import { Hero, Preview, Controls } from 'components/Layout/Settings/Hero';
 import { ClockPreview } from './ClockPreview';