diff --git a/modules/ui/src/app/components/empty-message/empty-message.component.scss b/modules/ui/src/app/components/empty-message/empty-message.component.scss index 47ec834e5..2729a3476 100644 --- a/modules/ui/src/app/components/empty-message/empty-message.component.scss +++ b/modules/ui/src/app/components/empty-message/empty-message.component.scss @@ -15,6 +15,7 @@ */ @use 'variables'; @use 'colors'; +@use 'mixins'; .empty-message.vertical { display: flex; @@ -52,10 +53,7 @@ } .empty-message-header { - font-weight: 400; - line-height: 32px; - font-size: 24px; - color: colors.$on-surface; + @include mixins.headline-small; } .empty-message-main { diff --git a/modules/ui/src/app/pages/testrun/testrun.component.html b/modules/ui/src/app/pages/testrun/testrun.component.html index 92f8cf958..ef9229a85 100644 --- a/modules/ui/src/app/pages/testrun/testrun.component.html +++ b/modules/ui/src/app/pages/testrun/testrun.component.html @@ -92,14 +92,21 @@
- +
+

Testrun is ready!

+ + + +
@@ -120,7 +127,8 @@ " (click)="openTestRunModal(vm.testModules)" mat-flat-button> - Start New Testrun + add + Start Testing diff --git a/modules/ui/src/app/pages/testrun/testrun.component.scss b/modules/ui/src/app/pages/testrun/testrun.component.scss index 4b8c4f22b..3e5d0a5a5 100644 --- a/modules/ui/src/app/pages/testrun/testrun.component.scss +++ b/modules/ui/src/app/pages/testrun/testrun.component.scss @@ -29,6 +29,34 @@ .progress-content-empty { @include mixins.content-empty; + background-image: url(/assets/icons/empty-testrun.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.empty-content { + display: flex; + flex-direction: column; + align-items: center; + + .empty-content-heading { + @include mixins.headline-small; + margin: 0; + } + + .empty-content-info { + margin: 12px 0 32px; + font-size: 16px; + line-height: 24px; + font-family: variables.$font-text; + color: colors.$on-surface-variant; + background: colors.$white; + } + + .start-button { + @include mixins.add-button; + } } .progress-toolbar { @@ -116,8 +144,7 @@ } .report-button, -.stop-button, -.start-button { +.stop-button { letter-spacing: 0.25px; padding: 0 24px; } diff --git a/modules/ui/src/assets/icons/empty-testrun.svg b/modules/ui/src/assets/icons/empty-testrun.svg new file mode 100644 index 000000000..2ead11632 --- /dev/null +++ b/modules/ui/src/assets/icons/empty-testrun.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ui/src/theming/mixins.scss b/modules/ui/src/theming/mixins.scss index 5910e5deb..3b3c10c5d 100644 --- a/modules/ui/src/theming/mixins.scss +++ b/modules/ui/src/theming/mixins.scss @@ -108,3 +108,12 @@ 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); } + +@mixin headline-small { + font-size: 24px; + line-height: 32px; + color: colors.$on-surface; + font-family: variables.$font-primary; + font-weight: 400; + letter-spacing: 0; +}