fix colors and alignment everywhere

don't ask

frontend/src/components/Custom404Page.vue

@@ -14,7 +14,7 @@ export default {
 
 <style lang="scss">
 
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap");
 
 *,
 *::before,
@@ -30,7 +30,7 @@ export default {
   justify-content: center;
   align-items: center;
   align-content: space-between;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .text {
@@ -83,7 +83,7 @@ h1::after{
 }
 
 h1::before{
-  background: #213737;
+  background: #006064;
   animation: shifteffect 4s steps(22) forwards;
 }
 

frontend/src/components/ItemModel.vue

@@ -35,13 +35,64 @@
         <!-- input field -->
 
         <div class="field-header-box">
-          <div class="inputField-header">
+<!--          <div class="inputField-header">-->
-            <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"
+<!--            <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"-->
-                   @keyup.enter="addItem"/>
+<!--                   @keyup.enter="addItem"/>-->
-            <label for="inputTextField" class="formLabel">
+<!--            <label for="inputTextField" class="formLabel">-->
-              Add here ...
+<!--              Add here ...-->
-            </label>
+<!--            </label>-->
-          </div>
+          <v-row>
+            <v-col cols="3">
+              <v-text-field
+                  label="Ingredient"
+                  value=""
+                  v-model="newItem"
+                  @keyup.enter="addItem"
+                  require
+              ></v-text-field>
+            </v-col>
+            <v-col cols="2">
+              <v-text-field
+                  label="Quantity"
+                  required
+                  v-model="newQuantity"
+                  @keyup.enter="addItem"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="1">
+                <p>Unit</p>
+
+                <v-btn-toggle
+                    v-model="newUnit"
+                    tile
+                    color="deep-purple accent-3"
+                    group
+                    mandatory
+
+                >
+                  <v-btn value="units">
+                    units
+                  </v-btn>
+
+                  <v-btn value="g">
+                    g
+                  </v-btn>
+
+                  <v-btn value="ml">
+                    ml
+                  </v-btn>
+
+                </v-btn-toggle>
+            </v-col>
+            <v-col cols="1">
+<!--              <v-btn-->
+<!--                  elevation="2"-->
+<!--                  fab-->
+<!--                  @click="addItem"-->
+<!--              ><v-icon>mdi-plus</v-icon>-->
+<!--              </v-btn>-->
+            </v-col>
+          </v-row>
         </div>
 
         <!-- response element -->
@@ -197,7 +248,7 @@ export default Items
 body{
   margin: 0;
   padding: 0;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .main {
@@ -208,7 +259,7 @@ body{
   justify-content: center;
   align-items: center;
   font-size: 1.25vh;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 /* navbar-background */
@@ -218,7 +269,7 @@ body{
   left: 0;
   top: 0;
   z-index: 3;
-  background: #213737;
+  background: #006064;
   width: 100vw;
   height: 15vh;
 }
@@ -226,15 +277,7 @@ body{
 /* input field styling */
 
 .field-header-box{
-  z-index: 3;
+  color: white
-  position: fixed;
-  width: 100vw;
-  height: 5vh;
-  left: 0;
-  top: 10vh;
-  display: grid;
-  align-content: center;
-  justify-content: center;
 }
 
 .inputField-header {
@@ -258,7 +301,7 @@ body{
   outline: none;
   padding: 0.5vh;// size of font
   box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
-  background: #213737;
+  background: #006064;
 }
 
 .newItemName:hover {

frontend/src/components/LoginPage.vue

@@ -114,7 +114,7 @@ export default {
   display: grid;
   justify-content: center;
   align-items: center;
-  background: #213737;
+  background: #006064;
 }
 
 .logo {

frontend/src/components/RecipeModel.vue

@@ -215,7 +215,7 @@ export default Recipes
 body{
   margin: 0;
   padding: 0;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .main {
@@ -226,7 +226,7 @@ body{
   justify-content: center;
   align-items: center;
   font-size: 1.25vh;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 /* navbar-background */
@@ -236,30 +236,30 @@ body{
   left: 0;
   top: 0;
   z-index: 3;
-  background: #213737;
+  background: #006064;
   width: 100vw;
   height: 15vh;
 }
 
 /* input field styling */
 
-.field-header-box{
+//.field-header-box{
-  z-index: 3;
+//  z-index: 3;
-  position: fixed;
+//  position: center;
-  width: 100vw;
+//  width: 200vw;
-  height: 5vh;
+//  height: 5vh;
-  left: 0;
+//  left: 0;
-  top: 10vh;
+//  top: 10vh;
-  display: grid;
+//  display: grid;
-  align-content: center;
+//  align-content: center;
-  justify-content: center;
+//  justify-content: center;
-}
+//}
 
 .inputField-header {
   position: relative;
   z-index: 5;
   width: 20vh;
-  height: 3vh;
+  height: 2vh;
 }
 
 .newItemName {
@@ -276,7 +276,7 @@ body{
   outline: none;
   padding: 0.5vh;// size of font
   box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
-  background: #213737;
+  background: #006064;
 }
 
 .newItemName:hover {