login and registration: update forms layout

Author: lyubov-voloshko

frontend/src/app/components/login/login.component.css

@@ -9,9 +9,13 @@
     justify-content: center;
     height: 100%;
     margin: 0 auto;
-    max-width: 460px;
-    min-width: 300px;
-    width: 90%;
+    width: 464px;
+}
+
+@media screen and (max-width: 600px) {
+    .login-page {
+        width: 98%;
+    }
 }
 
 .login-form {
@@ -24,17 +28,26 @@
 }
 
 .soc-buttons {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: 16px;
+    display: flex;
     margin: 20px 0 40px;
 }
 
 @media screen and (max-width: 600px) {
     .soc-buttons {
-        grid-template-columns: 1fr;
-        grid-column-gap: 0;
-        grid-row-gap: 16px;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+    }
+}
+
+.fb-button {
+    margin-left: 16px;
+    width: 224px;
+}
+
+@media screen and (max-width: 600px) {
+    .fb-button {
+        margin-left: 0;
     }
 }
 

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

@@ -45,7 +45,7 @@ <h1 class="mat-h1">Welcome to Autoadmin</h1>
 
                 <div id="google_login_button"></div>
 
-                <button type="button" mat-stroked-button class="soc-button"
+                <button type="button" mat-stroked-button class="fb-button"
                     angulartics2On="click"
                     angularticsAction="Login: login with facebook is clicked"
                     (click)="loginWithFacebook()">

frontend/src/app/components/login/login.component.ts

@@ -39,7 +39,7 @@ export class LoginComponent implements OnInit {
     //@ts-ignore
     google.accounts.id.renderButton(
       document.getElementById("google_login_button"),
-      { theme: "filled_blue", size: "large", width: "100%" }
+      { theme: "filled_blue", size: "large", width: "224px" }
     );
     //@ts-ignore
     google.accounts.id.prompt();

frontend/src/app/components/registration/registration.component.css

@@ -22,12 +22,12 @@
     display: flex;
     flex-direction: column;
     margin: 0 auto;
-    width: clamp(300px, 29vw, 450px);
+    width: 400px;
 }
 
 @media screen and (max-width: 600px) {
     .register-form {
-        width: 100%;
+        width: 90%;
     }
 }