Organize dashboard.css

views/dashboardPage/dashboard.css

@@ -13,9 +13,6 @@ body{
     max-width: 100%;
 }
 
-/* 
-Multi-strand use classes 
-*/
 .contentBlock{
     width: 100%;
     height: 100vh;
@@ -25,24 +22,27 @@ Multi-strand use classes
     padding-top: 0;
 }
 
+/* 
+Multi-strand use classes 
+*/
 .strand{
     flex-direction: column;
     height: 100%;
     width: 100%;
 }
 
-.strandTitle{
-    text-align: left;
-    margin: 15px;
-    padding: 0;
-}
+    .strandHead{
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        align-items: center;
+    }
 
-.strandHead{
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    align-items: center;
-}
+        .strandTitle{
+            text-align: left;
+            margin: 15px;
+            padding: 0;
+        }
 
 .itemDisplay{
     display: flex;
@@ -291,7 +291,9 @@ Home Strand
             font-weight: bold;
         }
 
-/* Ingredients Strand */
+/* 
+Ingredients Strand 
+*/
 #ingredientsStrand{
     display: none;
     align-items: center;
@@ -299,84 +301,73 @@ Home Strand
     box-sizing: border-box;
 }
 
-#ingredientsStrand > h1{
-    margin-bottom: 100px;
-}
-
-#ingredientHead button{
-    display: flex;
-    align-items: center;
-}
-
-#ingredientHead svg{
-    margin-right: 5px;
-}
-
-#categoryList{
-    align-items:center;
-    overflow-y: auto;
-    width: 80%;
-}
+    #categoryList{
+        align-items:center;
+        overflow-y: auto;
+        width: 80%;
+    }
 
-.categoryDiv > div:first-of-type{
-    display: flex;
-}
+    .categoryDiv > div:first-of-type{
+        display: flex;
+    }
 
-.categoryDiv > div:first-of-type p{
-    display: flex;
-    align-items: center;
-    padding: 20px 0 20px 100px;
-    background: rgb(240, 252, 255);
-    border: 1px solid gray;
-    border-radius: 5px;
-    margin-right: 25px;
-    flex-grow: 1;
-}
+    .categoryDiv > div:first-of-type p{
+        display: flex;
+        align-items: center;
+        padding: 20px 0 20px 100px;
+        background: rgb(240, 252, 255);
+        border: 1px solid gray;
+        border-radius: 5px;
+        margin-right: 25px;
+        flex-grow: 1;
+    }
 
-.categoryDiv > div:first-of-type button{
-    padding: 10px;
-    background: rgb(240, 252, 255);
-    border: 1px solid black;
-    border-radius: 5px;
-    width: 75px;
-    height: 75px;
-    cursor: pointer;
-}
+    .categoryDiv > div:first-of-type button{
+        padding: 10px;
+        background: rgb(240, 252, 255);
+        border: 1px solid black;
+        border-radius: 5px;
+        width: 75px;
+        height: 75px;
+        cursor: pointer;
+    }
 
-.ingredientsDiv{
-    flex-direction: column;
-}
+        .ingredientsDiv{
+            flex-direction: column;
+        }
 
-.ingredient{
-    display: flex;
-    width: 50%;
-    padding: 15px;
-    margin: auto;
-    cursor: pointer;
-    border-radius: 5px;
-}
+    .ingredient{
+        display: flex;
+        width: 50%;
+        padding: 15px;
+        margin: auto;
+        cursor: pointer;
+        border-radius: 5px;
+    }
 
-.ingredient:hover{
-    background: rgb(0, 27, 45);
-    color: white;
-}
+        .ingredient:hover{
+            background: rgb(0, 27, 45);
+            color: white;
+        }
 
-.ingredient > *{
-    width: 33%;
-    margin-right: 15px;
-}
+        .ingredient > *{
+            width: 33%;
+            margin-right: 15px;
+        }
 
-.ingredient > p:last-of-type{
-    text-align: right;
-}
+        .ingredient > p:last-of-type{
+            text-align: right;
+        }
 
-.ingredientSpacer{
-    border: none;
-    border-top: 1px dashed black;
-    margin: auto;
-}
+        .ingredientSpacer{
+            border: none;
+            border-top: 1px dashed black;
+            margin: auto;
+        }
 
-/* Recipe Book Strand */
+/* 
+Recipe Book Strand 
+*/
 #recipeBookStrand{
     display: none;
     align-items: center;
@@ -394,17 +385,6 @@ Home Strand
             width: 25%;
         }
 
-    #recipeHead{
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        align-items: center;
-    }
-
-    #recipeHead svg{
-        margin-right: 5px
-    }
-
     #recipeList{
         display: flex;
         flex-direction: column;
@@ -413,7 +393,9 @@ Home Strand
         overflow-y: auto;
     }
 
-/* Orders Strand */
+/* 
+Orders Strand 
+*/
 #ordersStrand{
     display: none;
     align-items: center;
@@ -423,9 +405,4 @@ Home Strand
         width: 50%;
         margin-top: 50px;
         overflow: auto;
-    }
-
-        #orderList p:first-of-type{
-            font-weight: bold;
-            font-size: 20px;
-        }
+    }