Dismantle the dashboard css file.

app.js

@@ -52,11 +52,11 @@ require("./routes")(app);
 
 console.time("time");
 cssmerger([
-    "./views/shared/shared.css",
+    // "./views/shared/shared.css",
     "./views/dashboardPage/dashboard.css",
     "./views/dashboardPage/sidebars.css",
 
-    "./views/shared/css/header.css",
+    "./views/shared/css/general.css",
     "./views/shared/css/loader.css",
     "./views/dashboardPage/css"
 ], "./views/dashboardPage/bundle.css");

views/dashboardPage/css/dashboard.css

@@ -0,0 +1,272 @@
+/* 
+General page styling
+*/
+*{margin:0;padding:0;font-family:'Saira',sans-serif;}
+
+html{
+    height: 100%;
+    max-width: 100%;
+}
+
+body{
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    max-width: 100%;
+}
+
+.contentBlock{
+    width: 100%;
+    height: 100vh;
+    flex: 1;
+    box-sizing: border-box;
+    position: relative;
+    padding-bottom: 25px;
+    background: rgb(201, 201, 201);
+}
+
+.mobileMenuSelector{
+    display: none;
+    position: fixed;
+    left: 13px;
+    top: -2px;
+    font-size: 40px;
+}
+
+    .mobileMenuSelector:active{
+        color: rgb(255, 99, 107);
+    }
+
+.sidebarButton{
+    display: initial;
+    background: rgb(179, 191, 209);
+    border: none;
+    text-decoration: none;
+    padding: 10px 25px;
+    color: rgb(255, 99, 107);
+    cursor: pointer;
+    text-align: center;
+    font-size: 15px;
+    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;
+    height: 100vh;
+    box-sizing: border-box;
+    padding: 25px;
+    transition: width 0.2s;
+    overflow: hidden;
+    background: rgb(0, 27, 45);
+    color: rgb(255, 99, 107);
+}
+
+.sidebarWide{
+    width: 40vw;
+}
+
+.sidebarHide{
+    width: 0;
+    transition: width 0.2s;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    box-shadow: -1px 0px 10px gray;
+}
+
+    .sidebarHide > *{
+        width: 0;
+        transition: width 0.2s;
+        visibility: hidden;
+    }
+
+.sidebarIconButtons{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.iconButton{
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 3px;
+    color: rgb(255, 99, 107);
+}
+
+    .iconButton:hover{
+        background: rgb(0, 27, 45);
+        color: white;
+    }
+
+.lineBorder{
+    width: 100%;
+    border-bottom: 1px solid gray;
+    margin: 25px;
+}
+
+/* 
+Multi-strand use classes 
+*/
+.strand{
+    flex-direction: column;
+    height: 100vh;
+    width: 100%;
+    padding-bottom: 25px;
+    box-sizing: border-box;
+}
+
+    .strandHead{
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        padding: 10px 50px 0 50px;
+        align-items: center;
+        box-sizing: border-box;
+        height: 10%;
+    }
+
+        .strandTitle{
+            text-align: left;
+            margin: 15px;
+            padding: 0;
+        }
+
+#sidebarCloser{
+    width: 30px;
+    background: rgb(0, 27, 45);
+    color: white;
+    margin-right: auto;
+    border: none;
+    position: fixed;
+    top: 15px;
+    left: 15px;
+}
+
+.buttonBox{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 50px;
+}
+
+    .buttonBox > *{
+        margin-right: 10px;
+    }
+
+.choosable{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background: rgb(0, 27, 45);
+    color: rgb(255, 99, 107);
+    margin: 2px;
+    padding: 5px;
+    text-align: center;
+    cursor: pointer;
+    width: 99%;
+    box-sizing: border-box;
+    border: none;
+    font-size: 16px;
+}
+
+    .choosable.offColor{
+        background: rgb(179, 191, 209);
+    }
+
+        .choosable.offColor{
+            background: rgb(201, 201, 201);
+        }
+
+    .choosable.tall{
+        padding: 15px;
+    }
+
+    .choosable:hover{
+        background: rgb(179, 191, 209);
+        color: rgb(255, 99, 107);
+    }
+
+    .choosable.active{
+        background: rgb(240, 252, 255);
+        color: rgb(255, 99, 107);
+    }
+
+.searchBar{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+    .searchButton{
+        padding: 6px;
+        background: rgb(0, 27, 45);
+        cursor: pointer;
+        color: white;
+    }
+
+        .searchButton:hover{
+            background: rgb(201, 201, 201);
+            color: black;
+        }
+
+        .searchButton:active{
+            background: rgb(179, 191, 209);
+            color: white;
+        }
+
+    .searchInput{
+        border: 4px solid rgb(0, 27, 45);
+        font-size: 20px;
+        padding: 1px 0 1px 4px;
+    }
+
+.dateRange{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+    .dateRangeInput{
+        display: flex;
+        justify-content: space-between;
+    }
+
+        .dateRangeInput p{
+            margin: 0 5px;
+            font-size: 20px;
+            font-weight: bold;
+        }
+
+.fileUpload{
+    background: rgb(240, 252, 255);
+    padding: 5px;
+    font-size: 16px;
+}
+
+    .fileUpload::file-selector-button{
+        background: rgb(0, 27, 45);
+        color: white;
+        border: none;
+        cursor: pointer;
+        font-size: 18px;
+        margin: auto 0;
+    }
+
+        .fileUpload::file-selector-button:hover{
+            background: rgb(201, 201, 201);
+            color: black;
+        }

views/dashboardPage/css/modal.css

@@ -0,0 +1,166 @@
+.modal{
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    background: rgba(0, 27, 45, 0.75);
+}
+
+    .modalBox{
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
+        .modalBox > svg{
+            color: rgb(255, 99, 107);
+            cursor: pointer;
+        }
+
+        .modalSpreadsheetUpload{
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 0;
+            padding: 25px 100px;
+            background: rgb(240, 252, 255);
+            border: 2px solid black;
+        }
+
+            .modalSpreadsheetUpload > *{
+                margin-top: 15px;
+            }
+
+    #modalFeedback{
+        display: flex;
+        flex-direction: column;
+        background: white;
+        padding: 50px;
+    }
+
+        #modalFeedback > *{
+            margin: 15px;
+        }
+
+        #modalFeedback label{
+            display: flex;
+            flex-direction: column;
+
+        }
+
+    #modalNewMerchant{
+        display: flex;
+        flex-direction: column;
+        background: white;
+        padding: 50px;
+        min-width: 350px;
+    }
+
+        #modalNewMerchant h2{
+            text-align: center;
+        }
+
+        #modalNewMerchant > *{
+            margin: 15px;
+        }
+
+        #modalNewMerchant label{
+            display: flex;
+            flex-direction: column;
+        }
+
+    #modalConfirm{
+        display: flex;
+        flex-direction:column;
+        align-items: center;
+        background: white;
+        padding: 50px;
+    }
+
+        #modalConfirm svg{
+            font-size: 50px;
+            margin: 15px;
+            font-weight: bold;
+        }
+
+        #modalConfirm p{
+            font-size: 25px;
+            font-weight: bold;
+        }
+
+    #newMerchantSquareButton{
+        background: white;
+        border: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid black;
+        padding: 9px;
+        cursor: pointer;
+        margin-top: 0;
+        margin-bottom: 0;
+        height: 44px;
+    }
+
+        #newMerchantSquareButton:hover{
+            background: black;
+            color: white;
+        }
+
+    #modalSquareLocations{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: white;
+        padding: 50px;
+        min-width: 350px;
+    }
+
+        #squareLocationsButtons{
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 25px;
+            width: 100%;
+        }
+
+    
+    #modalEditSubIngredients{
+        flex-direction: column;
+        align-items: center;
+        background: white;
+        min-width: 500px;
+    }
+
+        #editSubIngredientsContainer{
+            display: flex;
+            justify-content: space-around;
+            width: 100%;
+        }
+
+            #editSubAllIng, #editSubCurrentIng{
+                padding: 25px;
+                width: 100%;
+            }
+
+                #editSubAllIng > *{
+                    width: 100%;
+                }
+
+                #editSubCurrentIng > * {
+                    width: 100%;
+                }
+
+    #modalCircularReference{
+        flex-direction: column;
+        background: white;
+        align-items: center;
+        padding: 25px;
+        max-height: 90%;
+        overflow-y: auto;
+    }
+
+    #modalCircularReference div > *{
+        margin: 10px;
+    }

