style: RefreshButton styling with mui

githru · Aug 14, 2024 · 8fb109f · 8fb109f
1 parent 2dd131b
commit 8fb109f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/packages/view/src/components/RefreshButton/RefreshButton.scss b/packages/view/src/components/RefreshButton/RefreshButton.scss
@@ -1,9 +1,6 @@
 .refresh-button {
   width: 30px;
   height: 30px;
-  border: 0px solid transparent;
-  background-color: transparent;
-  cursor: pointer;
 }
 
 .refresh-button-icon {

diff --git a/packages/view/src/components/RefreshButton/RefreshButton.tsx b/packages/view/src/components/RefreshButton/RefreshButton.tsx
@@ -1,6 +1,7 @@
 import "reflect-metadata";
 import cn from "classnames";
 import ReplayCircleFilledRoundedIcon from "@mui/icons-material/ReplayCircleFilledRounded";
+import { IconButton } from "@mui/material";
 
 import { throttle } from "utils";
 import { useGlobalData } from "hooks";
@@ -16,16 +17,16 @@ const RefreshButton = () => {
   }, 3000);
 
   return (
-    <button
-      type="button"
+    <IconButton
       className={cn("refresh-button")}
       onClick={refreshHandler}
+      disabled={loading}
+      sx={{ color: "white" }}
     >
       <ReplayCircleFilledRoundedIcon
         className={cn("refresh-button-icon", { "refresh-button-icon--loading": loading })}
-        style={{ color: "white" }}
       />
-    </button>
+    </IconButton>
   );
 };