more

src/components/Vehicles.js

@@ -65,6 +65,7 @@ const Vehicles = () => {
           const dbVehs = data.map((item, i) => {
             return Object.assign(item, { id: ids[i] });
           });
+          console.log("~~~~~~~~~~~~dbVehs", dbVehs);
           setSavedVehicles(dbVehs);
         } else {
           console.log("Error fetching data from database");
@@ -145,11 +146,14 @@ const Vehicles = () => {
       console.log(`Error deleteing vehicle from db: ${error}`);
     }
   }
-
+  console.log("~~~~~~~~~~~~~savedVehicles", savedVehicles);
+  savedVehicles.forEach((el) => {
+    console.log("~~~~~~~~~~~~~el", el);
+  });
   return (
     <>
       <div className="vehicles-container">
-        <h2 className="formHeader">Add Vehicle to Queue</h2>
+        <h2 className="formHeader">Add Vehicle To Queue</h2>
         <div className="vehiclesRow">
           <div className="vehBox">
             <div className="vehiclesColumn">
@@ -188,15 +192,15 @@ const Vehicles = () => {
           )}
           {savedVehicles.map((el, i) => (
             <Vehicle
-              key={`${el.model}${i}`}
-              make={el.make}
-              model={el.model}
-              trim={el.trim}
-              color={el.color}
-              category={el.category}
-              mileage={el.mileage}
-              price={el.price}
-              year={el.year}
+              key={`${el.Model}${i}`}
+              make={el.Make}
+              model={el.Model}
+              trim={el.Trim}
+              color={el.Color}
+              category={el.Category}
+              mileage={el.Mileage}
+              price={el.Price}
+              year={el.Year}
               id={el.id}
               onClick={deleteData}
             />

src/styles/App.css

@@ -11,7 +11,7 @@ body {
 
 .app-container {
   background-color: #f5f5f5;
-  min-height: 100vh;
+
   display: flex;
   flex-direction: column;
   font-size: 16px;
@@ -70,6 +70,11 @@ body {
   margin: 4px 5px;
 }
 
+.formHeader {
+  text-align: center;
+  letter-spacing: 0.08rem;
+}
+
 .formHeader2 {
   letter-spacing: 0.08rem;
   margin-top: 10px;
@@ -156,11 +161,13 @@ body {
 }
 
 .inputContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0px auto;
   min-width: 250px;
   max-width: 250px;
-  margin-right: 25px;
   padding-bottom: 5px;
-  padding-right: 5px;
 }
 
 .navBarContainer {
@@ -216,7 +223,6 @@ body {
   }
 
   .formHeader {
-    max-width: 250px;
     text-align: center;
   }