reverse direction of download progress button

statechannels · Sep 21, 2023 · 5e034a9 · 5e034a9
1 parent cbc1974
commit 5e034a9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx
@@ -429,7 +429,11 @@ export default function App() {
                         disabled={fetchInProgress || downloadProgress == 100}
                         style={
                           {
-                            "--fill-percentage": `${downloadProgress}%`,
+                            "--fill-percentage": `${
+                              useMicroPayments && fetchInProgress
+                                ? downloadProgress
+                                : 100
+                            }%`,
                             "--primary-color": theme.palette.primary.main,
                           } as React.CSSProperties
                         }

diff --git a/packages/payment-proxy-client/src/ProgressButton.tsx b/packages/payment-proxy-client/src/ProgressButton.tsx
@@ -3,7 +3,7 @@ import { Button, ButtonProps } from "@mui/material";
 import { styled } from "@mui/system";
 
 const CustomButton = styled(Button)({
-  background: `linear-gradient(90deg, transparent 0%, transparent var(--fill-percentage), var(--primary-color) var(--fill-percentage), var(--primary-color) 100%)`,
+  background: `linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) var(--fill-percentage), transparent var(--fill-percentage), transparent 100%)`,
 }) as React.FC<ButtonProps>;
 
 export default CustomButton;