ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set appbar color on light theme

Browse Source
This commit is contained in:
schroda
2024-09-06 16:59:27 +02:00
parent 0a4124062b
commit 1423ca23be
16 changed files with 80 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/atoms/SearchTextField.tsx
View File

@@ -7,19 +7,26 @@
*/
import TextField, { TextFieldProps } from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import CancelIcon from '@mui/icons-material/Cancel';
export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps & { onCancel: () => void }) => (
export const SearchTextField = ({
onCancel,
cancelButtonProps,
...textFieldProps
}: TextFieldProps & { onCancel: () => void; cancelButtonProps?: IconButtonProps }) => (
<TextField
{...textFieldProps}
slotProps={{
input: {
...textFieldProps.InputProps,
sx: {
color: 'inherit',
},
endAdornment: textFieldProps.InputProps?.endAdornment ?? (
<InputAdornment position="end">
<IconButton onClick={() => onCancel()}>
<IconButton {...cancelButtonProps} onClick={() => onCancel()}>
<CancelIcon />
</IconButton>
</InputAdornment>

8
src/components/collection/SelectableCollectionSelectAll.tsx
View File

@@ -24,7 +24,13 @@ export const SelectableCollectionSelectAll = ({
return (
<Tooltip title={t(!areAllItemsSelected ? 'global.button.select_all' : 'global.button.clear')}>
<Checkbox
sx={{ padding: '8px' }}
sx={{
padding: '8px',
color: 'inherit',
'&.Mui-checked': {
color: 'inherit',
},
}}
checked={areAllItemsSelected}
indeterminate={!areNoItemsSelected && !areAllItemsSelected}
onChange={(_, checked) => onChange(checked)}

8
src/components/collection/SelectableCollectionSelectMode.tsx
View File

@@ -39,7 +39,13 @@ export const SelectableCollectionSelectMode = ({
<Tooltip title={t(!isActive ? 'global.button.select_all' : 'global.button.cancel')}>
<Checkbox
checkedIcon={<ClearIcon />}
sx={{ padding: '8px' }}
sx={{
padding: '8px',
color: 'inherit',
'&.Mui-checked': {
color: 'inherit',
},
}}
checked={isActive}
onChange={(_, checked) => onModeChange(checked)}
/>

2
src/components/library/LibraryToolbarMenu.tsx
View File

@@ -27,7 +27,7 @@ export const LibraryToolbarMenu: React.FC = () => {
return (
<>
<Tooltip title={t('settings.title')}>
<IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'default'}>
<IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'inherit'}>
<FilterList />
</IconButton>
</Tooltip>

7
src/components/library/UpdateChecker.tsx
View File

@@ -132,6 +132,7 @@ export function UpdateChecker({
: { onClick: () => onClick() })}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
color="inherit"
>
{!isRunning ? (
<RefreshIcon />
@@ -139,7 +140,11 @@ export function UpdateChecker({
<>
<ClearIcon sx={{ opacity: Number(isTouchDevice || isHovered) }} />
<Stack sx={{ position: 'absolute' }}>
<Progress progress={progress} showText={!isTouchDevice && !isHovered} />
<Progress
progress={progress}
showText={!isTouchDevice && !isHovered}
progressProps={{ color: 'inherit' }}
/>
</Stack>
</>
)}

5
src/components/manga/MangaToolbarMenu.tsx
View File

@@ -56,6 +56,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
onRefresh();
}}
disabled={refreshing}
color="inherit"
>
<Refresh />
</IconButton>
@@ -68,7 +69,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
state={{ mangaTitle: manga.title }}
style={{ textDecoration: 'none', color: 'inherit' }}
>
<IconButton>
<IconButton color="inherit">
<SyncAltIcon />
</IconButton>
</Link>
@@ -78,6 +79,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
onClick={() => {
openCategorySelect(true);
}}
color="inherit"
>
<Label />
</IconButton>
@@ -94,6 +96,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={(e) => setAnchorEl(e.currentTarget)}
color="inherit"
>
<MoreHoriz />
</IconButton>

8
src/components/navbar/DefaultNavBar.tsx
View File

@@ -25,6 +25,7 @@ import { useLocation } from 'react-router-dom';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import MenuIcon from '@mui/icons-material/Menu';
import Stack from '@mui/material/Stack';
import { useTheme } from '@mui/material/styles';
import { NavbarItem } from '@/typings';
import { NavBarContext } from '@/components/context/NavbarContext';
import { useBackButton } from '@/util/useBackButton.ts';
@@ -76,6 +77,7 @@ export function DefaultNavBar() {
const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth, setNavBarWidth } =
useContext(NavBarContext);
const theme = useTheme();
const { pathname } = useLocation();
const handleBack = useBackButton();
@@ -123,9 +125,8 @@ export function DefaultNavBar() {
position: 'fixed',
marginLeft: actualNavBarWidth,
width: `calc(100% - ${actualNavBarWidth}px)`,
zIndex: (theme) => theme.zIndex.drawer + 1,
zIndex: theme.zIndex.drawer + 1,
}}
color="default"
>
<Toolbar sx={{ position: 'relative' }}>
{!isMobileWidth && (
@@ -138,7 +139,7 @@ export function DefaultNavBar() {
alignItems: 'center',
}}
>
<IconButton aria-label="open drawer" onClick={() => setIsCollapsed(false)}>
<IconButton aria-label="open drawer" onClick={() => setIsCollapsed(false)} color="inherit">
<MenuIcon />
</IconButton>
</Stack>
@@ -159,6 +160,7 @@ export function DefaultNavBar() {
size="large"
aria-label="menu"
onClick={handleBack}
color="inherit"
>
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>

1
src/components/source/GridLayouts.tsx
View File

@@ -50,6 +50,7 @@ export function GridLayouts({
aria-controls={open ? 'account-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
color="inherit"
>
<ViewModuleIcon />
</IconButton>

2
src/components/tracker/TrackerSearch.tsx
View File

@@ -119,7 +119,7 @@ export const TrackerSearch = ({
<PopupState variant="popover" popupId="tracker-search-info">
{(popupState) => (
<>
<IconButton {...bindTrigger(popupState)}>
<IconButton {...bindTrigger(popupState)} color="inherit">
<InfoIcon />
</IconButton>
<Popover

18
src/components/util/AppbarSearch.tsx
View File

@@ -13,6 +13,7 @@ import Tooltip from '@mui/material/Tooltip';
import { useQueryParam, StringParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
import { SearchTextField } from '@/components/atoms/SearchTextField.tsx';
interface IProps {
@@ -22,6 +23,7 @@ interface IProps {
export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
const { isClosable = true } = props;
const theme = useTheme();
const { t } = useTranslation();
const [prevLocationKey, setPrevLocationKey] = useState<string>();
@@ -103,13 +105,27 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
}}
onBlur={handleBlur}
inputRef={inputRef}
sx={{
...theme.applyStyles('light', {
'& .MuiInput-underline:before': {
borderBottomColor: 'primary.contrastText', // Default color
},
'& .MuiInput-underline:hover:before': {
borderBottomColor: 'primary.contrastText', // Hover color
},
'& .MuiInput-underline:after': {
borderBottomColor: 'primary.dark', // Focused color
},
}),
}}
cancelButtonProps={{ sx: { ...theme.applyStyles('light', { color: 'primary.contrastText' }) } }}
/>
);
}
return (
<Tooltip title={t('search.title.search')}>
<IconButton onClick={() => updateSearchOpenState(true)}>
<IconButton onClick={() => updateSearchOpenState(true)} color="inherit">
<SearchIcon />
</IconButton>
</Tooltip>

14
src/components/util/Progress.tsx
View File

@@ -7,12 +7,20 @@
*/
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import CircularProgress, { CircularProgressProps } from '@mui/material/CircularProgress';
import Typography from '@mui/material/Typography';
export const Progress = ({ progress, showText = true }: { progress: number; showText?: boolean }) => (
export const Progress = ({
progress,
showText = true,
progressProps = {},
}: {
progress: number;
showText?: boolean;
progressProps?: CircularProgressProps;
}) => (
<Box sx={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
<CircularProgress variant="determinate" value={progress} />
<CircularProgress {...progressProps} variant="determinate" value={progress} />
{showText && (
<Box sx={{ position: 'absolute' }}>
<Typography

4
src/screens/DownloadQueue.tsx
View File

@@ -139,13 +139,13 @@ export const DownloadQueue: React.FC = () => {
setAction(
<>
<Tooltip title={t('download.queue.label.delete_all')}>
<IconButton onClick={clearQueue} size="large">
<IconButton onClick={clearQueue} size="large" color="inherit">
<DeleteSweepIcon />
</IconButton>
</Tooltip>
<Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}>
<IconButton onClick={toggleQueueStatus} size="large" disabled={isQueueEmpty}>
<IconButton onClick={toggleQueueStatus} size="large" disabled={isQueueEmpty} color="inherit">
{status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
</Tooltip>

2
src/screens/Extensions.tsx
View File

@@ -179,7 +179,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
<>
<AppbarSearch />
<Tooltip title={t('extension.action.label.install_external')}>
<IconButton onClick={() => inputRef.current?.click()} size="large">
<IconButton onClick={() => inputRef.current?.click()} size="large" color="inherit">
<AddIcon />
</IconButton>
</Tooltip>

10
src/screens/Library.tsx
View File

@@ -6,10 +6,10 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Chip from '@mui/material/Chip';
import Chip, { ChipProps } from '@mui/material/Chip';
import Tab from '@mui/material/Tab';
import { styled } from '@mui/material/styles';
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useQueryParam, NumberParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -45,8 +45,8 @@ const TitleWithSizeTag = styled('span')({
alignItems: 'center',
});
const TitleSizeTag = (props: React.ComponentProps<typeof Chip>) => (
<Chip {...props} size="small" sx={{ marginLeft: '5px' }} />
const TitleSizeTag = ({ sx, ...props }: ChipProps) => (
<Chip {...props} size="small" sx={{ ...sx, marginLeft: '5px' }} />
);
export function Library() {
@@ -152,7 +152,7 @@ export function Library() {
const navBarTitle = (
<TitleWithSizeTag>
{title}
{options.showTabSize && <TitleSizeTag label={librarySize} />}
{options.showTabSize && <TitleSizeTag sx={{ color: 'inherit' }} label={librarySize} />}
</TitleWithSizeTag>
);
setTitle(navBarTitle, title);

2
src/screens/Sources.tsx
View File

@@ -96,7 +96,7 @@ export function Sources() {
setAction(
<>
<Tooltip title={t('search.title.global_search')}>
<IconButton onClick={() => navigate('/sources/all/search/')} size="large">
<IconButton onClick={() => navigate('/sources/all/search/')} size="large" color="inherit">
<TravelExploreIcon />
</IconButton>
</Tooltip>

2
src/screens/settings/LibraryDuplicates.tsx
View File

@@ -126,7 +126,7 @@ export const LibraryDuplicates = () => {
<PopupState variant="popover" popupId="library-dupliactes-settings">
{(popupState) => (
<>
<IconButton {...bindTrigger(popupState)}>
<IconButton {...bindTrigger(popupState)} color="inherit">
<SettingsIcon />
</IconButton>
<Menu {...bindMenu(popupState)}>