Update reader open settings button styling

Use dark/white color and transparency to make the button not standout as much
This commit is contained in:
schroda
2024-09-04 22:39:19 +02:00
parent 2f715a1974
commit 378c97aa1b

View File

@@ -22,7 +22,7 @@ import Divider from '@mui/material/Divider';
import FormControl from '@mui/material/FormControl'; import FormControl from '@mui/material/FormControl';
import MenuItem from '@mui/material/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles'; import { styled, useTheme } from '@mui/material/styles';
import ListItem from '@mui/material/ListItem'; import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse'; import Collapse from '@mui/material/Collapse';
@@ -106,6 +106,7 @@ interface IProps {
export function ReaderNavBar(props: IProps) { export function ReaderNavBar(props: IProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const { setReaderNavBarWidth } = useNavBarContext(); const { setReaderNavBarWidth } = useNavBarContext();
const theme = useTheme();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation<{ const location = useLocation<{
@@ -373,6 +374,12 @@ export function ReaderNavBar(props: IProps) {
position: 'fixed', position: 'fixed',
top: 20, top: 20,
left: 20, left: 20,
backgroundColor: 'rgba(255, 255, 255, 0.75);',
color: 'black',
...theme.applyStyles('dark', {
backgroundColor: 'rgba(0, 0, 0, 0.75);',
color: 'white',
}),
}} }}
size="large" size="large"
variant="contained" variant="contained"