Added light and dark mode. Update Navbar with search field and other …

src/App.js

@@ -1,14 +1,25 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Navbar from './pages/Navbar';
+import './index.css'
 import Home from './pages/Home';
 import Team from './pages/Team';
 import MemberPage from "./pages/Member";
+import { useEffect, useState } from "react";
 
 function App() {
+
+  const current_theme = localStorage.getItem('current_theme');  // This will store the default theme of web browser
+  const [theme, setTheme] = useState(current_theme ? current_theme : 'light'); // Created constant for dark mode
+
+  useEffect (()=>{
+    localStorage.setItem('current_theme', theme);
+  },[theme])
+
+
   return (
-    <div className="App">
+    <div className={`App ${theme}`}>
       <Router>
-        <Navbar />     
+        <Navbar theme={theme} setTheme={setTheme} />
         <Routes>
           <Route exact path="/" element={<Home />} />
           <Route exact path="/team/:code" element={<Team />} />

src/component/CreateMember.css

@@ -0,0 +1,24 @@
+.create-member {
+  margin: 0;
+  padding: 0;
+} 
+
+.create-member .create-button-member {
+  background-color: #078d14; /* Button background color */
+  padding: 10px;
+  margin: 20px;
+  color: #fff; 
+  border: none; 
+  cursor: pointer;
+  border-radius: 5px;
+  text-align: center;
+  font-size: 15px;
+  width: 90%;
+  align-items: center;
+}
+
+/* Style for the buttons on hover */
+.create-member .create-button-member:hover {
+  background-color: #055837;
+  color: white;
+}

src/component/CreateMember.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import '../index.css';
+import './CreateMember.css';
 // use this format if fetching
 import { apiPath } from '../api';
 // fetch(apiPath('/teams'))
@@ -53,9 +53,9 @@ function CreateMember({teamsDatabase }) {
   };
 
   return (
-    <div>
+    <div className="create-member">
       {!isFormVisible && (
-        <button className="create-button" onClick={() => setIsFormVisible(true)}>Create Member</button>
+        <button className="create-button-member" onClick={() => setIsFormVisible(true)}>Create Member</button>
       )}
       {isFormVisible && (
         <form onSubmit={handleSubmit} className="member-form">

src/component/CreateTeam.css

@@ -0,0 +1,18 @@
+.create-button-team {
+  background-color: #890aad; /* Button background color */
+  padding: 10px;
+  margin: 20px;
+  color: #fff; 
+  border: none; 
+  cursor: pointer;
+  border-radius: 5px;
+  text-align: center;
+  font-size: 15px;
+  width: 35%;
+  align-items: center;
+}
+
+/* Style for the buttons on hover */
+.create-button-team:hover {
+  background-color: #4c095d;
+}

src/component/CreateTeam.jsx

@@ -1,4 +1,4 @@
-import '../index.css';
+import './CreateTeam.css';
 import { apiPath } from '../api';
 
 const CreateTeam = ({ setTeamsDatabase }) => {
@@ -32,7 +32,7 @@ const CreateTeam = ({ setTeamsDatabase }) => {
     }
   };
   return (
-    <button className="create-button" onClick={handleCreateTeam}>Create Team</button>
+    <button className="create-button-team" onClick={handleCreateTeam}>Create Team</button>
   );
 };
 

src/component/SubmitTeam.css

@@ -0,0 +1,50 @@
+.submitTeam-container {
+  display: flex; 
+  /* justify-content: center; */
+  padding: 10px 0px;
+  margin: 10px 0px;
+}
+
+/* Style for the label */
+.submitTeam-container label {
+  font-size: 20px;
+  font-weight: bold; 
+  text-align: center;
+  padding-right: 10px;
+  padding-top: 2px;
+  text-shadow: none;
+}
+
+/* Style for the input field */
+.submitTeam-container input[type="text"] {
+  box-sizing: border-box;
+  width: 45%; 
+  border: 2px solid ;
+  border-radius: 15px; 
+  border-color: #007bff; 
+  text-align: center;
+  font-size: 15px;
+}
+
+/* Style for the buttons */
+.submitTeam-container button {
+  background-color: #007bff; /* Button background color */
+  padding: 10px;
+  margin-left: 10px;
+  color: #fff;
+  border: none; 
+  cursor: pointer; 
+  border-radius: 5px;
+  text-align: center;
+  font-size: 15px;
+  width: 20%;
+}
+
+/* Style for the buttons on hover */
+.submitTeam-container button:hover {
+  background-color: #04376d; /* Darker background color on hover */
+}
+
+.dark .submitTeam-container label {
+  color: cornsilk;;
+}

src/component/SubmitTeam.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import '../index.css';
+import './SubmitTeam.css';
 // use this format if fetching
 import { apiPath } from '../api';
 // fetch(apiPath('/teams'))

src/index.css

@@ -1,5 +1,7 @@
 body {
   margin: 0;
+  padding: 0;
+  box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
@@ -12,101 +14,21 @@ code {
     monospace;
 }
 
-/* Style for the h2 heading */
-.top-Header h2{
-  font-family: 'EB Garamond', serif; /* Use a serif font for a classical feel */
-  font-size: 40px; /* Adjust the font size for mobile */
-  font-weight: bold; /* Make the text bold */
-  color: #0f0b0b; /* Text color */
-  text-align: center; /* Center align the text */
-  text-shadow: 5px 5px 5px grey;
-  margin: 0px; /* Reduce the bottom margin for mobile */
-  padding-top: 80px; /* Reduce the padding below the border line for mobile */
-  padding-bottom: 20px; /* Reduce the padding below the border line for mobile */
-}
-
-.submitTeam-container {
-  display: flex; 
-  justify-content: center;
-  padding: 10px 0px;
-  margin: 10px 0px;
-}
-
-/* Style for the label */
-.submitTeam-container label {
-  font-size: 20px;
-  font-weight: bold; 
-  text-align: center;
-  padding-right: 10px;
-  padding-top: 2px;
-  text-shadow: none;
-}
-
-/* Style for the input field */
-.submitTeam-container input[type="text"] {
-  box-sizing: border-box;
-  width: 25%; 
-  border: 2px solid ;
-  border-radius: 15px; 
-  border-color: #007bff; 
-  text-align: center;
-  font-size: 15px;
+/* Defalut color for light theme */
+.App {
+  width: 100vw;
+  height: 100vh;
+  background: #131111;
+  transition: 0.5s;
+  background-image: url("./img/home/imgBg.jpg");
+  background-size: 100vw;
 }
 
-/* Style for the buttons */
-.submitTeam-container button {
-  background-color: #007bff; /* Button background color */
-  padding: 10px;
-  margin-left: 10px;
-  color: #fff;
-  border: none; 
-  cursor: pointer; 
-  border-radius: 5px;
-  text-align: center;
-  font-size: 15px;
-  width: 10%;
+/* Dark theme color */
+.App.dark {
+  background: #222;
 }
 
-/* Style for the buttons on hover */
-.submitTeam-container button:hover {
-  background-color: #04376d; /* Darker background color on hover */
-}
 
-.create-button {
-  background-color: #078d14; /* Button background color */
-  padding: 10px;
-  margin-right: 40px;
-  color: #fff; 
-  border: none; 
-  cursor: pointer;
-  border-radius: 5px;
-  text-align: center;
-  font-size: 15px;
-  width: 10%;
-  align-items: center;
-}
 
-/* Style for the buttons on hover */
-.create-button:hover {
-  background-color: #044627;
-}
 
-/* Navbar Styling  */
-.header {
-  width: 100%;
-  height: 40px;
-  background: #b9d3de;
-  position: sticky;
-  top: 0;
-  left: 0;
-  padding : 20px 0px;
-}
-
- .container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
-  padding-bottom: 16px;
-  padding-left: 20px;
-}

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+// import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 

src/pages/Home.css

@@ -0,0 +1,68 @@
+/* Style for the h2 heading */
+.mainSection {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.top-Header {
+  padding: 2rem;
+  width: 40%;
+}
+
+.top-Header h2 {
+  font-family: 'EB Garamond', serif; 
+  font-size: 40px; 
+  font-weight: bold; 
+  color: #0f0b0b; 
+  text-align:left; 
+  text-shadow: 5px 5px 5px #808080;
+  margin: 0px;
+  padding-left: 10rem;
+}
+
+.top-Header p {
+  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif, 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 1.2rem;
+  margin: 1rem 0; 
+}
+
+.top-Header .create-container{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
+.imgContainer {
+  width: 50%;
+}
+
+.imgContainer img{
+  width: 90%;
+  display: block;
+  padding: 2.5rem;
+
+}
+
+.dark .top-Header h2{
+  color: #f7f3cc;
+  text-shadow: 2px 2px 2px #eff192;
+
+}
+
+.dark .top-Header p {
+  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif, 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 1.2rem;
+  margin: 1rem 0; 
+  color: cornsilk;
+}
+
+
+.dark .imgContainer img{
+  width: 90%;
+  margin: 0 0;
+  display: block;
+  padding: 2.5rem;
+}