[web] clean up disclaimer UI/UX

Author: newmanw

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

@@ -1,13 +1,15 @@
-<div>
-  <div class="title">{{title}}</div>
+<div class="container">
+  <div class="header">
+    <div class="header__title">{{title}}</div>
+  </div>
 
   <div class="disclaimer">
-    <div class="subtitle">{{text}}</div>
-    
-    <div class="actions">
-      <button class="actions__button" mat-stroked-button (click)="onReject()">Exit</button>
-      <button class="actions__button" mat-flat-button color="primary" (click)="onAccept()">Accept</button>
-    </div>
+    <div class="disclaimer__text">{{text}}</div>
+  </div>
+
+  <div class="actions">
+    <button class="actions__button" mat-stroked-button (click)="onReject()">Exit</button>
+    <button class="actions__button" mat-flat-button color="primary" (click)="onAccept()">Accept</button>
   </div>
 
 </div>

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

@@ -1,17 +1,32 @@
 @use '@angular/material' as mat;
 @import "variables.scss";
 
-.disclaimer {
-  overflow-y: scroll;
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: end;
+  height: 30vh;
 }
 
-.title {
+.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 {
+.disclaimer {
+  overflow-y: scroll;
+}
+
+.disclaimer__text {
   font: 400 16px / 20px Roboto, "Helvetica Neue", sans-serif;
   margin-bottom: 32px;
   opacity: 60%;