Update style on the sidebars

views/dashboardPage/ejs/sidebars/editIngredient.ejs

@@ -30,5 +30,5 @@
 
     <div class="lineBorder"></div>
 
-    <button id="editIngSubmit" class="button">SUBMIT</button>
+    <button id="editIngSubmit" class="sidebarButton">SUBMIT</button>
 </div>

views/dashboardPage/ejs/sidebars/editRecipe.ejs

@@ -35,8 +35,8 @@
     <div class="lineBorder"></div>
 
     <div class="buttonBox">
-        <button id="editRecipeSubmit" class="button">UPDATE</button>
-        <button id="editRecipeCancel" class="button">CANCEL</button>
+        <button id="editRecipeSubmit" class="sidebarButton">UPDATE</button>
+        <button id="editRecipeCancel" class="sidebarButton">CANCEL</button>
     </div>
 
     <template id="editRecipeIng">

views/dashboardPage/ejs/sidebars/newIngredient.ejs

@@ -73,7 +73,7 @@
         </select>
     </label>
 
-    <button id="submitNewIng" class="button">CREATE</button>
+    <button id="submitNewIng" class="sidebarButton">CREATE</button>
 
     <div class="lineBorder"></div>
 

views/dashboardPage/ejs/sidebars/newOrder.ejs

@@ -36,7 +36,7 @@
 
     <div id="selectedIngredientList"></div>
 
-    <button id="submitNewOrder" class="button">CREATE</button>
+    <button id="submitNewOrder" class="sidebarButton">CREATE</button>
 
     <button id="orderFileUpload" class="linkButton">Or, upload a spreadsheet</button>
 

views/dashboardPage/ejs/sidebars/newTransaction.ejs

@@ -14,7 +14,7 @@
 
     <div id="newTransactionRecipes" class="newTransactionRecipes"></div>
 
-    <button id="submitNewTransaction" class="button">Create</button>
+    <button id="submitNewTransaction" class="sidebarButton">Create</button>
 
     <button id="transactionFileUpload" class="linkButton">Or, upload a spreadsheet</button>
 

views/dashboardPage/ejs/sidebars/orderFilter.ejs

@@ -27,5 +27,5 @@
 
     <div class="lineBorder"></div>
 
-    <button id="orderFilterSubmit" class="button">SUBMIT</button>
+    <button id="orderFilterSubmit" class="sidebarButton">SUBMIT</button>
 </div>

views/dashboardPage/ejs/sidebars/transactionFilter.ejs

@@ -27,5 +27,5 @@
 
     <div class="lineBorder"></div>
 
-    <button id="transFilterSubmit" class="button">SUBMIT</button>
+    <button id="transFilterSubmit" class="sidebarButton">SUBMIT</button>
 </div>

views/dashboardPage/sidebars.css

@@ -47,7 +47,7 @@
     .menuHead button{
         background: none;
         border-style: none;
-        color: white;
+        color: rgb(255, 99, 107);
         font-size: 35px;
         cursor: pointer;
         outline: none;
@@ -136,6 +136,30 @@
     margin: 0;
 }
 
