[helix] branch master updated: Change instance status in Helix UI to be colorblind-friendly (#1759)

[jiajunwang]

This is an automated email from the ASF dual-hosted git repository.

jiajunwang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/helix.git


The following commit(s) were added to refs/heads/master by this push:
     new bab58b2  Change instance status in Helix UI to be colorblind-friendly 
(#1759)
bab58b2 is described below

commit bab58b26047a1dd85c28eadba9ec554c3517e552
Author: Ramin Bashizade <rabashiz...@linkedin.com>
AuthorDate: Wed May 26 14:31:38 2021 -0700

    Change instance status in Helix UI to be colorblind-friendly (#1759)
    
    This commit changes the instance online/offline status colors in Helix UI 
from green/red to blue(#2196F3)/black(#212121) to be more colorblind-friendly. 
The colors are chosen such that they have a contrast ratio of at least 3:1 
against each other and the background. Moreover, a checkmark is placed in the 
icon for online status, and a cross (x) for the offline.
---
 .../app/instance/instance-list/instance-list.component.html       | 8 ++++----
 .../app/instance/instance-list/instance-list.component.scss       | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git 
a/helix-front/client/app/instance/instance-list/instance-list.component.html 
b/helix-front/client/app/instance/instance-list/instance-list.component.html
index 92a4d77..6d8e6db 100644
--- a/helix-front/client/app/instance/instance-list/instance-list.component.html
+++ b/helix-front/client/app/instance/instance-list/instance-list.component.html
@@ -38,10 +38,10 @@
       [draggable]="false"
       [canAutoResize]="false">
       <ng-template let-row="row" ngx-datatable-cell-template>
-        <mat-icon *ngIf="row.healthy" class="status-healthy">lens</mat-icon>
-        <mat-icon *ngIf="!row.healthy && row.enabled" 
class="status-not-healthy" matTooltip="The instance is offline.">lens</mat-icon>
-        <mat-icon *ngIf="!row.healthy && row.liveInstance" 
class="status-not-healthy" matTooltip="The instance is 
disabled.">lens</mat-icon>
-        <mat-icon *ngIf="!row.healthy && !row.enabled && !row.liveInstance" 
class="status-not-healthy" matTooltip="The instance is offline and 
disabled.">lens</mat-icon>
+        <mat-icon *ngIf="row.healthy" 
class="status-healthy">check_circle</mat-icon>
+        <mat-icon *ngIf="!row.healthy && row.enabled" 
class="status-not-healthy" matTooltip="The instance is 
offline.">cancel</mat-icon>
+        <mat-icon *ngIf="!row.healthy && row.liveInstance" 
class="status-not-healthy" matTooltip="The instance is 
disabled.">cancel</mat-icon>
+        <mat-icon *ngIf="!row.healthy && !row.enabled && !row.liveInstance" 
class="status-not-healthy" matTooltip="The instance is offline and 
disabled.">cancel</mat-icon>
       </ng-template>
     </ngx-datatable-column>
     <ngx-datatable-column name="Name">
diff --git 
a/helix-front/client/app/instance/instance-list/instance-list.component.scss 
b/helix-front/client/app/instance/instance-list/instance-list.component.scss
index 66093a4..878bc98 100644
--- a/helix-front/client/app/instance/instance-list/instance-list.component.scss
+++ b/helix-front/client/app/instance/instance-list/instance-list.component.scss
@@ -5,9 +5,9 @@
 }
 
 .status-healthy {
-  color: mat-color(mat-palette($mat-green));
+  color: mat-color(mat-palette($mat-blue));
 }
 
 .status-not-healthy {
-  color: mat-color(mat-palette($mat-red));
+  color: mat-color(mat-palette($mat-grey, 900, 900, 900));
 }