Changes the theme in the real-estate app

React/real-estate/src/index.css

@@ -1,7 +1,7 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Roboto:wght@300;400;500;700&display=swap");
 
 :root {
-  --blue: #2170b9;
+  --blue: #343b99;
   --black: #1a1c21;
 }
 
@@ -19,7 +19,9 @@ p,
 }
 
 .font-playfair {
-  font-family: "Playfair Display", serif;
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  color: var(--blue) !important;
 }
 
 .text-black-custom {
@@ -37,7 +39,7 @@ h6 {
 }
 
 button:hover {
-  background-color: #1d6ab1;
+  background-color: var(--blue);
   border: none;
 }
 

React/real-estate/src/pages/components/Card.js

@@ -4,7 +4,7 @@ const Card = ({ children, classes = "", styles = {} }) => {
   return (
     <div
       style={{ ...styles }}
-      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 my-20 ${classes}`}
+      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 sm:py-36 px-20 py-16 my-20 rounded ${classes}`}
     >
       {children}
     </div>

React/real-estate/src/pages/components/LoginWindow.js

@@ -24,7 +24,8 @@ const LoginWindow = () => {
       <Heading1 text={"Real Estate Service"} />
 
       <p className="text-black-custom font-light text-3xl mb-20">
-        Login to your account to view your dashboard and register a new vehicle.
+        Login to your account to view your dashboard and manage your real
+        estate.
       </p>
       <Button onClickEvent={login} text={"Login"} />
     </Card>

React/real-estate/src/pages/components/Navbar.js

@@ -53,7 +53,7 @@ const Navbar = () => {
                   className="text-white font-inter font-semibold hover:text-white focus:text-white tracking-normal mr-20"
                   style={{ fontSize: "1.335rem" }}
                 >
-                  Your Vehicles
+                  Your Real Estates
                 </Link>
               </li>
               <li className="m-0">
@@ -62,7 +62,7 @@ const Navbar = () => {
                   className="text-white font-inter font-semibold hover:text-white focus:text-white tracking-normal mr-20"
                   style={{ fontSize: "1.335rem" }}
                 >
-                  Register A Vehicles
+                  Register Real Estates
                 </Link>
               </li>
               <li

React/real-estate/src/pages/components/VehiclesMain.js

@@ -16,44 +16,7 @@ const VehiclesMain = () => {
 
   const history = useHistory();
 
-  // Initial state must be null ** Temporary **
+  const [vehicleData, setVehicleData] = useState(null);
-  const [vehicleData, setVehicleData] = useState([
-    {
-      id: Math.floor(Math.random() * 200) + 1,
-      color: "White",
-      model: "Toyota Camry",
-      licensePlate: "14324235",
-      type: 2,
-    },
-    {
-      id: Math.floor(Math.random() * 200) + 1,
-      color: "Black",
-      model: "Honda Accord",
-      licensePlate: "8765658",
-      type: 1,
-    },
-    {
-      id: Math.floor(Math.random() * 200) + 1,
-      color: "Beige",
-      model: "Toyota Corolla",
-      licensePlate: "235464",
-      type: 2,
-    },
-    {
-      id: Math.floor(Math.random() * 200) + 1,
-      color: "Grey",
-      model: "Toyota Yaris",
-      licensePlate: "1878767",
-      type: 2,
-    },
-    {
-      id: Math.floor(Math.random() * 200) + 1,
-      color: "White",
-      model: "Toyota Camry",
-      licensePlate: "9956443",
-      type: 1,
-    },
-  ]);
 
   useEffect(() => {
     getVehicles();
@@ -67,9 +30,13 @@ const VehiclesMain = () => {
   }
 
   return (
-    <div className="flex flex-col xl:w-2/3 lg:w-4/5 w-11/12">
+    <div
+      className={`flex flex-col xl:w-2/3 lg:w-4/5 w-11/12 ${
+        !vehicleData && "items-center"
+      }`}
+    >
       <Heading1
-        text={"Traffic Police Service"}
+        text={"Real Estate Service"}
         classes="mt-24"
         styles={{
           marginBottom: "0",
@@ -78,7 +45,14 @@ const VehiclesMain = () => {
       {/* <p>Hello, {user.profile.given_name}.</p> */}
       {vehicleData ? (
         <>
+          <div className="flex justify-between items-center">
             <Heading3>Your Vehicles:</Heading3>
+            <Button
+              text="Register"
+              // classes={vehicleData && "self-start"}
+              onClickEvent={() => history.push("/register")}
+            />
+          </div>
           <Table vehicleData={vehicleData} />
         </>
       ) : (
@@ -86,11 +60,12 @@ const VehiclesMain = () => {
           No vehicles yet.
         </h3>
       )}
+      {!vehicleData && (
         <Button
-        text="Register A Vehicle"
+          text="Register"
-        classes={vehicleData && "self-start my-24"}
           onClickEvent={() => history.push("/register")}
         />
+      )}
     </div>
   );
 };

React/real-estate/src/services/apiService.js

@@ -1,17 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 async function getVehiclesFromApi(access_token) {
-  const response = await axios.get(`https://localhost:6001/api/Vehicles`, { headers: { 'Authorization': `Bearer ${access_token}` } });
+  const response = await axios.get(`https://localhost:8000/real-estate`, {
+    headers: { Authorization: `Bearer ${access_token}` },
+  });
   return response.data;
 }
 
 async function registerVehicle(vehicle, access_token) {
   console.log(vehicle);
-  const response = await axios.post(`https://localhost:6001/api/Vehicles`, vehicle, { headers: { 'Authorization': `Bearer ${access_token}` } });
+  const response = await axios.post(
+    `https://localhost:8000/real-estate`,
+    vehicle,
+    { headers: { Authorization: `Bearer ${access_token}` } }
+  );
   return response.data;
 }
 
-export {
+export { getVehiclesFromApi, registerVehicle };
-  getVehiclesFromApi,
-  registerVehicle
-}