Merge pull request #661 from trilitech/fix-update-icon

Fix update icon

src/assets/icons/CheckIcon.tsx

@@ -0,0 +1,22 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+export const CheckIcon: React.FC<IconProps> = props => {
+  return (
+    <Icon
+      width="15px"
+      height="11px"
+      fill="none"
+      stroke="white"
+      viewBox="0 0 15 11"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M1.16602 5.98371L5.06345 9.85408L13.8327 1.14575"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.2"
+      />
+    </Icon>
+  );
+};

src/components/TopBar.tsx

@@ -1,4 +1,3 @@
-import { CheckIcon } from "@chakra-ui/icons";
 import {
   Box,
   Button,
@@ -16,6 +15,7 @@ import { BuyTezForm } from "./BuyTez/BuyTezForm";
 import { DynamicModalContext } from "./DynamicModal";
 import { FormPage as SendTezForm } from "./SendFlow/Tez/FormPage";
 import { FetchingIcon } from "../assets/icons";
+import { CheckIcon } from "../assets/icons/CheckIcon";
 import colors from "../style/colors";
 import { useIsLoading, useLastTimeUpdated } from "../utils/hooks/assetsHooks";
 import { useAppDispatch } from "../utils/redux/hooks";
@@ -77,17 +77,14 @@ const UpdateButton = () => {
         marginLeft="8px"
         _active={{ color: "white", bg: colors.green }}
         aria-label="refetch"
+        backgroundColor={showUpdatedJustNow ? colors.green : colors.gray[500]}
         data-testid="refetch-button"
         icon={
-          showUpdatedJustNow ? (
-            <CheckIcon color={colors.greenL} style={transition} />
-          ) : (
-            <FetchingIcon />
-          )
+          showUpdatedJustNow ? <CheckIcon style={transition} /> : <FetchingIcon color="white" />
         }
         isLoading={isLoading}
         onClick={onClick}
-        variant="circle"
+        variant="circle_without_hover_color"
       />
     </>
   );

src/style/theme/button.ts

@@ -93,6 +93,16 @@ export const buttonTheme = defineStyleConfig({
         },
       },
     },
+    circle_without_hover_color: {
+      ...baseCircle,
+      _hover: {
+        color: colors.green,
+        _disabled: {
+          bg: colors.gray[700],
+          color: colors.gray[450],
+        },
+      },
+    },
     circle_without_color: baseCircle,
     circle: {
       ...baseCircle,