From 2cf720547c5e8c4e8185883b6159e8cf5f7e0f8d Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Wed, 17 Feb 2021 14:14:00 +0100
Subject: [PATCH] =?UTF-8?q?Scaffolder:=20use=20colors=20from=20the=20Backs?=
 =?UTF-8?q?tage=20theme=20Co-authored-by:=20Fredrik=20Adel=C3=B6w=20<frebe?=
 =?UTF-8?q?n@gmail.com>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TaskPage/TaskPage.tsx      | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
index d4f75e51af..96a857dbb5 100644
--- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
+++ b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
@@ -43,6 +43,7 @@ import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import { entityRoute } from '@backstage/plugin-catalog-react';
 import { parseEntityName } from '@backstage/catalog-model';
 import classNames from 'classnames';
+import { BackstageTheme } from '@backstage/theme';
 
 // typings are wrong for this library, so fallback to not parsing types.
 const humanizeDuration = require('humanize-duration');
@@ -106,23 +107,22 @@ const StepTimeTicker = ({ step }: { step: TaskStep }) => {
   return <Typography variant="caption">{time}</Typography>;
 };
 
-const useStepIconStyles = makeStyles({
-  root: {
-    color: '#eaeaf0',
-    display: 'flex',
-    height: 22,
-    alignItems: 'center',
-  },
-  active: {
-    color: 'gray',
-  },
-  completed: {
-    color: 'green',
-  },
-  error: {
-    color: 'red',
-  },
-});
+const useStepIconStyles = makeStyles((theme: BackstageTheme) =>
+  createStyles({
+    root: {
+      color: theme.palette.text.disabled,
+      display: 'flex',
+      height: 22,
+      alignItems: 'center',
+    },
+    completed: {
+      color: theme.palette.status.ok,
+    },
+    error: {
+      color: theme.palette.status.error,
+    },
+  }),
+);
 
 function TaskStepIconComponent(props: StepIconProps) {
   const classes = useStepIconStyles();
@@ -144,7 +144,6 @@ function TaskStepIconComponent(props: StepIconProps) {
   return (
     <div
       className={classNames(classes.root, {
-        [classes.active]: active,
         [classes.completed]: completed,
         [classes.error]: error,
       })}