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

[zh...@apache.org]

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

zhangmeng 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 95f4ed3  Change partition status in Helix UI to be colorblind-friendly (#1785)
95f4ed3 is described below

commit 95f4ed3ae1ce41ff0b0800695d8472bc6edf60af
Author: Ramin Bashizade <ra...@linkedin.com>
AuthorDate: Mon Jun 7 12:24:07 2021 -0700

    Change partition status in Helix UI to be colorblind-friendly (#1785)
    
    This commit changes the partition status colors in Helix UI from
    green/orange 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 ready status, and an exclamtion
    point for the not-ready status.
---
 .../client/app/resource/partition-list/partition-list.component.html  | 3 ++-
 .../client/app/resource/partition-list/partition-list.component.scss  | 4 ++--
 helix-front/client/app/shared/state-label/state-label.component.scss  | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/helix-front/client/app/resource/partition-list/partition-list.component.html b/helix-front/client/app/resource/partition-list/partition-list.component.html
index eb1daf9..b437615 100644
--- a/helix-front/client/app/resource/partition-list/partition-list.component.html
+++ b/helix-front/client/app/resource/partition-list/partition-list.component.html
@@ -49,7 +49,8 @@
       [draggable]="false"
       [canAutoResize]="false">
       <ng-template let-value="value" ngx-datatable-cell-template>
-        <mat-icon [ngClass]="value ? 'status-ready' : 'status-not-ready'">lens</mat-icon>
+        <mat-icon *ngIf="value" [ngClass]="'status-ready'">check_circle</mat-icon>
+        <mat-icon *ngIf="!value" [ngClass]="'status-not-ready'">error</mat-icon>
       </ng-template>
     </ngx-datatable-column>
     <ngx-datatable-column name="Name"></ngx-datatable-column>
diff --git a/helix-front/client/app/resource/partition-list/partition-list.component.scss b/helix-front/client/app/resource/partition-list/partition-list.component.scss
index 3903a76..4ef24e2 100644
--- a/helix-front/client/app/resource/partition-list/partition-list.component.scss
+++ b/helix-front/client/app/resource/partition-list/partition-list.component.scss
@@ -5,11 +5,11 @@ div.message {
 }
 
 .status-ready {
-  color: mat-color(mat-palette($mat-green));
+  color: mat-color(mat-palette($mat-blue));
 }
 
 .status-not-ready {
-  color: mat-color(mat-palette($mat-orange), darker);
+  color: mat-color(mat-palette($mat-grey, 900, 900, 900), darker);
 }
 
 .footer {
diff --git a/helix-front/client/app/shared/state-label/state-label.component.scss b/helix-front/client/app/shared/state-label/state-label.component.scss
index 863f336..06fcd3c 100644
--- a/helix-front/client/app/shared/state-label/state-label.component.scss
+++ b/helix-front/client/app/shared/state-label/state-label.component.scss
@@ -9,9 +9,9 @@
 }
 
 .state-label-ready {
-  border-color: mat-color(mat-palette($mat-green), darker);
+  border-color: mat-color(mat-palette($mat-blue), darker);
 }
 
 .state-label-not-ready {
-  border-color: mat-color(mat-palette($mat-orange), darker);
+  border-color: mat-color(mat-palette($mat-grey, 900, 900, 900), darker);
 }