diff --git a/src/views/Action/index.js b/src/views/Action/index.js
index a5e2dfe..98006bb 100644
--- a/src/views/Action/index.js
+++ b/src/views/Action/index.js
@@ -1,18 +1,15 @@
import Paper from "@mui/material/Paper";
-import Box from "@mui/material/Box";
import Fab from "@mui/material/Fab";
import TranslateIcon from "@mui/icons-material/Translate";
import ThemeProvider from "../../hooks/Theme";
import Draggable from "./Draggable";
-import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
-import Stack from "@mui/material/Stack";
import { useEffect, useState, useMemo, useCallback } from "react";
import { SettingProvider } from "../../hooks/Setting";
import Popup from "../Popup";
import { debounce } from "../../libs/utils";
import * as shortcut from "@violentmonkey/shortcut";
import { isGm } from "../../libs/client";
+import Header from "../Popup/Header";
export default function Action({ translator, fab }) {
const fabWidth = 40;
@@ -161,23 +158,7 @@ export default function Action({ translator, fab }) {
onMove={handleMove}
handler={
-
-
- {`${process.env.REACT_APP_NAME} v${process.env.REACT_APP_VERSION}`}
-
- {
- setShowPopup(false);
- }}
- >
-
-
-
+
}
>
diff --git a/src/views/Options/DarkModeButton.js b/src/views/Options/DarkModeButton.js
new file mode 100644
index 0000000..4d8cce3
--- /dev/null
+++ b/src/views/Options/DarkModeButton.js
@@ -0,0 +1,13 @@
+import IconButton from "@mui/material/IconButton";
+import { useDarkMode } from "../../hooks/ColorMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+
+export default function DarkModeButton() {
+ const { darkMode, toggleDarkMode } = useDarkMode();
+ return (
+
+ {darkMode ? : }
+
+ );
+}
diff --git a/src/views/Options/Header.js b/src/views/Options/Header.js
index 6d89fe2..5351b9c 100644
--- a/src/views/Options/Header.js
+++ b/src/views/Options/Header.js
@@ -4,16 +4,13 @@ import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Box from "@mui/material/Box";
-import { useDarkMode } from "../../hooks/ColorMode";
-import LightModeIcon from "@mui/icons-material/LightMode";
-import DarkModeIcon from "@mui/icons-material/DarkMode";
import Link from "@mui/material/Link";
import { useI18n } from "../../hooks/I18n";
+import DarkModeButton from "./DarkModeButton";
function Header(props) {
const i18n = useI18n();
const { onDrawerToggle } = props;
- const { darkMode, toggleDarkMode } = useDarkMode();
return (
{`${i18n("app_name")} v${process.env.REACT_APP_VERSION}`}
-
- {darkMode ? : }
-
+
);
diff --git a/src/views/Popup/Header.js b/src/views/Popup/Header.js
new file mode 100644
index 0000000..5888296
--- /dev/null
+++ b/src/views/Popup/Header.js
@@ -0,0 +1,42 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import HomeIcon from "@mui/icons-material/Home";
+import Stack from "@mui/material/Stack";
+import DarkModeButton from "../Options/DarkModeButton";
+
+export default function Header({ setShowPopup }) {
+ const handleHomepage = () => {
+ window.open(process.env.REACT_APP_HOMEPAGE, "_blank");
+ };
+
+ return (
+
+
+
+
+
+
+ {`${process.env.REACT_APP_NAME} v${process.env.REACT_APP_VERSION}`}
+
+
+
+ {setShowPopup ? (
+ {
+ setShowPopup(false);
+ }}
+ >
+
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/src/views/Popup/index.js b/src/views/Popup/index.js
index f3d6e2c..3ecfd3b 100644
--- a/src/views/Popup/index.js
+++ b/src/views/Popup/index.js
@@ -10,6 +10,8 @@ import { browser } from "../../libs/browser";
import { isExt } from "../../libs/client";
import { useI18n } from "../../hooks/I18n";
import TextField from "@mui/material/TextField";
+import Divider from "@mui/material/Divider";
+import Header from "./Header";
import {
MSG_TRANS_TOGGLE,
MSG_TRANS_GETRULE,
@@ -93,8 +95,10 @@ export default function Popup({ setShowPopup, translator: tran }) {
if (!rule) {
return (
-
-
+
+
+
+
@@ -106,8 +110,10 @@ export default function Popup({ setShowPopup, translator: tran }) {
const { transOpen, translator, fromLang, toLang, textStyle, bgColor } = rule;
return (
-
-
+
+
+
+