396664082: (feat) [GM3] apply changes to start testing modal

modules/ui/src/app/components/device-item/device-item.component.scss

@@ -51,8 +51,8 @@ $border-radius: 12px;
   }
 
   &.non-interactive {
+    background: colors.$primary-container;
     &:hover {
-      background: colors.$surface-container;
       cursor: default;
     }
   }

modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html

@@ -14,7 +14,7 @@
 limitations under the License.
 -->
 <form [formGroup]="initiateForm" class="progress-initiate-form">
-  <span class="progress-initiate-form-title">Start New Testrun</span>
+  <span class="progress-initiate-form-title">Start new Testrun</span>
 
   <section
     *ngIf="devices$ | async as devices"
@@ -32,6 +32,7 @@
     <app-device-item
       *ngIf="selectedDevice !== null"
       [deviceView]="DeviceView.Basic"
+      class="selected-device"
       [tabIndex]="-1"
       [device]="selectedDevice"></app-device-item>
     <mat-form-field
@@ -64,9 +65,14 @@
         [testModules]="testModules">
       </app-device-tests>
     </ng-container>
-    <mat-error *ngIf="error$ | async">
+    <mat-error *ngIf="error$ | async" class="device-tests-error">
       <span>{{ error$ | async }}</span>
     </mat-error>
+    <ng-container *ngIf="selectedDevice !== null">
+      <app-callout [type]="CalloutType.Info">
+        Top Tip: Your device must be powered off before starting Testrun
+      </app-callout>
+    </ng-container>
   </section>
 
   <mat-dialog-actions class="progress-initiate-form-actions">
@@ -89,7 +95,7 @@
       color="primary"
       mat-flat-button
       type="button">
-      Start Testrun
+      Start new Testrun
     </button>
   </mat-dialog-actions>
 

modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.scss

@@ -15,12 +15,45 @@
  */
 @use 'colors';
 @use 'variables';
+@use 'mixins';
 
 :host {
   display: grid;
   grid-template-rows: 1fr;
   overflow: hidden;
-  width: 450px;
+  width: 490px;
+  background: colors.$surface-container;
+
+  app-device-tests {
+    padding-left: 16px;
+
+    ::ng-deep .device-form-test-modules {
+      min-height: 78px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+      grid-auto-flow: column;
+      padding-top: 8px;
+      padding-left: 24px;
+
+      p {
+        margin: 6px 0;
+      }
+    }
+
+    ::ng-deep .device-tests-title {
+      margin: 16px 0 0;
+      font-size: 22px;
+      line-height: 28px;
+    }
+  }
+
+  app-callout {
+    ::ng-deep .callout-container.info {
+      margin: 8px 0 0;
+      padding: 16px 16px 12px;
+    }
+  }
 }
 
 .progress-initiate-form {
@@ -30,19 +63,17 @@
 }
 
 .progress-initiate-form-title {
-  color: colors.$grey-800;
-  font-size: 22px;
-  line-height: 28px;
-  padding: 24px;
-  border-bottom: 1px solid colors.$light-grey;
+  @include mixins.headline-large;
+  padding: 24px 24px 20px;
+  text-align: center;
 }
 
 .progress-initiate-form-content {
   overflow: auto;
   min-height: 78px;
-  padding: 32px 0;
+  padding: 4px 24px 8px;
   display: grid;
-  gap: 24px;
+  gap: 8px;
   justify-content: center;
   justify-items: center;
   grid-template-columns: 1fr;
@@ -56,8 +87,31 @@
 .progress-initiate-form-actions {
   min-height: 30px;
   justify-content: space-between;
-  padding: 16px;
-  border-top: 1px solid colors.$lighter-grey;
+  padding: 24px 32px;
+
+  button {
+    border-radius: variables.$corner-medium;
+  }
+
+  .progress-initiate-form-actions-change-device {
+    margin-right: auto;
+  }
+}
+
+.progress-initiate-form-actions-change-device[disabled]
+  ::ng-deep
+  .mat-mdc-button-persistent-ripple::before {
+  opacity: 1;
+  background: rgba(31, 31, 31, 0.1);
+  color: colors.$on-surface;
+}
+
+.selected-device {
+  margin-bottom: 16px;
+}
+
+.device-tests-error {
+  padding-left: 16px;
 }
 
 .hidden {

modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts

@@ -49,6 +49,7 @@ import { AppState } from '../../../../store/state';
 import { selectDevices } from '../../../../store/selectors';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { TestrunStatus } from '../../../../model/testrun-status';
+import { CalloutType } from '../../../../model/callout-type';
 import { CommonModule } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -60,6 +61,7 @@ import { DeviceItemComponent } from '../../../../components/device-item/device-i
 import { SpinnerComponent } from '../../../../components/spinner/spinner.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatButtonModule } from '@angular/material/button';
+import { CalloutComponent } from '../../../../components/callout/callout.component';
 
 interface DialogData {
   device?: Device;
@@ -83,6 +85,7 @@ interface DialogData {
     ReactiveFormsModule,
     DeviceTestsComponent,
     SpinnerComponent,
+    CalloutComponent,
     MatTooltipModule,
   ],
 })
@@ -107,6 +110,7 @@ export class TestrunInitiateFormComponent
   setFirmwareFocus = false;
   readonly DeviceStatus = DeviceStatus;
   readonly DeviceView = DeviceView;
+  public readonly CalloutType = CalloutType;
   error$: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(
     null
   );

modules/ui/src/theming/mixins.scss

@@ -109,11 +109,21 @@
     0px 1px 3px 1px rgba(0, 0, 0, 0.15);
 }
 
-@mixin headline-small {
-  font-size: 24px;
-  line-height: 32px;
+@mixin headline {
   color: colors.$on-surface;
   font-family: variables.$font-primary;
   font-weight: 400;
   letter-spacing: 0;
 }
+
+@mixin headline-large {
+  font-size: 32px;
+  line-height: 40px;
+  @include headline;
+}
+
+@mixin headline-small {
+  font-size: 24px;
+  line-height: 32px;
+  @include headline;
+}

modules/ui/src/theming/variables.scss

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-$device-item-width: 352px;
+$device-item-width: 100%;
 $profiles-drawer-width: 320px;
 $form-max-width: 732px;
 $icon-size: 24px;