views/dashboardPage/css/sidebars/editIngredient.css

@@ -0,0 +1,41 @@
+#editIngredient{
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #editIngredient label{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .unitbuttons{
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+    }
+
+        .unitButton{
+            margin: 5px;
+            padding: 5px;
+            background: rgb(179, 191, 209);
+            border: none;
+            font-size: 15px;
+            font-weight: bold;
+            cursor: pointer;
+            color: rgb(255, 99, 107);
+        }
+
+            .unitButton:hover{
+                background: rgb(240, 252, 255);
+            }
+
+            .unitActive{
+                background: rgb(0, 27, 45);
+            }
+
+                .unitActive:hover{
+                    background: rgb(0, 27, 45);
+                    cursor: default;
+                }

views/dashboardPage/css/sidebars/editRecipe.css

@@ -0,0 +1,28 @@
+#editRecipe{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #editRecipeIngList{
+        width: 100%;
+        max-height: 75%;
+        overflow-y: auto;
+    }
+
+        .editRecipeIng{
+            background: rgb(0, 27, 45);
+            color: white;
+            width: 90%;
+            border-radius: 5px;
+            text-align: center;
+            padding: 5px;
+            margin: 5px auto;
+            position: relative;
+        }
+
+            .editRecipeIng button{
+                position: absolute;
+                right: 5px;
+            }

views/dashboardPage/css/sidebars/newIngredient.css

@@ -0,0 +1,25 @@
+#newIngredient{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #newIngredient label{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        background: white;
+        padding: 10px;
+        margin: 2px
+    }
+
+    #newIngredient .button{
+        margin: 15px auto;
+    }
+
+    #newIngredient h2{
+        text-align: center;
+        margin-bottom: 25px;
+    }

views/dashboardPage/css/sidebars/newOrder.css

@@ -0,0 +1,102 @@
+#newOrderIngredientList{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 40%;
+}
+
+    .newOrderLabels{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        margin-bottom: 25px;
+    }
+
+        .newOrderLabels label{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 15px;
+            margin: 10px 0;
+        }
+
+        .newOrderLabels input{
+            width: 50%;
+        }
+
+    #newOrderIngredients{
+        display: flex;
+        flex-direction: column;
+        width: 90%;
+        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;
+    align-items: center;
+    width: 60%;
+    border-left: 1px solid black;
+    padding-left: 25px;
+}
+
+    #newOrder > label{
+        margin: 5px;
+    }
+
+    #selectedIngredientList{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 75%;
+        overflow-y: auto;
+        margin-bottom: 10px;
+    }
+
+        .selectedIngredient{
+            display: flex;
+            flex-direction: column;
+            background: rgb(0, 27, 45);
+            color: white;
+            margin: 5px 0;
+            width: 95%;
+        }
+
+            .selectedIngredient > div{
+                margin: 3px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center
+            }
+
+                .selectedIngredient p{
+                    font-weight: bold;
+                    font-size: 17px;
+                }
+
+                .newOrderRemove{
+                    background: rgb(0, 27, 45);
+                    border: 1px solid white;
+                    color: white;
+                    font-size: 13px;
+                    font-weight: bold;
+                    padding: 5px;
+                    cursor: pointer;
+                }
+
+                    .newOrderRemove:hover{
+                        background: rgb(201, 201, 201);
+                        color: black;
+                    }
+
+                .selectedIngredient input{
+                    width: 45%;
+                }

views/dashboardPage/css/sidebars/newRecipe.css

