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);