fix(admin-ui): Improve readability of role permissions table

Fixes #2224

packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.html

@@ -9,8 +9,18 @@
     (keydown.space)="$event.preventDefault(); selectedChange.emit(!selected)"
     (click)="selectedChange.emit(!selected)"
 >
-    <clr-icon shape="check-circle" [attr.size]="size === 'small' ? 24 : 32"></clr-icon>
+    <clr-icon
+        shape="check-circle"
+        [class.is-solid]="selected"
+        [attr.size]="size === 'small' ? 24 : 32"
+    ></clr-icon>
 </div>
-<div class="toggle-label" [class.disabled]="disabled" *ngIf="label" (click)="selectedChange.emit(!selected)">
+<div
+    class="toggle-label"
+    [class.selected]="selected"
+    [class.disabled]="disabled"
+    *ngIf="label"
+    (click)="selectedChange.emit(!selected)"
+>
     {{ label }}
 </div>

packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss

@@ -15,7 +15,7 @@
     border-radius: 50%;
     top: -12px;
     left: -12px;
-    transition: opacity 0.2s, color 0.2s;
+    transition: opacity 0.1s, color 0.1s;
 
     &.hide-when-off {
         opacity: 0;
@@ -27,23 +27,23 @@
     }
 
     &:not(.disabled):hover {
-        color: var(--color-success-400);
+        color: var(--color-success-600);
         opacity: 0.9;
     }
 
     &.selected {
         opacity: 1;
-        color: var(--color-success-500);
+        color: var(--color-success-700);
 
         &:not(.disabled):hover {
-            color: var(--color-success-400);
+            color: var(--color-success-600);
             opacity: 0.9;
         }
     }
 
     &:focus {
         outline: none;
-        box-shadow: 0 0 2px 2px var(--color-primary-500);
+        box-shadow: 0 0 2px 2px var(--color-primary-700);
     }
 
     &.disabled {
@@ -60,4 +60,8 @@
     &:not(.disabled) {
         cursor: pointer;
     }
+
+    &.selected {
+        color: var(--color-success-800);
+    }
 }