From 6d81be2f133245483e722062ecaa4e87f2281435 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 18 Mar 2024 21:40:34 -0400
Subject: [PATCH] fix: Only show close button when hovering toast

---
 app/components/Toasts.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/components/Toasts.tsx b/app/components/Toasts.tsx
index 10bde51ce..9f02c8ae7 100644
--- a/app/components/Toasts.tsx
+++ b/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);