From 23fe5add6dcac796361cd5cc295383f36ac78718 Mon Sep 17 00:00:00 2001
From: Savannah Smith <s.ella@me.com>
Date: Mon, 9 Dec 2024 12:10:23 -0700
Subject: [PATCH] lint: lint

---
 web/src/app.css                        | 44 ++++++++++---------
 web/src/components/AccountSwitcher.tsx |  2 +-
 web/src/components/ItemModal.tsx       | 61 ++++++++++++++------------
 web/src/components/Table.tsx           |  2 +-
 4 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 2c77499..08befcc 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -30,9 +30,11 @@
     0% {
         transform: translateY(0);
     }
+
     50% {
         transform: translateY(10px);
     }
+
     100% {
         transform: translateY(0px);
     }
@@ -45,7 +47,7 @@ header {
     justify-content: space-between;
     height: fit-content;
     /* 20px top, 16px right, 40px bottom, 16px left */
-    padding: 20px 16px 40px 16px; 
+    padding: 20px 16px 40px 16px;
     /* Background is picoCSS sand to match the theme */
     background-color: #6F7887;
 
@@ -64,7 +66,8 @@ header {
 }
 
 .clickableRow:hover td {
-    background-color: #2A3140; /* Soft orange-beige background */
+    background-color: #2A3140;
+    /* Soft orange-beige background */
     transition: background-color 0.2s ease, border 0.2s ease;
     cursor: pointer;
 }
@@ -122,9 +125,9 @@ header {
     display: flex;
     justify-content: center;
     align-items: center;
-  }
-  
-  .modal-content {
+}
+
+.modal-content {
     background-color: #202632;
     padding: 20px;
     border-radius: 8px;
@@ -134,35 +137,34 @@ header {
     flex-direction: column;
     gap: 20px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
-  }
-  
-  /* h2 {
+}
+
+/* h2 {
     margin: 0;
     font-size: 1.5rem;
   } */
-  
-  .modal-body {
+
+.modal-body {
     display: flex;
     gap: 20px;
-  }
-  
-  .product-image {
+}
+
+.product-image {
     width: 120px;
     height: 120px;
     object-fit: cover;
     border-radius: 8px;
-  }
-  
-  .product-details {
+}
+
+.product-details {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 10px;
-  }
-  
-  .edit-inventory-container {
+}
+
+.edit-inventory-container {
     display: flex;
     align-items: center;
-    gap
-    }  
+}
\ No newline at end of file
diff --git a/web/src/components/AccountSwitcher.tsx b/web/src/components/AccountSwitcher.tsx
index f5a1fc2..22c949f 100644
--- a/web/src/components/AccountSwitcher.tsx
+++ b/web/src/components/AccountSwitcher.tsx
@@ -14,7 +14,7 @@ export const AccountSwitcher: React.FC<Props> = ({ companyName, avatarUrl }) =>
         className='rounded-circle me-2'
         style={{ width: '45px', height: '45px' }}
       />
-      <div style={{ padding: '10px', color: 'black', background: '#B3B9C5', borderRadius: '8px', height: '45px', marginLeft: "10px"}}>{companyName}</div>
+      <div style={{ padding: '10px', color: 'black', background: '#B3B9C5', borderRadius: '8px', height: '45px', marginLeft: '10px' }}>{companyName}</div>
     </div>
   )
 }
diff --git a/web/src/components/ItemModal.tsx b/web/src/components/ItemModal.tsx
index e16349e..fd9f361 100644
--- a/web/src/components/ItemModal.tsx
+++ b/web/src/components/ItemModal.tsx
@@ -56,39 +56,42 @@ export const ItemModal: React.FC<ItemModalProps> = ({ item, isOpen, onClose }) =
   }
 
   return (
-    <div className="modal-overlay">
-  <div className="modal-content">
-    <h2>{item.productName}</h2>
-    <div className="modal-body">
-      <img className="product-image" src={item.imageUrl} alt={item.productName} />
-      <div className="product-details">
-        <p>SKU: {item.sku}</p>
-        <div className="edit-inventory-container">
-          <label>Total Inventory:</label>
-          {isEditing ? (
-            <div className="inventory-editor">
-              <button onClick={handleDecrement}>-{interval}</button>
-              <input style={{ paddingRight: '5px' }}
-                type="number"
-                value={inventory}
-                onChange={(e) => setInventory(Number(e.target.value))}
-              />
-              <button onClick={handleIncrement}>+{interval}</button>
-              <button onClick={handleSave}>Save</button>
+    <div className='modal-overlay'>
+      <div className='modal-content'>
+        <h2>{item.productName}</h2>
+        <div className='modal-body'>
+          <img className='product-image' src={item.imageUrl} alt={item.productName} />
+          <div className='product-details'>
+            <p>SKU: {item.sku}</p>
+            <div className='edit-inventory-container'>
+              <label>Total Inventory:</label>
+              {isEditing
+                ? (
+                  <div className='inventory-editor'>
+                    <button onClick={handleDecrement}>-{interval}</button>
+                    <input
+                      style={{ paddingRight: '5px' }}
+                      type='number'
+                      value={inventory}
+                      onChange={(e) => setInventory(Number(e.target.value))}
+                    />
+                    <button onClick={handleIncrement}>+{interval}</button>
+                    <button onClick={handleSave}>Save</button>
+                  </div>
+                  )
+                : (
+                  <span>
+                    {inventory} <FaPencilAlt className='edit-icon' onClick={handleEditClick} />
+                  </span>
+                  )}
             </div>
-          ) : (
-            <span>
-              {inventory} <FaPencilAlt className="edit-icon" onClick={handleEditClick} />
-            </span>
-          )}
+          </div>
         </div>
+        <button className='close-button' onClick={onClose}>
+          Close
+        </button>
       </div>
     </div>
-    <button className="close-button" onClick={onClose}>
-      Close
-    </button>
-  </div>
-</div>
 
   )
 }
diff --git a/web/src/components/Table.tsx b/web/src/components/Table.tsx
index 4d1f66e..e356bbc 100644
--- a/web/src/components/Table.tsx
+++ b/web/src/components/Table.tsx
@@ -79,7 +79,7 @@ export const Table: React.FC<Props> = ({ items, onRowClick }) => {
   })
 
   return (
-    <div className='p-2' style={{paddingRight:'20px', paddingLeft:'20px'}}>
+    <div className='p-2' style={{ paddingRight: '20px', paddingLeft: '20px' }}>
       <table>
         <thead>
           {table.getHeaderGroups().map(headerGroup => (