From 3b2aeae05a508f6253808ec118dafd2421362449 Mon Sep 17 00:00:00 2001
From: Himanshu Mishra <himanshu@orkohunter.net>
Date: Mon, 4 May 2020 13:34:08 +0900
Subject: [PATCH] Fix blinking animation bug for Status Running component
 (#706)

* Refer to keyframe as a material-ul variable

https://material-ui.com/guides/migration-v3/\#styles

* Update background color of Status

The background color should match with the theme's background color.
---
 packages/core/src/components/Status/Status.tsx | 2 +-
 packages/theme/src/themes.ts                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/Status/Status.tsx b/packages/core/src/components/Status/Status.tsx
index 0d02d86fb1..007cc4e9fd 100644
--- a/packages/core/src/components/Status/Status.tsx
+++ b/packages/core/src/components/Status/Status.tsx
@@ -47,7 +47,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     backgroundColor: 'rgba(245, 155, 35, 0.5)',
   },
   running: {
-    animation: 'blink 0.8s step-start 0s infinite',
+    animation: '$blink 0.8s step-start 0s infinite',
     backgroundColor: theme.palette.status.running,
   },
   '@keyframes blink': {
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index 3dad461423..9e9e2945fa 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -28,7 +28,7 @@ export const lightTheme = createTheme({
     error: '#CA001B',
     running: '#BEBEBE',
     pending: '#5BC0DE',
-    background: '#FEFEFE',
+    background: '#F8F8F8',
   },
   bursts: {
     fontColor: '#FEFEFE',
@@ -68,7 +68,7 @@ export const darkTheme = createTheme({
     error: '#CA001B',
     running: '#BEBEBE',
     pending: '#5BC0DE',
-    background: '#FEFEFE',
+    background: '#282828',
   },
   bursts: {
     fontColor: '#FEFEFE',