diff --git a/web-app/src/app/ingress/authorization/authorization.component.html b/web-app/src/app/ingress/authorization/authorization.component.html
index 6aa2b3202..e28e557aa 100644
--- a/web-app/src/app/ingress/authorization/authorization.component.html
+++ b/web-app/src/app/ingress/authorization/authorization.component.html
@@ -1,14 +1,19 @@
-
Access Code
-Please enter your Mage access code. If you do not have an access code please ask you Mage administrator to provide you with one.
+
+
-
-
- Access Code
-
- Invalid access code
-
-
+
+
+ Access Code
+
+ Invalid access code
+
+
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/web-app/src/app/ingress/authorization/authorization.component.scss b/web-app/src/app/ingress/authorization/authorization.component.scss
index a4661179c..a7895fb7b 100644
--- a/web-app/src/app/ingress/authorization/authorization.component.scss
+++ b/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%;
diff --git a/web-app/src/app/ingress/ingress.component.ts b/web-app/src/app/ingress/ingress.component.ts
index 6598dda40..56534f4a3 100644
--- a/web-app/src/app/ingress/ingress.component.ts
+++ b/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 }))
])
])
]