[web] clean up ingress UI/UX

Author: newmanw

web-app/src/app/ingress/authorization/authorization.component.html

@@ -1,14 +1,19 @@
-<div class="title">Access Code</div>
-<div class="subtitle">Please enter your Mage access code. If you do not have an access code please ask you Mage administrator to provide you with one.</div>
+<div class="authorization">
+  <div class="header">
+    <div class="header__title">Access Code</div>
+    <div class="header__message">Please enter your Mage access code. If you do not have an access code please ask you Mage
+      administrator to provide you with one.</div>
+  </div>
 
-<div>
-  <mat-form-field appearance="fill">
-    <mat-label>Access Code</mat-label>
-    <input matInput placeholder="Access Code" type="deviceId" [formControl]="deviceId" required>
-    <mat-error *ngIf="deviceId.hasError('invalid')">Invalid access code</mat-error>
-  </mat-form-field>
-</div>
+  <div>
+    <mat-form-field appearance="fill">
+      <mat-label>Access Code</mat-label>
+      <input matInput placeholder="Access Code" type="deviceId" [formControl]="deviceId" required>
+      <mat-error *ngIf="deviceId.hasError('invalid')">Invalid access code</mat-error>
+    </mat-form-field>
+  </div>
 
-<div class="authorize">
-  <button mat-flat-button color="primary" (click)="authorize()">Continue to Mage</button>
-</div>
+  <div class="authorize">
+    <button mat-flat-button color="primary" (click)="authorize()">Continue to Mage</button>
+  </div>
+</div>

web-app/src/app/ingress/authorization/authorization.component.scss

@@ -5,13 +5,28 @@
   width: 100%;
 }
 
-.title {
+.authorization {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: end;
+  height: 30vh;
+}
+
+.header__title {
   font: 400 34px / 40px Roboto, "Helvetica Neue", sans-serif;
-  color: mat.get-color-from-palette($app-primary);
+  color: $primary;
   margin-bottom: 16px;
 }
 
-.subtitle {
+.header__message {
   font: 400 16px / 20px Roboto,"Helvetica Neue",sans-serif;
   margin-bottom: 32px;
   opacity: 60%;

web-app/src/app/ingress/ingress.component.ts

@@ -76,10 +76,10 @@ class Initialize extends Ingress {
     trigger('slide', [
       transition(':enter', [
         style({ transform: 'translateX(100%)' }),
-        animate('250ms', style({ transform: 'translateX(0%)' })),
+        animate('250ms', style({ transform: 'translateX(0%)', opacity: 1 })),
       ]),
       transition(':leave', [
-        animate('250ms', style({ transform: 'translateX(-100%)' }))
+        animate('250ms', style({ transform: 'translateX(-100%)', opacity: 0 }))
       ])
     ])
   ]