@@ -0,0 +1,67 @@
+#addRecipe{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding-bottom: 50px;
+}
+
+    .recipeBasicInfo{
+        width: 75%;
+        background: rgb(240, 252, 255);
+        padding: 15px;
+        border-radius: 5px;
+        border: 1px solid black;
+    }
+
+        .recipeBasicInfo label{
+            display: flex;
+            justify-content: space-between;
+            margin: 15px 0;
+        }
+
+        .recipeBasicInfo input{
+            width: 50%;
+        }
+
+    #addRecipe h2{
+        margin-top: 10px;
+    }
+
+    #recipeInputIngredients{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        box-sizing: border-box;
+        margin: 0 0 25px 0;
+        width:100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        box-shadow: 0 0 2px gray;
+        border-radius: 5px;
+    }
+
+        #recipeInputIngredients div{
+            width: 75%;
+            background: rgb(240, 252, 255);
+            border: 1px solid black;
+            padding: 10px;
+            border-radius: 5px;
+            margin: 10px 0;
+            padding: 10px 15px;
+            text-align: center;
+        }
+
+            #recipeInputIngredients div > label{
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 2px;
+            }
+
+            #recipeInputIngredients input{
+                width: 100px;
+            }
+
+            #recipeInputIngredients div h4{
+                color: rgb(255, 99, 107);
+            }

views/dashboardPage/css/sidebars/newTransaction.css

@@ -0,0 +1,27 @@
+.newTransaction{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    .newTransaction > h2{
+        text-align: center;
+    }
+
+    .newTransactionRecipes{
+        width: 100%;
+        height: 90%;
+        overflow-y: auto;
+    }
+
+    .newTransactionRecipe{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: white;
+        margin: 10px 0;
+        padding: 5px 0;
+        font-weight: bold;
+        font-size: 17px;
+    }

views/dashboardPage/css/sidebars/orderDetails.css

@@ -0,0 +1,28 @@
+#orderDetails{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    .orderDiv{
+        width: 50%;
+    }
+
+        .subOrderDiv{
+            display: flex;
+            justify-content: space-between;
+        }
+
+    #orderIngredients{
+        width: 90%;
+        overflow: auto;
+    }
+
+    #orderTotalPrice{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 25px;
+        font-weight: bold;
+    }

views/dashboardPage/css/sidebars/orderFilter.css

@@ -0,0 +1,31 @@
+#orderFilter{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    .orderFilterDates{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    #orderFilterIngredients{
+        width: 100%;
+        max-height: 50%;
+        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);
+            }

views/dashboardPage/css/sidebars/recipeDetails.css

@@ -0,0 +1,20 @@
+#recipeDetails{
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #recipeIngredientList{
+        width: 100%;
+    }
+
+    #recipePrice{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+        #recipePrice p{
+            font-size: 25px;
+            font-weight: bold;
+        }

views/dashboardPage/css/sidebars/transactionDetails.css

@@ -0,0 +1,15 @@
+.transactionDetails{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    .transactionRecipes{
+        width: 100%;
+    }
+
+    .totals{
+        font-size: 25px;
+        font-weight: bold;
+    }

views/dashboardPage/css/sidebars/transactionFilter.css

@@ -0,0 +1,25 @@
+.transactionFilter{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #transFilterRecipeList{
+        width: 100%;
+        max-height: 50%;
+        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);
+        }

views/dashboardPage/css/strands/analytics.css

@@ -0,0 +1,113 @@
+.switch{
+    position: relative;
+    display: inline-block;
+    width: 239px;
+    height: 34px;
+    color: rgb(255, 99, 107);
+}
+
+    .switch input{
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+        .switch input:focus + .slider{
+            box-shadow: 0 0 1px #2196F3;
+        }
+
+        .switch input:checked + .slider:before {
+            -webkit-transform: translateX(105px);
+            -ms-transform: translateX(92px);
+            transform: translateX(125px);
+        }
+
+    .slider{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 0 24px 0 5px;
+        background: rgb(0, 27, 45);
+        transition: 0.2s;
+    }
+
+        .slider:before{
+            position: absolute;
+            content: "";
+            height: 30px;
+            width: 110px;
+            left: 1px;
+            bottom: 1px;
+            background: rgba(255, 255, 255, 0.2);
+            border: 1px solid rgb(255, 99, 107);
+            transition: 0.5s;
+        }
+
+.analContent{
+    display: flex;
+    justify-content: space-around;
+    align-items:center;
+    padding: 15px;
+    box-sizing: border-box;
+    height: 90%;
+}
+
+    .itemsList{
+        list-style-type: none;
+        width: 15%;
+        max-height: 95%;
+        overflow-y: auto;
+    }
+
+    .analData{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        width: 100%;
+        height: 100%;
+    }
+
+        #itemUseGraph{
+            padding: 10px;
+            height: 60%;
+            flex-basis: 100px;
+            flex-grow: 5;
+        }
+
+        .dataRow{
+            display: flex;
+            justify-content: space-between;
+            flex-basis: 150px;
+            flex-grow: 0;
+        }
+
+            .dataRow .analCard{
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                margin: 5px;
+                height: inherit;
+            }
+
+                .dataRow .analCard > *{
+                    margin: 0;
+                }
+
+                .analCard h1{
+                    text-align: center;
+                }
+
+#analRecipeContent{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 15px;
+    box-sizing: border-box;
+    height: 90%;
+}

views/dashboardPage/css/strands/home.css

