styled and added basic functionality to TransportForm

2 files changed, 56 insertions, 32 deletions

diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 06d15ea..7642f75 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -160,14 +160,34 @@ input {
 }
 
 .TransportForm {
-  padding: 2rem;
+  padding: 1rem;
+  font-size: $fontSize1 + 0.25;
+}
+
+.TransportForm label {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  min-width: 90%;
+}
+
+.TransportForm .inputs {
+  height: 80%;
 
   display: flex;
   flex-direction: column;
-  justify-content: center /*space-between*/;
+  justify-content: space-around;
   align-items: center;
 }
 
+.TransportForm .menu {
+  position: absolute;
+
+  right: 1rem;
+  bottom: 1rem;
+  //border: 1px solid gray;
+}
+
 /*.ClientInfoDisplay {
   font-size: $fontSize1;
 }*/
diff --git a/src/components/Form/Transport/TransportForm.tsx b/src/components/Form/Transport/TransportForm.tsx
index 0611cc1..60dfee3 100644
--- a/src/components/Form/Transport/TransportForm.tsx
+++ b/src/components/Form/Transport/TransportForm.tsx
@@ -6,11 +6,12 @@
  * Copyright (c) 2021 Vidhu Kant Sharma
 */
 
-import React, { useState } from "react";
+import React, { useState, Dispatch, SetStateAction } from "react";
 import { Transport } from "./../../../interfaces"
 
 interface Props {
-  setVisibility: any // this component's visibility
+  setVisibility: Dispatch<SetStateAction<boolean>> // this component's visibility
+  setTransporter: Dispatch<SetStateAction<Transport>>
 }
 
 const TransportForm: React.FC<Props> = (props) => {
@@ -23,7 +24,6 @@ const TransportForm: React.FC<Props> = (props) => {
   const hideSelf = () =>
     props.setVisibility(false);
 
-
   const closeOnBGClicked = (event: any) =>
     event.target.className === "floatingMenuBG" && hideSelf();
 
@@ -37,7 +37,7 @@ const TransportForm: React.FC<Props> = (props) => {
       GSTIN: transporterGSTIN,
       Builty: builtyNumber
     }
-    console.log(newTransport);
+    props.setTransporter(newTransport);
 
     hideSelf();
   }
@@ -45,37 +45,41 @@ const TransportForm: React.FC<Props> = (props) => {
   return (
     <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
       <form className={"smallFloatingMenu TransportForm"} onSubmit={handleSubmit}>
-        <label>
-          Transporter Name: <input className={"wideInputBox"} type="text" value={transporterName} onChange={
-              (event) => (setTransporterName(event.target.value))
-            }/>
-        </label>
+        <div className={"inputs"}>
+          <label>
+            Transporter Name: <input className={"wideInputBox"} type="text" value={transporterName} onChange={
+                (event) => (setTransporterName(event.target.value))
+              }/>
+          </label>
 
-        <label>
-          Vehicle Number: <input className={"wideInputBox"} type="text" value={vehicleNum} onChange={
-              (event) => (setVehicleNum(event.target.value))
-              } required />
-        </label>
+          <label>
+            Vehicle Number: <input className={"wideInputBox"} type="text" value={vehicleNum} onChange={
+                (event) => (setVehicleNum(event.target.value))
+                } required />
+          </label>
 
-        <label>
-          Transport Method: <input className={"wideInputBox"} type="text" value={transportMethod} onChange={
-              (event) => (setTransportMethod(event.target.value))
-            } required />
-        </label>
+          <label>
+            Transport Method: <input className={"wideInputBox"} type="text" value={transportMethod} onChange={
+                (event) => (setTransportMethod(event.target.value))
+              } required />
+          </label>
 
-        <label>
-          Transporter GSTIN: <input className={"wideInputBox"} type="text" value={transporterGSTIN} onChange={
-              (event) => (setTransporterGSTIN(event.target.value))
-            }/>
-        </label>
+          <label>
+            Transporter GSTIN: <input className={"wideInputBox"} type="text" value={transporterGSTIN} onChange={
+                (event) => (setTransporterGSTIN(event.target.value))
+              }/>
+          </label>
 
-        <label>
-          Builty Number: <input className={"wideInputBox"} type="text" value={builtyNumber} onChange={
-              (event) => (setBuiltyNumber(event.target.value))
-            }/>
-        </label>
+          <label>
+            Builty Number: <input className={"wideInputBox"} type="text" value={builtyNumber} onChange={
+                (event) => (setBuiltyNumber(event.target.value))
+              }/>
+          </label>
+        </div>
         
-        <input type="submit" value="ok"/>
+        <div className={"menu"}>
+          <input type="submit" value="ok"/>
+        </div>
       </form>
     </div>
   );