From 3059b5d5a4cb32d8856c1f582c543d874cd65e49 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 20 Feb 2025 20:42:49 -0500
Subject: [PATCH 1/3] adjust css margins

---
 README.md                  | 14 ++++------
 package.json               |  4 +--
 src/components/Vehicles.js | 56 ++++++++++++++++++++------------------
 src/styles/App.css         | 16 +++++++++++
 4 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index 850c8a7..acd2a76 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
-# Getting Started with the Vehicle Inventory Flow DB/App
+# Getting Started with the Shortly 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.
diff --git a/package.json b/package.json
index 404b7ab..987e462 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Vehicles.js b/src/components/Vehicles.js
index a03c668..c5cb2b1 100644
--- a/src/components/Vehicles.js
+++ b/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,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">
-            {inputTypes.map((type, i) => (
-              <div className="inputContainer">
-                <TextInput
-                  key={`${type}${i}`}
-                  className="text-input"
-                  name={type}
-                  placeholder={type}
-                  value={inputs[type] || ""}
-                  onChange={
-                    type === "mileage" || type === "price"
-                      ? handleNumChange
-                      : handleChange
-                  }
-                />
-              </div>
-            ))}
+          <div className="vehBox">
+            <div className="vehiclesColumn">
+              {inputTypes.map((type, i) => (
+                <div className="inputContainer">
+                  <TextInput
+                    key={`${type}${i}`}
+                    className="text-input"
+                    name={type}
+                    placeholder={type}
+                    value={inputs[type] || ""}
+                    onChange={
+                      type === "mileage" || type === "price"
+                        ? handleNumChange
+                        : handleChange
+                    }
+                  />
+                </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">
diff --git a/src/styles/App.css b/src/styles/App.css
index af35ac3..8211db6 100644
--- a/src/styles/App.css
+++ b/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;
@@ -153,6 +164,11 @@ body {
 
 .fetchBox {
   margin-bottom: 25px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
 }
 
 @media only screen and (max-width: 460px) {

From e54cc6a26f472b0017398a992d5129d54b1b1317 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 20 Feb 2025 20:47:08 -0500
Subject: [PATCH 2/3] More

---
 src/styles/App.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/styles/App.css b/src/styles/App.css
index 8211db6..b742715 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -158,6 +158,11 @@ body {
   margin: 10px 10px;
 }
 
+.navSpan:hover {
+  cursor: pointer;
+  color: blue;
+}
+
 .getHeader {
   margin-top: -8px;
 }

From 65b75ca4d4b3f1217981004dd439d777d2847dbf Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 20 Feb 2025 20:54:14 -0500
Subject: [PATCH 3/3] Update README

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index acd2a76..ccac385 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Getting Started with the Shortly DB/App
+# Getting Started with the SF DB/App
 
 ## Initial Setup