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
-2.  Install dependencies by running command: npm install
+Unzip project in your local working directory or clone from git repo
+
+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",
-    "model",
-    "trim",
-    "color",
-    "year",
-    "category",
-    "mileage",
-    "price",
+    "Make",
+    "Model",
+    "Trim",
+    "Color",
+    "Year",
+    "Category",
+    "Mileage",
+    "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,6 +119,7 @@ const Vehicles = () => {
       <div className="vehicles-container">
         <h2 className="formHeader">Add A Vehicle to Your Queue</h2>
         <div className="vehiclesRow">
+          <div className="vehBox">
             <div className="vehiclesColumn">
               {inputTypes.map((type, i) => (
                 <div className="inputContainer">
@@ -138,6 +139,7 @@ const Vehicles = () => {
               ))}
             </div>
           </div>
+        </div>
         <Button
           className="auxButton"
           labelText="Add Vehicle"
@@ -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) {