From 9c1020a231e124ae9886beac3fcf91fc35f35b59 Mon Sep 17 00:00:00 2001
From: Avery Jacobsen <ajacobsen20@huskers.unl.edu>
Date: Thu, 31 Aug 2023 11:15:52 -0500
Subject: [PATCH] Formatted html with css (may adjust later)

---
 .../src/__snapshots__/app.test.js.snap        | 103 +++++++++++++-----
 .../src/features/inventory/inventory.js       |  37 ++++---
 .../features/inventory/inventory.module.css   |  46 ++++++++
 3 files changed, 143 insertions(+), 43 deletions(-)
 create mode 100644 inventory-app/src/features/inventory/inventory.module.css

diff --git a/inventory-app/src/__snapshots__/app.test.js.snap b/inventory-app/src/__snapshots__/app.test.js.snap
index 2e4e2bf..1ad3add 100644
--- a/inventory-app/src/__snapshots__/app.test.js.snap
+++ b/inventory-app/src/__snapshots__/app.test.js.snap
@@ -4,39 +4,86 @@ exports[`the app has one labeled button that displays the value from the store 1
 <div>
   <main>
     <header>
-      <label>
+      <label
+        class="title"
+      >
         App Title
       </label>
     </header>
-    <table>
-      <thead>
-        <tr>
-          <th
-            colspan="2"
+    <div>
+      <p
+        class="header"
+      >
+         Menu 
+      </p>
+      <p
+        class="menu"
+      >
+        <p
+          class="menuitems"
+        >
+           Item 1 
+          <br />
+          <button
+            class="menuitems"
           >
-            Menu (Two items)
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            Item 1 
-            <button>
-               Item 1 Button 
-            </button>
-          </td>
-          <td>
-            Item 2 
-            <button>
-               Item 2 Button 
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+             Add 
+          </button>
+          <button
+            class="menuitems"
+          >
+             Delete 
+          </button>
+        </p>
+        <p
+          class="menuitems"
+        >
+           Item 2 
+          <br />
+          <button
+            class="menuitems"
+          >
+             Add 
+          </button>
+          <button
+            class="menuitems"
+          >
+             Delete 
+          </button>
+        </p>
+        <p
+          class="menuitems"
+        >
+           Item 3 
+          <br />
+          <button
+            class="menuitems"
+          >
+             Add 
+          </button>
+          <button
+            class="menuitems"
+          >
+             Delete 
+          </button>
+        </p>
+      </p>
+    </div>
     <hr />
-    Inventory
+    <label
+      class="header"
+    >
+      Inventory
+    </label>
+    <div
+      class="inventorydiv"
+    >
+      <label
+        class="userinventory"
+      >
+         (Inventory Here)
+      </label>
+    </div>
   </main>
 </div>
 `;
diff --git a/inventory-app/src/features/inventory/inventory.js b/inventory-app/src/features/inventory/inventory.js
index d550386..c89c333 100644
--- a/inventory-app/src/features/inventory/inventory.js
+++ b/inventory-app/src/features/inventory/inventory.js
@@ -1,26 +1,33 @@
+import styles from './inventory.module.css';
+
 export function Inventory() {
   return (
     <main>
       <header>
-        <label>
+        <label className={styles.title}>
           App Title
         </label>
       </header>
-      <table>
-        <thead>
-          <tr>
-            <th colspan="2">Menu (Two items)</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Item 1 <button> Item 1 Button </button></td>
-            <td>Item 2 <button> Item 2 Button </button></td>
-          </tr>
-        </tbody>
-      </table>
+      <div>
+        <p className={styles.header}> Menu </p>
+        <p className={styles.menu}>
+          <p className={styles.menuitems}> Item 1 <br></br>
+            <button className={styles.menuitems}> Add </button>
+            <button className={styles.menuitems} > Delete </button></p>
+          <p className={styles.menuitems}> Item 2 <br></br>
+            <button className={styles.menuitems}> Add </button>
+            <button className={styles.menuitems}> Delete </button></p>
+          <p className={styles.menuitems}> Item 3 <br></br>
+            <button className={styles.menuitems}> Add </button>
+            <button className={styles.menuitems}> Delete </button></p>
+        </p>
+      </div>
+
       <hr></hr>
-      Inventory
+      <label className={styles.header}>Inventory</label>
+      <div className={styles.inventorydiv}>
+        <label className={styles.userinventory}> (Inventory Here)</label>
+      </div>
     </main>
   );
 }
diff --git a/inventory-app/src/features/inventory/inventory.module.css b/inventory-app/src/features/inventory/inventory.module.css
new file mode 100644
index 0000000..98a2778
--- /dev/null
+++ b/inventory-app/src/features/inventory/inventory.module.css
@@ -0,0 +1,46 @@
+.menu {
+  display: flex;
+  flex-direction: row;
+  font-size: large;
+}
+
+.menuitems {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  margin: auto;
+  font-size: large;
+}
+
+.title {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  font-weight: bold;
+  font-size: x-large;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  font-weight: bold;
+  font-size: large;
+}
+
+.userinventory {
+  display: flex;
+  width: 75%;
+  justify-content: center;
+  text-align: center;
+  font-size: large;
+  color: rgba(29 95 40 / 100%);
+  border: solid;
+}
+
+.inventorydiv {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
-- 
GitLab