From 18fcebfb8c9f3ae61bbaa73debc85cc6acca56e8 Mon Sep 17 00:00:00 2001
From: keiko233 <i@elaina.moe>
Date: Thu, 29 Aug 2024 20:28:47 +0800
Subject: [PATCH] fix(linux): replace backdrop blur to background opacity

---
 .../src/components/app/app-drawer.tsx         | 33 ++++++++++++++++---
 .../src/components/app/drawer-content.tsx     | 11 +++++--
 .../components/baseDialog/index.tsx           | 10 ++++--
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/frontend/nyanpasu/src/components/app/app-drawer.tsx b/frontend/nyanpasu/src/components/app/app-drawer.tsx
index c82c52b335..1311990302 100644
--- a/frontend/nyanpasu/src/components/app/app-drawer.tsx
+++ b/frontend/nyanpasu/src/components/app/app-drawer.tsx
@@ -3,10 +3,20 @@ import { useState } from "react";
 import { classNames } from "@/utils";
 import getSystem from "@/utils/get-system";
 import { MenuOpen } from "@mui/icons-material";
-import { alpha, Backdrop, IconButton, useTheme } from "@mui/material";
+import {
+  alpha,
+  Backdrop,
+  darken,
+  IconButton,
+  lighten,
+  useTheme,
+} from "@mui/material";
+import { cn } from "@nyanpasu/ui";
 import AnimatedLogo from "../layout/animated-logo";
 import DrawerContent from "./drawer-content";
 
+const OS = getSystem();
+
 export const AppDrawer = () => {
   const { palette } = useTheme();
 
@@ -17,7 +27,7 @@ export const AppDrawer = () => {
       <div
         className={classNames(
           "fixed z-10 flex items-center gap-2",
-          getSystem() === "macos" ? "left-24 top-3" : "left-4 top-1.5",
+          OS === "macos" ? "left-24 top-3" : "left-4 top-1.5",
         )}
         data-windrag
       >
@@ -48,9 +58,12 @@ export const AppDrawer = () => {
       <DrawerTitle />
 
       <Backdrop
-        className="z-20 backdrop-blur-xl"
+        className={cn("z-20", OS !== "linux" && "backdrop-blur-xl")}
         sx={{
-          backgroundColor: alpha(palette.primary[palette.mode], 0.1),
+          backgroundColor:
+            OS === "linux"
+              ? undefined
+              : alpha(palette.primary[palette.mode], 0.1),
         }}
         open={open}
         onClick={() => setOpen(false)}
@@ -72,7 +85,17 @@ export const AppDrawer = () => {
                 type: "tween",
               }}
             >
-              <DrawerContent className="max-w-64" />
+              <DrawerContent
+                className="max-w-64"
+                style={{
+                  backgroundColor:
+                    OS === "linux"
+                      ? palette.mode === "light"
+                        ? lighten(palette.primary[palette.mode], 0.9)
+                        : darken(palette.primary[palette.mode], 0.7)
+                      : undefined,
+                }}
+              />
             </motion.div>
           </div>
         </AnimatePresence>
diff --git a/frontend/nyanpasu/src/components/app/drawer-content.tsx b/frontend/nyanpasu/src/components/app/drawer-content.tsx
index 161433d06c..478bdc8d3a 100644
--- a/frontend/nyanpasu/src/components/app/drawer-content.tsx
+++ b/frontend/nyanpasu/src/components/app/drawer-content.tsx
@@ -1,7 +1,7 @@
 import { useSize } from "ahooks";
 import clsx from "clsx";
 import { useAtom } from "jotai";
-import { useCallback, useEffect, useRef } from "react";
+import { CSSProperties, useCallback, useEffect, useRef } from "react";
 import { atomIsDrawerOnlyIcon } from "@/store";
 import getSystem from "@/utils/get-system";
 import { languageQuirks } from "@/utils/language";
@@ -10,7 +10,13 @@ import { useNyanpasu } from "@nyanpasu/interface";
 import AnimatedLogo from "../layout/animated-logo";
 import RouteListItem from "./modules/route-list-item";
 
-export const DrawerContent = ({ className }: { className?: string }) => {
+export const DrawerContent = ({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: CSSProperties;
+}) => {
   const [onlyIcon, setOnlyIcon] = useAtom(atomIsDrawerOnlyIcon);
 
   const { nyanpasuConfig } = useNyanpasu();
@@ -58,6 +64,7 @@ export const DrawerContent = ({ className }: { className?: string }) => {
       )}
       style={{
         backgroundColor: "var(--background-color-alpha)",
+        ...style,
       }}
       data-windrag
     >
diff --git a/frontend/ui/src/materialYou/components/baseDialog/index.tsx b/frontend/ui/src/materialYou/components/baseDialog/index.tsx
index c29da3989a..8868eb78ba 100644
--- a/frontend/ui/src/materialYou/components/baseDialog/index.tsx
+++ b/frontend/ui/src/materialYou/components/baseDialog/index.tsx
@@ -117,9 +117,15 @@ export const BaseDialog = ({
         <Portal.Root className="fixed left-0 top-0 z-50 h-dvh w-full">
           {!full && (
             <motion.div
-              className="absolute inset-0 z-50 backdrop-blur-xl"
+              className={cn(
+                "absolute inset-0 z-50",
+                OS === "linux" ? "bg-black/50" : "backdrop-blur-xl",
+              )}
               style={{
-                backgroundColor: alpha(palette.primary[palette.mode], 0.1),
+                backgroundColor:
+                  OS === "linux"
+                    ? undefined
+                    : alpha(palette.primary[palette.mode], 0.1),
               }}
               animate={open ? "open" : "closed"}
               initial={{ opacity: 0 }}