SBIT-29: moon-sun theme toggle

src/components/NavBar/NavBar.scss

@@ -64,33 +64,10 @@
 }
 
 
-.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-ball{
-  transform: translateX(24px);
-}
-
-.theme-toggle-checkbox{
-  opacity:0;
-  position:absolute;
-}
-
-.theme-toggle-label{
-  cursor: pointer;
-  width:50px;
-  height:26px;
-  background:  $secondary-container;
-  border-radius: 50px;
-  padding: 5px;
-  position:relative;
-}
-
-.theme-toggle-ball{
-  position:absolute;
-  top:2px;
-  left:2px;
-  width:22px;
-  height:22px;
-  background: $primary;
-  border-radius:50%;
-
-  transition: transform 0.2s linear;
+.theme-toggle{
+  background: none;
+  border: none;
+  img {
+    margin: 0;
+  }
 }

src/constants/MenuLinks/MenuLinks.js

@@ -3,6 +3,9 @@ import { Link } from "gatsby"
 import Nav from "react-bootstrap/Nav"
 import { useTheme } from "../../context/themeContext"
 
+import moon from '../../images/moon-solid.svg'
+import sun from '../../images/sun-solid.svg'
+
 const MENU_LINKS = [
   { id: 1, text: "home", url: "/" },
   { id: 2, text: "servicios", url: "/servicios" },
@@ -30,16 +33,9 @@ const MenuLinks = ({ styleClass }) => {
         </Nav.Item>
       ))}
       <Nav.Item className="NavBar__Item">
-        <input
-          checked={theme === "light"}
-          onChange={toggleTheme}
-          type="checkbox"
-          class="theme-toggle-checkbox"
-          id="themetoggle"
-        />
-        <label for="themetoggle" class="theme-toggle-label">
-          <div class="theme-toggle-ball"></div>
-        </label>
+        <button className="theme-toggle" onClick={toggleTheme}>
+          <img src={theme === "dark" ? moon : sun} alt="theme" width="30" />
+        </button>
       </Nav.Item>
     </Nav>
   )