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 ( - - + +
+ +