From d1c906ebfa2163baa597ffdad311ef590cb1c99b Mon Sep 17 00:00:00 2001
From: Vazhin Tayeb <vazhintayeb@gmail.com>
Date: Fri, 15 Jan 2021 10:52:02 +0300
Subject: [PATCH] Fixes the Navbar situation

---
 React/src/App.js                           |  4 +-
 React/src/pages/YourVehicles.js            |  2 +-
 React/src/pages/components/LoginWindow.js  |  2 +-
 React/src/pages/components/Main.js         |  2 +-
 React/src/pages/components/Navbar.js       |  6 ++-
 React/src/pages/components/VehiclesMain.js | 47 +++++++++++++++++++++-
 React/src/pages/login.js                   |  2 +-
 7 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/React/src/App.js b/React/src/App.js
index d26e73b..6d6bddb 100644
--- a/React/src/App.js
+++ b/React/src/App.js
@@ -16,7 +16,7 @@ function App() {
   useEffect(() => {
     // Commented out not to check the localStorage for the user's existence ** Temporary **
     // fetch current user from cookies
-    // loadUserFromStorage(store);
+    loadUserFromStorage(store);
   }, []);
 
   // Should be removed ** Temporary **
@@ -27,7 +27,7 @@ function App() {
   };
 
   // ** Temporary **
-  logUserIn();
+  // logUserIn();
 
   return (
     <Provider store={store}>
diff --git a/React/src/pages/YourVehicles.js b/React/src/pages/YourVehicles.js
index 305c3a3..e4b42bb 100644
--- a/React/src/pages/YourVehicles.js
+++ b/React/src/pages/YourVehicles.js
@@ -5,7 +5,7 @@ import VehiclesMain from "./components/VehiclesMain";
 
 const YourVehicles = () => {
   return (
-    <div className="h-screen overflow-hidden">
+    <div>
       <Navbar />
       <Main Component={VehiclesMain} />
     </div>
diff --git a/React/src/pages/components/LoginWindow.js b/React/src/pages/components/LoginWindow.js
index a2d5df8..7ac2292 100644
--- a/React/src/pages/components/LoginWindow.js
+++ b/React/src/pages/components/LoginWindow.js
@@ -12,7 +12,7 @@ const LoginWindow = () => {
   };
 
   return (
-    <div className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-40 sm:py-36 px-20 py-16">
+    <div className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-36 sm:py-36 px-20 py-16 mt-20">
       <Heading1 text={"Traffic Police Service"} />
 
       <p className="text-black-custom font-light text-3xl mb-20">
diff --git a/React/src/pages/components/Main.js b/React/src/pages/components/Main.js
index 52318a4..8892c18 100644
--- a/React/src/pages/components/Main.js
+++ b/React/src/pages/components/Main.js
@@ -4,7 +4,7 @@ const Main = ({ Component, styles = {} }) => {
   return (
     <div
       className="flex flex-col items-center justify-center h-4/5"
-      style={{ ...styles }}
+      style={{ ...styles, marginTop: "90px" }}
     >
       <Component />
     </div>
diff --git a/React/src/pages/components/Navbar.js b/React/src/pages/components/Navbar.js
index 544fcc6..5f83c5a 100644
--- a/React/src/pages/components/Navbar.js
+++ b/React/src/pages/components/Navbar.js
@@ -13,11 +13,13 @@ const Navbar = () => {
 
   return (
     <div
-      className="w-100 bg-blue-custom flex justify-center items-center"
+      className="w-screen bg-blue-custom flex justify-center items-center fixed top-0 left-0"
       style={{ height: "90px" }}
     >
       <nav className="flex items-center justify-between w-4/5">
-        <img src={logo} alt="logo" className="h-28" />
+        <Link to="/">
+          <img src={logo} alt="logo" className="h-28" />
+        </Link>
         {user ? (
           <ul className="list-none flex items-center justify-between w-2/6 m-0">
             <li className="m-0">
diff --git a/React/src/pages/components/VehiclesMain.js b/React/src/pages/components/VehiclesMain.js
index 6f8cfc5..76c5595 100644
--- a/React/src/pages/components/VehiclesMain.js
+++ b/React/src/pages/components/VehiclesMain.js
@@ -45,6 +45,49 @@ const VehiclesMain = () => {
       licensePlate: "9956443",
       type: 1,
     },
+
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
   ]);
 
   useEffect(() => {
@@ -62,9 +105,9 @@ const VehiclesMain = () => {
     <div className="flex flex-col">
       <Heading1
         text={"Traffic Police Service"}
+        classes="mt-24"
         styles={{
           marginBottom: "0",
-          ...(!vehicleData && { marginTop: "10%" }),
         }}
       />
       {/* <p>Hello, {user.profile.given_name}.</p> */}
@@ -83,7 +126,7 @@ const VehiclesMain = () => {
       )}
       <Button
         text="Register A Vehicle"
-        classes={vehicleData && "self-start mt-20"}
+        classes={vehicleData && "self-start my-24"}
       />
     </div>
   );
diff --git a/React/src/pages/login.js b/React/src/pages/login.js
index 33b51b0..aeab182 100644
--- a/React/src/pages/login.js
+++ b/React/src/pages/login.js
@@ -16,7 +16,7 @@ function Login() {
   return user ? (
     <Redirect to={"/"} />
   ) : (
-    <div className="h-screen">
+    <div>
       <Navbar />
       <Main Component={LoginWindow} />
     </div>