feat: add animation for header switch and remove global transition fo…

…r now

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">

components/shared/darkModeToggle/DarkModeToggle.tsx

@@ -3,20 +3,39 @@
 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() {
   const { theme, toggleTheme } = useThemeStore()
 
   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>
   )
 }

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;
 }

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)" },