Add scrollbar and styling to ingredients list

views/dashboardPage/components/components.css

@@ -305,10 +305,10 @@
 
     .recipeBasicInfo{
         width: 75%;
-        background: rgb(0, 27, 45);
+        background: rgb(240, 252, 255);
         padding: 15px;
         border-radius: 5px;
-        color: white;
+        border: 1px solid black;
     }
 
     #recipeInputIngredients{
@@ -326,10 +326,10 @@
 
     #recipeInputIngredients div{
         width: 75%;
-        background: rgb(0, 27, 45);
+        background: rgb(240, 252, 255);
+        border: 1px solid black;
         padding: 10px;
         border-radius: 5px;
-        color: white;
         margin: 10px 0;
         padding: 10px 15px;
         text-align: center;

views/dashboardPage/dashboard.css

@@ -15,7 +15,8 @@ body{
     height: 100vh;
     flex: 1;
     box-sizing: border-box;
-    padding: 0 50px 0 50px;
+    padding: 50px;
+    padding-top: 0;
 }
 
 .strand{
@@ -155,6 +156,7 @@ body{
 /* Ingredients Strand */
 #ingredientsStrand{
     display: none;
+    align-items: center;
     height: 100%;
     box-sizing: border-box;
     padding-right: 100px;
@@ -168,7 +170,8 @@ body{
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 100px;
+    margin-bottom: 50px;
+    width: 100%;
 }
 
 #ingredientHead button{
@@ -180,10 +183,16 @@ body{
     margin-right: 5px;
 }
 
+#categoryList{
+    align-items:center;
+    overflow-y: auto;
+    width: 80%;
+}
+
 .categoryDiv > div:first-of-type{
     display: flex;
-    margin: 0 0 0 10vw;
-    width: 75%;
+    margin: auto;
+    width: 95%;
 }
 
 .categoryDiv > div:first-of-type p{
@@ -215,7 +224,7 @@ body{
     display: flex;
     width: 50%;
     padding: 15px;
-    margin-left: 15vw;
+    margin: auto;
     cursor: pointer;
     border-radius: 5px;
 }

views/landingPage/landing.ejs

@@ -111,7 +111,6 @@
             let error = <%- JSON.stringify(error) %>;
             let isLoggedIn = <%- JSON.stringify(isLoggedIn) %>;
         </script>
-        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="../shared/validation.js"></script>
         <script src="/landingPage/public.js"></script>
         <script src="/landingPage/login.js"></script>