From 70824fc0f9b68da5feea73baa2189b04b16f2bd8 Mon Sep 17 00:00:00 2001
From: TCKnickerbocker <74137392+TCKnickerbocker@users.noreply.github.com>
Date: Sun, 5 May 2024 22:06:52 -0500
Subject: [PATCH] bug fixes

---
 src/components/FoodItem.jsx       | 14 ++++++++------
 src/components/QueueItemPopup.jsx |  2 +-
 src/css/Buttons.module.css        |  2 +-
 src/css/ItemHeader.module.css     |  1 +
 src/css/ItemPageLayout.module.css |  9 +++++++--
 src/css/Queue.module.css          |  6 +++---
 src/css/QueueItem.module.css      | 10 +++++-----
 src/css/Search.module.css         |  8 ++++----
 src/pages/Login.js                |  8 ++++----
 src/pages/food/CreateFood.js      |  2 +-
 src/pages/recipe/EditRecipe.js    |  2 +-
 11 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/FoodItem.jsx b/src/components/FoodItem.jsx
index 1d4c1ac..fd3ac5a 100644
--- a/src/components/FoodItem.jsx
+++ b/src/components/FoodItem.jsx
@@ -219,12 +219,14 @@ export default function FoodItem({ food }) {
         </ListGroup.Item>
          
         <ListGroup.Item className={`${Layout.text} list-group-flush`}>
-          <div className={`${(isExpired) ? Layout.redText : ''} ${Layout.row}`}>
-        Expiration Date: {expirationDate ? expirationDate : "N/A"}
-          {isExpired?
-          <span className={`${(isExpired) ? Layout.redText : ''}`}>
-          Expired
-          </span> :<></>}
+          <div>
+            <div className={`${(isExpired) ? Layout.redText : ''} ${Layout.row}`}>
+              Expiration Date: {expirationDate ? expirationDate : "N/A"}
+            </div>
+            {isExpired ?
+            <div className={`${(isExpired) ? Layout.redText : ''}`}>
+              Expired
+            </div> :<></>}
           </div>
          </ListGroup.Item>
       </ListGroup>
diff --git a/src/components/QueueItemPopup.jsx b/src/components/QueueItemPopup.jsx
index b49a5df..a8da247 100644
--- a/src/components/QueueItemPopup.jsx
+++ b/src/components/QueueItemPopup.jsx
@@ -40,7 +40,7 @@ function IngredientFoodItem({ ingredient }) {
   
 
   return <ListGroup.Item style={ 
-      comparisonStatus < 0 ? {color: "red"} 
+      comparisonStatus <= 0 ? {color: "red"} 
       : (comparisonStatus > 0 ? {color: "green"} : {}) }>
       <Row>
       <Col>{ ingredient ? ingredient.name + ingrAmountUnit(ingredient) : ''}</Col>
diff --git a/src/css/Buttons.module.css b/src/css/Buttons.module.css
index 2e56eb5..d3140a0 100644
--- a/src/css/Buttons.module.css
+++ b/src/css/Buttons.module.css
@@ -10,7 +10,7 @@
 }
 .addButton:hover{
    
-    background-color:  #35b148;
+    background-color:  #4cba68;
  }
 .editButton{
     color:  #0d2714;
diff --git a/src/css/ItemHeader.module.css b/src/css/ItemHeader.module.css
index 9f3bde6..4b9d607 100644
--- a/src/css/ItemHeader.module.css
+++ b/src/css/ItemHeader.module.css
@@ -5,6 +5,7 @@
     display:flex;
     justify-content: center;
     align-items: flex-start;
+    margin: 1em;
 }
 
 .image {
diff --git a/src/css/ItemPageLayout.module.css b/src/css/ItemPageLayout.module.css
index d29392b..0c323d5 100644
--- a/src/css/ItemPageLayout.module.css
+++ b/src/css/ItemPageLayout.module.css
@@ -108,10 +108,15 @@
     /* box-shadow: 10px 0px 10px 1px #e7e8c9; */
 } 
 
-/* For the expired */
+/* For expired foods */
 .redText{ 
     color: #b85144; 
-    margin-right: 1em;;
+    margin-right: 1em;
+    display:inline-block;
+}
+.inlineBlockWithRightMargin{
+    margin-right: 1em;
+    display:inline-block;  
 }
 
 .subtitle{
diff --git a/src/css/Queue.module.css b/src/css/Queue.module.css
index f6b6348..02c1d27 100644
--- a/src/css/Queue.module.css
+++ b/src/css/Queue.module.css
@@ -97,7 +97,7 @@
 }
 .addButton{
     color:  #0d2714;
-    background-color: #58b16e;
+    background-color: #54c370;
     padding: 0.5em;
     margin: 0.5em;
     width: 2.5em;
@@ -139,7 +139,7 @@
 }
 .viewButton{
     color:  #0d2714;
-    background-color: #58b16e;
+    background-color: #54c370;
     padding: 0.5em;
     margin: 0.5em;
     border-radius: 5px;
@@ -160,7 +160,7 @@
 }
 .enqueueButton{
     color:  #0d2714;
-    background-color: #58b16e;
+    background-color: #54c370;
     padding: 0.5em;
     border-radius: 5px;
     border: none;
diff --git a/src/css/QueueItem.module.css b/src/css/QueueItem.module.css
index 960435e..8b892a4 100644
--- a/src/css/QueueItem.module.css
+++ b/src/css/QueueItem.module.css
@@ -79,7 +79,7 @@
 
 .deleteButton{
     color:  #0d2714;
-    background-color: rgb(238, 163, 163);
+    background-color:#e37e5f;
     padding: 0.5em;
     margin: 0.5em;
     border-radius: 5px;
@@ -88,12 +88,12 @@
 
 }
 .deleteButton:hover{
-    background-color: #cf7e7e;
+    background-color: #d96a56;
 }
 
 .addButton{
     color:  #0d2714;
-    background-color: #58b16e;
+    background-color: #54c370;
     padding: 0.5em;
     margin: 0.5em;
     width: 2.5em;
@@ -135,7 +135,7 @@
 }
 .viewButton{
     color:  #0d2714;
-    background-color: #58b16e;
+    background-color: #54c370;
     padding: 0.5em;
     margin: 0.5em;
     border-radius: 5px;
@@ -156,7 +156,7 @@
 }
 .enqueueButton{
     color:  #0d2714;
-    background-color: #58b16e;
+    background-color: #54c370;
     padding: 0.5em;
     border-radius: 5px;
     border: none;
diff --git a/src/css/Search.module.css b/src/css/Search.module.css
index f4e8f4f..4debc21 100644
--- a/src/css/Search.module.css
+++ b/src/css/Search.module.css
@@ -11,7 +11,7 @@
     align-items: center;
 }
 .searchIconContainer{
-    outline: 1px solid #58b16e;
+    outline: 1px solid #54c370;
     background-color: #00000000;
     display: flex;
     flex-direction: row;
@@ -125,9 +125,9 @@
 }
 .searchbutton{
     color:  #0d2714;
-    background-color: #58b16e;
-    border: 5px solid #58b16e;
-    box-shadow: 0px 0px 0px 0px #58b16e;
+    background-color: #54c370;
+    border: 5px solid #54c370;
+    box-shadow: 0px 0px 0px 0px #54c370;
     height: 30px;
     padding: 5px;
     padding: 1em;
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 5eeb907..622fb03 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -26,11 +26,11 @@ export default function Login() {
         <h2 className= { styles.h2}>A Virtual Pantry Manager & Recipe Tracker!</h2>
         <h3 className= { styles.h3}>Login/Signup</h3>
         <div id={styles.buttons}>
-            <button className={styles.button+' '+styles.apple} onClick={loginOnClick('apple')}>Apple</button>
-            <button className={styles.button+' '+styles.google} onClick={loginOnClick('google')}>Google</button>
+            {/* <button className={styles.button+' '+styles.apple} onClick={loginOnClick('apple')}>Apple</button> */}
+            {/* <button className={styles.button+' '+styles.google} onClick={loginOnClick('google')}>Google</button> */}
             <button className={styles.button+' '+styles.microsoft} onClick={loginOnClick('aad')}>Microsoft</button>
-            <button className={styles.button+' '+styles.twitter} onClick={loginOnClick('twitter')}>Twitter / X</button>
-            <button className={styles.button+' '+styles.facebook} onClick={loginOnClick('facebook')}>Facebook</button>
+            {/* <button className={styles.button+' '+styles.twitter} onClick={loginOnClick('twitter')}>Twitter / X</button> */}
+            {/* <button className={styles.button+' '+styles.facebook} onClick={loginOnClick('facebook')}>Facebook</button> */}
             <button className={styles.button+' '+styles.github} onClick={loginOnClick('github')}>Github</button>
         </div>
     </Stack>
diff --git a/src/pages/food/CreateFood.js b/src/pages/food/CreateFood.js
index 8979c61..6a0a89a 100644
--- a/src/pages/food/CreateFood.js
+++ b/src/pages/food/CreateFood.js
@@ -96,7 +96,7 @@ export default function CreateFood() {
     ) : 
     hasSearched && results.length === 0 && (
         <Alert key="danger" variant="danger" className={searchStyle.centerContents + " " + searchStyle.alertBar}>
-            No search results for query {food}
+            No results for "{food}"
         </Alert>
     )
     }
diff --git a/src/pages/recipe/EditRecipe.js b/src/pages/recipe/EditRecipe.js
index 253cc4e..c3d5f23 100644
--- a/src/pages/recipe/EditRecipe.js
+++ b/src/pages/recipe/EditRecipe.js
@@ -131,7 +131,7 @@ export default function EditRecipe() {
         <div>
             <div className={Layout.row+" "+Layout.ajustright}>
         </div>
-        <div className={Layout.row}>
+        <div className={Layout.centerrow}>
         <RemoveButton onClick={removeRecipe}/>
         <SaveButton onClick={editRecipe}/>
         </div>