From e93177ebb3d5c7b8d0496f58e2f21e6e7822e6cc Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Mon, 20 May 2024 17:15:17 +0200
Subject: [PATCH] update design

---
 .../login/footer/footer.component.scss        |  2 +-
 .../login/forgot-pw/forgot-pw.component.html  |  6 +-
 .../login/forgot-pw/forgot-pw.component.scss  | 77 +++++++++++-------
 .../login/forgot-pw/forgot-pw.component.ts    |  2 +
 .../login/header/header.component.scss        | 16 ++--
 src/app/components/login/login.component.scss |  2 +-
 .../login/register/register.component.html    | 11 +--
 .../login/register/register.component.scss    | 79 ++++++++-----------
 8 files changed, 108 insertions(+), 87 deletions(-)

diff --git a/src/app/components/login/footer/footer.component.scss b/src/app/components/login/footer/footer.component.scss
index 75fc943..f5eac93 100644
--- a/src/app/components/login/footer/footer.component.scss
+++ b/src/app/components/login/footer/footer.component.scss
@@ -32,7 +32,7 @@
   }
 }
 
-@media (max-height: 550px) {
+@media (max-height: 680px) {
   .footer {
     margin-bottom: 12px;
   }
diff --git a/src/app/components/login/forgot-pw/forgot-pw.component.html b/src/app/components/login/forgot-pw/forgot-pw.component.html
index 35afc78..1369d4f 100644
--- a/src/app/components/login/forgot-pw/forgot-pw.component.html
+++ b/src/app/components/login/forgot-pw/forgot-pw.component.html
@@ -7,7 +7,11 @@
     onsubmit="return false"
   >
     <div class="content">
-      <div class="headline">{{ "forgotPW.forgot" | translate }}</div>
+      <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>
diff --git a/src/app/components/login/forgot-pw/forgot-pw.component.scss b/src/app/components/login/forgot-pw/forgot-pw.component.scss
index 85552cf..e0e7714 100644
--- a/src/app/components/login/forgot-pw/forgot-pw.component.scss
+++ b/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,18 +107,22 @@ 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;
-      }
+  }
+
+  .line {
+    img {
+      width: 120px;
     }
   }
 }
@@ -125,13 +132,17 @@ section {
     width: 352px;
     height: fit-content;
     padding: 24px 36px;
+  }
+
+  .header {
     .headline {
       font-size: 36px;
     }
-    .line {
-      img {
-        width: 100px;
-      }
+  }
+
+  .line {
+    img {
+      width: 100px;
     }
   }
 
@@ -146,13 +157,17 @@ section {
   .content {
     width: calc(100vw - 96px);
     padding: 24px 36px;
+  }
+
+  .header {
     .headline {
       font-size: 36px;
     }
-    .line {
-      img {
-        width: 100px;
-      }
+  }
+
+  .line {
+    img {
+      width: 100px;
     }
   }
 
@@ -176,13 +191,17 @@ section {
   .content {
     width: calc(100vw - 72px);
     padding: 12px 24px;
+  }
+
+  .header {
     .headline {
       font-size: 32px;
     }
-    .line {
-      img {
-        width: 80px;
-      }
+  }
+
+  .line {
+    img {
+      width: 80px;
     }
   }
 
diff --git a/src/app/components/login/forgot-pw/forgot-pw.component.ts b/src/app/components/login/forgot-pw/forgot-pw.component.ts
index 8a9ac8e..d94aa2f 100644
--- a/src/app/components/login/forgot-pw/forgot-pw.component.ts
+++ b/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',
diff --git a/src/app/components/login/header/header.component.scss b/src/app/components/login/header/header.component.scss
index 82d8edc..d35947d 100644
--- a/src/app/components/login/header/header.component.scss
+++ b/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;
+  }
+}
diff --git a/src/app/components/login/login.component.scss b/src/app/components/login/login.component.scss
index 8e2ee74..3936010 100644
--- a/src/app/components/login/login.component.scss
+++ b/src/app/components/login/login.component.scss
@@ -107,7 +107,7 @@ section {
 
 @media (max-height: 800px) {
   .content {
-    top: 40%;
+    top: 42%;
   }
 }
 
diff --git a/src/app/components/login/register/register.component.html b/src/app/components/login/register/register.component.html
index 93045b7..90c62de 100644
--- a/src/app/components/login/register/register.component.html
+++ b/src/app/components/login/register/register.component.html
@@ -7,12 +7,13 @@
     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="line">
-          <img src="./../../../assets/img/login/blue-line.svg" alt="" />
-        </div>
+        <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 class="input-fields">
         <input
diff --git a/src/app/components/login/register/register.component.scss b/src/app/components/login/register/register.component.scss
index 2fdb500..1620822 100644
--- a/src/app/components/login/register/register.component.scss
+++ b/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 {
-    img {
-      width: 150px;
-    }
-    padding: 0 0 24px 0;
+  .spacer {
+    padding-left: 38px;
   }
 }
 
-.headline {
-  text-align: center;
-  app-btn-back {
-    position: absolute;
-    top: 70px;
-    left: 50px;
+.line {
+  img {
+    padding: 12px 0 24px 0;
   }
 }
 
@@ -170,20 +170,17 @@ section {
     width: 352px;
     height: fit-content;
     padding: 24px 36px;
-    p {
+  }
+
+  .header {
+    .headline {
       font-size: 47px;
     }
-    .line {
-      img {
-        width: 125px;
-      }
-    }
   }
 
-  .headline {
-    app-btn-back {
-      top: 35px;
-      left: 30px;
+  .line {
+    img {
+      width: 125px;
     }
   }
 }
@@ -192,20 +189,17 @@ section {
   .content {
     width: calc(100vw - 96px);
     padding: 24px 36px;
-    p {
+  }
+
+  .header {
+    .headline {
       font-size: 36px;
     }
-    .line {
-      img {
-        width: 112px;
-      }
-    }
   }
 
-  .headline {
-    app-btn-back {
-      top: 30px;
-      left: 25px;
+  .line {
+    img {
+      width: 112px;
     }
   }
 }
@@ -214,20 +208,17 @@ section {
   .content {
     width: calc(100vw - 72px);
     padding: 12px 24px;
-    p {
+  }
+
+  .header {
+    .headline {
       font-size: 32px;
     }
-    .line {
-      img {
-        width: 100px;
-      }
-    }
   }
 
-  .headline {
-    app-btn-back {
-      left: 15px;
-      top: 12.5px;
+  .line {
+    img {
+      width: 100px;
     }
   }