@@ -0,0 +1,164 @@
+#homeStrand{
+    display: flex;
+}
+
+    .card{
+        margin: 0 15px;
+        flex-grow: 1;
+        height: 100%;
+        background: white;
+    }
+
+    .card > *{
+        margin: 10px;
+    }
+
+    .card > p:first-of-type{
+        font-size: 14px;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    .flexRow{
+        display: flex;
+        justify-content: space-around;
+        width: 100%;
+        flex-basis: 100px;
+        flex-grow: 1;
+        margin: 15px 0;
+        max-height: 43%;
+    }
+
+#revenueCard{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+    #revenue{
+        text-align: center;
+        font-size: 30px;
+        font-weight: bold;
+    }
+
+    #revenueChange{
+        display: flex;
+    }
+
+    #revenueChange > p{
+        font-weight: 100;
+    }
+
+    #revenueChange img{
+        height: 15px;
+        width: 15px;
+        margin-right: 10px;
+    }
+
+#graphCard{
+    flex-grow: 5;
+    display: flex;
+    justify-content: center;
+}
+
+#inventoryCheckCard{
+    display: flex;
+    flex-direction: column;;
+    justify-content: space-between;
+    flex-basis: 100px;
+    flex-grow: 1;
+}
+
+    #inventoryCheckCard ul{
+        list-style: none;
+    }
+
+    #inventoryCheckCard button{
+        margin-left: auto;
+    }
+
+    .ingredientCheck{
+        display: flex;
+        align-items: center;
+        margin: 5px 0;
+        max-height: 50px;
+    }
+
+        .inventoryCheckIngredient{
+            width: 40%;
+            font-weight: 300;
+            font-size: 15px;
+            margin-right: 25px;
+            text-overflow: ellipsis;
+            white-space: wrap;
+            overflow: hidden;
+            text-align: left;
+        }
+
+        .inventoryCheckUnit{
+            width: 20%
+        }
+
+        .numberInput{
+            display: flex;
+            justify-content: center;
+            width: 40%;
+            margin-right: 25px;
+        }
+
+            .numberInput button{
+                width: 30%;
+                font-size: 23px;
+                background: rgb(0, 27, 45);
+                border: none;
+                color: white;
+                font-weight: bold;
+                cursor: pointer;
+            }
+
+            .numberInput button:first-of-type{
+                border-bottom-left-radius: 5px;
+                border-top-left-radius: 5px;
+            }
+
+            .numberInput button:last-of-type{
+                border-bottom-right-radius: 5px;
+                border-top-right-radius: 5px;
+            }
+
+            .numberInput input{
+                width: 55%;
+                font-size: 15px;
+                text-align: center;
+            }
+
+            .numberInput input::-webkit-outer-spin-button,
+            .numberInput input::-webkit-inner-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
+            }
+
+            .numberInput input[type=number] {
+                -moz-appearance: textfield;
+            }
+
+    #popularIngredientsCard{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex-basis: 100px;
+        flex-grow: 2.5;
+        padding: 5px;
+        box-sizing: border-box;
+
+    }
+        #popularCanvas{
+            margin: 0 35px;
+        }
+
+        .notice{
+            color: red;
+            font-size: 35px;
+            font-weight: bold;
+        }

views/dashboardPage/css/strands/ingredients.css

@@ -0,0 +1,55 @@
+#ingredientsStrand{
+    display: none;
+    align-items: center;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+    #categoryList{
+        align-items:center;
+        overflow-y: auto;
+        width: 80%;
+    }
+
+    .categoryDiv{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .categoryDiv > div:first-of-type{
+        display: flex;
+        cursor: pointer;
+        width: 100%;
+        margin: 5px 0;
+    }
+
+    .categoryDiv > div:first-of-type p{
+        display: flex;
+        align-items: center;
+        padding: 20px 0 20px 100px;
+        background: rgb(0, 27, 45);
+        flex-grow: 1;
+        color: rgb(255, 99, 107);
+        margin-right: 25px
+    }
+
+    .categoryDiv > div:first-of-type button{
+        padding: 10px;
+        background: rgb(0, 27, 45);
+        border: none;
+        width: 75px;
+        height: 75px;
+        cursor: pointer;
+    }
+
+        .ingredientsDiv{
+            flex-direction: column;
+            width: 50%;
+        }
+
+        .ingredientSpacer{
+            border: none;
+            border-top: 1px dashed black;
+            margin: auto;
+        }

views/dashboardPage/css/strands/orders.css

@@ -0,0 +1,10 @@
+#ordersStrand{
+    display: none;
+    align-items: center;
+}
+
+    #orderList{
+        width: 50%;
+        margin-top: 50px;
+        overflow-y: auto;
+    }

views/dashboardPage/css/strands/recipeBook.css

@@ -0,0 +1,12 @@
+#recipeBookStrand{
+    display: none;
+    align-items: center;
+}
+
+    #recipeList{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 50%;
+        overflow-y: auto;
+    }

views/dashboardPage/css/strands/settings.css

@@ -0,0 +1,110 @@
+#accountStrand{
+    padding: 15px;
+    box-sizing: border-box;
+    align-items: center;
+}
+
+    .settings{
+        display: flex;
+        flex-direction: column;
+        width: 75%;
+        max-height: 100%;
+        overflow-y: auto;
+    }
+
+        .settingsSection{
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            margin: 15px 0;
+            background: white;
+            padding: 35px;
+        }
+
+            .settingsSectionHeader{
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 25px;
+                border-bottom: 1px solid black;
+            }
+
+                .newLocationButtons{
+                    display: flex;
+                    align-items: center;
+                }
+
+                    .newLocationButtons h1{
+                        padding: 0;
+                        margin-right: 15px;
+                    }
+
+        #accountInformation{
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        #accountInformationData{
+            width: 50%;
+        }
+
+            #accountInformation label{
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                margin-bottom: 10px;
+            }
+
+    #accountUpdate{
+        max-width: 500px;
+    }
+
+    #settingsMerchants{
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+        #settingsMerchants button{
+            width: 50%;
+        }
+
+    #securityData{
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+        #securityData button, #securityData a{
+            width: 240px;
+            box-sizing: border-box;
+        }
+
+    #accountShowPassword{
+        max-width: 300px;
+    }
+
+    #changePasswordBox{
+        flex-direction: column;
+        padding: 25px;
+        background: rgb(179, 191, 209);
+    }
+
+        #changePasswordBox label{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 5px;
+        }
+
+        #changePasswordBox p{
+            color: red;
+        }
+
+        #accountButtonBox{
+            margin: 0;
+        }

views/dashboardPage/css/strands/transactions.css

@@ -0,0 +1,10 @@
+.transactions{
+    display: none;
+    align-items: center;
+}
+
+    .transactionsList{
+        width: 50%;
+        overflow-y: auto;
+        margin-top: 50px;
+    }

views/dashboardPage/dashboard.css

