From 8b77fb6ee6b5f7c6350feec16fe4c3b975f1343d Mon Sep 17 00:00:00 2001
From: blockbtheriault <btheriault@block.xyz>
Date: Tue, 1 Jul 2025 10:06:47 -0700
Subject: [PATCH] feat: Add close button (X) to toast notifications

- Enable closeButton in react-toastify commonToastOptions
- Add custom CSS styling for close button with hover/focus states
- Ensure consistent theming with Goose's design system
- Maintain compatibility with existing 'Copy error' buttons
- Improve UX by allowing users to dismiss notifications easily

Fixes the issue where users had to click anywhere on the toast
to close it, now they have an intuitive X button in the top-right.
---
 ui/desktop/src/styles/main.css | 31 +++++++++++++++++++++++++++++++
 ui/desktop/src/toasts.tsx      |  2 +-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 8f7310df1ac..34eff96a544 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -307,4 +307,35 @@
   .scrollbar-thin {
     scrollbar-width: thin;
   }
+
+  /* Toast close button styling */
+  .Toastify__close-button {
+    color: var(--text-prominent-inverse) !important;
+    opacity: 0.7;
+    align-self: flex-start;
+    margin-top: 4px;
+    margin-right: 4px;
+    padding: 4px;
+    border-radius: 4px;
+    transition: opacity 0.2s ease, background-color 0.2s ease;
+  }
+
+  .Toastify__close-button:hover {
+    opacity: 1;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .Toastify__close-button:focus {
+    outline: 2px solid var(--block-teal);
+    outline-offset: 2px;
+  }
+
+  /* Ensure close button is visible on all toast types */
+  .Toastify__toast--success .Toastify__close-button,
+  .Toastify__toast--error .Toastify__close-button,
+  .Toastify__toast--info .Toastify__close-button,
+  .Toastify__toast--warning .Toastify__close-button,
+  .Toastify__toast--default .Toastify__close-button {
+    color: var(--text-prominent-inverse) !important;
+  }
 }
diff --git a/ui/desktop/src/toasts.tsx b/ui/desktop/src/toasts.tsx
index 9ac086c516c..ec2a247feae 100644
--- a/ui/desktop/src/toasts.tsx
+++ b/ui/desktop/src/toasts.tsx
@@ -80,7 +80,7 @@ export const toastService = ToastService.getInstance();
 
 const commonToastOptions: ToastOptions = {
   position: 'top-right',
-  closeButton: false,
+  closeButton: true,
   hideProgressBar: true,
   closeOnClick: true,
   pauseOnHover: true,