Setting my routes properly

Payne680 · May 6, 2023 · 29ded34 · 29ded34
1 parent d60eac4
commit 29ded34
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.8",
     "@emotion/styled": "^11.10.8",
+    "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/x-data-grid": "^6.3.0",
     "@mui/x-data-grid-generator": "^6.3.0",

diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,91 @@
 body {
   background: #E5E5E5;
 }
+
+:root {
+  --transparent-black: rgba(0, 0, 0, 0.294);
+  --black: #111111;
+  --grey: rgba(255, 255, 255, 0.597);
+  --orange: #a7caca;
+  --green: rgb(54, 234, 54);
+  --orange-gradient: linear-gradient(
+    268.35deg,
+    rgba(255, 70, 70, 0.99) 3.47%,
+    rgba(255, 114, 70, 0.99) 60.18%
+  );
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+#dashboard {
+  height: 100vh;
+  width: 100vw;
+  background-color: var(--black);
+  color: white;
+  font-family: 'Public Sans', sans-serif;
+  overflow: hidden;
+}
+
+.theme-container {
+  background: rgba(0, 0, 0, 0.59);
+  border-radius: 20px;
+  padding: 2rem;
+}
+
+.gradient-red {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: #8cd1ef;
+  filter: blur(90px);
+}
+.gradient-orange {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: var(--orange);
+  filter: blur(90px);
+}
+.gradient-blue {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: #5dc9ff;
+  filter: blur(90px);
+}
+
+.grey-container {
+  border-top: 0.3px solid rgba(255, 255, 255, 0.185);
+  border-bottom: 0.3px solid rgba(255, 255, 255, 0.185);
+  background: linear-gradient(
+    90deg,
+    rgba(53, 53, 53, 0) 1.21%,
+    rgba(53, 53, 53, 0.46) 49.45%,
+    rgba(53, 53, 53, 0) 103.83%
+  );
+  padding: 1.5rem 1rem;
+}
+
+/* scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  width: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: darkgrey;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,6 +6,8 @@ import CreateFirstTeam from './Pages/Templates/CreateFirstTeam';
 import Landing from './Pages/Landing/Homepage';
 import Dashboard from './Pages/Dashboard/Dashboard';
 import BoardPage from './Pages/BoardPage/BoardPage';
+import ProfilePage from './Pages/Templates/profile/ProfilePage';
+import DataTable from './Pages/Templates/userList/UserList';
 
 export default function App() {
   return (
@@ -17,9 +19,10 @@ export default function App() {
           <Route path="create-first-team" element={<CreateFirstTeam />} />
           <Route path="dashboard" element={<Dashboard />}>
             <Route path="board" element={<BoardPage />} />
+            <Route path="profile" element={<ProfilePage />} />
+            <Route path="members" element={<DataTable />} />
           </Route>
           <Route path="login" element={<Signin />} />
-          <Route path="dashboard" element={<Dashboard />} />
         </Routes>
       </div>
     </BrowserRouter>

diff --git a/src/Components/Organisms/Sidebar/Sidebar.jsx b/src/Components/Organisms/Sidebar/Sidebar.jsx
@@ -1,4 +1,4 @@
-import { MdSpaceDashboard } from 'react-icons/md';
+import { BiUserCircle } from 'react-icons/bi';
 import { AiFillCalendar, AiOutlineTable } from 'react-icons/ai';
 import { FaTasks } from 'react-icons/fa';
 import { NavLink } from 'react-router-dom';
@@ -10,17 +10,17 @@ function Sidebar() {
     <div className={css.container}>
       <img alt="logo" src={logo} className={css.logo} />
       <div className={css.menu}>
+        <NavLink to="profile" className={css.item} title="Dashboard">
+          <BiUserCircle size={30} />
+        </NavLink>
         <NavLink to="board" className={css.item} title="Board">
           <FaTasks size={30} />
         </NavLink>
-        <NavLink to="/dashboard" className={css.item} title="Dashboard">
-          <MdSpaceDashboard size={30} />
-        </NavLink>
         <NavLink to="/dashboard" className={css.item} title="Calendar">
           <AiFillCalendar size={30} />
         </NavLink>
 
-        <NavLink to="/dashboard" className={css.item} title="Users">
+        <NavLink to="members" className={css.item} title="Users">
           <AiOutlineTable size={30} />
         </NavLink>
       </div>

diff --git a/src/Pages/Templates/profile/ProfilePage.css b/src/Pages/Templates/profile/ProfilePage.css
@@ -2,8 +2,12 @@
   align-items: center;
   display: flex;
   margin: auto;
-  width: 80%;
+  width: 90%;
   justify-content: center;
+  line-height: 20px;
+  padding: 150px 0px;
+  margin: auto;
+  margin-bottom: 10px;
 }
 
 .editProfile .leftSide {
@@ -22,7 +26,7 @@
   background: #fff;
   border: 1px solid #76b1a6;
   border-radius: 10px;
-  height: 400px;
+  height: 90%;
   width: 400px;
 }
 
@@ -34,6 +38,7 @@
   font-size: 17px;
   border-radius: 5px;
   width: 100%;
+  height: 6vh;
 }
 
 .head {
@@ -45,8 +50,9 @@
   position: relative;
   text-align: center;
   top: 35%;
+  height: 100px;
 }
 
 .bttn {
-  width: 105%;
+  width: 100%;
 }
diff --git a/src/Pages/Templates/profile/ProfilePage.jsx b/src/Pages/Templates/profile/ProfilePage.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
+import moment from 'moment';
 import './ProfilePage.css';
 import Input from '../../../Components/Atoms/Inputs/Input';
 import Button from '../../../Components/Atoms/Buttons/Button';
 
-export default function profilePage() {
+export default function ProfilePage() {
   return (
     <div className="editProfile">
       <form className="leftSide">
@@ -17,19 +18,14 @@ export default function profilePage() {
         <Input className="inputs" type="email" />
         <h3>Password</h3>
         <Input className="inputs" type="password" />
-        <Button
-          className="bttn"
-          title="Edit Account"
-        />
+        <Button className="bttn" title="Edit Account" />
       </form>
       <div className="rightSide">
         <h2>Members Registration</h2>
         <div className="inputField">
           <div className="editText">
             <h2>You are registered</h2>
-            <p>
-              You registered on Wednesday, 14 Febuary 2023 at 12:00:30 GMT+1
-            </p>
+            <span>{moment().format('dddd, Do MMM YYYY')}</span>
           </div>
         </div>
       </div>

diff --git a/src/Pages/Templates/userList/UserList.jsx b/src/Pages/Templates/userList/UserList.jsx
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-unused-vars */
 import Box from '@mui/material/Box';
 import { DataGrid } from '@mui/x-data-grid';
 import { DeleteOutline } from '@mui/icons-material';
@@ -32,6 +34,7 @@ const columns = [
       return (
         <div className="userEdit">
           <button
+            type="button"
             style={{
               width: '80%',
               background: 'lightgreen',
@@ -96,7 +99,7 @@ export default function DataTable() {
   return (
     <Box
       sx={{
-        background: 'white',
+        background: '#ccc',
         height: 580,
         width: '100%',
       }}

diff --git a/src/index.css b/src/index.css
@@ -44,7 +44,7 @@ body {
   width: 100vw;
   background-color: var(--black);
   color: white;
-  font-family: "Public Sans", sans-serif;
+  font-family: 'Public Sans', sans-serif;
   overflow: hidden;
 }
 
@@ -104,4 +104,4 @@ body {
 }
 ::-webkit-scrollbar-thumb:hover {
   background-color: darkgrey;
-}
+}