From 00019b9f0c5da44e62e2e93670bfe58e2fe88121 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Tue, 14 May 2024 03:14:33 +0200
Subject: [PATCH] bugfix design

---
 src/app/components/login/login.component.scss |   3 +
 .../login/register/register.component.html    |   4 +-
 .../login/register/register.component.scss    | 123 ++++++++++++++++--
 src/app/services/login.service.ts             |   2 +-
 4 files changed, 120 insertions(+), 12 deletions(-)

diff --git a/src/app/components/login/login.component.scss b/src/app/components/login/login.component.scss
index 09caef3..63c10b7 100644
--- a/src/app/components/login/login.component.scss
+++ b/src/app/components/login/login.component.scss
@@ -128,6 +128,9 @@ section {
         top: 73px;
       }
     }
+    .passwordEye {
+      top: 76px;
+    }
   }
 
   .input-fields {
diff --git a/src/app/components/login/register/register.component.html b/src/app/components/login/register/register.component.html
index fd57105..7747472 100644
--- a/src/app/components/login/register/register.component.html
+++ b/src/app/components/login/register/register.component.html
@@ -10,7 +10,9 @@
       <div class="headline">
         <app-btn-back></app-btn-back>
         <p>Sign up</p>
-        <img src="./../../../assets/img/login/blue-line.svg" alt="" />
+        <div class="line">
+          <img src="./../../../assets/img/login/blue-line.svg" alt="" />
+        </div>
       </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 4e2cab5..dc7f5c6 100644
--- a/src/app/components/login/register/register.component.scss
+++ b/src/app/components/login/register/register.component.scss
@@ -24,19 +24,21 @@ section {
     font-weight: 700;
     position: relative;
   }
-  img {
-    padding: 12px 0 24px 0;
+  .line {
+    img {
+      width: 150px;
+    }
+    padding: 0 0 24px 0;
   }
 }
 
 .headline {
   position: relative;
   text-align: center;
-  width: 100%;
   app-btn-back {
     position: absolute;
     top: 20px;
-    left: -50px;
+    left: -150px;
   }
 }
 
@@ -61,33 +63,33 @@ section {
     &:nth-child(2) {
       position: absolute;
       right: 0;
-      top: 5px;
+      top: 15px;
     }
     &:nth-child(5) {
       position: absolute;
       right: 0;
-      top: 92px;
+      top: 102px;
     }
     &:nth-child(8) {
       position: absolute;
       right: 0;
-      top: 176px;
+      top: 186px;
     }
     &:nth-child(11) {
       position: absolute;
       right: 0px;
-      top: 262px;
+      top: 272px;
     }
   }
   .passwordEye {
     position: absolute;
     right: -5px;
-    top: 176px;
+    top: 186px;
   }
   .passwordEyeConfirm {
     position: absolute;
     right: -5px;
-    top: 262px;
+    top: 272px;
   }
   .custom-input:focus + .custom-img {
     display: none;
@@ -153,3 +155,104 @@ section {
     }
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 650px) {
+  .content {
+    width: 322px;
+    height: fit-content;
+    padding: 24px 48px;
+    p {
+      font-size: 47px;
+    }
+    .line {
+      img {
+        width: 125px;
+      }
+    }
+  }
+
+  .headline {
+    app-btn-back {
+      position: absolute;
+      top: 10px;
+      left: -100px;
+    }
+  }
+}
+
+@media (max-height: 550px) {
+  .content {
+    top: 45%;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .content {
+    width: 252px;
+    height: fit-content;
+    padding: 12px 24px;
+    p {
+      font-size: 36px;
+    }
+    .line {
+      img {
+        width: 100px;
+      }
+    }
+  }
+
+  .headline {
+    app-btn-back {
+      position: absolute;
+      top: 5px;
+      left: -70px;
+    }
+  }
+
+  .input-fields {
+    .custom-input {
+      font-size: 16px;
+    }
+    .custom-img {
+      &:nth-child(2) {
+        top: 15px;
+      }
+      &:nth-child(5) {
+        top: 90px;
+      }
+      &:nth-child(8) {
+        top: 162px;
+      }
+      &:nth-child(11) {
+        top: 237px;
+      }
+    }
+    .passwordEye {
+      top: 162px;
+    }
+    .passwordEyeConfirm {
+      top: 237px;
+    }
+  }
+
+  .input-fields {
+    width: 80%;
+  }
+
+  .error-msg {
+    height: 18px;
+    p {
+      font-size: 10px !important;
+    }
+  }
+
+  .privacy-policy {
+    .label {
+      p {
+        font-size: 12px;
+      }
+    }
+  }
+}
diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts
index ebade29..b3bdf07 100644
--- a/src/app/services/login.service.ts
+++ b/src/app/services/login.service.ts
@@ -25,7 +25,7 @@ import { User } from '../interfaces/user.interface';
 export class LoginService {
   firestore: Firestore = inject(Firestore);
   passwordFieldType: string = 'password';
-  passwordIcon: string = './assets/img/login/close-eye.svg';
+  passwordIcon: string = './../../../assets/img/login/close-eye.svg';
   errorCode: string = '';
 
   constructor(