391372721: (feat) add risk profile sticky menu

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss

@@ -188,22 +188,7 @@ $form-min-width: 285px;
 }
 
 .device-qualification-form-actions {
-  height: 80px;
-  padding: 16px;
-  width: calc(100% - 64px);
-  box-sizing: border-box;
-  position: sticky;
-  left: 32px;
-  bottom: 25px;
-  background: colors.$surface;
-  border-radius: 32px;
-  box-shadow:
-    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
-    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  justify-content: space-between;
+  @include mixins.form-actions;
 
   div {
     display: flex;
@@ -215,13 +200,11 @@ $form-min-width: 285px;
   }
 
   .delete-button:not(.mat-mdc-button-disabled) {
-    background-color: colors.$error;
-    color: colors.$on-error;
+    @include mixins.delete-red-button;
   }
 
   .close-button:not(.mat-mdc-button-disabled) {
-    background-color: colors.$secondary-container;
-    color: colors.$on-secondary-container;
+    @include mixins.secondary-button;
   }
 }
 

modules/ui/src/app/pages/devices/devices.component.scss

@@ -13,14 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@use 'variables';
 @use 'mixins';
 
-::ng-deep .delete-device app-simple-dialog,
-::ng-deep .close-device app-simple-dialog {
-  --mat-dialog-container-max-width: 329px !important;
-}
-
 .device-add-button {
   @include mixins.add-button;
 }

modules/ui/src/app/pages/devices/devices.component.ts

@@ -231,7 +231,7 @@ export class DevicesComponent
       autoFocus: true,
       hasBackdrop: true,
       disableClose: true,
-      panelClass: ['simple-dialog', 'delete-device'],
+      panelClass: ['simple-dialog', 'delete-dialog'],
     });
     dialogRef?.beforeClosed().subscribe(deleteDevice => {
       if (deleteDevice) {
@@ -272,7 +272,7 @@ export class DevicesComponent
       autoFocus: true,
       hasBackdrop: true,
       disableClose: true,
-      panelClass: ['simple-dialog', 'close-device'],
+      panelClass: ['simple-dialog', 'discard-dialog'],
     });
 
     dialogRef?.beforeClosed().subscribe(close => {

modules/ui/src/app/pages/risk-assessment/components/success-dialog/success-dialog.component.html

@@ -13,10 +13,10 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<span class="simple-dialog-title">Risk Assessment Profile Completed</span>
+<span class="simple-dialog-title">Risk assessment completed</span>
 <p class="simple-dialog-content">
-  It has been saved as "{{ data.profile.name }}" and can now be attached to
-  reports.
+  The risk profile has been saved as "{{ data.profile.name }}" and can now be
+  attached to test reports.
 </p>
 <p class="simple-dialog-content">
   <span class="simple-dialog-content-risk"
@@ -26,8 +26,8 @@
       class="profile-item-risk"
       [ngClass]="getRiskClass(data.profile.risk!)">
       {{ data.profile.risk }} risk
-    </span></span
-  >
+    </span>
+  </span>
 
   <br />{{ getRiskExplanation(data.profile.risk) }} The full report can be found
   in the zip file. Please share with the lab to validate this profile and

modules/ui/src/app/pages/risk-assessment/components/success-dialog/success-dialog.component.scss

@@ -18,38 +18,32 @@
 @use 'mixins';
 
 ::ng-deep :root {
-  --mat-dialog-container-max-width: 570px;
+  --mat-dialog-container-max-width: 560px;
 }
 
 :host {
   @include mixins.dialog;
-  padding: 24px 0 8px 0;
+  padding: 24px 0 16px 0;
+  gap: 16px;
   > * {
-    padding: 0 16px 0 24px;
+    padding: 0 24px;
   }
 }
 
 .simple-dialog-title {
   font-family: variables.$font-primary;
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 24px;
-  text-align: left;
-}
-
-.simple-dialog-title + .simple-dialog-content {
-  margin-top: 0;
-  padding-top: 0;
-  border-bottom: 1px solid colors.$lighter-grey;
+  font-size: 24px;
+  line-height: 32px;
+  text-align: center;
+  color: colors.$on-surface;
 }
 
 .simple-dialog-content {
-  font-family: Roboto, sans-serif;
+  font-family: variables.$font-text;
   font-size: 14px;
   line-height: 20px;
-  letter-spacing: 0.2px;
-  color: colors.$grey-800;
-  padding: 16px 16px 16px 24px;
+  letter-spacing: 0;
+  color: colors.$on-surface-variant;
   margin: 0;
 }
 

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html

@@ -44,34 +44,42 @@
   </div>
 </form>
 <div class="form-actions">
+  <div>
+    <button
+      mat-flat-button
+      color="primary"
+      class="save-profile-button"
+      [disabled]="profileHasNoChanges() || !profileForm.valid"
+      (click)="onSaveClick(ProfileStatus.VALID)">
+      Save
+    </button>
+    <button
+      mat-flat-button
+      class="save-draft-button"
+      [disabled]="isDraftDisabled"
+      (click)="onSaveClick(ProfileStatus.DRAFT)">
+      Save Draft
+    </button>
+    <button
+      mat-flat-button
+      class="copy-button"
+      (click)="onCopyClick()"
+      [disabled]="selectedProfile === null">
+      Copy
+    </button>
+    <button
+      mat-flat-button
+      class="discard-button"
+      [disabled]="profileForm.pristine"
+      (click)="onDiscardClick()">
+      Discard
+    </button>
+  </div>
   <button
     mat-flat-button
-    color="primary"
-    class="save-profile-button"
-    [disabled]="!profileForm.valid"
-    (click)="onSaveClick(ProfileStatus.VALID)">
-    Save Profile
-  </button>
-  <button
-    mat-button
-    class="save-draft-button"
-    [disabled]="isDraftDisabled"
-    (click)="onSaveClick(ProfileStatus.DRAFT)">
-    Save Draft
-  </button>
-  <button
-    *ngIf="selectedProfile?.status !== ProfileStatus.EXPIRED"
-    mat-button
-    class="discard-button"
-    [disabled]="profileForm.pristine"
-    (click)="onDiscardClick()">
-    Discard
-  </button>
-  <button
-    *ngIf="selectedProfile?.status === ProfileStatus.EXPIRED"
-    mat-button
-    class="discard-button"
-    (click)="onDiscardClick()">
-    Close
+    [disabled]="selectedProfile === null"
+    (click)="onDeleteClick()"
+    class="delete-button">
+    Delete
   </button>
 </div>

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss

@@ -16,6 +16,7 @@
 @use '@angular/material' as mat;
 @use 'colors';
 @use 'variables';
+@use 'mixins';
 
 :host {
   height: 100%;
@@ -47,14 +48,22 @@
 }
 
 .form-actions {
-  display: flex;
-  gap: 16px;
-  padding: 8px 24px 24px 24px;
-}
+  @include mixins.form-actions;
 
-.save-draft-button:not(.mat-mdc-button-disabled),
-.discard-button:not(.mat-mdc-button-disabled) {
-  color: colors.$primary;
+  div {
+    display: flex;
+    gap: 12px;
+  }
+
+  .save-draft-button:not(.mat-mdc-button-disabled),
+  .copy-button:not(.mat-mdc-button-disabled),
+  .discard-button:not(.mat-mdc-button-disabled) {
+    @include mixins.secondary-button;
+  }
+
+  .delete-button:not(.mat-mdc-button-disabled) {
+    @include mixins.delete-red-button;
+  }
 }
 
 .save-profile-button:not(.mat-mdc-button-disabled),