fix colors on progress button (closes #240)

franciscoBSalgueiro · Mar 16, 2024 · cc53186 · cc53186
1 parent bbd1bb8
commit cc53186
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/src/components/common/ProgressButton.css.ts b/src/components/common/ProgressButton.css.ts
@@ -13,12 +13,8 @@ export const progress = style({
 });
 
 export const label = style({
-  position: "relative",
   zIndex: 1,
   [vars.darkSelector]: {
     color: vars.colors.gray["3"],
   },
-  [vars.lightSelector]: {
-    color: vars.colors.gray["9"],
-  },
 });
diff --git a/src/components/common/ProgressButton.tsx b/src/components/common/ProgressButton.tsx
@@ -1,4 +1,4 @@
-import { Button, Progress, useMantineTheme } from "@mantine/core";
+import { Box, Button, Progress, useMantineTheme } from "@mantine/core";
 import {
   type EventCallback,
   type UnlistenFn,
@@ -81,9 +81,10 @@ function ProgressButton<T extends Payload>({
         }}
         color={completed ? "green" : theme.primaryColor}
         disabled={inProgress || (completed && !redoable) || disabled}
-        leftSection={leftIcon}
+        leftSection={<Box className={classes.label}>{leftIcon}</Box>}
+        autoContrast
       >
-        <div className={classes.label}>{label}</div>
+        <span className={classes.label}>{label}</span>
         {progress !== 0 && (
           <Progress
             pos="absolute"