Merge pull request #31 from karthikjeeyar/update-icon-colors

fix(pipelines): update running and pending icon colors
patternfly · Apr 24, 2023 · a351028 · a351028
2 parents 4fc47f9 + e34c8a5
commit a351028
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 29 deletions.
diff --git a/packages/module/src/css/topology-pipelines.css b/packages/module/src/css/topology-pipelines.css
@@ -13,18 +13,18 @@
   --pf-topology-pipelines__pill-background--m-success--Fill: var(--pf-global--success-color--100);
   --pf-topology-pipelines__pill-background--m-warning--Fill: var(--pf-global--warning-color--100);
   --pf-topology-pipelines__pill-background--m-skipped--Fill: var(--pf-global--secondary-color--100);
-  --pf-topology-pipelines__pill-background--m-in-progress--Fill: var(--pf-global--info-color--100);
+  --pf-topology-pipelines__pill-background--m-in-progress--Fill: var(--pf-global--palette--blue-200);
   --pf-topology-pipelines__pill-background--m-pending--Fill: var(--pf-global--BackgroundColor--100);
-  --pf-topology-pipelines__pill-background--m-running--Fill: var(--pf-global--BackgroundColor--100);
+  --pf-topology-pipelines__pill-background--m-running--Fill: var(--pf-global--palette--blue-200);
   --pf-topology-pipelines__pill-background--m-idle--Fill: var(--pf-global--BackgroundColor--100);
 
   --pf-topology-pipelines__pill-background--m-danger--Stroke: var(--pf-global--danger-color--100);
   --pf-topology-pipelines__pill-background--m-success--Stroke: var(--pf-global--success-color--100);
   --pf-topology-pipelines__pill-background--m-warning--Stroke: var(--pf-global--warning-color--100);
   --pf-topology-pipelines__pill-background--m-skipped--Stroke: var(--pf-global--BorderColor--100);
-  --pf-topology-pipelines__pill-background--m-in-progress--Stroke: var(--pf-global--info-color--100);
+  --pf-topology-pipelines__pill-background--m-in-progress--Stroke: var(--pf-global--palette--blue-200);
   --pf-topology-pipelines__pill-background--m-pending--Stroke: var(--pf-global--BorderColor--100);
-  --pf-topology-pipelines__pill-background--m-running--Stroke: var(--pf-global--BorderColor--100);
+  --pf-topology-pipelines__pill-background--m-running--Stroke: var(--pf-global--palette--blue-200);
   --pf-topology-pipelines__pill-background--m-idle--Stroke: var(--pf-global--BorderColor--100);
 
   /* selected pill */
@@ -37,9 +37,9 @@
   --pf-topology-pipelines__pill-background--m-selected--m-success--Fill: var(--pf-global--Color--light-100);
   --pf-topology-pipelines__pill-background--m-selected--m-warning--Fill: var(--pf-global--Color--100);
   --pf-topology-pipelines__pill-background--m-selected--m-skipped--Fill: var(--pf-global--secondary-color--100);
-  --pf-topology-pipelines__pill-background--m-selected--m-in-progress--Fill: var(--pf-global--Color--light-100);
-  --pf-topology-pipelines__pill-background--m-selected--m-pending--Fill: var(--pf-global--BorderColor--100);
-  --pf-topology-pipelines__pill-background--m-selected--m-running--Fill: var(--pf-global--BorderColor--100);
+  --pf-topology-pipelines__pill-background--m-selected--m-in-progress--Fill: var(--pf-global--palette--blue-200);
+  --pf-topology-pipelines__pill-background--m-selected--m-pending--Fill: var(--pf-global--secondary-color--100);
+  --pf-topology-pipelines__pill-background--m-selected--m-running--Fill: var(--pf-global--palette--blue-200);
   --pf-topology-pipelines__pill-background--m-selected--m-idle--Fill: var(--pf-global--BorderColor--100);
 
   --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill--Color);
@@ -49,9 +49,9 @@
   --pf-topology-pipelines__pill-text--m-selected--m-success--Color: var(--pf-global--Color--light-100);
   --pf-topology-pipelines__pill-text--m-selected--m-warning--Color: var(--pf-global--Color--100);
   --pf-topology-pipelines__pill-text--m-selected--m-skipped--Color: var(--pf-global--Color--light-100);
