laid out the BillingForm elements in a sexy way

1 files changed, 66 insertions, 48 deletions

diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
index 5cb5675..094f881 100644
--- a/src/components/Form/Form.js
+++ b/src/components/Form/Form.js
@@ -8,6 +8,7 @@ const BillingForm = (props) => {
   const [itemPriceValue, setItemPriceValue] = useState(0.00);
   const [itemDiscountValue, setItemDiscountValue] = useState(0.00);
   const [itemGSTValue, setItemGSTValue] = useState(18);
+  const [itemQtyValue, setItemQtyValue] = useState(1);
 
   // Extract the model names from savedItems
   const savedItems = props.savedItems;
@@ -24,66 +25,83 @@ const BillingForm = (props) => {
   );
 
   return (
-    <div>
-      <form onSubmit={
+    <div className={"formContainer"}>
+      <form className={"addNewItemForm"} onSubmit={
         (event) => {
           event.preventDefault();
           console.log(itemNameValue, itemDescValue, itemPriceValue);
         }
       }>
-  
-        <label>
-          Item: <input type="text" value={itemNameValue} onChange={
-            (event) => {
-              setItemNameValue(event.target.value);
-              // set description and price value
-              for (let i = 0; i <= props.savedItems.length - 1; i++) {
-                const mod = props.savedItems[i].Model;
-                const desc = props.savedItems[i].Description;
-                const price = props.savedItems[i].Price;
-                if (mod === event.target.value) {
-                  setItemDescValue(desc);
-                  setItemPriceValue(price);
-                  break;
+        <div className={"textInputs"}>
+          <label>
+            Item:<input type="text" value={itemNameValue} onChange={
+              (event) => {
+                setItemNameValue(event.target.value);
+                // set description and price value
+                for (let i = 0; i <= props.savedItems.length - 1; i++) {
+                  const mod = props.savedItems[i].Model;
+                  const desc = props.savedItems[i].Description;
+                  const price = props.savedItems[i].Price;
+                  if (mod === event.target.value) {
+                    setItemDescValue(desc);
+                    setItemPriceValue(price);
+                    break;
+                  }
                 }
               }
-            }
-          } />
-        </label>
+            } />
+          </label>
   
-        <label>
-          Description: <input type="text" min="0" step="0.1" value={itemDescValue} onChange={
-            (event) => {
-              setItemDescValue(event.target.value);
-            }
-          } />
-        </label>
+          <label>
+            Description:<input type="text" min="0" step="0.1" value={itemDescValue} onChange={
+              (event) => {
+                setItemDescValue(event.target.value);
+              }
+            } />
+          </label>
+        </div>
 
-        <label>
-          Price: <input type="number" min="0" value={itemPriceValue} onChange={
-            (event) => {
-              setItemPriceValue(event.target.value);
-            }
-          } />
-        </label>
+        <div className={"numericInputs"}>
+          <label>
+            Price: <input type="number" min="0" value={itemPriceValue} onChange={
+              (event) => {
+                setItemPriceValue(event.target.value);
+              }
+            } />
+          </label>
 
-        <label>
-          Discount: <input type="number" min="0" value={itemDiscountValue} onChange={
-            (event) => {
-              setItemDiscountValue(event.target.value);
-            }
-          } />
-        </label>
+          <label>
+            Discount: <input type="number" min="0" value={itemDiscountValue} onChange={
+              (event) => {
+                setItemDiscountValue(event.target.value);
+              }
+            } />
+          </label>
 
-        <label>
-          GST: <input type="number" min="0" value={itemGSTValue} onChange={
-            (event) => {
-              setItemGSTValue(event.target.value);
-            }
-          } />
-        </label>
+          <label>
+            GST: <input type="number" min="0" value={itemGSTValue} onChange={
+              (event) => {
+                setItemGSTValue(event.target.value);
+              }
+            } />
+          </label>
+
+          <label>
+            Quantity: <input type="number" min="1" value={itemQtyValue} onChange={
+              (event) => {
+                setItemQtyValue(event.target.value);
+              }
+            } />
+          </label>
+        </div>
 
-        <input type="submit" value="add" />
+        <div className={"menuButtons"}>
+          <input type="submit" value="Placeholder1" />
+          <input type="submit" value="Placeholder2" />
+          <input type="submit" value="Placeholder3" />
+          <input type="submit" value="Placeholder4" />
+          <input type="submit" value="add" />
+        </div>
       </form>
 
       <ul>