style: GlobalMap background when custom background is enable

src/components/GlobalMap.tsx

@@ -1,7 +1,7 @@
 import useTooltip from "@/hooks/use-tooltip"
 import { geoJsonString } from "@/lib/geo-json-string"
 import { countryCoordinates } from "@/lib/geo-limit"
-import { formatNezhaInfo } from "@/lib/utils"
+import { cn, formatNezhaInfo } from "@/lib/utils"
 import { NezhaServer } from "@/types/nezha-api"
 import { geoEquirectangular, geoPath } from "d3-geo"
 import { useTranslation } from "react-i18next"
@@ -13,6 +13,10 @@ export default function GlobalMap({ serverList, now }: { serverList: NezhaServer
   const countryList: string[] = []
   const serverCounts: { [key: string]: number } = {}
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   serverList.forEach((server) => {
     if (server.country_code) {
       const countryCode = server.country_code.toUpperCase()
@@ -30,7 +34,11 @@ export default function GlobalMap({ serverList, now }: { serverList: NezhaServer
   const filteredFeatures = geoJson.features.filter((feature: { properties: { iso_a3_eh: string } }) => feature.properties.iso_a3_eh !== "")
 
   return (
-    <section className="flex flex-col gap-4 mt-8">
+    <section
+      className={cn("flex flex-col gap-4 mt-8", {
+        "bg-card/70 rounded-lg  p-4": customBackgroundImage,
+      })}
+    >
       <p className="text-sm font-medium opacity-40">
         {t("map.Distributions")} {countryList.length} {t("map.Regions")}
       </p>

src/main.tsx

@@ -1,6 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
-import React from "react"
 import ReactDOM from "react-dom/client"
 import { Toaster } from "sonner"
 
@@ -17,32 +16,30 @@ import "./index.css"
 const queryClient = new QueryClient()
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <MotionProvider>
-      <ThemeProvider storageKey="vite-ui-theme">
-        <QueryClientProvider client={queryClient}>
-          <WebSocketProvider url="/api/v1/ws/server">
-            <StatusProvider>
-              <SortProvider>
-                <TooltipProvider>
-                  <App />
-                  <Toaster
-                    duration={1000}
-                    toastOptions={{
-                      classNames: {
-                        default: "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
-                      },
-                    }}
-                    position="top-center"
-                    className={"flex items-center justify-center"}
-                  />
-                  <ReactQueryDevtools />
-                </TooltipProvider>
-              </SortProvider>
-            </StatusProvider>
-          </WebSocketProvider>
-        </QueryClientProvider>
-      </ThemeProvider>
-    </MotionProvider>
-  </React.StrictMode>,
+  <MotionProvider>
+    <ThemeProvider storageKey="vite-ui-theme">
+      <QueryClientProvider client={queryClient}>
+        <WebSocketProvider url="/api/v1/ws/server">
+          <StatusProvider>
+            <SortProvider>
+              <TooltipProvider>
+                <App />
+                <Toaster
+                  duration={1000}
+                  toastOptions={{
+                    classNames: {
+                      default: "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
+                    },
+                  }}
+                  position="top-center"
+                  className={"flex items-center justify-center"}
+                />
+                <ReactQueryDevtools />
+              </TooltipProvider>
+            </SortProvider>
+          </StatusProvider>
+        </WebSocketProvider>
+      </QueryClientProvider>
+    </ThemeProvider>
+  </MotionProvider>,
 )