-  --pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color: var(--pf-global--Color--light-100);
-  --pf-topology-pipelines__pill-text--m-selected--m-pending--Color: var(--pf-global--palette--black-1000);
-  --pf-topology-pipelines__pill-text--m-selected--m-running--Color: var(--pf-global--palette--black-1000);
+  --pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color: var(--pf-global--palette--black-900);
+  --pf-topology-pipelines__pill-text--m-selected--m-pending--Color: var(--pf-global--Color--light-100);
+  --pf-topology-pipelines__pill-text--m-selected--m-running--Color: var(--pf-global--palette--black-900);
   --pf-topology-pipelines__pill-text--m-selected--m-idle--Color: var(--pf-global--palette--black-1000);
 
   /* pill status icon */
@@ -60,20 +60,20 @@
   --pf-topology-pipelines__pill-status--m-success--color: var(--pf-global--success-color--100);
   --pf-topology-pipelines__pill-status--m-warning--color: var(--pf-global--warning-color--100);
   --pf-topology-pipelines__pill-status--m-skipped--color: var(--pf-global--secondary-color--100);
-  --pf-topology-pipelines__pill-status--m-in-progress--color: var(--pf-global--info-color--100);
-  --pf-topology-pipelines__pill-status--m-pending--color: var(--pf-global--Color--100);
-  --pf-topology-pipelines__pill-status--m-running--color: var(--pf-global--Color--100);
+  --pf-topology-pipelines__pill-status--m-in-progress--color: var(--pf-global--palette--blue-200);
+  --pf-topology-pipelines__pill-status--m-pending--color: var(--pf-global--secondary-color--100);
+  --pf-topology-pipelines__pill-status--m-running--color: var(--pf-global--palette--blue-200);
   --pf-topology-pipelines__pill-status--m-idle--color: var(--pf-global--Color--100);
 
   /* selected pill status icon */
   --pf-topology-pipelines__pill-status--m-selected--color: var(--pf-global--active-color--100);
   --pf-topology-pipelines__pill-status--m-selected--m-danger--color: var(--pf-global--Color--light-100);
   --pf-topology-pipelines__pill-status--m-selected--m-success--color: var(--pf-global--Color--light-100);
-  --pf-topology-pipelines__pill-status--m-selected--m-warning--color: var(--pf-global--Color--light-100);
+  --pf-topology-pipelines__pill-status--m-selected--m-warning--color: var(--pf-global--palette--black-900);
   --pf-topology-pipelines__pill-status--m-selected--m-skipped--color: var(--pf-global--Color--light-100);
-  --pf-topology-pipelines__pill-status--m-selected--m-in-progress--color: var(--pf-global--Color--light-100);
-  --pf-topology-pipelines__pill-status--m-selected--m-pending--color: var(--pf-global--palette--black-1000);
-  --pf-topology-pipelines__pill-status--m-selected--m-running--color: var(--pf-global--palette--black-1000);
+  --pf-topology-pipelines__pill-status--m-selected--m-in-progress--color: var(--pf-global--palette--black-900);
+  --pf-topology-pipelines__pill-status--m-selected--m-pending--color: var(--pf-global--Color--light-100);
+  --pf-topology-pipelines__pill-status--m-selected--m-running--color: var(--pf-global--palette--black-900);
   --pf-topology-pipelines__pill-status--m-selected--m-idle--color: var(--pf-global--palette--black-1000);
 
   --pf-topology-pipelines__pill-badge--fill: var(--pf-global--palette--black-200);
@@ -86,9 +86,9 @@
   --pf-topology-pipelines__status-icon--m-success--color: var(--pf-global--success-color--100);
   --pf-topology-pipelines__status-icon--m-warning--color: var(--pf-global--warning-color--100);
   --pf-topology-pipelines__status-icon--m-skipped--color: var(--pf-global--secondary-color--100);
-  --pf-topology-pipelines__status-icon--m-in-progress--color: var(--pf-global--info-color--100);
-  --pf-topology-pipelines__status-icon--m-pending--color: var(--pf-global--Color--100);
-  --pf-topology-pipelines__status-icon--m-running--color: var(--pf-global--Color--100);
+  --pf-topology-pipelines__status-icon--m-in-progress--color: var(--pf-global--palette--blue-200);
+  --pf-topology-pipelines__status-icon--m-pending--color: var(--pf-global--Color--light-100);
+  --pf-topology-pipelines__status-icon--m-running--color: var(--pf-global--palette--blue-200);
   --pf-topology-pipelines__status-icon--m-idle--color: var(--pf-global--Color--100);
 
   --pf-topology-pipelines__status-icon--m-selected--color: var(--pf-global--active-color--100);
