diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css index 8f7310df1acc..34eff96a5448 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 9ac086c516cf..ec2a247feaeb 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,