From 965395bf9226df9e6c4653d21a9c3d01385238b0 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Mon, 16 Dec 2024 02:24:16 +0000
Subject: [PATCH] style(clock preview): have transition between types of clock
 on preview

---
 src/features/time/clock.scss               |  4 +++-
 src/features/time/options/ClockPreview.jsx | 22 ++++++++++++++++++++--
 src/features/time/options/TimeOptions.jsx  |  2 +-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/features/time/clock.scss b/src/features/time/clock.scss
index 10e39fce..cc91df56 100644
--- a/src/features/time/clock.scss
+++ b/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;
 
diff --git a/src/features/time/options/ClockPreview.jsx b/src/features/time/options/ClockPreview.jsx
index 4822bc95..ccb45566 100644
--- a/src/features/time/options/ClockPreview.jsx
+++ b/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>
   );
 };
diff --git a/src/features/time/options/TimeOptions.jsx b/src/features/time/options/TimeOptions.jsx
index 2a8a99b4..804d4130 100644
--- a/src/features/time/options/TimeOptions.jsx
+++ b/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';