From d62c2b5aff1714df735ad216fa1dfd4d80c4aa52 Mon Sep 17 00:00:00 2001
From: abdou6666 <sfayhi.abderrahmen@esprit.tn>
Date: Thu, 1 May 2025 16:08:09 +0100
Subject: [PATCH] fix: refactor css

---
 widget/src/components/ConnectionLost.scss | 11 +++++++++++
 widget/src/components/ConnectionLost.tsx  | 13 +------------
 widget/src/providers/ChatProvider.tsx     |  6 +++---
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/widget/src/components/ConnectionLost.scss b/widget/src/components/ConnectionLost.scss
index d7f6abeb..d9869142 100644
--- a/widget/src/components/ConnectionLost.scss
+++ b/widget/src/components/ConnectionLost.scss
@@ -38,3 +38,14 @@
   opacity: 1;
   transition: 0s;
 }
+
+.sc-chat--attempt-reconnect {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  gap: 1rem;
+}
diff --git a/widget/src/components/ConnectionLost.tsx b/widget/src/components/ConnectionLost.tsx
index 220ac1b2..2db56103 100644
--- a/widget/src/components/ConnectionLost.tsx
+++ b/widget/src/components/ConnectionLost.tsx
@@ -33,18 +33,7 @@ const ConnectionLost: React.FC = () => {
       style={{ backgroundColor: colors.messageList.bg }}
     >
       {loading ? (
-        <div
-          style={{
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            textAlign: "center",
-            gap: "1rem",
-          }}
-        >
+        <div className="sc-chat--attempt-reconnect">
           <h3>{t("messages.attempting_reconnect")}</h3>
           <LoadingIcon color={colors.button.text} />
         </div>
diff --git a/widget/src/providers/ChatProvider.tsx b/widget/src/providers/ChatProvider.tsx
index 0d4ee1a6..4187cc4d 100644
--- a/widget/src/providers/ChatProvider.tsx
+++ b/widget/src/providers/ChatProvider.tsx
@@ -416,9 +416,9 @@ const ChatProvider: React.FC<{
 
     return () => {
       socketCtx.socket.io.off("reconnect", reSubscribe);
-      socketCtx.socket.io.on("close", endConnection);
-      socketCtx.socket.io.on("reconnect_error", endConnection);
-      socketCtx.socket.io.on("reconnect_failed", endConnection);
+      socketCtx.socket.io.off("close", endConnection);
+      socketCtx.socket.io.off("reconnect_error", endConnection);
+      socketCtx.socket.io.off("reconnect_failed", endConnection);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);