feat: styles for login form component

Author: joshuamorony

src/app/auth/login/login.component.ts

@@ -8,11 +8,13 @@ import { AuthService } from 'src/app/shared/data-access/auth.service';
   standalone: true,
   selector: 'app-login',
   template: `
-    <app-login-form
-      [loginStatus]="loginService.status()"
-      (login)="loginService.login$.next($event)"
-    />
-    <a routerLink="/auth/register">Create account</a>
+    <div class="container gradient-bg">
+      <app-login-form
+        [loginStatus]="loginService.status()"
+        (login)="loginService.login$.next($event)"
+      />
+      <a routerLink="/auth/register">Create account</a>
+    </div>
   `,
   providers: [LoginService],
   imports: [RouterModule, LoginFormComponent],

src/app/auth/login/ui/login-form.component.ts

@@ -1,5 +1,10 @@
 import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Credentials } from 'src/app/shared/interfaces/credentials';
 import { LoginStatus } from '../data-access/login.service';
 
@@ -11,24 +16,72 @@ import { LoginStatus } from '../data-access/login.service';
       [formGroup]="loginForm"
       (ngSubmit)="login.emit(loginForm.getRawValue())"
     >
-      <input formControlName="email" type="email" placeholder="email" />
-      <input
-        formControlName="password"
-        type="password"
-        placeholder="password"
-      />
+      <mat-form-field appearance="fill">
+        <mat-label>email</mat-label>
+        <input
+          matNativeControl
+          formControlName="email"
+          type="email"
+          placeholder="email"
+        />
+        <mat-icon matPrefix>mail</mat-icon>
+      </mat-form-field>
+      <mat-form-field appearance="fill">
+        <mat-label>password</mat-label>
+        <input
+          matNativeControl
+          formControlName="password"
+          type="password"
+          placeholder="password"
+        />
+        <mat-icon matPrefix>lock</mat-icon>
+      </mat-form-field>
+
       @if (loginStatus === 'error'){
-      <p>Could not log you in with those details.</p>
+      <mat-error>Could not log you in with those details.</mat-error>
       } @if(loginStatus === 'authenticating'){
-      <p>Authenticating...</p>
+      <mat-spinner diameter="50"></mat-spinner>
       }
 
-      <button type="submit" [disabled]="loginStatus === 'authenticating'">
+      <button
+        mat-raised-button
+        color="accent"
+        type="submit"
+        [disabled]="loginStatus === 'authenticating'"
+      >
         Login
       </button>
     </form>
   `,
-  imports: [ReactiveFormsModule],
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+  ],
+  styles: [
+    `
+      form {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      button {
+        width: 100%;
+      }
+
+      mat-error {
+        margin: 5px 0;
+      }
+
+      mat-spinner {
+        margin: 1rem 0;
+      }
+    `,
+  ],
 })
 export class LoginFormComponent {
   @Input({ required: true }) loginStatus!: LoginStatus;

src/styles.scss

@@ -13,14 +13,14 @@
 // hue. Available color palettes: https://material.io/design/color/
 $angularstart-chat-primary: mat.define-palette(mat.$orange-palette);
 $angularstart-chat-accent: mat.define-palette(
-  mat.$yellow-palette,
-  A200,
-  A100,
-  A400
+  mat.$blue-gray-palette,
+  700,
+  800,
+  900
 );
 
 // The warn palette is optional (defaults to red).
-$angularstart-chat-warn: mat.define-palette(mat.$deep-orange-palette);
+$angularstart-chat-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
@@ -68,14 +68,24 @@ body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-.header {
-  box-shadow: 0px -7px 11px 0px var(--dark);
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
-form {
-  input {
-    padding: 1rem;
-  }
+.gradient-bg {
+  background: linear-gradient(
+    138deg,
+    var(--primary-darker-color) 0%,
+    var(--primary-color) 100%
+  );
+}
+
+.header {
+  box-shadow: 0px -7px 11px 0px var(--dark);
 }
 
 @keyframes animateInPrimary {