update responsive design

frontend/src/app/components/auth/auth.component.scss

@@ -53,3 +53,22 @@ form {
   padding: 6px;
   width: 57%;
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 550px) {
+  form {
+    flex-direction: column;
+    width: 90%;
+    input {
+      width: 100%;
+    }
+  }
+
+  .error-msg {
+    position: relative;
+    padding: 0;
+    height: 12px;
+    margin-bottom: 8px;
+  }
+}

frontend/src/app/shared/components/footer/footer.component.scss

@@ -22,3 +22,13 @@ footer {
     }
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 350px) {
+  footer {
+    a {
+      padding: 0 24px;
+    }
+  }
+}

frontend/src/app/shared/components/header/header.component.html

@@ -11,9 +11,12 @@
     ></app-btn-large>
   </div>
   } @else {
-  <div class="logo" routerLink="/">
+  <div class="logo-full" routerLink="/">
     <img src="./../../../../assets/img/logo_full.svg" alt="" />
   </div>
+  <div class="logo-mobile" routerLink="/">
+    <img src="./../../../../assets/img/logo_ci.svg" alt="" />
+  </div>
   <div class="btn">
     <app-btn-large [value]="'Log in'" routerLink="/login"></app-btn-large>
   </div>

frontend/src/app/shared/components/header/header.component.scss

@@ -13,7 +13,9 @@ header {
   z-index: 1;
 }
 
-.logo {
+.logo,
+.logo-full,
+.logo-mobile {
   cursor: pointer;
   img {
     filter: drop-shadow(1px 1px 3px $black);
@@ -21,3 +23,23 @@ header {
     height: 32px;
   }
 }
+
+.logo-mobile {
+  display: none;
+}
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 700px) {
+  header {
+    padding: 10px 24px;
+  }
+
+  .logo-full {
+    display: none;
+  }
+
+  .logo-mobile {
+    display: block;
+  }
+}

frontend/src/assets/style/auth-layout.scss

@@ -48,3 +48,17 @@ section {
     }
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 660px) {
+  .content {
+    padding: 43px 24px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .content {
+    width: 80%;
+  }
+}

frontend/src/assets/style/form.scss

@@ -44,3 +44,13 @@ form {
     font-weight: 400 !important;
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 600px) {
+  form {
+    input {
+      width: 100%;
+    }
+  }
+}