diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.html b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.html index 3ee3d94139..c11e36510e 100644 --- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.html +++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.html @@ -65,12 +65,16 @@ {{ PARTICIPANT_LIST_TRANSLATION_KEYS.ACTIONS | translate }} - - +
+ +
+
+ +
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.scss index fd6ffc3d35..2721afc041 100644 --- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.scss +++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.scss @@ -76,6 +76,46 @@ .enable-column { width: 20%; text-align: center; + + ::ng-deep .mat-mdc-slide-toggle { + cursor: not-allowed; + .mdc-switch { + cursor: not-allowed; + &--unselected { + .mdc-switch__track { + opacity: 1.0; + &::before { + background: var(--mdc-switch-unselected-track-color); + } + } + + .mdc-switch__shadow { + background: var(--mdc-switch-unselected-handle-color); + } + + .mdc-switch__icons { + opacity: 1.0; + } + } + + &--selected { + .mdc-switch__track { + opacity: 1.0; + &::after { + background: var(--mdc-switch-selected-track-color); + } + } + + .mdc-switch__shadow { + background: var(--mdc-switch-selected-handle-color); + } + + .mdc-switch__icons { + opacity: 1.0; + } + } + } + } } .actions-column { @@ -84,14 +124,20 @@ text-align: center; padding-right: 16px; - .action-button { - color: var(--dark-grey); + .button-wrapper { + display: inline-block; + .action-button { + color: var(--dark-grey); - &[disabled] { - .mat-icon { - opacity: 0.5; + &[disabled] { + .mat-icon { + opacity: 0.5; + } } } + &:has(.action-button:disabled) { + cursor: not-allowed; + } } } } diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-action-buttons/common-section-card-action-buttons.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-action-buttons/common-section-card-action-buttons.component.scss index b66eeb2a94..082b904a6d 100644 --- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-action-buttons/common-section-card-action-buttons.component.scss +++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-action-buttons/common-section-card-action-buttons.component.scss @@ -9,9 +9,50 @@ column-gap: 34px; padding: 0 16px; - ::ng-deep .mat-mdc-slide-toggle .mdc-label { - margin-left: 5px; - color: var(--dark-grey); + ::ng-deep .mat-mdc-slide-toggle { + cursor: not-allowed; + .mdc-switch { + cursor: not-allowed; + &--unselected { + .mdc-switch__track { + opacity: 1.0; + &::before { + background: var(--mdc-switch-unselected-track-color); + } + } + + .mdc-switch__shadow { + background: var(--mdc-switch-unselected-handle-color); + } + + .mdc-switch__icons { + opacity: 1.0; + } + } + + &--selected { + .mdc-switch__track { + opacity: 1.0; + &::after { + background: var(--mdc-switch-selected-track-color); + } + } + + .mdc-switch__shadow { + background: var(--mdc-switch-selected-handle-color); + } + + .mdc-switch__icons { + opacity: 1.0; + } + } + } + + .mdc-label { + margin-left: 5px; + color: var(--dark-grey); + cursor: not-allowed; + } } .primary-button-text { @@ -22,6 +63,7 @@ .options-container { display: flex; column-gap: 4px; + cursor: not-allowed; .mat-mdc-icon-button:not(.mat-mdc-button-disabled) .mat-icon { color: var(--dark-grey);