popup ui

src/views/Action/Draggable.js

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { limitNumber } from "../../libs/utils";
 import { isMobile } from "../../libs/mobile";
 import { setFab } from "../../libs/storage";
+import Paper from "@mui/material/Paper";
 
 const getEdgePosition = (
   { x: left, y: top, edge },
@@ -58,6 +59,17 @@ const getHidePosition = (
   return { x: left, y: top, edge, hide: true };
 };
 
+function DraggableWrapper({ children, usePaper, ...props }) {
+  if (usePaper) {
+    return (
+      <Paper {...props} elevation={4}>
+        {children}
+      </Paper>
+    );
+  }
+  return <div {...props}>{children}</div>;
+}
+
 export default function Draggable({
   windowSize,
   width,
@@ -70,6 +82,7 @@ export default function Draggable({
   onMove,
   handler,
   children,
+  usePaper,
 }) {
   const [origin, setOrigin] = useState({
     x: left,
@@ -181,7 +194,8 @@ export default function Draggable({
       };
 
   return (
-    <div
+    <DraggableWrapper
+      usePaper={usePaper}
       style={{
         opacity,
         position: "fixed",
@@ -202,6 +216,6 @@ export default function Draggable({
         {handler}
       </div>
       <div>{children}</div>
-    </div>
+    </DraggableWrapper>
   );
 }

src/views/Action/index.js

@@ -1,4 +1,3 @@
-import Paper from "@mui/material/Paper";
 import Fab from "@mui/material/Fab";
 import TranslateIcon from "@mui/icons-material/Translate";
 import ThemeProvider from "../../hooks/Theme";
@@ -9,6 +8,8 @@ import Popup from "../Popup";
 import { debounce } from "../../libs/utils";
 import { isGm } from "../../libs/client";
 import Header from "../Popup/Header";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
 import {
   DEFAULT_SHORTCUTS,
   OPT_SHORTCUT_TRANSLATE,
@@ -178,17 +179,17 @@ export default function Action({ translator, fab }) {
           show={showPopup}
           onStart={handleStart}
           onMove={handleMove}
+          usePaper
           handler={
-            <Paper style={{ cursor: "move" }} elevation={3}>
+            <Box style={{ cursor: "move" }}>
               <Header setShowPopup={setShowPopup} />
-            </Paper>
+              <Divider />
+            </Box>
           }
         >
-          <Paper>
+          {showPopup && (
-            {showPopup && (
+            <Popup setShowPopup={setShowPopup} translator={translator} />
-              <Popup setShowPopup={setShowPopup} translator={translator} />
+          )}
-            )}
-          </Paper>
         </Draggable>
         <Draggable
           key="fab"