Update icons on menu

views/shared/menu.css

@@ -49,10 +49,9 @@
         border: 0;
     }
 
-    .menu > button img{
-        height: 25px;
-        width: 25px;
-        margin-right: 15px;
+    .menu > button svg{
+        stroke: white;
+        margin-right: 25px;
     }
 
     .menu > button{
@@ -79,6 +78,11 @@
     .menu > button:hover{
         background: rgb(201, 201, 201);
         color: black;
+        fill: black;
+    }
+
+    .menu > button:hover svg{
+        stroke: black;
     }
 
 .menu > .active{
@@ -91,6 +95,10 @@
     color: white;
 }
 
+.menu > .active:hover svg{
+    stroke: white;
+}
+
 .logout{
     display: flex;
     justify-content: center;
@@ -123,4 +131,8 @@
 .menuMinimized button{
     justify-content: center;
     padding: 0;
+}
+
+.menuMinimized button svg{
+    margin: 0;
 }

views/shared/menu.ejs

@@ -9,22 +9,22 @@
     </div>
 
     <button id="homeBtn" class="active" onclick="changeStrand('homeStrand')">
-        <img src="/shared/images/homeIcon.png" alt="home">
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
         <p>Home</p>
     </button>
 
     <button id="ingredientsBtn" onclick="changeStrand('ingredientsStrand')">
-        <img src="/shared/images/recieptIcon.png" alt="ingredients">
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
         <p>Ingredients</p>
     </button>
 
     <button id="recipeBookBtn" onclick="changeStrand('recipeBookStrand')">
-        <img src="/shared/images/bookIcon.png" alt="recipe book">
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
         <p>Recipe Book</p>
     </button>
 
     <button id="ordersBtn" onclick="changeStrand('ordersStrand')">
-        <img src="/shared/images/cartIcon.png" alt="orders">
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
         <p>Orders</p>
     </button>