Merge pull request #1 from kjannette/update_css

Update css

README.md

@@ -1,9 +1,10 @@
-# Getting Started with the Vehicle Inventory Flow DB/App
+# Getting Started with the SF DB/App
 
 ## Initial Setup
 
-1.  Unzip project in your local working directory
+Unzip project in your local working directory or clone from git repo
-2.  Install dependencies by running command: npm install
+
+Install dependencies by running command: npm install
 
 ## Available Scripts
 
@@ -11,10 +12,5 @@ In the project directory, you can run:
 
 ### `npm start`
 
-Runs the app locally in the development mode for testing.\
+Runs the app locally in the development mode for testing.
 Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "hdepot",
+  "name": "sales flow app",
   "version": "0.1.0",
-  "homepage": "https://www.findandexec.com/var/www/fne/sf/",
+  "homepage": "https://www.findandexec.com/sf",
   "private": false,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",

src/components/Vehicles.js

@@ -18,14 +18,14 @@ const Vehicles = () => {
   const [vehId, setVehId] = useState();
   const [fetchedVeh, setfetchedVeh] = useState([]);
   const inputTypes = [
-    "make",
+    "Make",
-    "model",
+    "Model",
-    "trim",
+    "Trim",
-    "color",
+    "Color",
-    "year",
+    "Year",
-    "category",
+    "Category",
-    "mileage",
+    "Mileage",
-    "price",
+    "Price",
   ];
   const handleIdInput = (e) => setVehId(e.target.value);
 
@@ -66,7 +66,7 @@ const Vehicles = () => {
           });
           setSavedVehicles(dbVehs);
         } else {
-          console.log("Error fetching vehicle data from database");
+          console.log("Error fetching data from database");
         }
       });
     } catch (error) {
@@ -119,23 +119,25 @@ const Vehicles = () => {
       <div className="vehicles-container">
         <h2 className="formHeader">Add A Vehicle to Your Queue</h2>
         <div className="vehiclesRow">
-          <div className="vehiclesColumn">
+          <div className="vehBox">
-            {inputTypes.map((type, i) => (
+            <div className="vehiclesColumn">
-              <div className="inputContainer">
+              {inputTypes.map((type, i) => (
-                <TextInput
+                <div className="inputContainer">
-                  key={`${type}${i}`}
+                  <TextInput
-                  className="text-input"
+                    key={`${type}${i}`}
-                  name={type}
+                    className="text-input"
-                  placeholder={type}
+                    name={type}
-                  value={inputs[type] || ""}
+                    placeholder={type}
-                  onChange={
+                    value={inputs[type] || ""}
-                    type === "mileage" || type === "price"
+                    onChange={
-                      ? handleNumChange
+                      type === "mileage" || type === "price"
-                      : handleChange
+                        ? handleNumChange
-                  }
+                        : handleChange
-                />
+                    }
-              </div>
+                  />
-            ))}
+                </div>
+              ))}
+            </div>
           </div>
         </div>
         <Button
@@ -166,7 +168,7 @@ const Vehicles = () => {
           ))}
         </div>
         <div className="getHeader">
-          <h2 className="formHeader">Get A Vehicle By Id</h2>
+          <h2 className="formHeader2">Get A Vehicle By Id</h2>
         </div>
         <div className="fetchBox">
           <div className="inputContainer">

src/styles/App.css

@@ -15,6 +15,7 @@ body {
 .vehicles-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
   width: 100%;
   padding: 0px 30px;
   margin: 5px 20px;
@@ -23,6 +24,9 @@ body {
 .vehiclesRow {
   display: flex;
   flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
   width: 100%;
 }
 
@@ -51,6 +55,7 @@ body {
 .vehBox {
   padding: 5px 5px 8px 8px;
   border: 1px solid #5d86a8;
+  background-color: #fff;
   border-radius: 6px;
   max-width: 535px;
   flex: 1 0 auto;
@@ -64,6 +69,12 @@ body {
   letter-spacing: 0.08rem;
 }
 
+.formHeader2 {
+  letter-spacing: 0.08rem;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .text-input {
   width: 100%;
   height: 24px;
@@ -147,12 +158,22 @@ body {
   margin: 10px 10px;
 }
 
+.navSpan:hover {
+  cursor: pointer;
+  color: blue;
+}
+
 .getHeader {
   margin-top: -8px;
 }
 
 .fetchBox {
   margin-bottom: 25px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
 }
 
 @media only screen and (max-width: 460px) {