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

Update styling of "manga open source" button

Browse Source
This commit is contained in:
schroda
2025-02-08 16:16:32 +01:00
parent f633059083
commit 050094c991
4 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx
View File

@@ -10,25 +10,20 @@ import { ComponentProps } from 'react';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { CustomButton } from '@/modules/core/components/buttons/CustomButton.tsx';
import { CustomButtonIcon } from '@/modules/core/components/buttons/CustomButtonIcon.tsx';
export const ReaderNavBarDesktopNextPreviousButton = ({
title,
type,
disabled,
...customIconButtonProps
}: Omit<ComponentProps<typeof CustomButton>, 'children'> & {
}: Omit<ComponentProps<typeof CustomButtonIcon>, 'children'> & {
title: string;
type: 'previous' | 'next';
}) => (
<CustomTooltip title={title} disabled={disabled}>
<CustomButton
sx={{ minWidth: 0, px: 1, flexBasis: '15%' }}
variant="contained"
disabled={disabled}
{...customIconButtonProps}
>
<CustomButtonIcon sx={{ flexBasis: '15%' }} variant="contained" disabled={disabled} {...customIconButtonProps}>
{type === 'previous' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
</CustomButton>
</CustomButtonIcon>
</CustomTooltip>
);

8
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx
View File

@@ -10,7 +10,6 @@ import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import FitScreenIcon from '@mui/icons-material/FitScreen';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { CustomButton } from '@/modules/core/components/buttons/CustomButton.tsx';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
import {
IReaderSettings,
@@ -23,6 +22,7 @@ import {
READER_PAGE_SCALE_MODE_VALUES,
} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
import { CustomButtonIcon } from '@/modules/core/components/buttons/CustomButtonIcon.tsx';
export const ReaderNavBarDesktopPageScale = ({
pageScaleMode,
@@ -52,14 +52,14 @@ export const ReaderNavBarDesktopPageScale = ({
/>
{READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
<CustomTooltip title={t('reader.settings.page_scale.stretch')}>
<CustomButton
<CustomButtonIcon
onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)}
sx={{ minWidth: 0 }}
sx={{ px: undefined }}
variant="contained"
color={shouldStretchPage.value ? 'secondary' : 'primary'}
>
<FitScreenIcon />
</CustomButton>
</CustomButtonIcon>
</CustomTooltip>
)}
</Stack>