Merge pull request #792 from nimbleghost/fix-ntfy-banner

Fix ntfy upgrade banner in dark mode
pull/793/head
Philipp C. Heckel 2023-06-28 15:53:54 -04:00 committed by GitHub
commit f78389b6ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 67 additions and 42 deletions

View File

@ -44,7 +44,10 @@ const ActionBar = (props) => {
<Toolbar <Toolbar
sx={{ sx={{
pr: "24px", pr: "24px",
background: theme.palette.actionBarBackground, background:
theme.palette.mode === "light"
? "linear-gradient(150deg, #338574 0%, #56bda8 100%)"
: "linear-gradient(150deg, #203631 0%, #2a6e60 100%)",
}} }}
> >
<IconButton <IconButton

View File

@ -5,7 +5,7 @@ import { ThemeProvider, createTheme } from "@mui/material/styles";
import { useLiveQuery } from "dexie-react-hooks"; import { useLiveQuery } from "dexie-react-hooks";
import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom"; import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
import { AllSubscriptions, SingleSubscription } from "./Notifications"; import { AllSubscriptions, SingleSubscription } from "./Notifications";
import themeOptions, { darkPalette, lightPalette } from "./theme"; import { darkTheme, lightTheme } from "./theme";
import Navigation from "./Navigation"; import Navigation from "./Navigation";
import ActionBar from "./ActionBar"; import ActionBar from "./ActionBar";
import notifier from "../app/Notifier"; import notifier from "../app/Notifier";
@ -46,13 +46,7 @@ const App = () => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
const themePreference = useLiveQuery(() => prefs.theme()); const themePreference = useLiveQuery(() => prefs.theme());
const theme = React.useMemo( const theme = React.useMemo(
() => () => createTheme(darkModeEnabled(prefersDarkMode, themePreference) ? darkTheme : lightTheme),
createTheme({
...themeOptions,
palette: {
...(darkModeEnabled(prefersDarkMode, themePreference) ? darkPalette : lightPalette),
},
}),
[prefersDarkMode, themePreference] [prefersDarkMode, themePreference]
); );

View File

@ -18,6 +18,7 @@ import {
Box, Box,
IconButton, IconButton,
Button, Button,
useTheme,
} from "@mui/material"; } from "@mui/material";
import * as React from "react"; import * as React from "react";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
@ -82,6 +83,7 @@ const Navigation = (props) => {
Navigation.width = navWidth; Navigation.width = navWidth;
const NavList = (props) => { const NavList = (props) => {
const theme = useTheme();
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
@ -190,7 +192,11 @@ const NavList = (props) => {
</ListItemIcon> </ListItemIcon>
<ListItemText primary={t("nav_button_subscribe")} /> <ListItemText primary={t("nav_button_subscribe")} />
</ListItemButton> </ListItemButton>
{showUpgradeBanner && <UpgradeBanner />} {showUpgradeBanner && (
// The text background gradient didn't seem to do well with switching between light/dark mode,
// So adding a `key` forces React to replace the entire component when the theme changes
<UpgradeBanner key={`upgrade-banner-${theme.palette.mode}`} mode={theme.palette.mode} />
)}
</List> </List>
<SubscribeDialog <SubscribeDialog
key={`subscribeDialog${subscribeDialogKey}`} // Resets dialog when canceled/closed key={`subscribeDialog${subscribeDialogKey}`} // Resets dialog when canceled/closed
@ -203,7 +209,7 @@ const NavList = (props) => {
); );
}; };
const UpgradeBanner = () => { const UpgradeBanner = ({ mode }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [dialogKey, setDialogKey] = useState(0); const [dialogKey, setDialogKey] = useState(0);
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
@ -220,13 +226,16 @@ const UpgradeBanner = () => {
width: `${Navigation.width - 1}px`, width: `${Navigation.width - 1}px`,
bottom: 0, bottom: 0,
mt: "auto", mt: "auto",
background: "linear-gradient(150deg, rgba(196, 228, 221, 0.46) 0%, rgb(255, 255, 255) 100%)", background:
mode === "light"
? "linear-gradient(150deg, rgba(196, 228, 221, 0.46) 0%, rgb(255, 255, 255) 100%)"
: "linear-gradient(150deg, #203631 0%, #2a6e60 100%)",
}} }}
> >
<Divider /> <Divider />
<ListItemButton onClick={handleClick} sx={{ pt: 2, pb: 2 }}> <ListItemButton onClick={handleClick} sx={{ pt: 2, pb: 2 }}>
<ListItemIcon> <ListItemIcon>
<CelebrationIcon sx={{ color: "#55b86e" }} fontSize="large" /> <CelebrationIcon sx={{ color: mode === "light" ? "#55b86e" : "#00ff95" }} fontSize="large" />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
sx={{ ml: 1 }} sx={{ ml: 1 }}
@ -236,7 +245,10 @@ const UpgradeBanner = () => {
style: { style: {
fontWeight: 500, fontWeight: 500,
fontSize: "1.1rem", fontSize: "1.1rem",
background: "-webkit-linear-gradient(45deg, #09009f, #00ff95 80%)", background:
mode === "light"
? "-webkit-linear-gradient(45deg, #09009f, #00ff95 80%)"
: "-webkit-linear-gradient(45deg,rgb(255, 255, 255), #00ff95 80%)",
WebkitBackgroundClip: "text", WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent", WebkitTextFillColor: "transparent",
}, },

View File

@ -1,5 +1,5 @@
/** @type {import("@mui/material").ThemeOptions} */ /** @type {import("@mui/material").ThemeOptions} */
const themeOptions = { const baseThemeOptions = {
components: { components: {
MuiListItemIcon: { MuiListItemIcon: {
styleOverrides: { styleOverrides: {
@ -22,37 +22,53 @@ const themeOptions = {
// https://github.com/binwiederhier/ntfy-android/blob/main/app/src/main/res/values/colors.xml // https://github.com/binwiederhier/ntfy-android/blob/main/app/src/main/res/values/colors.xml
/** @type {import("@mui/material").ThemeOptions['palette']} */ /** @type {import("@mui/material").ThemeOptions} */
export const lightPalette = { export const lightTheme = {
mode: "light", ...baseThemeOptions,
primary: { components: {
main: "#338574", ...baseThemeOptions.components,
}, },
secondary: { palette: {
main: "#6cead0", mode: "light",
primary: {
main: "#338574",
},
secondary: {
main: "#6cead0",
},
error: {
main: "#c30000",
},
}, },
error: {
main: "#c30000",
},
actionBarBackground: "linear-gradient(150deg, #338574 0%, #56bda8 100%)",
}; };
/** @type {import("@mui/material").ThemeOptions['palette']} */ /** @type {import("@mui/material").ThemeOptions} */
export const darkPalette = { export const darkTheme = {
mode: "dark", ...baseThemeOptions,
background: { components: {
paper: "#1b2124", ...baseThemeOptions.components,
MuiSnackbarContent: {
styleOverrides: {
root: {
color: "#000",
backgroundColor: "#aeaeae",
},
},
},
}, },
primary: { palette: {
main: "#65b5a3", mode: "dark",
background: {
paper: "#1b2124",
},
primary: {
main: "#65b5a3",
},
secondary: {
main: "#6cead0",
},
error: {
main: "#fe4d2e",
},
}, },
secondary: {
main: "#6cead0",
},
error: {
main: "#fe4d2e",
},
actionBarBackground: "linear-gradient(150deg, #203631 0%, #2a6e60 100%)",
}; };
export default themeOptions;