feat: improve footer UI

src/components/particle.tsx

@@ -1,14 +1,22 @@
 import * as React from "react";
-import Particles, { ParticlesProvider } from "@tsparticles/react";
-import { useCallback, useMemo } from "react";
+import * as ParticlesReact from "@tsparticles/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { loadSlim } from "@tsparticles/slim";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
 const ParticlesInner = (props) => {
+  const [init, setInit] = useState(false);
+  const Particles = (ParticlesReact.default ??
+    ParticlesReact.Particles) as React.ComponentType<Record<string, unknown>>;
+
   const particlesInit = useCallback(async (engine) => {
     await loadSlim(engine);
   }, []);
 
+  useEffect(() => {
+    setInit(true);
+  }, []);
+
   const options = useMemo(
     () => ({
       fullScreen: {
@@ -86,22 +94,24 @@ const ParticlesInner = (props) => {
     [],
   );
 
+  if (!init) {
+    return null;
+  }
+
   return (
-    <ParticlesProvider init={particlesInit}>
-      <div
-        style={{
-          position: "fixed",
-          width: "100vw",
-          height: "100vh",
-          top: 0,
-          left: 0,
-          zIndex: -1,
-          pointerEvents: "none",
-        }}
-      >
-        <Particles id={props.id} options={options} />
-      </div>
-    </ParticlesProvider>
+    <div
+      style={{
+        position: "fixed",
+        width: "100vw",
+        height: "100vh",
+        top: 0,
+        left: 0,
+        zIndex: -1,
+        pointerEvents: "none",
+      }}
+    >
+      <Particles id={props.id} init={particlesInit} options={options} />
+    </div>
   );
 };
 

src/components/scroll/bottom-to-top.tsx

@@ -31,10 +31,9 @@ export default function ScrollBottomToTop() {
     <div className="scroll-to-top">
       {isVisible && (
         <button
-         aria-label="Scroll to top"
+          aria-label="Scroll to top"
           onClick={scrollToTop}
-          className="fixed right-5 bottom-5 z-50 cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
-          style={{ backgroundColor: "var(--ifm-color-primary)" }}
+          className="scroll-to-top-button"
         >
           <FaArrowUp />
         </button>