From f08623993f988364e96eb72341c669111d8c510a Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Mon, 6 Mar 2023 15:50:41 +0800
Subject: [PATCH] add swap animation to theme toggle

---
 client/src/components/ThemeToggle.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/client/src/components/ThemeToggle.tsx b/client/src/components/ThemeToggle.tsx
index 9b6700d..8942f52 100644
--- a/client/src/components/ThemeToggle.tsx
+++ b/client/src/components/ThemeToggle.tsx
@@ -27,13 +27,10 @@ export default function ThemeToggle() {
     <button
       type="button"
       onClick={() => changeTheme(darkTheme ? "light" : "dark")}
-      className="btn btn-ghost btn-circle"
+      className={"btn btn-ghost btn-circle swap swap-rotate" + (darkTheme ? " swap-active" : "")}
     >
-      {darkTheme ? (
-        <IconSun className="m-auto block h-full" />
-      ) : (
-        <IconMoon className="m-auto block h-full" />
-      )}
+      <IconSun className="swap-on m-auto block h-full" />
+      <IconMoon className="swap-off m-auto block h-full" />
     </button>
   );
 }