fix: The FAB floating button gets triggered when I am near to its padding area. (#243)

* Formated the code for future use with code maintainability.

Signed-off-by: Owaise Imdad <owaiseimdad@gmail.com>

* Fab global is added.

Signed-off-by: Owaise Imdad <owaiseimdad@gmail.com>

---------

Signed-off-by: Owaise Imdad <owaiseimdad@gmail.com>

Author: Owaiseimdad

src/components/FabButton.tsx

@@ -2,64 +2,66 @@ import { Fab, Action } from "react-tiny-fab";
 import { MdExplore } from "react-icons/md";
 import { FaCircleQuestion } from "react-icons/fa6";
 import tour from "../components/Tour";
+import FabGlobalStyle from "../styles/components/FabGlobalStyles";
 
 const FloatingFAB = () => {
   const startTourEvent = () => {
     void tour.start();
   };
 
   return (
-    <Fab
-      icon={<FaCircleQuestion />}
-      alwaysShowTitle
-      mainButtonStyles={{
-        backgroundColor: "#1B2540",
-        color: "white",
-        width: "50px",
-        height: "50px",
-        boxShadow: "0px 6px 10px rgba(0, 0, 0, 0.25)",
-        borderRadius: "50%",
-        transition: "all 0.3s ease-in-out",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        fontSize: "24px",
-      }}
-      style={{
-        position: "fixed",
-        bottom: "20px",
-        right: "20px",
-        zIndex: 1000,
-        marginBottom: "2.813rem",
-        marginRight: "0.625rem"
-      }}
-    >
-      <Action
-        text="Start Tour"
-        onClick={startTourEvent}
-        style={{
-          backgroundColor: "#444444",
+    <>
+      <FabGlobalStyle />
+      <Fab
+        icon={<FaCircleQuestion />}
+        alwaysShowTitle
+        mainButtonStyles={{
+          backgroundColor: "#1B2540",
           color: "white",
-          width: "45px",
-          height: "45px",
+          width: "50px",
+          height: "50px",
+          boxShadow: "0px 6px 10px rgba(0, 0, 0, 0.25)",
+          borderRadius: "50%",
+          transition: "all 0.3s ease-in-out",
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          borderRadius: "50%",
-          fontSize: "22px",
-          transition: "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
-          boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.2)",
+          fontSize: "24px",
+          padding: "5px",
+        }}
+        style={{
+          position: "fixed",
+          bottom: "20px",
+          right: "20px",
+          zIndex: 1000,
+          marginBottom: "2.813rem",
+          marginRight: "0.625rem",
         }}
-        onMouseEnter={(e) =>
-          (e.currentTarget.style.transform = "scale(1.1)")
-        }
-        onMouseLeave={(e) =>
-          (e.currentTarget.style.transform = "scale(1)")
-        }
       >
-        <MdExplore />
-      </Action>
-    </Fab>
+        <Action
+          text="Start Tour"
+          onClick={startTourEvent}
+          style={{
+            backgroundColor: "#444444",
+            color: "white",
+            width: "45px",
+            height: "45px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: "50%",
+            fontSize: "22px",
+            transition:
+              "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
+            boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.2)",
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.transform = "scale(1.1)")}
+          onMouseLeave={(e) => (e.currentTarget.style.transform = "scale(1)")}
+        >
+          <MdExplore />
+        </Action>
+      </Fab>
+    </>
   );
 };
 

src/styles/components/FabGlobalStyles.ts

@@ -0,0 +1,10 @@
+import { createGlobalStyle } from 'styled-components';
+
+const FabGlobalStyle = createGlobalStyle`
+  .rtf--mb__c {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+`;
+
+export default FabGlobalStyle;