rewrote the stylesheet into something more readable. RegisterItemForm is completely broken rn

3 files changed, 145 insertions, 149 deletions

diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 3fc4c46..81cbd3f 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -63,7 +63,7 @@ const AddNewItemForm = (props) => {
 
   return (
     <div className={"formContainer"}>
-      <form className={"addNewItemForm"} onSubmit={
+      <form className={"threePaneForm"} onSubmit={
         (event) => {
           event.preventDefault();
           const newInvoiceItem = {
@@ -80,10 +80,11 @@ const AddNewItemForm = (props) => {
           resetAllValues();
         }
       }>
-        <div className={"textInputs"}>
+        <div className={"widePane"}>
           <label>
             Item/Service: 
               <select
+                className={"selectInputBox"}
                 value={itemNameValue} 
                 onChange={
                   (event) => {
@@ -102,62 +103,106 @@ const AddNewItemForm = (props) => {
           </label>
   
           <label>
-            Description: <input type="text" step="0.1" value={itemDescValue} onChange={
-              (event) => {
-                setItemDescValue(event.target.value);
-              }
-            } />
+            Description: 
+              <input 
+                className={"wideInputBox"}
+                type="text" 
+                step="0.1" 
+                value={itemDescValue} 
+                onChange={
+                  (event) => {
+                    setItemDescValue(event.target.value);
+                  }
+                } 
+              />
           </label>
         </div>
 
-        <div className={"numericInputs"}>
+        <div className={"widePane"}>
           <label>
-            Quantity: <input type="number" min="1" value={itemQtyValue} onInput={
-              (event) => {
-                const value = event.target.value;
-                setItemQtyValue(value);
-              }
-            } required />
+            Quantity: 
+              <input 
+                className={"smallInputBox"}
+                type="number" 
+                min="1" 
+                value={itemQtyValue} 
+                onInput={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemQtyValue(value);
+                  }
+                } 
+              required />
           </label>
 
           <label>
-            Price: <input type="number" min="1.00" step="0.001" value={itemPriceValue} onChange={
-              (event) => {
-                const value = event.target.value;
-                setItemPriceValue(value);
-              }
-            } required />
+            Price: 
+              <input 
+                className={"smallInputBox"}
+                type="number" 
+                min="1.00" 
+                step="0.001" 
+                value={itemPriceValue} 
+                onChange={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemPriceValue(value);
+                  }
+                } 
+              required />
           </label>
 
           <label>
-            Discount: <input type="number" min="0" step="0.001" value={itemDiscountValue} onChange={
-              (event) => {
-                const value = event.target.value;
-                setItemDiscountValue(value);
-              }
-            } />
+            Discount: 
+              <input 
+                className={"smallInputBox"}
+                type="number"
+                min="0" 
+                step="0.001" 
+                value={itemDiscountValue} 
+                onChange={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemDiscountValue(value);
+                  }
+                }
+              />
           </label>
 
           <label>
-            HSN: <input type="number" min="0" value={itemHSNValue} onChange={
-              (event) => {
-                const value = event.target.value;
-                setItemHSNValue(value);
-              }
-            } required />
+            HSN: 
+              <input 
+                className={"smallInputBox"}
+                type="number" 
+                min="0" 
+                value={itemHSNValue} 
+                onChange={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemHSNValue(value);
+                  }
+                } 
+              required />
           </label>
 
           <label>
-            GST: <input type="number" min="0" value={itemGSTValue} onChange={
-              (event) => {
-                const value = event.target.value;
-                setItemGSTValue(value);
-              }
-            } required />
+            GST: 
+              <input 
+                className={"smallInputBox"}
+                type="number" 
+                min="0" 
+                value={itemGSTValue} 
+                onChange={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemGSTValue(value);
+                  }
+                } 
+              required />
           </label>
         </div>
 
-        <div className={"menuButtons"}>
+        <div className={"smallPane"}>
           <input type="button" 
             value="Register New Item" 
             onClick={() => props.registerFormVisibility(true)}
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 601b8e9..eed0189 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -8,8 +8,6 @@
 
 @import "../../styles/theme";
 
-$inputBorders: 1px solid $altBorderColor;
-
 /* hide arrows in numericInputs */
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
@@ -17,135 +15,70 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-
 /* Firefox */
 input[type=number] {
   -moz-appearance: textfield;
 }
 
+@mixin formPane {
+  padding: 1.5rem;
+  box-sizing: border-box;
+  border: 1px solid pink;
 
-.formContainer {
-  /*border: 1px solid pink;*/
-  /*padding: 2rem;*/
-
-  height: 50vh;
-  border-radius: 1rem;
-  padding: 1.5rem 0;
-}
-
-.addNewItemForm .textInputs,
-.addNewItemForm .numericInputs
-label {
-  font-size: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
-.addNewItemForm {
+@mixin formWideLabel {
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
 
-  height: 100%;
-}
-
-.addNewItemForm .textInputs,
-.addNewItemForm .numericInputs {
-  border: $inputBorders;
-  width: 30%;
-  justify-content: space-around;
-}
-
-.addNewItemForm .numericInputs input {
-  width: 5.5rem;
+  border-bottom: 1px dotted $labelUnderlineColor;
+  padding: 0.8rem 0;
+  font-size: 1.5rem;
 }
 
-.addNewItemForm .menuButtons {
-  border: $inputBorders;
-  width: 15%;
-  justify-content: space-around;
+input {
+  box-sizing: border-box;
 }
 
-.addNewItemForm .menuButtons * {
+.formContainer {
+  padding: 1rem 0;
   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 {
+.threePaneForm {
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   justify-content: space-between;
-  padding: 0.8rem 0;
-  border-bottom: 1px dotted $labelUnderlineColor;
-}
-
-.RegisterItemFormContainer {
-  /*display: none;*/
-  position: fixed;
 
-  width: 95%;
-  height: 70vh;
-
-  left: 0;right: 0;
-  margin: auto;
-  top: 15vh;
-
-  background-color: $altBG;
+  height: 22rem;
+  width: 100%;
 }
 
-.RegisterItemForm .textInputs,
-.RegisterItemForm .numericInputs {
-  width: 40%;
+.threePaneForm div {
+  @include formPane();
 }
 
-.RegisterItemForm {
-  width: 95%;
-  height: 60vh;
-  margin: 1rem auto;
-  justify-content: space-around;
+.threePaneForm .widePane {
+  width: 27rem;
 }
 
-.RegisterItemFormContainer .menu {
-  position: absolute;
-  right: 1rem; bottom: 0.25rem;
+.threePaneForm .smallPane {
+  width: 15rem;
 }
 
-.RegisterItemFormContainer input[type=submit], 
-.RegisterItemFormContainer input[type=button] {
-  margin: 1rem;
+.threePaneForm label {
+  @include formWideLabel();
 }
 
-.MetaInfoForm {
-  width: 60%;
+.wideInputBox, .selectInputBox {
+  width: 12rem;
 }
 
-@media only screen and (max-device-width: 480px) {
-  .formContainer {
-    padding: 0.5rem;
-    height: auto;
-  }
-  .addNewItemForm {
-    flex-direction: column;
-  }
-  .addNewItemForm .textInputs,
-  .addNewItemForm .numericInputs,
-  .addNewItemForm .menuButtons {
-    width: 90%;
-    padding: 1rem;
-    margin: 1rem auto;
-  }
+.smallInputBox {
+  width: 6.5rem;
 }
+
diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js
index ca4d991..fca0916 100644
--- a/src/components/Form/RegisterItemForm.js
+++ b/src/components/Form/RegisterItemForm.js
@@ -11,24 +11,41 @@
 
 // TODO: Implement override protection
 
-import React, { useState } from "react";
-import axios from "axios";
+import React/*, { useState }*/ from "react";
+// import axios from "axios";
 import "./Form.scss";
 
 
-const RegisterItemForm = (props) => {
-  const [newItemNameValue, setNewItemNameValue] = useState("");
-  const [newItemDescValue, setNewItemDescValue] = useState("");
-  const [newItemPriceValue, setNewItemPriceValue] = useState(0.00);
-  const [newItemHSNValue, setNewItemHSNValue] = useState("");
-  const [newItemGSTValue, setNewItemGSTValue] = useState(props.defGSTValue);
+const RegisterItemForm = (/*props*/) => {
+//   const [newItemNameValue, setNewItemNameValue] = useState("");
+//   const [newItemDescValue, setNewItemDescValue] = useState("");
+//   const [newItemPriceValue, setNewItemPriceValue] = useState(0.00);
+//   const [newItemHSNValue, setNewItemHSNValue] = useState("");
+//   const [newItemGSTValue, setNewItemGSTValue] = useState(props.defGSTValue);
   // const [newItemBrandValue, setNewItemBrandValue] = useState("");
   // const [newItemTypeValue, setNewItemTypeValue] = useState("");
 
 
   return (
-    <div className={"formContainer RegisterItemFormContainer"}>
-      <form onSubmit={
+    <div className={"FloatingMenuBG"}>
+      <div className={"FloatingMenu"}>
+        <div className={"formContainer"}>
+          <form className={"twoPaneForm"}>
+            <div className={""}>
+            </div>
+
+            <div className={""}>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+
+  /*
+  return (
+    <div className={"formContainer"}>
+      <form className={"threePaneForm"} onSubmit={
           (event) => {
             event.preventDefault();
 
@@ -120,6 +137,7 @@ const RegisterItemForm = (props) => {
       </form>
     </div>
   );
+          */
 }
 
 export default RegisterItemForm;