laid out the BillingForm elements in a sexy way

8 files changed, 239 insertions, 72 deletions

diff --git a/src/components/App.js b/src/components/App.js
index c1bae4f..d2b7d21 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,27 +1,13 @@
 import React from "react";
 import Header from "./Header/Header";
-import BillingForm from "./Form/Form.js";
-
-const sampleData = [
-  {
-    "Model": "Kisan Chair",
-    "Description": "Very good chair",
-    "Price": "10000",
-    "Discount": ""}
-  , {
-    "Model": "Supreme Chair",
-    "Description": "Even better chair",
-    "Price": "2134983",
-    "Discount": ""
-  }
-]
+import BillingPage from "./BillingPage";
 
 const App = () => {
 	return (
 		<>
 			<Header/>
 			<div className={"root-content"}>
-				<BillingForm savedItems={sampleData} />
+        <BillingPage />
 			</div>
 		</>
 	);
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
new file mode 100644
index 0000000..6e76cf0
--- /dev/null
+++ b/src/components/BillingPage.js
@@ -0,0 +1,27 @@
+import React from "react";
+import BillingForm from "./Form/Form.js";
+
+
+const sampleData = [
+  {
+    "Model": "Kisan Chair",
+    "Description": "Very good chair",
+    "Price": "10000",
+    "Discount": ""
+  }, {
+    "Model": "Supreme Chair",
+    "Description": "Even better chair",
+    "Price": "2134983",
+    "Discount": ""
+  }
+];
+
+const BillingPage = () => {
+  return (
+    <>
+      <BillingForm savedItems={sampleData} />
+    </>
+  );
+}
+
+export default BillingPage;
diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
index d0ecc5f..9dbfd6f 100644
--- a/src/components/Form/Form.css
+++ b/src/components/Form/Form.css
@@ -1,4 +1,71 @@
-form {
-  border: 1px solid purple;
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
+/* Experimental color scheme */
+/* light theme */
+/* 
+$defBG: #FFFFFF;
+$altBG: lightgray;
+$defFG: #000000;
+$altFG: #232627;
+$defLink: brown;
+$altLink: brown;
+
+$defShadow: 0px 0px 4px #232627;
+*/
+/* Inspired by Dracula */
+.formContainer {
+  border: 1px solid pink;
+  padding: 2rem;
+  height: 60vh;
+  border-radius: 1rem; }
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs
+label {
+  font-size: 1.5rem; }
+
+.addNewItemForm {
   display: flex;
-  justify-content: space-evenly; }
+  flex-direction: row;
+  justify-content: space-between;
+  height: 50vh; }
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs {
+  border: 1px solid #FF79C6;
+  width: 30%;
+  justify-content: space-around; }
+
+.addNewItemForm .numericInputs input {
+  width: 5.5rem; }
+
+.addNewItemForm .menuButtons {
+  justify-content: space-around;
+  border: 1px solid lightgreen;
+  width: 15%; }
+
+.addNewItemForm .menuButtons * {
+  width: 100%; }
+
+.addNewItemForm div {
+  display: flex;
+  flex-direction: column;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  overflow: scroll; }
+
+/* hide scrollbars */
+.addNewItemForm div::-webkit-scrollbar {
+  display: none;
+  /* Chrome/Safari/Opera */ }
+
+.addNewItemForm div {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */ }
+
+.addNewItemForm label {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.8rem 0;
+  border-bottom: 1px dotted lightblue; }
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>
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 01f9bf2..5dc6545 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -1,5 +1,69 @@
-form {
-  border: 1px solid purple;
+@import "../../styles/theme";
+
+.formContainer {
+  border: 1px solid pink;
+  padding: 2rem;
+
+  height: 60vh;
+  border-radius: 1rem;
+}
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs
+label {
+  font-size: 1.5rem;
+}
+
+.addNewItemForm {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  height: 50vh;
+}
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs {
+  border: 1px solid $altBorderColor;
+  width: 30%;
+  justify-content: space-around;
+}
+
+.addNewItemForm .numericInputs input {
+  width: 5.5rem;
+}
+
+.addNewItemForm .menuButtons {
+  justify-content: space-around;
+  border: 1px solid $defBorderColor;
+  width: 15%;
+}
+
+.addNewItemForm .menuButtons * {
+  width: 100%;
+}
+
+.addNewItemForm div {
+  display: flex;
+  flex-direction: column;
+  border-radius: 1rem;
+  padding: 1.5rem;
+
+  overflow: scroll;
+}
+
+/* hide scrollbars */
+.addNewItemForm div::-webkit-scrollbar {
+  display: none; /* Chrome/Safari/Opera */
+}
+.addNewItemForm div {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.addNewItemForm label {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
+  padding: 0.8rem 0;
+  border-bottom: 1px dotted $labelUnderlineColor;
 }
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 5f92bc9..ba67346 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -22,6 +22,11 @@ $defFG: #F2F2F2;
 $altFG: #FF79C6;
 $defLink: $defFG;
 $altLink: $altFG;
+$defBorderColor: lightgreen;
+$altBorderColor: #FF79C6;
+
+$labelUnderlineColor: lightblue;
+
 
 $defShadow: 0px 4px 4px $altBG;
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 198f1e1..4950d01 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -21,5 +21,5 @@ body {
   margin: 0; }
 
 .root-content {
-  width: 90%;
+  width: 95%;
   margin: auto; }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index b0e5ea1..282c790 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -11,6 +11,6 @@ body {
 }
 
 .root-content {
-  width: 90%;
+  width: 95%;
   margin: auto;
 }