update design

src/app/components/login/footer/footer.component.scss

@@ -32,7 +32,7 @@
   }
 }
 
-@media (max-height: 550px) {
+@media (max-height: 680px) {
   .footer {
     margin-bottom: 12px;
   }

src/app/components/login/forgot-pw/forgot-pw.component.html

@@ -7,7 +7,11 @@
     onsubmit="return false"
   >
     <div class="content">
+      <div class="header">
+        <app-btn-back></app-btn-back>
         <div class="headline">{{ "forgotPW.forgot" | translate }}</div>
+        <div class="spacer"></div>
+      </div>
       <div class="line">
         <img src="./../../../assets/img/login/blue-line.svg" alt="" />
       </div>

src/app/components/login/forgot-pw/forgot-pw.component.scss

@@ -11,17 +11,30 @@ section {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
-  width: 722px;
+  width: 652px;
   height: fit-content;
   background: var(--white);
   box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.05);
   border-radius: 30px;
   padding: 48px 64px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
   .headline {
     text-align: center;
     font-size: 61px;
     font-weight: 700;
   }
+  .spacer {
+    padding-left: 38px;
+  }
+}
+
+.line {
   img {
     padding: 12px 0 24px 0;
   }
@@ -48,18 +61,8 @@ section {
     &:nth-child(2) {
       position: absolute;
       right: 0;
-      top: 5px;
+      top: 17px;
     }
-    &:nth-child(5) {
-      position: absolute;
-      right: 0;
-      top: 88px;
-    }
-  }
-  .passwordEye {
-    position: absolute;
-    right: -5px;
-    top: 88px;
   }
   .custom-input:focus + .custom-img {
     display: none;
@@ -104,36 +107,44 @@ section {
   }
 }
 
-@media screen and (max-width: 850px) {
+@media screen and (max-width: 800px) {
   .content {
     width: 552px;
     height: fit-content;
     padding: 24px 36px;
+  }
+
+  .header {
     .headline {
       font-size: 47px;
     }
+  }
+
   .line {
     img {
       width: 120px;
     }
   }
 }
-}
 
 @media screen and (max-width: 650px) {
   .content {
     width: 352px;
     height: fit-content;
     padding: 24px 36px;
+  }
+
+  .header {
     .headline {
       font-size: 36px;
     }
+  }
+
   .line {
     img {
       width: 100px;
     }
   }
-  }
 
   .notice {
     p {
@@ -146,15 +157,19 @@ section {
   .content {
     width: calc(100vw - 96px);
     padding: 24px 36px;
+  }
+
+  .header {
     .headline {
       font-size: 36px;
     }
+  }
+
   .line {
     img {
       width: 100px;
     }
   }
-  }
 
   .loading-text {
     margin-top: 180px;
@@ -176,15 +191,19 @@ section {
   .content {
     width: calc(100vw - 72px);
     padding: 12px 24px;
+  }
+
+  .header {
     .headline {
       font-size: 32px;
     }
+  }
+
   .line {
     img {
       width: 80px;
     }
   }
-  }
 
   .input-fields {
     .custom-input {

src/app/components/login/forgot-pw/forgot-pw.component.ts

@@ -10,6 +10,7 @@ import { FirebaseService } from '../../../services/firebase.service';
 import { LoginService } from '../../../services/login.service';
 import { SharedService } from '../../../services/shared.service';
 import { Router } from '@angular/router';
+import { BtnBackComponent } from '../../../shared/components/buttons/btn-back/btn-back.component';
 
 @Component({
   selector: 'app-forgot-pw',
@@ -22,6 +23,7 @@ import { Router } from '@angular/router';
     HeaderComponent,
     TranslateModule,
     LoadingDialogComponent,
+    BtnBackComponent,
   ],
   templateUrl: './forgot-pw.component.html',
   styleUrl: './forgot-pw.component.scss',

src/app/components/login/header/header.component.scss

@@ -53,12 +53,6 @@
 
 /*------------- RESPONSIVE -------------*/
 
-@media (max-height: 700px) {
-  .logo {
-    display: none;
-  }
-}
-
 @media screen and (max-width: 650px) {
   .register {
     top: unset;
@@ -77,3 +71,13 @@
     width: 78px;
   }
 }
+
+@media (max-height: 680px) {
+  .logo {
+    display: none;
+  }
+
+  .register {
+    bottom: 79px;
+  }
+}

src/app/components/login/login.component.scss

@@ -107,7 +107,7 @@ section {
 
 @media (max-height: 800px) {
   .content {
-    top: 40%;
+    top: 42%;
   }
 }
 

src/app/components/login/register/register.component.html

@@ -7,13 +7,14 @@
     onsubmit="return false"
   >
     <div class="content">
-      <div class="headline">
+      <div class="header">
         <app-btn-back></app-btn-back>
-        <p>{{ "register.signup" | translate }}</p>
+        <div class="headline">{{ "register.signup" | translate }}</div>
+        <div class="spacer"></div>
+      </div>
       <div class="line">
         <img src="./../../../assets/img/login/blue-line.svg" alt="" />
       </div>
-      </div>
       <div class="input-fields">
         <input
           type="name"

src/app/components/login/register/register.component.scss

@@ -4,8 +4,6 @@ section {
   position: relative;
 }
 
-// REGISTER
-
 .content {
   display: flex;
   flex-direction: column;
@@ -20,24 +18,26 @@ section {
   box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.05);
   border-radius: 30px;
   padding: 48px 64px;
-  p {
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  .headline {
+    text-align: center;
     font-size: 61px;
     font-weight: 700;
   }
-  .line {
+  .spacer {
-    img {
+    padding-left: 38px;
-      width: 150px;
-    }
-    padding: 0 0 24px 0;
   }
 }
 
-.headline {
+.line {
-  text-align: center;
+  img {
-  app-btn-back {
+    padding: 12px 0 24px 0;
-    position: absolute;
-    top: 70px;
-    left: 50px;
   }
 }
 
@@ -170,20 +170,17 @@ section {
     width: 352px;
     height: fit-content;
     padding: 24px 36px;
-    p {
+  }
+
+  .header {
+    .headline {
       font-size: 47px;
     }
-    .line {
-      img {
-        width: 125px;
-      }
-    }
   }
 
-  .headline {
+  .line {
-    app-btn-back {
+    img {
-      top: 35px;
+      width: 125px;
-      left: 30px;
     }
   }
 }
@@ -192,20 +189,17 @@ section {
   .content {
     width: calc(100vw - 96px);
     padding: 24px 36px;
-    p {
+  }
+
+  .header {
+    .headline {
       font-size: 36px;
     }
-    .line {
-      img {
-        width: 112px;
-      }
-    }
   }
 
-  .headline {
+  .line {
-    app-btn-back {
+    img {
-      top: 30px;
+      width: 112px;
-      left: 25px;
     }
   }
 }
@@ -214,20 +208,17 @@ section {
   .content {
     width: calc(100vw - 72px);
     padding: 12px 24px;
-    p {
+  }
+
+  .header {
+    .headline {
       font-size: 32px;
     }
-    .line {
-      img {
-        width: 100px;
-      }
-    }
   }
 
-  .headline {
+  .line {
-    app-btn-back {
+    img {
-      left: 15px;
+      width: 100px;
-      top: 12.5px;
     }
   }