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 {