diff --git a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss index 2507ebd2e..d9e90a2c4 100644 --- a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss +++ b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss @@ -51,6 +51,10 @@ } } +.profile-form-field { + width: 100%; +} + .form-actions { display: flex; gap: 16px; 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 index e0eb3786e..6b1b7e01a 100644 --- 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 @@ -18,12 +18,18 @@ $profile-draft-icon-size: 22px; +:host.selected { + .profile-item-container { + background-color: $grey-100; + } +} + .profile-item-container { display: grid; grid-template-columns: 24px minmax(160px, 1fr) 24px 24px; gap: 16px; box-sizing: border-box; - padding: 12px 0; + padding: 12px 16px; border-bottom: 1px solid $lighter-grey; align-items: center; } diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html index 89da5007f..0e19b944b 100644 --- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html @@ -46,6 +46,7 @@

Saved profiles

*ngFor="let profile of vm.profiles; let i = index" [profile]="profile" class="profile-item-{{ i }}" + [ngClass]="{ selected: profile.name === vm.selectedProfile?.name }" (deleteButtonClicked)="deleteProfile($event, i, vm.selectedProfile)" (profileClicked)="openForm($event)"> diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss index 1f8926b2e..c4ef49782 100644 --- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss @@ -83,7 +83,3 @@ line-height: 28px; color: $dark-grey; } - -.profiles-drawer-content { - padding: 0 16px; -} diff --git a/modules/ui/src/theming/colors.scss b/modules/ui/src/theming/colors.scss index f20f38e30..9b4e67f63 100644 --- a/modules/ui/src/theming/colors.scss +++ b/modules/ui/src/theming/colors.scss @@ -25,6 +25,7 @@ $dark-grey: #444746; $grey-700: #5f6368; $grey-800: #3c4043; $grey-900: #202124; +$grey-100: #f1f3f4; $light-grey: #bdc1c6; $lighter-grey: #dadce0; $green-50: #e6f4ea;