Merge pull request #2 from kjannette/style

Style

build/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

build/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "sales control application",
+  "name": "sales flow application",
   "version": "0.1.0",
   "homepage": ".",
   "private": false,

src/components/Vehicle.js

@@ -52,7 +52,7 @@ const Vehicle = (props) => {
               {`$${formatNums(price / 100)}.00`}
             </p>
             <p className="veh-text">
-              <b>Id: </b>
+              <b>ISDM: </b>
               {id}
             </p>
           </div>

src/components/Vehicles.js

@@ -17,15 +17,16 @@ const Vehicles = () => {
   const [inputs, setInputs] = useState({});
   const [vehId, setVehId] = useState();
   const [fetchedVeh, setfetchedVeh] = useState([]);
+  const [alert, setAlert] = useState(false);
   const inputTypes = [
     "Make",
     "Model",
     "Trim",
     "Color",
-    "Year",
+    "Prod Year",
     "Category",
     "Mileage",
-    "Price",
+    "Pre-QRV-Price",
   ];
   const handleIdInput = (e) => setVehId(e.target.value);
 
@@ -52,7 +53,7 @@ const Vehicles = () => {
     const formatMiles = parseFloat(inputs.mileage.replace(/,/g, ""));
     const formatPrice = parseFloat(inputs.price.replace(/,/g, "") * 100);
     inputs.Mileage = formatMiles;
-    inputs.price = formatPrice;
+    //inputs.price = formatPrice;
   };
 
   useEffect(() => {
@@ -92,9 +93,40 @@ const Vehicles = () => {
     setVehId("");
   }
 
+  function validate() {
+    const make = inputs.Make;
+    const model = inputs.Model;
+    const trim = inputs.Trim;
+    const color = inputs.Color;
+    const year = inputs["Prod Year"];
+    const cat = inputs.Category;
+    const miles = inputs.Mileage;
+    const price = inputs["Pre-QRV-Price"];
+
+    if (
+      !make ||
+      !model ||
+      !trim ||
+      !color ||
+      !year ||
+      !cat ||
+      !miles ||
+      !price
+    ) {
+      setAlert("Please fill out all fields");
+      return false;
+    }
+    return true;
+  }
+
   async function addData(e) {
     e.preventDefault();
     //format(e);
+    const valid = validate();
+    if (!valid) {
+      return;
+    }
+    console.log("inputs~~~~~~~~~~", inputs);
     setSavedVehicles([...savedVehicles, inputs]);
     try {
       const docRef = await addDoc(collection(db, "hdepot"), inputs);
@@ -143,6 +175,7 @@ const Vehicles = () => {
               ))}
             </div>
           </div>
+          <div>{alert ? <div className="alert">{alert}</div> : <></>}</div>
         </div>
         <Button
           className="auxButton"
@@ -153,7 +186,7 @@ const Vehicles = () => {
         />
         <div>
           {savedVehicles.length > 0 ? (
-            <h2 className="formHeader"> Your Saved Vehicles</h2>
+            <h2 className="formHeader"> Your Vehicles</h2>
           ) : (
             <></>
           )}
@@ -174,14 +207,14 @@ const Vehicles = () => {
           ))}
         </div>
         <div className="getHeader">
-          <h2 className="formHeader2">Get A Vehicle By Id</h2>
+          <h2 className="formHeader2">Get Vehicle By ISDM</h2>
         </div>
         <div className="fetchBox">
           <div className="inputContainer">
             <TextInput
               className="text-input"
               name="vehId"
-              placeholder="Vehicle Id"
+              placeholder="Vehicle ISDM"
               value={vehId}
               onChange={handleIdInput}
             />

src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

src/styles/App.css

@@ -21,14 +21,14 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 100%;
+
   padding: 0px 30px;
   margin: 5px 20px;
 }
 
 .vehiclesRow {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: auto;
@@ -40,6 +40,7 @@ body {
   flex-direction: column;
   flex-wrap: wrap;
   height: 205px;
+  padding: 20px;
 }
 
 .veh-col {
@@ -60,10 +61,10 @@ body {
 .vehBox {
   padding: 5px 5px 8px 8px;
   border: 1px solid #5d86a8;
-  background-color: #fff;
   border-radius: 6px;
   max-width: 535px;
   flex: 1 0 auto;
+  background-color: #f9f5ff;
 }
 
 .veh-text {
@@ -82,32 +83,39 @@ body {
 }
 
 .text-input {
-  width: 100%;
+  width: 220px;
   height: 24px;
   margin: 8px 0px;
   border: 1px solid #c0c8cf;
   border-radius: 4px;
 }
 
+.alert {
+  color: red;
+  font-size: 0.8rem;
+  padding-top: 8px;
+  margin: 8px 0px;
+}
+
 .auxButton {
   height: 30px;
   width: 125px;
-  border: 1px solid #c0c8cf;
+  border: 1px solid #8ac8ff;
   border-radius: 6px;
-  background-color: white;
   color: #0f1111;
   font-family: "Open Sans", sans-serif;
   cursor: pointer;
   padding: 7px 0px 26px 0px;
   margin: 25px auto;
+  background-color: #ffefef;
 }
 
 .auxButton2 {
   height: 30px;
   width: 125px;
-  border: 1px solid #c0c8cf;
+  border: 1px solid #8ac8ff;
   border-radius: 6px;
-  background-color: white;
+  background-color: #ffefef;
   color: #0f1111;
   font-family: "Open Sans", sans-serif;
   cursor: pointer;
@@ -158,17 +166,16 @@ body {
   flex-direction: column;
   align-items: center;
   margin: 0px auto;
-  min-width: 250px;
+
-  max-width: 250px;
+  width: 250px;
   padding-bottom: 5px;
 }
 
 .navBarContainer {
-  width: 100%;
   height: 50px;
   padding: 15px 20px 0px 20px;
-  background-color: white;
   border-bottom: 2px solid #a9a9a9;
+  background-color: #fcf6ff;
 }
 
 .navRow {
@@ -202,9 +209,19 @@ body {
 }
 
 @media only screen and (max-width: 460px) {
+  .vehicles-container {
+    max-width: 400px;
+    padding: 0px 10px;
+    margin: 2px auto;
+  }
+
+  .inputContainer {
+    width: 200px;
+  }
   .vehiclesColumn {
     height: 100%;
   }
+
   .navBarContainer {
     display: none;
   }