bugfix design

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

@@ -128,6 +128,9 @@ section {
         top: 73px;
       }
     }
+    .passwordEye {
+      top: 76px;
+    }
   }
 
   .input-fields {

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

@@ -10,8 +10,10 @@
       <div class="headline">
         <app-btn-back></app-btn-back>
         <p>Sign up</p>
+        <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

@@ -24,19 +24,21 @@ section {
     font-weight: 700;
     position: relative;
   }
+  .line {
     img {
-    padding: 12px 0 24px 0;
+      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;
+      }
+    }
+  }
+}

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(