designed DisplayItem and ItemsDisplay so it now renders a pretty table

4 files changed, 145 insertions, 21 deletions

diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
index 1b89173..a3bc406 100644
--- a/src/components/Display/Display.css
+++ b/src/components/Display/Display.css
@@ -1,3 +1,32 @@
+@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 */
+.ItemsDisplay,
+.ItemsDisplay table {
+  width: 100%; }
+
 .ItemsDisplay {
-  margin-top: 3rem;
-  margin-bottom: 3rem; }
+  border-right: 1px dashed lightblue;
+  border-left: 1px dashed lightblue;
+  padding: 1rem 0.5rem; }
+
+.ItemsDisplay td {
+  text-align: center;
+  border-bottom: 1px solid lightblue; }
+
+.ItemsDisplay .leftAlign {
+  text-align: left; }
+
+.ItemsDisplay .legend {
+  background-color: #383A59; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index e3d8b7c..25bb331 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -1,6 +1,27 @@
+@import "../../styles/theme";
+
+.ItemsDisplay,
+.ItemsDisplay table {
+  width: 100%;
+}
+
 .ItemsDisplay {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
+  $sideBorder: 1px dashed $tableBorderColor;
+  border-right: $sideBorder;
+  border-left: $sideBorder;
+
+  padding: 1rem 0.5rem;
+}
+
+.ItemsDisplay td {
+  text-align: center;
+  border-bottom: 1px solid $labelUnderlineColor;
+}
+
+.ItemsDisplay .leftAlign {
+  text-align: left;
+}
 
-  
+.ItemsDisplay .legend {
+  background-color: $altBG;
 }
diff --git a/src/components/Display/DisplayItem.js b/src/components/Display/DisplayItem.js
new file mode 100644
index 0000000..dae87a3
--- /dev/null
+++ b/src/components/Display/DisplayItem.js
@@ -0,0 +1,40 @@
+import React from "react";
+import "./Display.css";
+
+const DisplayItem = (props) => {
+  const itemNumber = props.itemNumber;
+  const item = props.item;
+  // const ID = props.ID;
+  // const name = props.Model;
+  // const desc = props.Description;
+  // const QTY = props.Quantity;
+  // const price = props.Price;
+  // const discount = props.Discount;
+  // const GST = props.GST;
+
+  return (
+    <tr>
+      <td>{itemNumber}</td>
+      <td className={"leftAlign"}>{item.Model}</td>
+      <td className={"leftAlign"}>{item.Description}</td>
+      <td>{item.Quantity}</td>
+      <td>{item.Price}</td>
+      <td>{item.Discount}</td>
+      <td>{item.GST}</td>
+    </tr>
+  );
+  /*return (
+    <ul className={"DisplayItem"}>
+      <li className={"num"}>{itemNumber}</li>
+
+      <li className={"text"}>{item.Model}</li>
+      <li className={"text"}>{item.Description}</li>
+      <li className={"num"}>{item.Quantity}</li>
+      <li className={"num"}>{item.Price}</li>
+      <li className={"num"}>{item.Discount}</li>
+      <li className={"num"}>{item.GST}</li>
+    </ul>
+  );*/
+}
+
+export default DisplayItem;
diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js
index 766d16f..7026530 100644
--- a/src/components/Display/ItemsDisplay.js
+++ b/src/components/Display/ItemsDisplay.js
@@ -1,29 +1,63 @@
 import React from "react";
 import "./Display.css";
+import DisplayItem from "./DisplayItem";
 
 const ItemsDisplay = (props) => {
   const items = props.items;
+  let itemNumber = 0;
+
 
   return (
-    <div className={"ItemsDisplay"}>
-      <ol>
-        {items.map( (item) => {
+    <table className={"ItemsDisplay"}>
+      <tr className="legend">
+        <th>S. Num</th>
+        <th className={"leftAlign"}>Item</th>
+        <th className={"leftAlign"}>Description</th>
+        <th>Quantity(NOS)</th>
+        <th>Price</th>
+        <th>Discount(%)</th>
+        <th>GST(%)</th>
+      </tr>
+
+      {items.map( 
+        (item) => {
+          itemNumber++
           return (
-            <li>
-              <ul>
-                <li key={item.Model}>{item.Model}</li>
-                <li key={item.Description}>{item.Description}</li>
-                <li key={item.Quantity}>{item.Quantity}</li>
-                <li key={item.Price}>{item.Price}</li>
-                <li key={item.Discount}>{item.Discount}</li>
-                <li key={item.GST}>{item.GST}</li>
-              </ul>
-            </li>
+            <DisplayItem itemNumber={itemNumber} item={item}/>
           );
-        })}
-      </ol>
+        }
+      )}
+    </table>
+  )
+
+
+  /*return (
+    <div className={"ItemsDisplay"}>
+      <div className={"legend"}>
+        <ul>
+          <li className={"num"}>S. Num.</li>
+          <li className={"text"}>Name</li>
+          <li className={"text"}>Description</li>
+          <li className={"num"}>Quantity</li>
+          <li className={"num"}>Price</li>
+          <li className={"num"}>Discount</li>
+          <li className={"num"}>GST</li>
+        </ul>
+      </div>
+
+      <div className={"items"}>
+        {items.map( 
+          (item) => {
+            itemNumber++
+            return (
+              <DisplayItem itemNumber={itemNumber} item={item}/>
+            );
+          }
+        )}
+      </div>
+
     </div>
-  );
+  );*/
 }
 
 export default ItemsDisplay;