From e35b2213ef14a2d58b509815fc02f5dc012c2590 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Tue, 3 Sep 2024 09:57:14 +0000
Subject: [PATCH] Fix design issues

---
 .../components/stepper/stepper.component.scss |  19 +-
 .../device-qualification-from.component.html  | 248 +++++++++---------
 .../device-qualification-from.component.scss  |  31 ++-
 modules/ui/src/theming/variables.scss         |   1 +
 4 files changed, 163 insertions(+), 136 deletions(-)

diff --git a/modules/ui/src/app/components/stepper/stepper.component.scss b/modules/ui/src/app/components/stepper/stepper.component.scss
index 346bef579..d5be19c55 100644
--- a/modules/ui/src/app/components/stepper/stepper.component.scss
+++ b/modules/ui/src/app/components/stepper/stepper.component.scss
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 @import '../../../theming/colors';
+@import '../../../theming/variables';
 
 .form-container {
   height: 100%;
@@ -37,8 +38,8 @@
   margin-top: auto;
   display: inline-block;
   text-align: center;
-  padding-bottom: 24px;
-  width: 100%;
+  height: 24px;
+  padding: 0 24px 24px 24px;
 }
 
 .form-steps {
@@ -53,7 +54,7 @@
   width: 4px;
   height: 4px;
   display: inline-block;
-  border-radius: 50%;
+  border-radius: 100%;
   margin: 0 8px;
   &.step-active {
     border-color: $secondary;
@@ -71,11 +72,17 @@
 
 .form-button-back,
 .form-button-forward {
+  height: $icon-size;
+  width: $icon-size;
+  min-width: $icon-size;
+  margin: 0;
+  padding: 0;
   & mat-icon {
     color: $secondary;
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
+    width: $icon-size;
+    height: $icon-size;
+    font-size: $icon-size;
+    margin: 0;
   }
 
   &.hidden {
diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html
index 8001d2e9f..1db4dad1d 100644
--- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html
+++ b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html
@@ -186,132 +186,140 @@ <h3 class="device-qualification-form-step-title" *ngIf="step.title">
     </ng-container>
 
     <cdk-step *ngIf="format.length" [editable]="false">
-      <section class="device-qualification-form-page">
-        <h3 class="device-qualification-form-step-title">Summary</h3>
-        <p class="device-qualification-form-step-description">
-          <ng-container
-            *ngIf="
-              formValid && !deviceHasNoChanges(data.initialDevice, device)
-            ">
-            The device has been configured. Please check the setup.
-          </ng-container>
-          <ng-container
-            *ngIf="formValid && deviceHasNoChanges(data.initialDevice, device)">
-            No changes were made to the device configuration.
-          </ng-container>
-          <ng-container *ngIf="!formValid"
-            >The device cannot be configured</ng-container
-          >
-        </p>
-        <section class="device-qualification-form-summary-container">
-          <section *ngIf="formValid" class="device-qualification-form-summary">
-            <app-device-item
-              *ngIf="device"
-              [deviceView]="DeviceView.Basic"
-              [device]="device"></app-device-item>
-            <div class="device-qualification-form-summary-info">
-              <p>
-                <span class="info-label">Device type</span>
-                <span class="info-value">{{ device?.type }}</span>
-              </p>
-              <p>
-                <span class="info-label">Technology</span>
-                <span class="info-value">{{ device?.technology }}</span>
-              </p>
-            </div>
-          </section>
-          <section
-            *ngIf="formValid && !deviceHasNoChanges(data.initialDevice, device)"
-            class="device-qualification-form-instructions">
-            <span
-              >Select Save to create your new device. You will then be able to
-              carry on your device testing journey:</span
+      <div class="form-content-summary">
+        <section class="device-qualification-form-page">
+          <h3 class="device-qualification-form-step-title">Summary</h3>
+          <p class="device-qualification-form-step-description">
+            <ng-container
+              *ngIf="
+                formValid && !deviceHasNoChanges(data.initialDevice, device)
+              ">
+              The device has been configured. Please check the setup.
+            </ng-container>
+            <ng-container
+              *ngIf="
+                formValid && deviceHasNoChanges(data.initialDevice, device)
+              ">
+              No changes were made to the device configuration.
+            </ng-container>
+            <ng-container *ngIf="!formValid"
+              >The device cannot be configured</ng-container
             >
-            <ul>
-              <li>
-                Run Testrun against your device until you achieve a compliant
-                result
-              </li>
-              <li>Export the Testrun report and output files</li>
-              <li>Send the testing results to the lab for validation</li>
-            </ul>
-          </section>
+          </p>
+          <section class="device-qualification-form-summary-container">
+            <section
+              *ngIf="formValid"
+              class="device-qualification-form-summary">
+              <app-device-item
+                *ngIf="device"
+                [deviceView]="DeviceView.Basic"
+                [device]="device"></app-device-item>
+              <div class="device-qualification-form-summary-info">
+                <p>
+                  <span class="info-label">Device type</span>
+                  <span class="info-value">{{ device?.type }}</span>
+                </p>
+                <p>
+                  <span class="info-label">Technology</span>
+                  <span class="info-value">{{ device?.technology }}</span>
+                </p>
+              </div>
+            </section>
+            <section
+              *ngIf="
+                formValid && !deviceHasNoChanges(data.initialDevice, device)
+              "
+              class="device-qualification-form-instructions">
+              <span
+                >Select Save to create your new device. You will then be able to
+                carry on your device testing journey:</span
+              >
+              <ul>
+                <li>
+                  Run Testrun against your device until you achieve a compliant
+                  result
+                </li>
+                <li>Export the Testrun report and output files</li>
+                <li>Send the testing results to the lab for validation</li>
+              </ul>
+            </section>
 
-          <section
-            *ngIf="!formValid"
-            class="device-qualification-form-summary device-qualification-form-summary-error">
-            <div class="device-qualification-form-summary-info">
-              <h3 class="device-qualification-form-summary-info-title-error">
-                <mat-icon
-                  class="callout-icon"
-                  fontSet="material-icons-outlined"
-                  color="primary">
-                  error
-                </mat-icon>
-                Unable to create the device
-              </h3>
-            </div>
-            <div class="device-qualification-form-summary-info">
-              <h3 class="device-qualification-form-summary-info-title">
-                Validation error!
-              </h3>
-              <p class="device-qualification-form-summary-info-description">
-                Please go back and correct the errors on
-                <ng-container
-                  *ngFor="let step of getErrorSteps(); let i = index">
-                  <ng-container
-                    *ngIf="i !== 0 && i < getErrorSteps().length - 1"
-                    >,
-                  </ng-container>
+            <section
+              *ngIf="!formValid"
+              class="device-qualification-form-summary device-qualification-form-summary-error">
+              <div class="device-qualification-form-summary-info">
+                <h3 class="device-qualification-form-summary-info-title-error">
+                  <mat-icon
+                    class="callout-icon"
+                    fontSet="material-icons-outlined"
+                    color="primary">
+                    error
+                  </mat-icon>
+                  Unable to create the device
+                </h3>
+              </div>
+              <div class="device-qualification-form-summary-info">
+                <h3 class="device-qualification-form-summary-info-title">
+                  Validation error!
+                </h3>
+                <p class="device-qualification-form-summary-info-description">
+                  Please go back and correct the errors on
                   <ng-container
-                    *ngIf="i !== 0 && i === getErrorSteps().length - 1">
-                    and
-                  </ng-container>
-                  <a
-                    class="step-link"
-                    tabindex="0"
-                    role="link"
-                    (keydown.enter)="goToStep(step)"
-                    (keydown.space)="goToStep(step)"
-                    (click)="goToStep(step)"
-                    >Step {{ step + 1 }}</a
-                  ></ng-container
-                >.
-              </p>
+                    *ngFor="let step of getErrorSteps(); let i = index">
+                    <ng-container
+                      *ngIf="i !== 0 && i < getErrorSteps().length - 1"
+                      >,
+                    </ng-container>
+                    <ng-container
+                      *ngIf="i !== 0 && i === getErrorSteps().length - 1">
+                      and
+                    </ng-container>
+                    <a
+                      class="step-link"
+                      tabindex="0"
+                      role="link"
+                      (keydown.enter)="goToStep(step)"
+                      (keydown.space)="goToStep(step)"
+                      (click)="goToStep(step)"
+                      >Step {{ step + 1 }}</a
+                    ></ng-container
+                  >.
+                </p>
 
-              <p class="device-qualification-form-summary-info-description">
-                All existing fields must be filled in.
-              </p>
-            </div>
+                <p class="device-qualification-form-summary-info-description">
+                  All existing fields must be filled in.
+                </p>
+              </div>
+            </section>
           </section>
         </section>
-      </section>
-      <div class="device-qualification-form-actions">
-        <button
-          *ngIf="!data.isCreate"
-          (click)="delete()"
-          class="delete-button"
-          mat-flat-button
-          type="button">
-          Delete
-        </button>
-        <button
-          mat-button
-          color="primary"
-          class="close-button"
-          (click)="closeForm()">
-          Cancel
-        </button>
-        <button
-          mat-flat-button
-          color="primary"
-          class="save-button"
-          [disabled]="
-            deviceHasNoChanges(data.initialDevice, device) || !formValid
-          "
-          (click)="submit()">
-          Save
-        </button>
+        <div class="device-qualification-form-actions">
+          <button
+            *ngIf="!data.isCreate"
+            (click)="delete()"
+            class="delete-button"
+            mat-flat-button
+            type="button">
+            Delete
+          </button>
+          <button
+            mat-button
+            color="primary"
+            class="close-button"
+            (click)="closeForm()">
+            Cancel
+          </button>
+          <button
+            mat-flat-button
+            color="primary"
+            class="save-button"
+            [disabled]="
+              deviceHasNoChanges(data.initialDevice, device) || !formValid
+            "
+            (click)="submit()">
+            Save
+          </button>
+        </div>
       </div>
     </cdk-step>
   </app-stepper>
diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss
index e3e8da7b2..3b995a4c1 100644
--- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss
+++ b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss
@@ -165,7 +165,7 @@ $form-height: 993px;
   padding-top: 10px;
   margin-top: -10px;
   display: grid;
-  gap: 10px;
+  gap: 8px;
   height: 100%;
   overflow: hidden;
   align-content: start;
@@ -175,8 +175,7 @@ $form-height: 993px;
 }
 
 .device-qualification-form-summary-container {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   align-items: center;
   justify-content: center;
   overflow: scroll;
@@ -201,24 +200,28 @@ $form-height: 993px;
   }
 }
 
-.delete-button {
-  color: $primary;
-  float: left;
-}
-
 .device-qualification-form-actions {
   width: $device-item-width;
   text-align: center;
-  padding: 0 24px;
+  padding: 8px 24px;
   justify-self: center;
+  align-self: end;
   &:has(.delete-button) {
     text-align: right;
   }
+  .close-button,
+  .delete-button {
+    border: 1px solid $lighter-grey;
+  }
+  .delete-button {
+    color: $primary;
+    float: left;
+  }
   .close-button {
     padding: 0 16px;
   }
   .save-button {
-    margin: 0 16px;
+    margin-left: 16px;
   }
 }
 
@@ -286,6 +289,7 @@ $form-height: 993px;
   font-size: 16px;
   width: 510px;
   ul {
+    margin-bottom: 0;
     text-align: left;
     padding-left: 26px;
   }
@@ -313,6 +317,13 @@ $form-height: 993px;
   padding: 0 24px;
 }
 
+.form-content-summary {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  grid-row-gap: 16px;
+  overflow: hidden;
+}
+
 @container qualification-form (height < 870px) {
   .device-qualification-form-page {
     overflow: scroll;
diff --git a/modules/ui/src/theming/variables.scss b/modules/ui/src/theming/variables.scss
index 80021e976..b91f64ad2 100644
--- a/modules/ui/src/theming/variables.scss
+++ b/modules/ui/src/theming/variables.scss
@@ -16,6 +16,7 @@
 $device-item-width: 352px;
 $profiles-drawer-width: 320px;
 $form-max-width: 732px;
+$icon-size: 24px;
 
 $font-primary: 'Google Sans', sans-serif;
 $font-secondary: 'Roboto';