From 95dabdc9ec3f0efe27a6353d9efb0811674efa37 Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Mon, 12 Jun 2023 16:22:10 +0200
Subject: [PATCH] fix(admin-ui): Improve readability of role permissions table

Fixes #2224
---
 .../select-toggle/select-toggle.component.html     | 14 ++++++++++++--
 .../select-toggle/select-toggle.component.scss     | 14 +++++++++-----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.html b/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.html
index 5d5bb3e53a..4449aa4130 100644
--- a/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.html
+++ b/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>
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss
index 961870b077..a73e03895e 100644
--- a/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss
+++ b/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);
+    }
 }