+.sidebarButton{
+    display: initial;
+    background: rgb(179, 191, 209);
+    border: none;
+    text-decoration: none;
+    padding: 2px 10px;
+    color: rgb(255, 99, 107);
+    cursor: pointer;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    min-width: 100px;
+    margin: 5px;
+    max-height: 52px;
+}
+
+    .sidebarButton:hover{
+        background: rgb(240, 252, 255);
+    }
+
+    .sidebarButton:active{
+        background: rgb(0, 27, 45);
+    }
+
 .sidebar{
     display: flex;
     width: 25vw;
@@ -144,7 +168,8 @@
     padding: 25px;
     transition: width 0.2s;
     overflow: hidden;
-    box-shadow: -1px 0px 10px gray;
+    background: rgb(0, 27, 45);
+    color: rgb(255, 99, 107);
 }
 
 .sidebarWide{
@@ -180,7 +205,7 @@
     border: none;
     cursor: pointer;
     padding: 3px;
-    border-radius: 5px;
+    color: rgb(255, 99, 107);
 }
 
     .iconButton:hover{
@@ -264,24 +289,29 @@ EDIT INGREDIENT
 
         .unitButton{
             margin: 5px;
-            padding: 3px;
-            background: none;
-            border: 1px solid black;
+            padding: 5px;
+            background: rgb(179, 191, 209);
+            border: none;
             font-size: 15px;
             font-weight: bold;
             cursor: pointer;
-            border-radius: 5px;
+            color: rgb(255, 99, 107);
         }
 
             .unitButton:hover{
-                background: rgb(0, 27, 45);
-                color: white;
+                background: rgb(240, 252, 255);
             }
 
             .unitActive{
-                background: rgb(255, 99, 107);
+                /* background: rgb(255, 99, 107); */
+                background: rgb(0, 27, 45);
             }
 
+                .unitActive:hover{
+                    background: rgb(0, 27, 45);
+                    cursor: default;
+                }
+
 /* 
 Recipe Details 
 */
@@ -405,7 +435,6 @@ EDIT RECIPE
         }
 
             .editRecipeIng button{
-                color: white;
                 position: absolute;
                 right: 5px;
             }
@@ -430,6 +459,7 @@ EDIT RECIPE
             justify-content: space-between;
             align-items: center;
             font-size: 15px;
+            margin: 10px 0;
         }
 
         .newOrderLabels input{
@@ -443,6 +473,14 @@ EDIT RECIPE
         overflow-y: auto;
     }
 
+        #newOrderIngredients .choosable{
+            background: rgb(240, 252, 255);
+            justify-content: left;
+        }
+
+            #newOrderIngredients .choosable:hover{
+                background: rgb(179, 191, 209);
+            }
 #newOrder{
     display: flex;
     flex-direction: column;
@@ -520,10 +558,9 @@ EDIT RECIPE
         justify-content: space-between;
         align-items: center;
         width: 100%;
-        background: rgb(240, 252, 255);
-        border-radius: 5px;
-        border: 1px solid black;
+        background: white;
         padding: 10px;
+        margin: 2px
     }
 
     #newIngredient .button{
@@ -587,6 +624,19 @@ ORDER FILTER
         overflow-y: auto;
     }
 
+        #orderFilterIngredients .choosable{
+            background: rgb(240, 252, 255);
+            justify-content: left;
+        }
+
+            #orderFilterIngredients .choosable:hover{
+                background: rgb(179, 191, 209);
+            }
+
+            #orderFilterIngredients .active{
+                background: rgb(179, 191, 209);
+            }
+
 /*
 ORDER CALCULATOR
 */
@@ -636,6 +686,18 @@ TRANSACTION FILTER
         overflow-y: auto;
     }
 
+        #transFilterRecipeList .choosable{
+            background:rgb(240, 252, 255);
+            justify-content: left;
+        }
+
+        #transFilterRecipeList .choosable:hover{
+            background: rgb(179, 191, 209);
+        }
+
+        #transFilterRecipeList .active{
+            background:rgb(179, 191, 209);
+        }
 /*
 NEW TRANSACTION
 */
@@ -660,10 +722,11 @@ NEW TRANSACTION
         display: flex;
         flex-direction: column;
         align-items: center;
-        background: rgb(201, 201, 201);
-        border-radius: 10px;
+        background: white;
         margin: 10px 0;
         padding: 5px 0;
+        font-weight: bold;
+        font-size: 17px;
     }
 
 @media screen and (orientation: portrait){

views/shared/shared.css

@@ -151,7 +151,6 @@ h1 {
 h3 {
     text-align: center;
     font-weight: 500;
-    color: gray;
     font-size: 20px;
 }
 
@@ -207,7 +206,7 @@ button::-moz-focus-inner{
     background: none;
     border: none;
     text-decoration: underline;
-    color: blue;
+    color: white;
     cursor: pointer;
     margin: 5px;
     font-size: 15px;