Status.md

 import React from 'react';
 
 import {
+  StatusClassKey,
   StatusError,
   StatusOK,
   StatusPending,
@@ -39,6 +40,33 @@ const DASH = '-';
  * <Status status='Warning' />
  * 
  */
+
+const useStatusStyles = makeStyles(theme => ({
+  success: {
+    '& svg' : {
+    fill:  theme.palette.status.ok,
+   },
+  },
+  running: {
+    '& svg' : {
+    fill:  theme.palette.status.running,
+   }},
+   pending: {
+    '& svg' : {
+    fill:  theme.palette.status.pending,
+   }},
+   warning: {
+    '& svg' : {
+    fill:  theme.palette.status.warning,
+   }}
+   ,
+   error: {
+    '& svg' : {
+    fill:  theme.palette.status.error,
+   }
+  },
+  
+}));
 export const Status = ({
   status,
   iconOnly,
@@ -55,12 +83,30 @@ export const Status = ({
     className,
   };
 
+  const statusStyles = useStatusStyles();
+  const StatusIcon = ({status}: {status: StatusClassKey}) => {
+    switch(status) {
+      case 'ok':
+        return <g className={statusStyles.success}><StatusOK /> </g>
+      case 'pending':
+        return <g className={statusStyles.pending}><StatusPending /> </g>
+      case 'running':
+        return <g className={statusStyles.running}><StatusRunning /> </g>
+      case 'warning':
+        return <g className={statusStyles.success}><StatusWarning /> </g>
+      case 'error':
+          return <g className={statusStyles.success}><StatusError /> </g>
+      default:
+       return null;
+  }
+}
+  
   switch (status) {
     case 'New':
     case 'Idle':
     case 'Pending':
     case 'PipelineNotStarted':
-      return <StatusIconAndText {...statusProps} icon={<StatusPending />} />;
+      return <StatusIconAndText {...statusProps} icon={<StatusIcon status="pending" />} />;
 
     case 'In Progress':
     case 'Installing':
@@ -70,7 +116,7 @@ export const Status = ({
     case 'Updating':
     case 'Upgrading':
     case 'PendingInstall':
-      return <StatusIconAndText {...statusProps} icon={<StatusRunning />} />;
+      return <StatusIconAndText {...statusProps} icon={<StatusIcon status="running"/>} />;
 
     case 'Cancelled':
     case 'Deleting':
@@ -89,18 +135,18 @@ export const Status = ({
 
     case 'Warning':
     case 'RequiresApproval':
-      return <StatusIconAndText {...statusProps} icon={<StatusWarning />} />;
+      return <StatusIconAndText {...statusProps} icon={<StatusIcon status="warning"/>} />;
 
     case 'ImagePullBackOff':
     case 'Error':
     case 'Failed':
     case 'CrashLoopBackOff':
     case 'ErrImagePull':
-      return <StatusIconAndText {...statusProps} icon={<StatusError />} />;
+      return <StatusIconAndText {...statusProps} icon={<StatusIcon status="error"/>} />;
 
     case 'Completed':
     case 'Succeeded':
-      return <StatusIconAndText {...statusProps} icon={<StatusOK />} />;
+      return <StatusIconAndText {...statusProps} icon={<StatusIcon status="ok"/>} />;
 
     case 'Skipped':
       return (