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
+
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 })) ]) ]) ]