From f99a50f84af56239713f961f7c1653361e3346ff Mon Sep 17 00:00:00 2001
From: Jack Stevenson <jacsteve@amazon.com>
Date: Tue, 13 Apr 2021 17:43:34 +1000
Subject: [PATCH] fix(ProgressBar): fix bug with progress bar colour being
 overridden by mui style (#163)

---
 src/components/ProgressBar/ProgressBar.md | 1 +
 src/components/ProgressBar/index.tsx      | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ProgressBar/ProgressBar.md b/src/components/ProgressBar/ProgressBar.md
index 890e865d..284e690b 100644
--- a/src/components/ProgressBar/ProgressBar.md
+++ b/src/components/ProgressBar/ProgressBar.md
@@ -15,6 +15,7 @@ import Stack from 'aws-northstar/layouts/Stack';
 
     <Container headingVariant='h4' title="Circular progress bar">
         <ProgressBar label="Circular progress bar completed" variant={'circular'} value={100} displayValue={true} />
+        <ProgressBar label="Circular progress bar empty" variant={'circular'} value={0} displayValue={true} />
     </Container>
 </Stack>    
 ```
diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
index 3c4ec543..12232d1c 100644
--- a/src/components/ProgressBar/index.tsx
+++ b/src/components/ProgressBar/index.tsx
@@ -36,12 +36,12 @@ const useStyles = makeStyles((theme: Theme) => ({
         marginTop: '8px',
     },
     circularColorPrimary: {
-        color: theme.palette.info.dark,
+        color: `${theme.palette.info.dark} !important`,
         position: 'absolute',
         left: 0,
     },
     circularColorBottom: {
-        color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
+        color: `${theme.palette.grey[theme.palette.type === 'light' ? 200 : 700]} !important`,
     },
     barColorPrimary: {
         backgroundColor: theme.palette.info.dark,