Merge pull request ArslanYM#328 from Henrique-mazzoleni/justDarkMode

Issue ArslanYM#321 light mode removed
Sakshi29G · Sep 12, 2023 · 56adec4 · 56adec4
2 parents a2fbdba + 9f6cc37
commit 56adec4
Show file tree

Hide file tree

Showing 16 changed files with 222 additions and 399 deletions.
diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -3,22 +3,19 @@ import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { Home, Contributors, Guide, ProjectList } from "./pages";
 import MasterLayout from "./layouts";
-import { ThemeProvider } from "./Context/ThemeContext";
 
 function App() {
   return (
-    <ThemeProvider>
-      <BrowserRouter>
-        <MasterLayout>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/contributors" element={<Contributors />} />
-            <Route path="/Docs" element={<Guide />} />
-            <Route path="/projects" element={<ProjectList />} />
-          </Routes>
-        </MasterLayout>
-      </BrowserRouter>
-    </ThemeProvider>
+    <BrowserRouter>
+      <MasterLayout>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/contributors" element={<Contributors />} />
+          <Route path="/Docs" element={<Guide />} />
+          <Route path="/projects" element={<ProjectList />} />
+        </Routes>
+      </MasterLayout>
+    </BrowserRouter>
   );
 }
 

diff --git a/web/src/Context/ThemeContext.jsx b/web/src/Context/ThemeContext.jsx
diff --git a/web/src/components/Fab/Fab.jsx b/web/src/components/Fab/Fab.jsx
@@ -1,12 +1,9 @@
 // import React from "react";
 
