diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html index 6867dd445..244c77e88 100644 --- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html +++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html @@ -81,16 +81,7 @@

Welcome to Testrun!

-
- - Pilot Assessment -

- Pilot project support is now offered through Testrun. Follow the - instructions set out to get your pilot recommendation. -

-
-
-
+
Testrun uses Google Analytics to learn about how our users use the application. By installing and running Testrun, you understand and accept @@ -114,7 +105,7 @@

Welcome to Testrun!

(click)="confirm(optOut)" class="confirm-button" color="primary" - mat-raised-button + mat-flat-button aria-label="OK and Proceed to Testrun" type="button"> OK diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss index 423bf9a09..12caa7726 100644 --- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss +++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss @@ -15,6 +15,7 @@ */ @use 'colors'; @use 'mixins'; +@use 'variables'; ::ng-deep :root { --mat-dialog-container-max-width: 570px; @@ -57,30 +58,65 @@ } .consent-main-content { - padding: 0 66px 16px 66px; - font-family: Roboto, sans-serif; + padding: 0 34px 16px 54px; + font-family: variables.$font-text; font-size: 14px; line-height: 20px; - letter-spacing: 0.2px; - color: colors.$grey-800; + letter-spacing: 0; + color: colors.$on-surface; h2 { - font-size: 14px; + font-size: 16px; + font-weight: 500; + line-height: 24px; } ul { padding-inline-start: 24px; margin-bottom: 0; + + li::marker { + color: colors.$primary; + } + } + + .message-link { + color: colors.$primary; } } .section-container { + ::ng-deep .callout-context { + padding: 0 0 4px; + } + .section-title { - font-size: 18px; + font-size: 16px; + line-height: 24px; + letter-spacing: 0; + font-weight: 500; + font-family: variables.$font-text; } + + .section-content { + margin: 0; + font-family: variables.$font-text; + } + .section-action-container { text-align: end; - margin-bottom: 0; + margin: 12px 0 0; + } + + .download-link { + color: colors.$orange-40; + font-family: variables.$font-text; + font-size: 14px; + margin-right: -2px; + + ::ng-deep .mat-focus-indicator { + display: none; + } } } @@ -95,14 +131,47 @@ } } +.section-container-info { + ::ng-deep .callout-container { + padding: 10px 16px 14px 16px; + } + + ::ng-deep .callout-icon { + padding: 6px 0; + } +} + .consent-actions { - border-top: 1px solid colors.$lighter-grey; - margin: 0 -16px; - padding: 16px 16px 0 16px; + border-top: 1px solid colors.$outline-variant; + padding: 16px 0 0; + margin: 0; min-height: 30px; justify-content: space-between; } -.consent-actions-opt-out ::ng-deep label { - font-weight: 500; +.consent-actions-opt-out { + ::ng-deep label { + font-family: variables.$font-text; + } + + ::ng-deep .mdc-checkbox__native-control:focus ~ .mat-focus-indicator::before { + content: none; + } + + ::ng-deep + .mdc-checkbox__native-control:focus-visible + ~ .mat-focus-indicator::before { + content: ''; + } +} + +.confirm-button { + border-radius: 12px; + padding: 0 6px; + min-width: 54px; + margin-right: 24px; + + ::ng-deep .mat-focus-indicator { + display: none; + } } diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss index 322923f4e..5cf6d3414 100644 --- a/modules/ui/src/styles.scss +++ b/modules/ui/src/styles.scss @@ -66,6 +66,14 @@ ); } +.consent-dialog { + @include mat.dialog-overrides( + ( + container-color: colors.$white, + ) + ); +} + .filter-result { @include mat.checkbox-overrides( ( @@ -116,7 +124,9 @@ body { .consent-dialog, .device-form-dialog, .initiate-test-run-dialog { - max-height: 100vh; + &.cdk-overlay-pane { + max-height: 100vh; + } } .device-form-dialog .mat-mdc-dialog-container .mdc-dialog__surface {