dark mode added

Author: parham-ab

Diff for: package-lock.json

@@ -10,6 +10,7 @@
     "formik": "^2.2.9",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^8.2.0",

Diff for: package.json

@@ -1,14 +1,26 @@
-import React from "react";
+import React, { useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
-
+// icons
+import { MdDarkMode, MdLightMode } from "react-icons/md";
 // components
 import LogIn from "./components/LogIn";
 import SignUp from "./components/SignUp";
 import Wave from "./components/Wave";
 
 const App = () => {
+  const [darkMode, setDarkMode] = useState(false);
+
   return (
-    <div>
+    <div className={darkMode && "dark"}>
+      <div>
+        <span onClick={() => setDarkMode(!darkMode)}>
+          {!darkMode ? (
+            <MdDarkMode className="darkMode" />
+          ) : (
+            <MdLightMode className="lightMode" />
+          )}
+        </span>
+      </div>
       <Routes>
         <Route path="/" element={<SignUp />} />
         <Route path="/login" element={<LogIn />} />

Diff for: src/App.js

@@ -7,7 +7,6 @@
 @media screen and(max-width:'986px') {
   .signUp-container {
     min-height: 100vh;
-    margin: 30px 0;
   }
   .svg-icon {
     img {

Diff for: src/assets/styles/_signUp.scss

@@ -118,3 +118,26 @@
     width: 200px !important;
   }
 }
+// dark mode
+.dark {
+  background-color: #262626;
+  min-height: 100vh;
+  .container {
+    background-color: rgb(235 235 235);
+  }
+  .wave {
+    display: none;
+  }
+}
+.darkMode,
+.lightMode {
+  font-size: 2.5rem;
+  margin: 2px 7px;
+  cursor: pointer;
+}
+.darkMode {
+  color: #002881;
+}
+.lightMode {
+  color: #fff;
+}