-import { useContext, useEffect, useState } from "react";
-import { ThemeContext } from "../../Context/ThemeContext";
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
 export const Fab = ({ isVisible }) => {
-  const { theme } = useContext(ThemeContext);
-
   const [isMounted, setIsMounted] = useState(false);
 
   const DELAY = 500;
@@ -36,9 +33,7 @@ export const Fab = ({ isVisible }) => {
     <>
       {(isVisible || isMounted) && (
         <div
-          className={`transition duration-500 fixed bottom-0 right-4 ${
-            theme.fab_Background
-          } p-2 rounded-md cursor-pointer ${
+          className={`transition duration-500 fixed bottom-0 right-4 bg-purple-600 p-2 rounded-md cursor-pointer ${
             isVisible ? hideAnimation : showUpAnimation
           }`}
           onClick={scrollUp}

diff --git a/web/src/components/Switch/Switch.jsx b/web/src/components/Switch/Switch.jsx
diff --git a/web/src/components/Switch/style.css b/web/src/components/Switch/style.css
diff --git a/web/src/layouts/Footer.jsx b/web/src/layouts/Footer.jsx
@@ -1,40 +1,62 @@
 // eslint-disable-next-line no-unused-vars
-import React, { useContext } from 'react'
+import React from 'react';
 import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa'
 import footer_icon from '../assets/hive.svg'
-import { ThemeContext } from '../Context/ThemeContext'
 import { Link } from "react-router-dom";
 
 const Footer = () => {
-    const { theme } = useContext(ThemeContext)
-
-    return (
-        <footer className={`text-gray-400 ${theme.bg_Selected} body-font`}>
-            <div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
-            <Link to="/" className="flex order-first  title-font font-medium items-center text-white  mb-4 md:mb-0">
-
-                <a className={`flex title-font font-medium items-center md:justify-start justify-center ${theme.text_Color}`} >
-                    <span className="text-xl">Starter Hive</span>
-                    <img className='object-contain h-6 w-6 ml-3 ' src={footer_icon} />
-                </a>
-             </Link>   
-                <p className="text-sm text-gray-400 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">© 2023 First Steps —
-                    <a href="https://twitter.com/ArsalanYmalik" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">@ArslanYM</a>
-                </p>
-                <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
-                    <a href="https://twitter.com/ArsalanYmalik" target="_blank" className="text-gray-400" rel="noreferrer">
-                        <FaTwitter className="text-2xl duration-300 hover:fill-sky-500" />
-                    </a>
-                    <a href="https://github.com/ArslanYM/StarterHive" target="_blank" className="ml-5 text-gray-400" rel="noreferrer">
-                        <FaGithub className="text-2xl duration-300 hover:fill-gray-600" />
-                    </a>
-                    <a href="https://discord.gg/VkBTKUeVnG" target="_blank" className="ml-5 text-gray-400" rel="noreferrer">
-                        <FaDiscord className="text-2xl duration-300 hover:fill-violet-500" />
-                    </a>
-                </span>
-            </div>
-        </footer>
-    )
+  return (
+    <footer className="text-gray-400 bg-gradient-to-r from-gray-700 via-gray-900 to-black bg-animate body-font">
+      <div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
+        <Link
+          to="/"
+          className="flex order-first  title-font font-medium items-center text-white  mb-4 md:mb-0"
+        >
+          <a className="flex title-font font-medium items-center md:justify-start justify-center text-white">
+            <span className="text-xl">Starter Hive</span>
+            <img className="object-contain h-6 w-6 ml-3 " src={footer_icon} />
+          </a>
+        </Link>
+        <p className="text-sm text-gray-400 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
+          © 2023 First Steps —
+          <a
+            href="https://twitter.com/ArsalanYmalik"
+            className="text-gray-500 ml-1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            @ArslanYM
+          </a>
+        </p>
+        <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
+          <a
+            href="https://twitter.com/ArsalanYmalik"
+            target="_blank"
+            className="text-gray-400"
+            rel="noreferrer"
+          >
+            <FaTwitter className="text-2xl duration-300 hover:fill-sky-500" />
+          </a>
+          <a
+            href="https://github.com/ArslanYM/StarterHive"
+            target="_blank"
+            className="ml-5 text-gray-400"
+            rel="noreferrer"
+          >
+            <FaGithub className="text-2xl duration-300 hover:fill-gray-600" />
+          </a>
+          <a
+            href="https://discord.gg/VkBTKUeVnG"
+            target="_blank"
+            className="ml-5 text-gray-400"
+            rel="noreferrer"
+          >
+            <FaDiscord className="text-2xl duration-300 hover:fill-violet-500" />
+          </a>
+        </span>
+      </div>
+    </footer>
+  )
 }
 
 export default Footer;
diff --git a/web/src/layouts/Header.jsx b/web/src/layouts/Header.jsx
@@ -1,14 +1,11 @@
 // eslint-disable-next-line no-unused-vars
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { VscGithubAlt, VscChromeClose } from 'react-icons/vsc';
 
 import logo from '../assets/hive.svg';
-import Switch from '../components/Switch/Switch';
-import { ThemeContext } from '../Context/ThemeContext';
 
 const Header = () => {
-  const { handleTheme, theme } = useContext(ThemeContext);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const location = useLocation();
@@ -42,16 +39,14 @@ const Header = () => {
   ];
 
   return (
-    <header
-      className={`text-gray-400 ${theme.bg_Selected}  body-font flex-nowrap `}
-    >
+    <header className="text-gray-400 bg-gradient-to-r from-gray-700 via-gray-900 to-black bg-animate body-font flex-nowrap">
       <nav className="md:mx-auto container ">
         <div className=" flex flex-wrap items-center justify-between  p-4 ">
           <div className=" md:hidden ">
             <button
               data-collapse-toggle="navbar-sticky"
               type="button"
-              className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden  focus:outline-none dark:text-gray-400  dark:focus:ring-gray-600"
+              className="inline-flex items-center p-2 text-sm text-gray-400 rounded-lg md:hidden focus:outline-none focus:ring-gray-600"
               aria-controls="navbar-sticky"
               aria-expanded="false"
               onClick={() => toggleDrawer()}
@@ -81,27 +76,22 @@ const Header = () => {
               to="/"
               className="flex order-first  title-font font-medium items-center text-white "
             >
-              <span
-                className={`${theme.text_Color}  text-xl  font-bold cursor-pointer`}
-              >
+              <span className="text-white text-xl  font-bold cursor-pointer">
                 Starter Hive{' '}
               </span>
               <img src={logo} alt="Logo" className="ml-3 w-6" />
             </Link>
           </div>
 
           <div className="flex md:order-2">
-            <Switch handleTheme={handleTheme} checked={theme.checked} />
             <a
               href="https://github.com/ArslanYM/StarterHive"
               aria-label="github-link"
               target="_blank"
               rel="noreferrer"
               className="space-x-2 flex items-center"
             >
-              <VscGithubAlt
-                className={`p-0.5 hover:text-3xl text-2xl flex rounded-md duration-300 ${theme.navBar_GitBtnIconColor} ${theme.navBar_GitHover}`}
-              />
+              <VscGithubAlt className="p-0.5 hover:text-3xl text-2xl flex rounded-md duration-300 text-white" />
             </a>
           </div>
           <div
@@ -110,19 +100,15 @@ const Header = () => {
             } w-full md:flex md:w-auto md:order-1`}
             id="navbar-sticky"
           >
-            <ul className="flex flex-col p-4 md:p-0 mt-4 font-medium  rounded-lg md:flex-row  md:mt-0 md:border-0  dark:border-gray-700">
+            <ul className="flex flex-col p-4 border-gray-700 md:p-0 mt-4 font-medium  rounded-lg md:flex-row  md:mt-0 md:border-0">
               {MENU_ITEMS.map((el) => (
                 <Link
                   key={el.path}
                   to={el.path}
                   onClick={() => closeDrawer()}
-                  className={`block px-1 my-1 md:mx-1 py-1 md:px-3 rounded hover:${
-                    theme.text_Color
-                  } cursor-pointer font-bold ${
-                    path === el.path && `${theme.navBar_LinkColor}  `
-                  }
-                  hover:${theme.bg_DefaultBtn} 
-                  `}
+                  className={`block px-1 my-1 md:mx-1 py-1 md:px-3 rounded cursor-pointer font-bold ${
+                    path === el.path && 'bg-gray-800'
+                  } hover:bg-gray-800`}
                 >
                   {el.title}
                 </Link>