@@ -1,860 +1,3 @@
-/* 
-General page styling
-*/
-html{
-    height: 100%;
-    max-width: 100%;
-}
-
-body{
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    max-width: 100%;
-}
-
-.contentBlock{
-    width: 100%;
-    height: 100vh;
-    flex: 1;
-    box-sizing: border-box;
-    position: relative;
-    padding-bottom: 25px;
-    background: rgb(201, 201, 201);
-}
-
-.mobileMenuSelector{
-    display: none;
-    position: fixed;
-    left: 13px;
-    top: -2px;
-    font-size: 40px;
-}
-
-    .mobileMenuSelector:active{
-        color: rgb(255, 99, 107);
-    }
-
-/* 
-Multi-strand use classes 
-*/
-.strand{
-    flex-direction: column;
-    height: 100vh;
-    width: 100%;
-    padding-bottom: 25px;
-    box-sizing: border-box;
-}
-
-    .strandHead{
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        padding: 10px 50px 0 50px;
-        align-items: center;
-        box-sizing: border-box;
-        height: 10%;
-    }
-
-        .strandTitle{
-            text-align: left;
-            margin: 15px;
-            padding: 0;
-        }
-
-#sidebarCloser{
-    width: 30px;
-    background: rgb(0, 27, 45);
-    color: white;
-    margin-right: auto;
-    border: none;
-    position: fixed;
-    top: 15px;
-    left: 15px;
-}
-
-.buttonBox{
-    display: flex;
-    justify-content: space-around;
-    margin-top: 50px;
-}
-
-    .buttonBox > *{
-        margin-right: 10px;
-    }
-
-.choosable{
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    background: rgb(0, 27, 45);
-    color: rgb(255, 99, 107);
-    margin: 2px;
-    padding: 5px;
-    text-align: center;
-    cursor: pointer;
-    width: 99%;
-    box-sizing: border-box;
-    border: none;
-    font-size: 16px;
-}
-
-    .choosable.offColor{
-        background: rgb(179, 191, 209);
-    }
-
-        .choosable.offColor{
-            background: rgb(201, 201, 201);
-        }
-
-    .choosable.tall{
-        padding: 15px;
-    }
-
-    .choosable:hover{
-        background: rgb(179, 191, 209);
-        color: rgb(255, 99, 107);
-    }
-
-    .choosable.active{
-        background: rgb(240, 252, 255);
-        color: rgb(255, 99, 107);
-    }
-
-.searchBar{
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-    .searchButton{
-        padding: 6px;
-        background: rgb(0, 27, 45);
-        cursor: pointer;
-        color: white;
-    }
-
-        .searchButton:hover{
-            background: rgb(201, 201, 201);
-            color: black;
-        }
-
-        .searchButton:active{
-            background: rgb(179, 191, 209);
-            color: white;
-        }
-
-    .searchInput{
-        border: 4px solid rgb(0, 27, 45);
-        font-size: 20px;
-        padding: 1px 0 1px 4px;
-    }
-
-.dateRange{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-    .dateRangeInput{
-        display: flex;
-        justify-content: space-between;
-    }
-
-        .dateRangeInput p{
-            margin: 0 5px;
-            font-size: 20px;
-            font-weight: bold;
-        }
-
-.fileUpload{
-    background: rgb(240, 252, 255);
-    padding: 5px;
-    font-size: 16px;
-}
-
-    .fileUpload::file-selector-button{
-        background: rgb(0, 27, 45);
-        color: white;
-        border: none;
-        cursor: pointer;
-        font-size: 18px;
-        margin: auto 0;
-    }
-
-        .fileUpload::file-selector-button:hover{
-            background: rgb(201, 201, 201);
-            color: black;
-        }
-        
-/* 
-Home Strand 
-*/
-#homeStrand{
-    display: flex;
-}
-
-    .card{
-        margin: 0 15px;
-        flex-grow: 1;
-        height: 100%;
-        background: white;
-    }
-
-    .card > *{
-        margin: 10px;
-    }
-
-    .card > p:first-of-type{
-        font-size: 14px;
-        font-weight: bold;
-        text-align: center;
-    }
-
-    .flexRow{
-        display: flex;
-        justify-content: space-around;
-        width: 100%;
-        flex-basis: 100px;
-        flex-grow: 1;
-        margin: 15px 0;
-        max-height: 43%;
-    }
-
-#revenueCard{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-    #revenue{
-        text-align: center;
-        font-size: 30px;
-        font-weight: bold;
-    }
-
-    #revenueChange{
-        display: flex;
-    }
-
-    #revenueChange > p{
-        font-weight: 100;
-    }
-
-    #revenueChange img{
-        height: 15px;
-        width: 15px;
-        margin-right: 10px;
-    }
-
-#graphCard{
-    flex-grow: 5;
-    display: flex;
-    justify-content: center;
-}
-
-#inventoryCheckCard{
-    display: flex;
-    flex-direction: column;;
-    justify-content: space-between;
-    flex-basis: 100px;
-    flex-grow: 1;
-}
-
-    #inventoryCheckCard ul{
-        list-style: none;
-    }
-
-    #inventoryCheckCard button{
-        margin-left: auto;
-    }
-
-    .ingredientCheck{
-        display: flex;
-        align-items: center;
-        margin: 5px 0;
-        max-height: 50px;
-    }
-
-        .inventoryCheckIngredient{
-            width: 40%;
-            font-weight: 300;
-            font-size: 15px;
-            margin-right: 25px;
-            text-overflow: ellipsis;
-            white-space: wrap;
-            overflow: hidden;
-            text-align: left;
-        }
-
-        .inventoryCheckUnit{
-            width: 20%
-        }
-
-        .numberInput{
-            display: flex;
-            justify-content: center;
-            width: 40%;
-            margin-right: 25px;
-        }
-
-            .numberInput button{
-                width: 30%;
-                font-size: 23px;
-                background: rgb(0, 27, 45);
-                border: none;
-                color: white;
-                font-weight: bold;
-                cursor: pointer;
-            }
-
-            .numberInput button:first-of-type{
-                border-bottom-left-radius: 5px;
-                border-top-left-radius: 5px;
-            }
-
-            .numberInput button:last-of-type{
-                border-bottom-right-radius: 5px;
-                border-top-right-radius: 5px;
-            }
-
-            .numberInput input{
-                width: 55%;
-                font-size: 15px;
-                text-align: center;
-            }
-
-            .numberInput input::-webkit-outer-spin-button,
-            .numberInput input::-webkit-inner-spin-button {
-                -webkit-appearance: none;
-                margin: 0;
-            }
-
-            .numberInput input[type=number] {
-                -moz-appearance: textfield;
-            }
-
-    #popularIngredientsCard{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        flex-basis: 100px;
-        flex-grow: 2.5;
-        padding: 5px;
-        box-sizing: border-box;
-
-    }
-        #popularCanvas{
-            margin: 0 35px;
-        }
-
-        .notice{
-            color: red;
-            font-size: 35px;
-            font-weight: bold;
-        }
-
-/* 
-Ingredients Strand 
-*/
-#ingredientsStrand{
-    display: none;
-    align-items: center;
-    height: 100%;
-    box-sizing: border-box;
-}
-
-    #categoryList{
-        align-items:center;
-        overflow-y: auto;
-        width: 80%;
-    }
-
-    .categoryDiv{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .categoryDiv > div:first-of-type{
-        display: flex;
-        cursor: pointer;
-        width: 100%;
-        margin: 5px 0;
-    }
-
-    .categoryDiv > div:first-of-type p{
-        display: flex;
-        align-items: center;
-        padding: 20px 0 20px 100px;
-        background: rgb(0, 27, 45);
-        flex-grow: 1;
-        color: rgb(255, 99, 107);
-        margin-right: 25px
-    }
-
-    .categoryDiv > div:first-of-type button{
-        padding: 10px;
-        background: rgb(0, 27, 45);
-        border: none;
-        width: 75px;
-        height: 75px;
-        cursor: pointer;
-    }
-
-        .ingredientsDiv{
-            flex-direction: column;
-            width: 50%;
-        }
-
-        .ingredientSpacer{
-            border: none;
-            border-top: 1px dashed black;
-            margin: auto;
-        }
-
-/* 
-Recipe Book Strand 
-*/
-#recipeBookStrand{
-    display: none;
-    align-items: center;
-}
-
-    #recipeList{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 50%;
-        overflow-y: auto;
-    }
-
-/*
-Analytics Strand
-*/
-.switch{
-    position: relative;
-    display: inline-block;
-    width: 239px;
-    height: 34px;
-    color: rgb(255, 99, 107);
-}
-
-    .switch input{
-        opacity: 0;
-        width: 0;
-        height: 0;
-    }
-
-        .switch input:focus + .slider{
-            box-shadow: 0 0 1px #2196F3;
-        }
-
-        .switch input:checked + .slider:before {
-            -webkit-transform: translateX(105px);
-            -ms-transform: translateX(92px);
-            transform: translateX(125px);
-        }
-
-    .slider{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        padding: 0 24px 0 5px;
-        background: rgb(0, 27, 45);
-        transition: 0.2s;
-    }
-
-        .slider:before{
-            position: absolute;
-            content: "";
-            height: 30px;
-            width: 110px;
-            left: 1px;
-            bottom: 1px;
-            background: rgba(255, 255, 255, 0.2);
-            border: 1px solid rgb(255, 99, 107);
-            transition: 0.5s;
-        }
-
-.analContent{
-    display: flex;
-    justify-content: space-around;
-    align-items:center;
-    padding: 15px;
-    box-sizing: border-box;
-    height: 90%;
-}
-
-    .itemsList{
-        list-style-type: none;
-        width: 15%;
-        max-height: 95%;
-        overflow-y: auto;
-    }
-
-    .analData{
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        width: 100%;
-        height: 100%;
-    }
-
-        #itemUseGraph{
-            padding: 10px;
-            height: 60%;
-            flex-basis: 100px;
-            flex-grow: 5;
-        }
-
-        .dataRow{
-            display: flex;
-            justify-content: space-between;
-            flex-basis: 150px;
-            flex-grow: 0;
-        }
-
-            .analCard{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-around;
-                margin: 5px;
-                height: inherit;
-            }
-
-                .analCard > *{
-                    margin: 0;
-                }
-
-#analRecipeContent{
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    padding: 15px;
-    box-sizing: border-box;
-    height: 90%;
-}
-
-/* 
-Orders Strand 
-*/
-#ordersStrand{
-    display: none;
-    align-items: center;
-}
-
-    #orderList{
-        width: 50%;
-        margin-top: 50px;
-        overflow-y: auto;
-    }
-
-/*
-Transactions Strand
-*/
-.transactions{
-    display: none;
-    align-items: center;
-}
-
-    .transactionsList{
-        width: 50%;
-        overflow-y: auto;
-        margin-top: 50px;
-    }
-
-/*
-ACCOUNT STRAND
-*/
-#accountStrand{
-    padding: 15px;
-    box-sizing: border-box;
-    align-items: center;
-}
-
-    .settings{
-        display: flex;
-        flex-direction: column;
-        width: 75%;
-        max-height: 100%;
-        overflow-y: auto;
-    }
-
-        .settingsSection{
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: flex-start;
-            margin: 15px 0;
-            background: white;
-            padding: 35px;
-        }
-
-            .settingsSectionHeader{
-                width: 100%;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-bottom: 25px;
-                border-bottom: 1px solid black;
-            }
-
-                .newLocationButtons{
-                    display: flex;
-                    align-items: center;
-                }
-
-                    .newLocationButtons h1{
-                        padding: 0;
-                        margin-right: 15px;
-                    }
-
-        #accountInformation{
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-        }
-
-        #accountInformationData{
-            width: 50%;
-        }
-
-            #accountInformation label{
-                display: flex;
-                justify-content: space-between;
-                width: 100%;
-                margin-bottom: 10px;
-            }
-
-    #accountUpdate{
-        max-width: 500px;
-    }
-
-    #settingsMerchants{
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-    }
-
-        #settingsMerchants button{
-            width: 50%;
-        }
-
-    #securityData{
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-        #securityData button, #securityData a{
-            width: 240px;
-            box-sizing: border-box;
-        }
-
-    #accountShowPassword{
-        max-width: 300px;
-    }
-
-    #changePasswordBox{
-        flex-direction: column;
-        padding: 25px;
-        background: rgb(179, 191, 209);
-    }
-
-        #changePasswordBox label{
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin: 5px;
-        }
-
-        #changePasswordBox p{
-            color: red;
-        }
-
-        #accountButtonBox{
-            margin: 0;
-        }
-
-/*
-Modal
-*/
-.modal{
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    height: 100vh;
-    width: 100vw;
-    background: rgba(0, 27, 45, 0.75);
-}
-
-    .modalBox{
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-    }
-
-        .modalBox > svg{
-            color: rgb(255, 99, 107);
-            cursor: pointer;
-        }
-
-        .modalSpreadsheetUpload{
-            flex-direction: column;
-            align-items: center;
-            justify-content: space-between;
-            margin-top: 0;
-            padding: 25px 100px;
-            background: rgb(240, 252, 255);
-            border: 2px solid black;
-        }
-
-            .modalSpreadsheetUpload > *{
-                margin-top: 15px;
-            }
-
-    #modalFeedback{
-        display: flex;
-        flex-direction: column;
-        background: white;
-        padding: 50px;
-    }
-
-        #modalFeedback > *{
-            margin: 15px;
-        }
-
-        #modalFeedback label{
-            display: flex;
-            flex-direction: column;
-
-        }
-
-    #modalNewMerchant{
-        display: flex;
-        flex-direction: column;
-        background: white;
-        padding: 50px;
-        min-width: 350px;
-    }
-
-        #modalNewMerchant h2{
-            text-align: center;
-        }
-
-        #modalNewMerchant > *{
-            margin: 15px;
-        }
-
-        #modalNewMerchant label{
-            display: flex;
-            flex-direction: column;
-        }
-
-    #modalConfirm{
-        display: flex;
-        flex-direction:column;
-        align-items: center;
-        background: white;
-        padding: 50px;
-    }
-
-        #modalConfirm svg{
-            font-size: 50px;
-            margin: 15px;
-            font-weight: bold;
-        }
-
-        #modalConfirm p{
-            font-size: 25px;
-            font-weight: bold;
-        }
-
-    #newMerchantSquareButton{
-        background: white;
-        border: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: 1px solid black;
-        padding: 9px;
-        cursor: pointer;
-        margin-top: 0;
-        margin-bottom: 0;
-        height: 44px;
-    }
-
-        #newMerchantSquareButton:hover{
-            background: black;
-            color: white;
-        }
-
-    #modalSquareLocations{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        background: white;
-        padding: 50px;
-        min-width: 350px;
-    }
-
-        #squareLocationsButtons{
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 25px;
-            width: 100%;
-        }
-
-    
-    #modalEditSubIngredients{
-        flex-direction: column;
-        align-items: center;
-        background: white;
-        min-width: 500px;
-    }
-
-        #editSubIngredientsContainer{
-            display: flex;
-            justify-content: space-around;
-            width: 100%;
-        }
-
-            #editSubAllIng, #editSubCurrentIng{
-                padding: 25px;
-                width: 100%;
-            }
-
-                #editSubAllIng > *{
-                    width: 100%;
-                }
-
-                #editSubCurrentIng > * {
-                    width: 100%;
-                }
-
-    #modalCircularReference{
-        flex-direction: column;
-        background: white;
-        align-items: center;
-        padding: 25px;
-        max-height: 90%;
-        overflow-y: auto;
-    }
-
-    #modalCircularReference div > *{
-        margin: 10px;
-    }
-
 @media screen and (orientation: portrait){
     @media screen and (max-width: 1400px){
         body{

views/dashboardPage/sidebars.css

@@ -1,546 +1,3 @@
-.sidebarButton{
-    display: initial;
-    background: rgb(179, 191, 209);
-    border: none;
-    text-decoration: none;
-    padding: 10px 25px;
-    color: rgb(255, 99, 107);
-    cursor: pointer;
-    text-align: center;
-    font-size: 15px;
-    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;
-    height: 100vh;
-    box-sizing: border-box;
-    padding: 25px;
-    transition: width 0.2s;
-    overflow: hidden;
-    background: rgb(0, 27, 45);
-    color: rgb(255, 99, 107);
-}
-
-.sidebarWide{
-    width: 40vw;
-}
-
-.sidebarHide{
-    width: 0;
-    transition: width 0.2s;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    box-shadow: -1px 0px 10px gray;
-}
-
-    .sidebarHide > *{
-        width: 0;
-        transition: width 0.2s;
-        visibility: hidden;
-    }
-
-.sidebarIconButtons{
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    margin-bottom: 10px;
-}
-
-.iconButton{
-    display: flex;
-    align-items: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 3px;
-    color: rgb(255, 99, 107);
-}
-
-    .iconButton:hover{
-        background: rgb(0, 27, 45);
-        color: white;
-    }
-
-.lineBorder{
-    width: 100%;
-    border-bottom: 1px solid gray;
-    margin: 25px;
-}
-
-/*
-EDIT INGREDIENT
-*/
-#editIngredient{
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    #editIngredient label{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .unitbuttons{
-        width: 100%;
-        display: flex;
-        justify-content: space-around;
-    }
-
-        .unitButton{
-            margin: 5px;
-            padding: 5px;
-            background: rgb(179, 191, 209);
-            border: none;
-            font-size: 15px;
-            font-weight: bold;
-            cursor: pointer;
-            color: rgb(255, 99, 107);
-        }
-
-            .unitButton:hover{
-                background: rgb(240, 252, 255);
-            }
-
-            .unitActive{
-                /* background: rgb(255, 99, 107); */
-                background: rgb(0, 27, 45);
-            }
-
-                .unitActive:hover{
-                    background: rgb(0, 27, 45);
-                    cursor: default;
-                }
-
-/* 
-Recipe Details 
-*/
-#recipeDetails{
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    #recipeIngredientList{
-        width: 100%;
-    }
-
-    #recipePrice{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-        #recipePrice p{
-            font-size: 25px;
-            font-weight: bold;
-        }
-
-/*
-Add Recipe
-*/
-#addRecipe{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    padding-bottom: 50px;
-}
-
-    .recipeBasicInfo{
-        width: 75%;
-        background: rgb(240, 252, 255);
-        padding: 15px;
-        border-radius: 5px;
-        border: 1px solid black;
-    }
-
-        .recipeBasicInfo label{
-            display: flex;
-            justify-content: space-between;
-            margin: 15px 0;
-        }
-
-        .recipeBasicInfo input{
-            width: 50%;
-        }
-
-    #addRecipe h2{
-        margin-top: 10px;
-    }
-
-    #recipeInputIngredients{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        box-sizing: border-box;
-        margin: 0 0 25px 0;
-        width:100%;
-        overflow-y: auto;
-        overflow-x: hidden;
-        box-shadow: 0 0 2px gray;
-        border-radius: 5px;
-    }
-
-        #recipeInputIngredients div{
-            width: 75%;
-            background: rgb(240, 252, 255);
-            border: 1px solid black;
-            padding: 10px;
-            border-radius: 5px;
-            margin: 10px 0;
-            padding: 10px 15px;
-            text-align: center;
-        }
-
-            #recipeInputIngredients div > label{
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: 2px;
-            }
-
-            #recipeInputIngredients input{
-                width: 100px;
-            }
-
-            #recipeInputIngredients div h4{
-                color: rgb(255, 99, 107);
-            }
-
-/*
-EDIT RECIPE
-*/
-#editRecipe{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    #editRecipeIngList{
-        width: 100%;
-        max-height: 75%;
-        overflow-y: auto;
-    }
-
-        .editRecipeIng{
-            background: rgb(0, 27, 45);
-            color: white;
-            width: 90%;
-            border-radius: 5px;
-            text-align: center;
-            padding: 5px;
-            margin: 5px auto;
-            position: relative;
-        }
-
-            .editRecipeIng button{
-                position: absolute;
-                right: 5px;
-            }
-
-/* New Order */
-#newOrderIngredientList{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 40%;
-}
-
-    .newOrderLabels{
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        margin-bottom: 25px;
-    }
-
-        .newOrderLabels label{
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 15px;
-            margin: 10px 0;
-        }
-
-        .newOrderLabels input{
-            width: 50%;
-        }
-
-    #newOrderIngredients{
-        display: flex;
-        flex-direction: column;
-        width: 90%;
-        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;
-    align-items: center;
-    width: 60%;
-    border-left: 1px solid black;
-    padding-left: 25px;
-}
-
-    #newOrder > label{
-        margin: 5px;
-    }
-
-    #selectedIngredientList{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        height: 75%;
-        overflow-y: auto;
-        margin-bottom: 10px;
-    }
-
-        .selectedIngredient{
-            display: flex;
-            flex-direction: column;
-            background: rgb(0, 27, 45);
-            color: white;
-            margin: 5px 0;
-            width: 95%;
-        }
-
-            .selectedIngredient > div{
-                margin: 3px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center
-            }
-
-                .selectedIngredient p{
-                    font-weight: bold;
-                    font-size: 17px;
-                }
-
-                .newOrderRemove{
-                    background: rgb(0, 27, 45);
-                    border: 1px solid white;
-                    color: white;
-                    font-size: 13px;
-                    font-weight: bold;
-                    padding: 5px;
-                    cursor: pointer;
-                }
-
-                    .newOrderRemove:hover{
-                        background: rgb(201, 201, 201);
-                        color: black;
-                    }
-
-                .selectedIngredient input{
-                    width: 45%;
-                }
-
-/* New Ingredient */
-#newIngredient{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    #newIngredient label{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        background: white;
-        padding: 10px;
-        margin: 2px
-    }
-
-    #newIngredient .button{
-        margin: 15px auto;
-    }
-
-    #newIngredient h2{
-        text-align: center;
-        margin-bottom: 25px;
-    }
-
-/* Order Details */
-#orderDetails{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    .orderDiv{
-        width: 50%;
-    }
-
-        .subOrderDiv{
-            display: flex;
-            justify-content: space-between;
-        }
-
-    #orderIngredients{
-        width: 90%;
-        overflow: auto;
-    }
-
-    #orderTotalPrice{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        font-size: 25px;
-        font-weight: bold;
-    }
-
-/*
-ORDER FILTER
-*/
-#orderFilter{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    .orderFilterDates{
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-    }
-
-    #orderFilterIngredients{
-        width: 100%;
-        max-height: 50%;
-        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
-*/
-#orderCalculator{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    #orderCalculator > *{
-        margin: 15px 0;
-    }
-
-/*
-TRANSACTION DETAILS
-*/
-.transactionDetails{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    .transactionRecipes{
-        width: 100%;
-    }
-
-    .totals{
-        font-size: 25px;
-        font-weight: bold;
-    }
-
-/*
-TRANSACTION FILTER
-*/
-.transactionFilter{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    #transFilterRecipeList{
-        width: 100%;
-        max-height: 50%;
-        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
-*/
-.newTransaction{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    .newTransaction > h2{
-        text-align: center;
-    }
-
-    .newTransactionRecipes{
-        width: 100%;
-        height: 90%;
-        overflow-y: auto;
-    }
-
-    .newTransactionRecipe{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        background: white;
-        margin: 10px 0;
-        padding: 5px 0;
-        font-weight: bold;
-        font-size: 17px;
-    }
-
 @media screen and (orientation: portrait){
     @media screen and (max-width: 1400px){
         .sidebar{
@@ -584,11 +41,6 @@ NEW TRANSACTION
                 margin: 15px auto;
                 box-shadow: 0 0 5px white;
             }
-
-        /* ORDER CALCULATOR */
-        #orderCalcBtn{
-            display: none;
-        }
     }
 
     @media screen and (min-width: 601px){
@@ -652,11 +104,6 @@ NEW TRANSACTION
                     box-shadow: 0 0 5px white;
                     height: 10vh;
                 }
-            
-            /* ORDER CALCULATOR */
-            #orderCalcBtn{
-                display: none;
-            }
 
             /* INGREDIENT DETAILS */
             #ingredientDetails > *{

views/shared/shared.css → views/shared/css/general.css

@@ -1,13 +1,3 @@
-/* Initialization for all pages */
-*{margin:0;padding:0;font-family:'Saira',sans-serif;}
-
-/* body{
-    display: flex;
-    flex-direction: column;
-    color: rgb(0, 27, 45);
-    min-height: 100vh;
-} */
-
 h1 {
     text-align: center;
     padding-bottom: 13px;
@@ -118,15 +108,6 @@ button::-moz-focus-inner{
     margin: 30px 0;
 }
 
-
-.strand, .action{
-    display: none;
-}
-
-.strand{
-    transition: width 1s linear;
-}
-
 @media screen and (max-width: 1400px){
     .button{
         font-size: 15px;