diff --git a/matrixgw_frontend/package-lock.json b/matrixgw_frontend/package-lock.json index de031d4..77ae474 100644 --- a/matrixgw_frontend/package-lock.json +++ b/matrixgw_frontend/package-lock.json @@ -11,8 +11,6 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", "@fontsource/roboto": "^5.2.9", - "@mdi/js": "^7.4.47", - "@mdi/react": "^1.6.1", "@mui/icons-material": "^7.3.6", "@mui/material": "^7.3.6", "@mui/x-data-grid": "^8.20.0", @@ -777,21 +775,6 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@mdi/js": { - "version": "7.4.47", - "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz", - "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==", - "license": "Apache-2.0" - }, - "node_modules/@mdi/react": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz", - "integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==", - "license": "MIT", - "dependencies": { - "prop-types": "^15.7.2" - } - }, "node_modules/@mui/core-downloads-tracker": { "version": "7.3.6", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.6.tgz", diff --git a/matrixgw_frontend/package.json b/matrixgw_frontend/package.json index b6036bd..cf6de10 100644 --- a/matrixgw_frontend/package.json +++ b/matrixgw_frontend/package.json @@ -13,8 +13,6 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", "@fontsource/roboto": "^5.2.9", - "@mdi/js": "^7.4.47", - "@mdi/react": "^1.6.1", "@mui/icons-material": "^7.3.6", "@mui/material": "^7.3.6", "@mui/x-data-grid": "^8.20.0", diff --git a/matrixgw_frontend/src/icons/AppIcon.tsx b/matrixgw_frontend/src/icons/AppIcon.tsx new file mode 100644 index 0000000..bd44d76 --- /dev/null +++ b/matrixgw_frontend/src/icons/AppIcon.tsx @@ -0,0 +1,18 @@ +import { Icon } from "@mui/material"; +import { useActualColorMode } from "../widgets/dashboard/ThemeSwitcher"; + +export function AppIcon(p: { src: string; size?: string }): React.ReactElement { + const { mode } = useActualColorMode(); + return ( + + + + ); +} diff --git a/matrixgw_frontend/src/icons/message-text-fast.svg b/matrixgw_frontend/src/icons/message-text-fast.svg new file mode 100644 index 0000000..d17eeed --- /dev/null +++ b/matrixgw_frontend/src/icons/message-text-fast.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/matrixgw_frontend/src/icons/openid.svg b/matrixgw_frontend/src/icons/openid.svg new file mode 100644 index 0000000..a1a671a --- /dev/null +++ b/matrixgw_frontend/src/icons/openid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/matrixgw_frontend/src/routes/auth/LoginRoute.tsx b/matrixgw_frontend/src/routes/auth/LoginRoute.tsx index 75b9457..7ffe589 100644 --- a/matrixgw_frontend/src/routes/auth/LoginRoute.tsx +++ b/matrixgw_frontend/src/routes/auth/LoginRoute.tsx @@ -1,9 +1,10 @@ -import { Alert, Box, Button, CircularProgress } from "@mui/material"; -import Icon from "@mdi/react"; -import { mdiOpenid } from "@mdi/js"; +import { Alert, Box, Button, CircularProgress, SvgIcon } from "@mui/material"; import { ServerApi } from "../../api/ServerApi"; import React from "react"; import { AuthApi } from "../../api/AuthApi"; +import openid from "../../icons/openid.svg"; +import { createSvgIcon } from "@mui/x-data-grid/internals"; +import { AppIcon } from "../../icons/AppIcon"; export function LoginRoute(): React.ReactElement { const [loading, setLoading] = React.useState(false); @@ -40,7 +41,7 @@ export function LoginRoute(): React.ReactElement { fullWidth variant="outlined" onClick={authWithOpenID} - startIcon={} + startIcon={} > Sign in with {ServerApi.Config.oidc_provider_name} diff --git a/matrixgw_frontend/src/widgets/auth/BaseLoginPage.tsx b/matrixgw_frontend/src/widgets/auth/BaseLoginPage.tsx index a6d86da..4c34f6f 100644 --- a/matrixgw_frontend/src/widgets/auth/BaseLoginPage.tsx +++ b/matrixgw_frontend/src/widgets/auth/BaseLoginPage.tsx @@ -1,10 +1,10 @@ -import { mdiMessageTextFast } from "@mdi/js"; -import Icon from "@mdi/react"; import { Typography } from "@mui/material"; import MuiCard from "@mui/material/Card"; import Stack from "@mui/material/Stack"; import { styled } from "@mui/material/styles"; import { Outlet } from "react-router"; +import { AppIcon } from "../../icons/AppIcon"; +import mdiMessageTextFast from "../../icons/message-text-fast.svg"; const Card = styled(MuiCard)(({ theme }) => ({ display: "flex", @@ -57,12 +57,7 @@ export function BaseLoginPage(): React.ReactElement { variant="h4" sx={{ width: "100%", fontSize: "clamp(2rem, 10vw, 2.15rem)" }} > - {" "} - MatrixGW + MatrixGW diff --git a/matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx b/matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx index 295991f..f492e76 100644 --- a/matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx +++ b/matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx @@ -1,5 +1,3 @@ -import { mdiMessageTextFast } from "@mdi/js"; -import Icon from "@mdi/react"; import LogoutIcon from "@mui/icons-material/Logout"; import MenuIcon from "@mui/icons-material/Menu"; import MenuOpenIcon from "@mui/icons-material/MenuOpen"; @@ -13,6 +11,8 @@ import Toolbar from "@mui/material/Toolbar"; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; import * as React from "react"; +import { AppIcon } from "../../icons/AppIcon"; +import mdiMessageTextFast from "../../icons/message-text-fast.svg"; import { RouterLink } from "../RouterLink"; import { useUserInfo } from "./BaseAuthenticatedPage"; import ThemeSwitcher from "./ThemeSwitcher"; @@ -101,7 +101,7 @@ export default function DashboardHeader({ - + } + icon={} href="/" mini={viewport === "desktop"} /> } + icon={} href="/matrix_link" mini={viewport === "desktop"} /> } + icon={} href="/tokens" mini={viewport === "desktop"} /> } + icon={} href="/wsdebug" mini={viewport === "desktop"} /> diff --git a/matrixgw_frontend/src/widgets/dashboard/ThemeSwitcher.tsx b/matrixgw_frontend/src/widgets/dashboard/ThemeSwitcher.tsx index 7c22dc3..aa2d29d 100644 --- a/matrixgw_frontend/src/widgets/dashboard/ThemeSwitcher.tsx +++ b/matrixgw_frontend/src/widgets/dashboard/ThemeSwitcher.tsx @@ -7,9 +7,10 @@ import DarkModeIcon from "@mui/icons-material/DarkMode"; import LightModeIcon from "@mui/icons-material/LightMode"; import type {} from "@mui/material/themeCssVarsAugmentation"; -export default function ThemeSwitcher() { - const theme = useTheme(); - +export function useActualColorMode(): { + mode: "light" | "dark"; + setMode: (mode: "light" | "dark") => void; +} { const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); const preferredMode = prefersDarkMode ? "dark" : "light"; @@ -17,21 +18,27 @@ export default function ThemeSwitcher() { const paletteMode = !mode || mode === "system" ? preferredMode : mode; + return { mode: paletteMode, setMode }; +} + +export default function ThemeSwitcher() { + const theme = useTheme(); + + const { mode, setMode } = useActualColorMode(); + const toggleMode = React.useCallback(() => { - setMode(paletteMode === "dark" ? "light" : "dark"); - }, [setMode, paletteMode]); + setMode(mode === "dark" ? "light" : "dark"); + }, [mode, setMode]); return (