From f64fbdfeacbcd484e26a64073a73bb544e24a60e Mon Sep 17 00:00:00 2001
From: Alvaro Perez Pintado <122454645+AlvaroNW@users.noreply.github.com>
Date: Thu, 15 Jun 2023 18:06:31 +0200
Subject: [PATCH] toggle

---
 components/ThemeSwitcher.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
index 5af10d2..c78bd72 100644
--- a/components/ThemeSwitcher.tsx
+++ b/components/ThemeSwitcher.tsx
@@ -1,22 +1,27 @@
 "use client";
 
-import { MdOutlineDarkMode, MdLightbulbOutline } from "react-icons/md";
+import { MdBrightness2, MdCircle } from "react-icons/md";
 import useDarkMode from "@/hooks/useDarkMode";
 
 // TODO write tests for light/mode
-// TODO new SVG for light/dark theme
 // TODO fix TS error on setTheme
 const ThemeSwitcher = () => {
   const [colorTheme, setTheme] = useDarkMode();
 
   return (
-    <>
+    <div>
       {colorTheme === "light" ? (
-        <MdOutlineDarkMode onClick={() => setTheme("light")} />
+        <div className="toggle-dark" onClick={() => setTheme("light")}>
+          <MdBrightness2 className="theme-icon-dark"  />
+        </div>
+        
       ) : (
-        <MdLightbulbOutline onClick={() => setTheme("dark")} />
+        <div className="toggle" onClick={() => setTheme("dark")}>
+          <MdCircle className="theme-icon"  />
+        </div>
+        
       )}
-    </>
+    </div>
   );
 };