fix: Only show close button when hovering toast

app/components/Toasts.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Toaster } from "sonner";
-import { useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import useStores from "~/hooks/useStores";
 
 function Toasts() {
@@ -9,8 +9,8 @@ function Toasts() {
   const theme = useTheme();
 
   return (
-    <Toaster
-      theme={ui.resolvedTheme}
+    <StyledToaster
+      theme={ui.resolvedTheme as any}
       closeButton
       toastOptions={{
         duration: 5000,
@@ -26,4 +26,17 @@ function Toasts() {
   );
 }
 
+const StyledToaster = styled(Toaster)`
+  [data-close-button] {
+    cursor: var(--pointer);
+    opacity: 0;
+  }
+
+  [data-sonner-toast][data-expanded="true"] {
+    [data-close-button] {
+      opacity: 1;
+    }
+  }
+`;
+
 export default observer(Toasts);