From 6ae475ce01e97bdeca88603964c71b73a89a49e3 Mon Sep 17 00:00:00 2001
From: junaid <shaikjunaid124@gmail.com>
Date: Wed, 29 Jan 2025 00:55:49 +0000
Subject: [PATCH] Alerts dismissal without states

---
 .../music-services/details/MusicServices.tsx      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/js/src/settings/music-services/details/MusicServices.tsx b/frontend/js/src/settings/music-services/details/MusicServices.tsx
index 0c924470f9..d5f836d3d8 100644
--- a/frontend/js/src/settings/music-services/details/MusicServices.tsx
+++ b/frontend/js/src/settings/music-services/details/MusicServices.tsx
@@ -412,7 +412,10 @@ export default function MusicServices() {
               Connect to your Last.FM account to import your entire listening
               history and automatically add your new scrobbles to ListenBrainz.
             </p>
-            <p className="alert alert-warning">
+            <div
+              className="alert alert-warning alert-dismissible fade in"
+              role="alert"
+            >
               You must first disable the &#34;Hide recent listening
               information&#34; setting in your Last.fm{" "}
               <a
@@ -423,7 +426,15 @@ export default function MusicServices() {
                 privacy settings
               </a>
               .
-            </p>
+              <button
+                type="button"
+                className="close"
+                data-dismiss="alert"
+                aria-label="Close"
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
             <form onSubmit={handleConnectToLaftFM}>
               <div className="flex flex-wrap" style={{ gap: "1em" }}>
                 <div>