feat: components with custom background use transparent background

src/components/CycleTransferStatsClient.tsx

@@ -29,11 +29,17 @@ export const CycleTransferStatsClient: React.FC<CycleTransferStatsClientProps> =
   className,
 }) => {
   const { t } = useTranslation()
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
   return (
     <div
       className={cn(
-        "w-full bg-white px-4 py-3 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
+        "w-full bg-white px-4 py-3 rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
         className,
+        {
+          "bg-card/50": customBackgroundImage,
+        },
       )}
     >
       {serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {

src/components/GroupSwitch.tsx

@@ -10,9 +10,19 @@ export default function GroupSwitch({
   currentTab: string
   setCurrentTab: (tab: string) => void
 }) {
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
   return (
     <div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
-      <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+      <div
+        className={cn(
+          "flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800",
+          {
+            "bg-stone-100/50 dark:bg-stone-800/50": customBackgroundImage,
+          },
+        )}
+      >
         {tabs.map((tab: string) => (
           <div
             key={tab}

src/components/LanguageSwitcher.tsx

@@ -7,12 +7,17 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
 import { CheckCircleIcon } from "@heroicons/react/20/solid"
 import { useTranslation } from "react-i18next"
 
 export function LanguageSwitcher() {
   const { t, i18n } = useTranslation()
 
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   const locale = i18n.languages[0]
 
   const handleSelect = (e: Event, newLocale: string) => {
@@ -32,7 +37,9 @@ export function LanguageSwitcher() {
         <Button
           variant="outline"
           size="sm"
-          className="rounded-full px-[9px] bg-white dark:bg-black"
+          className={cn("rounded-full px-[9px] bg-white dark:bg-black", {
+            "bg-white/50 dark:bg-black/50": customBackgroundImage,
+          })}
         >
           {localeItems.find((item) => item.code === locale)?.name}
           <span className="sr-only">Change language</span>

src/components/ServerCard.tsx

@@ -27,6 +27,11 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
   } = formatNezhaInfo(now, serverInfo)
 
   const showFlag = true
+
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   // @ts-expect-error ShowNetTransfer is a global variable
   const showNetTransfer = window.ShowNetTransfer as boolean
 
@@ -47,6 +52,9 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
     <Card
       className={cn(
         "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
+        {
+          "bg-card/50": customBackgroundImage,
+        },
       )}
       onClick={() => navigate(`/server/${serverInfo.id}`)}
     >
@@ -187,6 +195,9 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
       className={cn(
         "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
         showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
+        {
+          "bg-card/50": customBackgroundImage,
+        },
       )}
       onClick={() => navigate(`/server/${serverInfo.id}`, { replace: true })}
     >

src/components/ServerCardInline.tsx

@@ -37,6 +37,10 @@ export default function ServerCardInline({
 
   const showFlag = true
 
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   const parsedData = parsePublicNote(public_note)
 
   let daysLeft = 0
@@ -55,6 +59,9 @@ export default function ServerCardInline({
       <Card
         className={cn(
           "flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full",
+          {
+            "bg-card/50": customBackgroundImage,
+          },
         )}
         onClick={() => navigate(`/server/${serverInfo.id}`)}
       >
@@ -221,6 +228,9 @@ export default function ServerCardInline({
     <Card
       className={cn(
         "flex  min-h-[61px] min-w-[900px] items-center justify-start gap-3 p-3 md:px-5 flex-row cursor-pointer hover:bg-accent/50 transition-colors",
+        {
+          "bg-card/50": customBackgroundImage,
+        },
       )}
       onClick={() => navigate(`/server/${serverInfo.id}`)}
     >

src/components/ServerOverview.tsx

@@ -33,6 +33,10 @@ export default function ServerOverview({
   // @ts-expect-error CustomIllustration is a global variable
   const customIllustration = window.CustomIllustration || "/animated-man.webp"
 
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   return (
     <>
       <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
@@ -40,7 +44,9 @@ export default function ServerOverview({
           onClick={() => {
             setStatus("all")
           }}
-          className={cn("hover:border-blue-500 cursor-pointer transition-all")}
+          className={cn("hover:border-blue-500 cursor-pointer transition-all", {
+            "bg-card/50": customBackgroundImage,
+          })}
         >
           <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
@@ -60,6 +66,9 @@ export default function ServerOverview({
           }}
           className={cn(
             "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
+            {
+              "bg-card/50": customBackgroundImage,
+            },
             {
               "ring-green-500 ring-2 border-transparent": status === "online",
             },
@@ -87,6 +96,9 @@ export default function ServerOverview({
           }}
           className={cn(
             "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
+            {
+              "bg-card/50": customBackgroundImage,
+            },
             {
               "ring-red-500 ring-2 border-transparent": status === "offline",
             },
@@ -107,7 +119,11 @@ export default function ServerOverview({
             </section>
           </CardContent>
         </Card>
-        <Card className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all")}>
+        <Card
+          className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all", {
+            "bg-card/50": customBackgroundImage,
+          })}
+        >
           <CardContent className="flex h-full items-center relative px-6 py-3">
             <section className="flex flex-col gap-1 w-full">
               <div className="flex items-center w-full justify-between">

src/components/ServiceTrackerClient.tsx

@@ -23,11 +23,17 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({
   avgDelay = 0,
 }) => {
   const { t } = useTranslation()
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
   return (
     <div
       className={cn(
-        "w-full space-y-3 bg-white px-4 py-4 dark:bg-black  rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
+        "w-full space-y-3 bg-white px-4 py-4  rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
         className,
+        {
+          "bg-card/50": customBackgroundImage,
+        },
       )}
     >
       <div className="flex justify-between items-center">

src/components/TabSwitch.tsx

@@ -12,9 +12,19 @@ export default function TabSwitch({
   setCurrentTab: (tab: string) => void
 }) {
   const { t } = useTranslation()
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
   return (
     <div className="z-50 flex flex-col items-start rounded-[50px]">
-      <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+      <div
+        className={cn(
+          "flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800",
+          {
+            "bg-stone-100/50 dark:bg-stone-800/50": customBackgroundImage,
+          },
+        )}
+      >
         {tabs.map((tab: string) => (
           <div
             key={tab}

src/components/ThemeSwitcher.tsx

@@ -17,6 +17,10 @@ export function ModeToggle() {
   const { t } = useTranslation()
   const { setTheme, theme } = useTheme()
 
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   const handleSelect = (e: Event, newTheme: Theme) => {
     e.preventDefault()
     setTheme(newTheme)
@@ -28,7 +32,9 @@ export function ModeToggle() {
         <Button
           variant="outline"
           size="sm"
-          className="rounded-full px-[9px] bg-white dark:bg-black"
+          className={cn("rounded-full px-[9px] bg-white dark:bg-black", {
+            "bg-white/50 dark:bg-black/50": customBackgroundImage,
+          })}
         >
           <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />

src/pages/Server.tsx

@@ -43,6 +43,10 @@ export default function Servers() {
   const [settingsOpen, setSettingsOpen] = useState<boolean>(false)
   const [currentGroup, setCurrentGroup] = useState<string>("All")
 
+  const customBackgroundImage =
+    // @ts-expect-error ShowNetTransfer is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   useEffect(() => {
     const showServicesState = localStorage.getItem("showServices")
     if (showServicesState !== null) {
@@ -224,6 +228,9 @@ export default function Servers() {
               {
                 "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showMap === "1",
               },
+              {
+                "bg-opacity-50": customBackgroundImage,
+              },
             )}
           >
             <MapIcon className="size-[13px]" />
@@ -238,6 +245,9 @@ export default function Servers() {
               {
                 "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showServices === "1",
               },
+              {
+                "bg-opacity-50": customBackgroundImage,
+              },
             )}
           >
             <ChartBarSquareIcon className="size-[13px]" />
@@ -252,6 +262,9 @@ export default function Servers() {
               {
                 "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
               },
+              {
+                "bg-opacity-50": customBackgroundImage,
+              },
             )}
           >
             <ViewColumnsIcon className="size-[13px]" />
@@ -267,6 +280,9 @@ export default function Servers() {
                   "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] dark:bg-stone-700 bg-stone-200":
                     settingsOpen,
                 },
+                {
+                  "dark:bg-stone-800/50 bg-stone-100/50 ": customBackgroundImage,
+                },
               )}
             >
               <p className="text-[10px] font-bold whitespace-nowrap">