From 344a6cef4167be5183b9cc9ef8da38537e6de33d Mon Sep 17 00:00:00 2001
From: Alvaro Perez Pintado <122454645+AlvaroNW@users.noreply.github.com>
Date: Thu, 15 Jun 2023 18:04:41 +0200
Subject: [PATCH 1/4] css

---
 app/globals.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/app/globals.css b/app/globals.css
index ce7a2fc..d29b10b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -25,3 +25,33 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+.toggle {
+  height: 2em;
+  width: 3em;
+  border-radius: 50px;
+  margin: auto;
+  background-image: linear-gradient(aqua, skyblue);
+  position: relative;
+  cursor: pointer;
+}
+.toggle-dark {
+  height: 2em;
+  width: 3em;
+  border-radius: 50px;
+  margin: auto;
+  background-image: linear-gradient(midnightblue, rebeccapurple);
+  position: relative;
+  cursor: pointer;
+}
+.theme-icon{
+  margin-left: 0.2em;
+  height: 2em;
+  width: 1.2em;
+  color: yellow;
+}
+
+.theme-icon-dark{
+  height: 2em;
+  width: 1.2em;
+  margin-left: auto;
+}
\ No newline at end of file

From 0bc64b7d941f76052b121c6b39a685df5e3cf441 Mon Sep 17 00:00:00 2001
From: Alvaro Perez Pintado <122454645+AlvaroNW@users.noreply.github.com>
Date: Thu, 15 Jun 2023 18:05:44 +0200
Subject: [PATCH 2/4] testing

---
 cypress/component/themeToggle.cy.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 cypress/component/themeToggle.cy.tsx

diff --git a/cypress/component/themeToggle.cy.tsx b/cypress/component/themeToggle.cy.tsx
new file mode 100644
index 0000000..c583362
--- /dev/null
+++ b/cypress/component/themeToggle.cy.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import ThemeSwitcher from "../../components/ThemeSwitcher";
+import Home from "@/app/page";
+import useDarkMode from '@/hooks/useDarkMode';
+import '../../app/globals.css';
+
+describe('ThemeSwitcher component', () => {
+  it('should toggle between light and dark mode', () => {
+    cy.mount(<Home />);
+    cy.mount(<ThemeSwitcher />);
+    cy.wait(100);
+
+    // checking that the toggle is there and light mode is active
+    cy.get('.toggle').should('exist');
+    cy.get('.toggle').should(($toggle) => {
+        const backgroundImage = $toggle.css('background-image');
+        expect(backgroundImage).to.include('linear-gradient(rgb(0, 255, 255), rgb(135, 206, 235)');
+    });
+    // checking that the toggle is clickable and dark mode is active
+    cy.get('.toggle').click();
+    cy.get('.toggle-dark').should('exist');
+    cy.get('.toggle-dark').should(($toggle) => {
+        const backgroundImage = $toggle.css('background-image');
+        expect(backgroundImage).to.include('linear-gradient(rgb(25, 25, 112), rgb(102, 51, 153)');
+    });
+  });
+});
\ No newline at end of file

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 3/4] 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>
   );
 };
 

From c79898ba36aef1f676dee33fa6a3e016f3144fac Mon Sep 17 00:00:00 2001
From: Alvaro Perez Pintado <122454645+AlvaroNW@users.noreply.github.com>
Date: Thu, 15 Jun 2023 19:07:18 +0200
Subject: [PATCH 4/4] theme toggle

---
 components/ThemeSwitcher.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
index c78bd72..6314afa 100644
--- a/components/ThemeSwitcher.tsx
+++ b/components/ThemeSwitcher.tsx
@@ -2,12 +2,22 @@
 
 import { MdBrightness2, MdCircle } from "react-icons/md";
 import useDarkMode from "@/hooks/useDarkMode";
+import { useEffect, useState} from 'react'
 
 // TODO write tests for light/mode
 // TODO fix TS error on setTheme
 const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
   const [colorTheme, setTheme] = useDarkMode();
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if(!mounted) {
+    return null;
+  }
+
   return (
     <div>
       {colorTheme === "light" ? (