Fix profile status

google · Jul 5, 2024 · 09ec577 · 09ec577
1 parent fee1cdf
commit 09ec577
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html
@@ -14,30 +14,27 @@
 limitations under the License.
 -->
 <div class="profile-item-container">
-  <span
-    class="profile-item-icon-container"
-    tabindex="0"
-    [attr.aria-label]="profile.status"
-    matTooltip="{{ profile.status }}">
-    <mat-icon
-      *ngIf="profile.status === ProfileStatus.VALID"
-      class="profile-item-icon"
-      fontSet="material-symbols-outlined">
-      check_circle
-    </mat-icon>
-
-    <mat-icon
-      *ngIf="profile.status === ProfileStatus.DRAFT"
-      svgIcon="draft"
-      class="profile-draft-icon"></mat-icon>
-  </span>
-
   <div
     class="profile-item-info"
     role="button"
     tabindex="0"
+    matTooltip="{{ profile.status }}"
     (click)="profileClicked.emit(profile)"
     (keydown.enter)="profileClicked.emit(profile)">
+    <span
+      class="profile-item-icon-container"
+      [attr.aria-label]="profile.status">
+      <mat-icon
+        *ngIf="profile.status === ProfileStatus.VALID"
+        class="profile-item-icon"
+        fontSet="material-symbols-outlined">
+        check_circle
+      </mat-icon>
+      <mat-icon
+        *ngIf="profile.status === ProfileStatus.DRAFT"
+        svgIcon="draft"
+        class="profile-draft-icon"></mat-icon>
+    </span>
     <p
       *ngIf="profile.risk"
       class="profile-item-risk"

diff --git a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.scss b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.scss
@@ -17,6 +17,8 @@
 @import 'src/theming/variables';
 
 $profile-draft-icon-size: 22px;
+$profile-icon-container-size: 24px;
+$profile-item-container-gap: 16px;
 
 :host.selected {
   .profile-item-container {
@@ -26,15 +28,17 @@ $profile-draft-icon-size: 22px;
 
 .profile-item-container {
   display: grid;
-  grid-template-columns: 24px minmax(160px, 1fr) 24px;
-  gap: 16px;
+  grid-template-columns: minmax(160px, 1fr) $profile-icon-container-size;
+  gap: $profile-item-container-gap;
   box-sizing: border-box;
   padding: 12px 16px;
   border-bottom: 1px solid $lighter-grey;
   align-items: center;
+  height: 92px;
 }
 
 .profile-item-icon-container {
+  grid-area: icon;
   display: inline-block;
   width: $profile-draft-icon-size;
   height: $profile-draft-icon-size;
@@ -47,6 +51,15 @@ $profile-draft-icon-size: 22px;
 
 .profile-item-info {
   cursor: pointer;
+  display: grid;
+  grid-template-columns: $profile-icon-container-size 1fr;
+  grid-template-areas:
+    'icon .'
+    'icon .'
+    'icon .';
+  column-gap: $profile-item-container-gap;
+  align-items: center;
+
   p {
     margin: 0;
     font-family: $font-secondary, sans-serif;
@@ -55,6 +68,11 @@ $profile-draft-icon-size: 22px;
     text-overflow: ellipsis;
   }
 
+  ::ng-deep p.profile-item-risk {
+    margin-top: 6px;
+    justify-self: start;
+  }
+
   .profile-item-name {
     font-size: 16px;
     color: $grey-800;