@@ -135,11 +135,24 @@
   --pf-topology-pipelines__pill-text--m-selected--m-danger--Color: var(--pf-global--palette--black-900);
   --pf-topology-pipelines__pill-text--m-selected--m-success--Color: var(--pf-global--palette--black-900);
   --pf-topology-pipelines__pill-text--m-selected--m-warning--Color: var(--pf-global--palette--black-900);
-  --pf-topology-pipelines__pill-text--m-selected--m-skipped--Color: var(--pf-global--BackgroundColor--150);
+  --pf-topology-pipelines__pill-text--m-selected--m-skipped--Color: var(--pf-global--palette--black-900);
   --pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color: var(--pf-global--palette--black-900);
-  --pf-topology-pipelines__pill-text--m-selected--m-pending--Color: var(--pf-global--Color--100);
-  --pf-topology-pipelines__pill-text--m-selected--m-running--Color: var(--pf-global--Color--100);
-  --pf-topology-pipelines__pill-text--m-selected--m-idle--Color: var(--pf-global--Color--100);
+  --pf-topology-pipelines__pill-text--m-selected--m-pending--Color: var(--pf-global--palette--black-900);
+  --pf-topology-pipelines__pill-text--m-selected--m-running--Color: var(--pf-global--palette--black-900);
+  --pf-topology-pipelines__pill-text--m-selected--m-idle--Color: var(--pf-global--palette--black-900);
+
+  /* pill status icon */
+  --pf-topology-pipelines__pill-status--m-skipped--color: var(--pf-global--Color--100);
+  --pf-topology-pipelines__pill-status--m-pending--color: var(--pf-global--Color--100);
+
+  /* selected pill with status */
+  --pf-topology-pipelines__pill-background--m-selected--m-skipped--Fill: var(--pf-global--palette--black-300);
+  --pf-topology-pipelines__pill-background--m-selected--m-idle--Fill: var(--pf-global--palette--black-300);
+
+   /* selected pill status icon */
+   --pf-topology-pipelines__pill-status--m-selected--m-pending--color: var(--pf-global--palette--black-900);
+   --pf-topology-pipelines__pill-status--m-selected--m-skipped--color: var(--pf-global--palette--black-900);
+   --pf-topology-pipelines__pill-status--m-selected--m-idle--color: var(--pf-global--palette--black-900);
 
   --pf-topology-pipelines__pill__label__icon--Color: var(--pf-global--palette--black-600);
 
@@ -351,7 +364,7 @@
 .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-idle {
   --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-idle--color);
 }
-.pf-topology-pipelines__pill-status.pf-m-spin {
+.pf-topology-pipelines__pill-status.pf-m-spin, .pf-topology-pipelines__status-icon.pf-m-spin {
   filter: blur(0);
   -webkit-filter: blur(0);
   transform-box: fill-box;

diff --git a/packages/module/src/pipelines/utils/StatusIcon.tsx b/packages/module/src/pipelines/utils/StatusIcon.tsx
@@ -7,7 +7,6 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 import NotStartedIcon from '@patternfly/react-icons/dist/esm/icons/not-started-icon';
 import HourglassHalfIcon from '@patternfly/react-icons/dist/esm/icons/hourglass-half-icon';
 import SyncAltIcon from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 import { RunStatus } from '../types';
 
 interface StatusIconProps {
@@ -20,8 +19,6 @@ interface StatusIconProps {
 const StatusIcon: React.FC<StatusIconProps> = ({ status, ...props }) => {
   switch (status) {
     case RunStatus.InProgress:
-      return <InProgressIcon {...props} />;
-
     case RunStatus.Running:
       return <SyncAltIcon {...props} />;
 

diff --git a/packages/module/src/pipelines/utils/utils.ts b/packages/module/src/pipelines/utils/utils.ts
@@ -23,7 +23,6 @@ export const getRunStatusModifier = (status: RunStatus): string => {
     case RunStatus.Skipped:
       return styles.modifiers.skipped;
     case RunStatus.Running:
-      return styles.modifiers.running;
     case RunStatus.InProgress:
       return styles.modifiers.inProgress;
     case RunStatus.Pending: