From af72ae9db2f1188cd7ade6bf8c2f4c2fd7f865bc Mon Sep 17 00:00:00 2001
From: thomasgross <thomasgrossrasmussen@gmail.com>
Date: Thu, 5 Dec 2024 10:45:16 +0100
Subject: [PATCH] feat: add animation for header switch and remove global
 transition for now

---
 components/global/header/Header.tsx           |  2 +-
 .../shared/darkModeToggle/DarkModeToggle.tsx  | 31 +++++++++++++++----
 public/icons/moon.svg                         |  4 +++
 public/icons/sun.svg                          | 11 +++++++
 styles/globals.css                            | 12 -------
 tailwind.config.ts                            |  3 --
 6 files changed, 41 insertions(+), 22 deletions(-)
 create mode 100644 public/icons/moon.svg
 create mode 100644 public/icons/sun.svg

diff --git a/components/global/header/Header.tsx b/components/global/header/Header.tsx
index 7c753400..7e6d428b 100644
--- a/components/global/header/Header.tsx
+++ b/components/global/header/Header.tsx
@@ -10,7 +10,7 @@ import ProfileButton from "./ProfileButton"
 function Header() {
   return (
     <div>
-      <div className="dark-mode-transition flex h-navigation-top-height items-center justify-center bg-background-overlay">
+      <div className="flex h-navigation-top-height items-center justify-center bg-background-overlay">
         <p className="text-typo-caption">Biblioterernes ebøger og lydbøger</p>
       </div>
       <div className="content-container grid h-navigation-height grid-cols-3 items-center">
diff --git a/components/shared/darkModeToggle/DarkModeToggle.tsx b/components/shared/darkModeToggle/DarkModeToggle.tsx
index 95204c4f..6de098cb 100644
--- a/components/shared/darkModeToggle/DarkModeToggle.tsx
+++ b/components/shared/darkModeToggle/DarkModeToggle.tsx
@@ -3,6 +3,7 @@
 import React from "react"
 
 import Icon from "@/components/shared/icon/Icon"
+import { cn } from "@/lib/helpers/helper.cn"
 import { useThemeStore } from "@/store/theme.store"
 
 function DarkModeToggle() {
@@ -10,13 +11,31 @@ function DarkModeToggle() {
 
   return (
     <button
-      onClick={toggleTheme}
+      onClick={() => toggleTheme()}
       aria-label="Skift mellem 'light mode' og 'dark mode'"
-      className="focus-visible rounded-full">
-      <Icon
-        className="h-[40px] hover:translate-x-[2px] hover:translate-y-[2px]"
-        name={theme === "light" ? "toggle-day" : "toggle-night"}
-      />
+      className="focus-visible relative inline-flex h-[40px] w-[75px] items-center whitespace-nowrap rounded-full
+        border border-foreground px-[3px] text-typo-button-lg uppercase text-foreground shadow-button
+        transition disabled:pointer-events-none disabled:opacity-50">
+      <div
+        className={cn(
+          "relative h-[32px] w-[32px] rounded-full bg-foreground transition-transform duration-300 ease-out",
+          theme === "dark" ? "translate-x-[calc(100%+3px)]" : ""
+        )}>
+        <Icon
+          className={cn(
+            "absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] transition-all duration-500",
+            theme === "dark" ? "opacity-0" : "opacity-100"
+          )}
+          name="sun"
+        />
+        <Icon
+          className={cn(
+            "absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] transition-all duration-500",
+            theme === "dark" ? "opacity-100" : "opacity-0"
+          )}
+          name="moon"
+        />
+      </div>
     </button>
   )
 }
diff --git a/public/icons/moon.svg b/public/icons/moon.svg
new file mode 100644
index 00000000..a40c84a5
--- /dev/null
+++ b/public/icons/moon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2298 3.74263C13.932 4.95212 14.3338 6.35803 14.3338 7.85845C14.3338 12.3543 10.6789 16.0359 6.19771 16.0527C6.05247 16.0532 5.90822 16.0497 5.76446 16.0428C5.2944 16.0197 5.06527 16.6153 5.42983 16.9137C6.98227 18.1817 9.0082 18.8896 11.2005 18.7276C15.215 18.4313 18.4318 15.203 18.7267 11.1753C18.9926 7.55275 16.9088 4.38356 13.8466 3.04312C13.4138 2.8536 12.9924 3.33356 13.2298 3.74263Z" fill="#1A1A1A"/>
+<rect width="13.5" height="15.75" fill="white" transform="translate(5.25 3)"/>
+</svg>
diff --git a/public/icons/sun.svg b/public/icons/sun.svg
new file mode 100644
index 00000000..8813b1e7
--- /dev/null
+++ b/public/icons/sun.svg
@@ -0,0 +1,11 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.625 9.75001C13.625 11.8901 11.8901 13.625 9.75001 13.625C7.6099 13.625 5.875 11.8901 5.875 9.75001C5.875 7.6099 7.6099 5.875 9.75001 5.875C11.8901 5.875 13.625 7.6099 13.625 9.75001Z" stroke="white" stroke-width="1.5"/>
+<path d="M10.428 1.5558C10.428 1.9318 10.1232 2.2366 9.74721 2.2366C9.37121 2.2366 9.06641 1.9318 9.06641 1.5558C9.06641 1.1798 9.37121 0.875 9.74721 0.875C10.1232 0.875 10.428 1.1798 10.428 1.5558Z" fill="white" stroke="white" stroke-width="0.75"/>
+<path d="M10.428 17.9445C10.428 18.3205 10.1232 18.6253 9.74721 18.6253C9.37121 18.6253 9.06641 18.3205 9.06641 17.9445C9.06641 17.5685 9.37121 17.2637 9.74721 17.2637C10.1232 17.2637 10.428 17.5685 10.428 17.9445Z" fill="white" stroke="white" stroke-width="0.75"/>
+<path d="M18.6253 9.74721C18.6253 10.1232 18.3205 10.428 17.9445 10.428C17.5685 10.428 17.2637 10.1232 17.2637 9.74721C17.2637 9.37121 17.5685 9.06641 17.9445 9.06641C18.3205 9.06641 18.6253 9.37121 18.6253 9.74721Z" fill="white" stroke="white" stroke-width="0.75"/>
+<path d="M2.2366 9.74721C2.2366 10.1232 1.9318 10.428 1.5558 10.428C1.1798 10.428 0.875 10.1232 0.875 9.74721C0.875 9.37121 1.1798 9.06641 1.5558 9.06641C1.9318 9.06641 2.2366 9.37121 2.2366 9.74721Z" fill="white" stroke="white" stroke-width="0.75"/>
+<path d="M4.63699 3.95619C4.63699 4.33219 4.33219 4.63699 3.95619 4.63699C3.5802 4.63699 3.27539 4.33219 3.27539 3.95619C3.27539 3.5802 3.5802 3.27539 3.95619 3.27539C4.33219 3.27539 4.63699 3.5802 4.63699 3.95619Z" fill="white" stroke="white" stroke-width="0.75"/>
+<path d="M16.2249 15.5441C16.2249 15.9201 15.9201 16.2249 15.5441 16.2249C15.1681 16.2249 14.8633 15.9201 14.8633 15.5441C14.8633 15.1681 15.1681 14.8633 15.5441 14.8633C15.9201 14.8633 16.2249 15.1681 16.2249 15.5441Z" fill="white" stroke="white" stroke-width="0.75"/>
+<path d="M16.2249 3.95619C16.2249 4.33219 15.9201 4.63699 15.5441 4.63699C15.1681 4.63699 14.8633 4.33219 14.8633 3.95619C14.8633 3.5802 15.1681 3.27539 15.5441 3.27539C15.9201 3.27539 16.2249 3.5802 16.2249 3.95619Z" fill="white" stroke="white" stroke-width="0.75"/>
+<path d="M4.63699 15.5441C4.63699 15.9201 4.33219 16.2249 3.95619 16.2249C3.5802 16.2249 3.27539 15.9201 3.27539 15.5441C3.27539 15.1681 3.5802 14.8633 3.95619 14.8633C4.33219 14.8633 4.63699 15.1681 4.63699 15.5441Z" fill="white" stroke="white" stroke-width="0.75"/>
+</svg>
diff --git a/styles/globals.css b/styles/globals.css
index 74875de7..904ae386 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -318,18 +318,6 @@
   @apply mx-auto w-full max-w-[var(--page-width)] px-[var(--grid-edge)];
 }
 
-.dark-mode-transition {
-  @apply transition-[background] duration-dark-mode;
-}
-
-body {
-  @apply bg-background font-body text-foreground transition-all duration-dark-mode;
-}
-
-body > * {
-  @apply dark-mode-transition bg-background transition-all;
-}
-
 .focus-visible {
   @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2;
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ce0dffa9..a7e3fd34 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -273,9 +273,6 @@ export const extendedTheme = {
         },
       },
     },
-    transitionDuration: {
-      "dark-mode": "var(--dark-mode-transition)",
-    },
     keyframes: {
       wiggle: {
         "10% 90%": { transform: "rotate(10.0deg)" },