diff --git a/src/App.js b/src/App.js index 5b5436a..919a5c8 100644 --- a/src/App.js +++ b/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 ( -
+
- + } /> } /> diff --git a/src/component/CreateMember.css b/src/component/CreateMember.css new file mode 100644 index 0000000..aba8bcc --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/component/CreateMember.jsx b/src/component/CreateMember.jsx index b878072..00e457d 100644 --- a/src/component/CreateMember.jsx +++ b/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 ( -
+
{!isFormVisible && ( - + )} {isFormVisible && (
diff --git a/src/component/CreateTeam.css b/src/component/CreateTeam.css new file mode 100644 index 0000000..4d4c0ea --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/component/CreateTeam.jsx b/src/component/CreateTeam.jsx index fb7752f..723c22c 100644 --- a/src/component/CreateTeam.jsx +++ b/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 ( - + ); }; diff --git a/src/component/SubmitTeam.css b/src/component/SubmitTeam.css new file mode 100644 index 0000000..b073dbb --- /dev/null +++ b/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;; +} \ No newline at end of file diff --git a/src/component/SubmitTeam.jsx b/src/component/SubmitTeam.jsx index 9d4c7ca..750ef2e 100644 --- a/src/component/SubmitTeam.jsx +++ b/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')) diff --git a/src/img/home/imgBg.jpg b/src/img/home/imgBg.jpg new file mode 100644 index 0000000..a3aaeb9 Binary files /dev/null and b/src/img/home/imgBg.jpg differ diff --git a/src/img/home/imgTop.png b/src/img/home/imgTop.png new file mode 100644 index 0000000..070f661 Binary files /dev/null and b/src/img/home/imgTop.png differ diff --git a/src/img/navbar/day.png b/src/img/navbar/day.png new file mode 100644 index 0000000..1b9ac57 Binary files /dev/null and b/src/img/navbar/day.png differ diff --git a/src/img/navbar/logo-black.png b/src/img/navbar/logo-black.png new file mode 100644 index 0000000..573cc06 Binary files /dev/null and b/src/img/navbar/logo-black.png differ diff --git a/src/img/navbar/logo-white.png b/src/img/navbar/logo-white.png new file mode 100644 index 0000000..9f3848e Binary files /dev/null and b/src/img/navbar/logo-white.png differ diff --git a/src/img/navbar/logo.svg b/src/img/navbar/logo.svg new file mode 100644 index 0000000..f2483b4 --- /dev/null +++ b/src/img/navbar/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/navbar/night.png b/src/img/navbar/night.png new file mode 100644 index 0000000..01f2a46 Binary files /dev/null and b/src/img/navbar/night.png differ diff --git a/src/img/navbar/search-b.png b/src/img/navbar/search-b.png new file mode 100644 index 0000000..bc41ea9 Binary files /dev/null and b/src/img/navbar/search-b.png differ diff --git a/src/img/navbar/search-w.png b/src/img/navbar/search-w.png new file mode 100644 index 0000000..cc30a79 Binary files /dev/null and b/src/img/navbar/search-w.png differ diff --git a/src/index.css b/src/index.css index 2636270..1f60309 100644 --- a/src/index.css +++ b/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; -} diff --git a/src/index.js b/src/index.js index d563c0f..f0254d1 100644 --- a/src/index.js +++ b/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'; diff --git a/src/pages/Home.css b/src/pages/Home.css new file mode 100644 index 0000000..828ac66 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index d1d39e4..27db62d 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,12 +1,13 @@ import React, { useState, useEffect } from 'react'; import SubmitTeam from '../component/SubmitTeam'; import { apiPath } from '../api'; -import '../index.css'; +import './Home.css'; import CreateMember from '../component/CreateMember'; import CreateTeam from '../component/CreateTeam'; +import imgTop from '../img/home/imgTop.png' // import DeleteTeam from '../component/DeleteTeam'; -const Home = () => { +const Home = ({theme, setTheme}) => { const [teamsDatabase, setTeamsDatabase] = useState([]); useEffect(() => { @@ -28,12 +29,23 @@ const Home = () => { }; return ( -
-

Time Off

- - - - {/* */} +
+
+

Time Off

+

+ TimeOff_App is a web application designed to simplify the process of managing vacations and time off for teams within a company. + It provides a user-friendly interface for creating teams, managing team members, and tracking their time off. +

+ +
+ + +
+ {/* */} +
+
+ +
); }; diff --git a/src/pages/Navbar.css b/src/pages/Navbar.css new file mode 100644 index 0000000..5c64cfd --- /dev/null +++ b/src/pages/Navbar.css @@ -0,0 +1,95 @@ +.navbar{ + /* width: 100%; */ + display: flex; + align-items: center; + justify-content: space-between; + background-color: #c4f6f2; + padding: 15px 7%; + transition: 0.5s; +} + +.logo{ + width: 100px; + cursor: pointer; +} + +ul{ + flex: 1; + list-style: none; + text-align: center; + margin: 0; + padding: 0; +} + +ul li{ + display: inline-block; + margin: 10px 80px; + font-size: 22px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + cursor: pointer; + +} + +ul li a { + font-family: sans-serif; + text-decoration: none; + color: #000; +} + +.toggle-icon{ + width: 50px; + cursor: pointer; + margin-left: 40px; +} + +.search-box{ + display: flex; + align-items: center; + background: #c4f6f2; + padding: 10px 20px; + border-radius: 50px; + border-style:solid; + border-width: 2.5px; +} + +.search-box input{ + padding: 6px; + background: transparent; + border: 0; + outline: 0; + color: rgb(15, 14, 14); + font-size: 18px; + max-width: 200px; +} + +.search-box input::placeholder{ + color: #0c0c0c; +} + +.search-box img{ + width: 20px; + cursor: pointer; +} + +/* For dark Mode */ +.dark .navbar{ + background: #000; + color: #fff; +} + +.dark ul li a { + font-family: sans-serif; + text-decoration: none; + color: #fff; +} + +.dark .search-box{ + background-color: #fff; +} + +.dark .search-box input { + color: #222; +} +.search-box input::placeholder{ + color: #222; +} \ No newline at end of file diff --git a/src/pages/Navbar.jsx b/src/pages/Navbar.jsx index 6e44fcd..69bb118 100644 --- a/src/pages/Navbar.jsx +++ b/src/pages/Navbar.jsx @@ -1,21 +1,35 @@ import { Link } from "react-router-dom"; +import './Navbar.css' + +import logo from '../img/navbar/logo.svg' +import search_icon_light from '../img/navbar/search-w.png' +import search_icon_dark from '../img/navbar/search-b.png' +import toggle_light from '../img/navbar/night.png' +import toggle_dark from '../img/navbar/day.png' + +export default function Navbar ({theme, setTheme}) { + + const toggle_mode = ()=>{ + theme === 'light' ? setTheme('dark') : setTheme('light'); + } -export default function Navbar () { return ( -
- +
+ + + +
    +
  • Home
    • +
  • Pricing
    • +
  • About Us
    • +
-
- - - - - - - +
+ + +
+ + {toggle_mode()}} src={theme === 'light' ? toggle_light : toggle_dark} alt="" className='toggle-icon'/>
- -
) } -