Fix style for add ingredients sidebar

views/dashboardPage/components/addIngredients.ejs

@@ -8,7 +8,7 @@
         </button>
     </div>
     
-    <h1>Add New Ingredients</h1>
+    <h2>Available Ingredients</h2>
 
     <div id="addIngredientList"></div>
 
@@ -22,11 +22,9 @@
         <div class="lineBorder"></div>
     </div>
 
-    <div class="buttonBox">
-        <button class="button addIngredientsBtn" onclick="newIngredientComp.display()">Create New</button>
+    <button id="addIngredientsBtn" class="button" onclick="addIngredientsComp.submit()">Finish</button>
 
-        <button class="button addIngredientsBtn" onclick="addIngredientsComp.submit()">Add</button>
-    </div>
+    <button class="button2Link" onclick="newIngredientComp.display()">Can't find what you're looking for?  Create it.</button>
 
     <template id="addIngredientsCategory">
         <div class="addIngredientsCategory">

views/dashboardPage/components/components.css

@@ -2,6 +2,16 @@
     margin-bottom: 0;
 }
 
+.button2Link{
+    background: none;
+    border: none;
+    color: blue;
+    text-decoration: underline;
+    font-size: 18px;
+    margin-top: auto;
+    cursor: pointer;
+}
+
 /* Menu */
 .menu{
     display: flex;
@@ -218,10 +228,19 @@
 /* Add Ingredients */
 #addIngredients{
     flex-direction: column;
+    align-items: center;
     width: 100%;
+    text-align: center;
 }
 
+    #addIngredients > *{
+        width: 100%;
+    }
+
     #addIngredientList{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         overflow-y: auto;
         margin-bottom: 15px;
         max-height: 35%;
@@ -279,9 +298,9 @@
                 color: white;
             }
 
-    .buttonBox{
-        display: flex;
-        justify-content: space-between;
+    #addIngredientsBtn{
+        width: 25%;
+        margin-left: auto;
     }
 
 /* Ingredient Details */

views/shared/shared.css

@@ -67,11 +67,9 @@ form{
     padding: 10px 29px;
     color: white;
     cursor: pointer;
-    font-size: 25px;
     transition: 0.3s;
     text-align: center;
     font-size: 18px;
-    cursor: pointer;
     font-weight: bold;
     margin-right: 33px;
 }