feat: update icons and colors

lifinance · May 5, 2022 · 52eb4b8 · 52eb4b8
1 parent 5060f65
commit 52eb4b8
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 27 deletions.
diff --git a/packages/widget/src/pages/SwappingPage/CircularProgress.style.tsx b/packages/widget/src/pages/SwappingPage/CircularProgress.style.tsx
@@ -1,4 +1,5 @@
-import { CircularProgress as MuiCircularProgress } from '@mui/material';
+import { Status } from '@lifinance/sdk';
+import { CircularProgress as MuiCircularProgress, Theme } from '@mui/material';
 import { circularProgressClasses } from '@mui/material/CircularProgress';
 import { keyframes, styled } from '@mui/material/styles';
 
@@ -17,17 +18,38 @@ const circleAnimation = keyframes({
   },
 });
 
-export const CircularProgress = styled(MuiCircularProgress)(({ theme }) => ({
-  animationDuration: '3s',
-  position: 'absolute',
-  left: 0,
-  [`.${circularProgressClasses.circle}`]: {
-    animationDuration: '2s',
-    animationTimingFunction: 'linear',
-    animationName: circleAnimation,
-    strokeDasharray: 129,
-    strokeDashoffset: 129,
-    strokeLinecap: 'round',
-    transformOrigin: '100% 100%',
-  },
+const getStatusColor = (status: Status, theme: Theme) => {
+  switch (status) {
+    case 'ACTION_REQUIRED':
+      return theme.palette.primary.main;
+    case 'DONE':
+      return theme.palette.success.main;
+    case 'FAILED':
+      return theme.palette.error.main;
+    default:
+      return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
+  }
+};
+
+export const CircularProgress = styled(MuiCircularProgress, {
+  shouldForwardProp: (prop) => prop !== 'status',
+})<{ status: Status }>(({ theme, status }) => ({
+  color: getStatusColor(status, theme),
 }));
+
+export const CircularProgressPending = styled(MuiCircularProgress)(
+  ({ theme }) => ({
+    animationDuration: '3s',
+    position: 'absolute',
+    left: 0,
+    [`.${circularProgressClasses.circle}`]: {
+      animationDuration: '2s',
+      animationTimingFunction: 'linear',
+      animationName: circleAnimation,
+      strokeDasharray: 129,
+      strokeDashoffset: 129,
+      strokeLinecap: 'round',
+      transformOrigin: '100% 100%',
+    },
+  }),
+);
diff --git a/packages/widget/src/pages/SwappingPage/CircularProgress.tsx b/packages/widget/src/pages/SwappingPage/CircularProgress.tsx
@@ -1,11 +1,14 @@
 import { Status } from '@lifinance/sdk';
 import {
-  Close as CloseIcon,
   Done as DoneIcon,
-  PriorityHigh as PriorityHighIcon,
+  Info as InfoIcon,
+  Warning as WarningIcon,
 } from '@mui/icons-material';
-import { Box, CircularProgress as MuiCircularProgress } from '@mui/material';
-import { CircularProgress as CircularProgressStyled } from './CircularProgress.style';
+import { Box } from '@mui/material';
+import {
+  CircularProgress as CircularProgressStyled,
+  CircularProgressPending,
+} from './CircularProgress.style';
 
 export function CircularProgress({ status }: { status: Status }) {
   return (
@@ -16,22 +19,19 @@ export function CircularProgress({ status }: { status: Status }) {
         placeItems: 'center',
       }}
     >
-      <MuiCircularProgress
+      <CircularProgressStyled
         variant="determinate"
-        sx={{
-          color: (theme) =>
-            theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
-        }}
+        status={status}
         size={32}
         thickness={3}
         value={100}
       />
       {status === 'PENDING' ? (
-        <CircularProgressStyled color="primary" size={32} thickness={3} />
+        <CircularProgressPending color="primary" size={32} thickness={3} />
       ) : null}
       {status === 'ACTION_REQUIRED' ? (
-        <PriorityHighIcon
-          color="warning"
+        <InfoIcon
+          color="primary"
           sx={{
             position: 'absolute',
             fontSize: '1rem',
@@ -48,7 +48,7 @@ export function CircularProgress({ status }: { status: Status }) {
         />
       ) : null}
       {status === 'FAILED' ? (
-        <CloseIcon
+        <WarningIcon
           color="error"
           sx={{
             position: 'absolute',