fix: improve dark theme support

lifinance · May 26, 2022 · fea0977 · fea0977
1 parent 7d36597
commit fea0977
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 11 deletions.
diff --git a/packages/widget/src/components/ProgressToNextUpdate/ProgressToNextUpdate.tsx b/packages/widget/src/components/ProgressToNextUpdate/ProgressToNextUpdate.tsx
@@ -65,9 +65,13 @@ export const ProgressToNextUpdate: React.FC<
         variant={isLoading ? 'indeterminate' : 'determinate'}
         size={24}
         value={value}
-        sx={{
+        sx={(theme) => ({
           opacity: value === 100 && !isLoading ? 0.5 : 1,
-        }}
+          color:
+            theme.palette.mode === 'light'
+              ? theme.palette.primary.main
+              : theme.palette.primary.light,
+        })}
       />
     </Box>
   );

diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx
@@ -57,6 +57,4 @@ export const StepContent = styled(MuiStepContent)(({ theme }) => ({
 export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
   color:
     variant === 'square' ? theme.palette.text.primary : theme.palette.grey[900],
-  backgroundColor:
-    variant === 'square' ? 'transparent' : theme.palette.background.paper,
 }));
diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -89,19 +89,18 @@ export const createTheme = (mode: PaletteMode) =>
           },
         },
       },
-      MuiAvatar: {
+      MuiIconButton: {
         styleOverrides: {
           root: {
-            backgroundColor: '#fff',
-            height: 32,
-            width: 32,
+            color: 'inherit',
           },
         },
       },
-      MuiIconButton: {
+      MuiAvatar: {
         styleOverrides: {
           root: {
-            color: 'inherit',
+            height: 32,
+            width: 32,
           },
         },
       },

diff --git a/packages/widget/src/pages/SwapPage/CircularProgress.style.tsx b/packages/widget/src/pages/SwapPage/CircularProgress.style.tsx
@@ -39,6 +39,10 @@ export const CircularProgress = styled(MuiCircularProgress, {
 
 export const CircularProgressPending = styled(MuiCircularProgress)(
   ({ theme }) => ({
+    color:
+      theme.palette.mode === 'light'
+        ? theme.palette.primary.main
+        : theme.palette.primary.light,
     animationDuration: '3s',
     position: 'absolute',
     left: 0,

diff --git a/packages/widget/src/pages/SwapPage/CircularProgress.tsx b/packages/widget/src/pages/SwapPage/CircularProgress.tsx
@@ -27,7 +27,7 @@ export function CircularProgress({ status }: { status: Status }) {
         value={100}
       />
       {status === 'STARTED' || status === 'PENDING' ? (
-        <CircularProgressPending color="primary" size={32} thickness={3} />
+        <CircularProgressPending size={32} thickness={3} />
       ) : null}
       {status === 'ACTION_REQUIRED' ? (
         <InfoIcon