From e54214c8ecdcf264a0f055ae24afe3299c0c7697 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sat, 26 Jun 2021 23:26:20 +0530
Subject: Fixed and styled ClientInfoDisplay

---
 src/components/Display/ClientInfoDisplay.js     | 30 ----------------------
 src/components/Display/ClientInfoDisplay.tsx    | 34 +++++++++++++++++++++++++
 src/components/Form/Form.scss                   | 25 +++++++++++++++---
 src/components/Form/People/SelectClientForm.tsx |  4 +--
 4 files changed, 57 insertions(+), 36 deletions(-)
 delete mode 100644 src/components/Display/ClientInfoDisplay.js
 create mode 100644 src/components/Display/ClientInfoDisplay.tsx

diff --git a/src/components/Display/ClientInfoDisplay.js b/src/components/Display/ClientInfoDisplay.js
deleted file mode 100644
index 7eb46d2..0000000
--- a/src/components/Display/ClientInfoDisplay.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * OpenBills - Self hosted browser app to generate and keep track of simple invoices
- * Version - 0
- * Licensed under the MIT license - https://opensource.org/licenses/MIT
- *
- * Copyright (c) 2021 Vidhu Kant Sharma
-*/
-
-import React from "react";
-import "./Display.scss";
-
-const ClientInfoDisplay = (props) => {
-  //console.log(props.client)
-  return (
-    <table>
-      <tbody>
-        <tr>
-          <td>Client Name:</td> 
-          <td>{props.client.Name}</td>
-        </tr>
-        <tr>
-          <td>Client Address:</td>
-          <td>{props.client.Address}</td>
-        </tr>
-      </tbody>
-    </table>
-  );
-}
-
-export default ClientInfoDisplay;
diff --git a/src/components/Display/ClientInfoDisplay.tsx b/src/components/Display/ClientInfoDisplay.tsx
new file mode 100644
index 0000000..ad65e40
--- /dev/null
+++ b/src/components/Display/ClientInfoDisplay.tsx
@@ -0,0 +1,34 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React from "react";
+import { Person } from "./../../interfaces";
+import "./Display.scss";
+
+interface Props {
+  client: Person
+}
+
+const ClientInfoDisplay: React.FC<Props> = (props) => {
+  return (
+    <table className={"ClientInfoDisplay"}>
+      <tbody>
+        <tr>
+          <td>Client Name:</td> 
+          <td>{props.client.Name}</td>
+        </tr>
+        <tr>
+          <td>Client Address:</td>
+          <td>{props.client.Address}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}
+
+export default ClientInfoDisplay;
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 393a2d3..6a9e747 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -122,15 +122,32 @@ input {
   @include formPane();
   width: 100%;
   min-height: 10rem;
+  margin-bottom: 1.5rem;
 }
 
-.DocumentInfoForm .DocumentInfoChild {
-  border: 1px solid white;
-  width: 40%;
+.DocumentInfoForm .documentInfoChild {
+  width: 24rem;
   height: 10rem;
-  font-size: $fontSize2;
+  font-size: $fontSize1;
+}
+
+.DocumentInfoForm .documentInfoChild label {
+  @include formWideLabel();
+  margin-bottom: 0.5rem;
+}
+
+.documentInfoChild table {
+  width: 100%;
 }
 
+.documentInfoChild td {
+  text-align: left;
+}
+
+/*.ClientInfoDisplay {
+  font-size: $fontSize1;
+}*/
+
 .MetaInfoForm {
   width: 60%;
 }
diff --git a/src/components/Form/People/SelectClientForm.tsx b/src/components/Form/People/SelectClientForm.tsx
index 373c387..f91bf41 100644
--- a/src/components/Form/People/SelectClientForm.tsx
+++ b/src/components/Form/People/SelectClientForm.tsx
@@ -18,7 +18,7 @@ interface Props {
 
 const SelectClientForm: React.FC<Props> = (props) => {
   // TODO: fix the default selectedClient
-  const [selectedClient, setSelectedClient] = useState<Person>({Name: "pp", Address: "pp"});
+  const [selectedClient, setSelectedClient] = useState<Person>({Name: "", Address: ""});
 
   const enterValuePrompt = "start typing here";
   const registerPrompt = "add new";
@@ -38,7 +38,7 @@ const SelectClientForm: React.FC<Props> = (props) => {
         e === formatter(i) && setSelectedClient(i))
   
   return (
-    <div className={"DocumentInfoChild"}>
+    <div className={"documentInfoChild"}>
       <label>
         Client Name:
           <select
-- 
cgit v1.2.3