diff --git a/package.json b/package.json index 27654cef..b89ac90f 100644 --- a/package.json +++ b/package.json @@ -36,8 +36,8 @@ "@emotion/styled": "11.13.0", "@fontsource/roboto": "5.0.14", "@loadable/component": "5.16.4", - "@mui/icons-material": "5.16.6", - "@mui/material": "5.16.6", + "@mui/icons-material": "^6.0.2", + "@mui/material": "^6.0.2", "@mui/x-date-pickers": "7.15.0", "apollo-upload-client": "17.0.0", "dayjs": "1.11.13", diff --git a/src/components/ExtensionCard.tsx b/src/components/ExtensionCard.tsx index d38f9acf..be827b73 100644 --- a/src/components/ExtensionCard.tsx +++ b/src/components/ExtensionCard.tsx @@ -194,16 +194,32 @@ export function ExtensionCard(props: IProps) { {name} - + {langPress} {versionName} {isNsfw && ( - + {' 18+'} )} {showSourceRepo && ( - + {repo} )} diff --git a/src/components/MigrateDialog.tsx b/src/components/MigrateDialog.tsx index 2375552b..0c7f28fd 100644 --- a/src/components/MigrateDialog.tsx +++ b/src/components/MigrateDialog.tsx @@ -100,7 +100,13 @@ export const MigrateDialog = ({ mangaIdToMigrateTo, onClose }: { mangaIdToMigrat - + diff --git a/src/components/MigrationCard.tsx b/src/components/MigrationCard.tsx index 8afea981..8400f76e 100644 --- a/src/components/MigrationCard.tsx +++ b/src/components/MigrationCard.tsx @@ -57,7 +57,12 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab {name} - + {translateExtensionLanguage(lang)} diff --git a/src/components/SourceCard.tsx b/src/components/SourceCard.tsx index 9f1131e6..75939ff3 100644 --- a/src/components/SourceCard.tsx +++ b/src/components/SourceCard.tsx @@ -97,15 +97,31 @@ export const SourceCard: React.FC = (props: IProps) => { {name} {id !== '0' && ( - + {translateExtensionLanguage(lang)} {isNsfw && ( - + {' 18+'} )} {showSourceRepo && ( - + {repo} )} diff --git a/src/components/atoms/CustomIconButton.tsx b/src/components/atoms/CustomIconButton.tsx index 89cf83ac..054fd6a6 100644 --- a/src/components/atoms/CustomIconButton.tsx +++ b/src/components/atoms/CustomIconButton.tsx @@ -16,7 +16,15 @@ export const CustomIconButton = forwardRef( ref: ForwardedRef, ) => ( diff --git a/src/components/atoms/Metadata.tsx b/src/components/atoms/Metadata.tsx index 7e0eeb2e..c02456ac 100644 --- a/src/components/atoms/Metadata.tsx +++ b/src/components/atoms/Metadata.tsx @@ -26,7 +26,13 @@ export const Metadata = ({ {...stackProps} sx={{ flexDirection: 'row', columnGap: 1, flexWrap: 'wrap', alignItems: 'baseline', ...stackProps?.sx }} > - + {title} {value} diff --git a/src/components/atoms/PasswordTextField.tsx b/src/components/atoms/PasswordTextField.tsx index 9947034f..129f4441 100644 --- a/src/components/atoms/PasswordTextField.tsx +++ b/src/components/atoms/PasswordTextField.tsx @@ -26,18 +26,20 @@ export const PasswordTextField = (props: TextFieldProps) => { name="password" label={t('global.label.password')} type={showPassword ? 'text' : 'password'} - InputProps={{ - endAdornment: ( - - - {showPassword ? : } - - - ), + slotProps={{ + input: { + endAdornment: ( + + + {showPassword ? : } + + + ), + }, }} {...props} /> diff --git a/src/components/atoms/SearchTextField.tsx b/src/components/atoms/SearchTextField.tsx index 37310b48..4f034976 100644 --- a/src/components/atoms/SearchTextField.tsx +++ b/src/components/atoms/SearchTextField.tsx @@ -14,15 +14,17 @@ import CancelIcon from '@mui/icons-material/Cancel'; export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps & { onCancel: () => void }) => ( - onCancel()}> - - - - ), + slotProps={{ + input: { + ...textFieldProps.InputProps, + endAdornment: textFieldProps.InputProps?.endAdornment ?? ( + + onCancel()}> + + + + ), + }, }} /> ); diff --git a/src/components/chapter/ChapterCard.tsx b/src/components/chapter/ChapterCard.tsx index 1755fd32..b5eda427 100644 --- a/src/components/chapter/ChapterCard.tsx +++ b/src/components/chapter/ChapterCard.tsx @@ -120,7 +120,12 @@ export const ChapterCard: React.FC = (props: IProps) => { '&:last-child': { pb: 1.5 }, }} > - + theme.spacing(1), left: (theme) => theme.spacing(1), @@ -153,9 +153,9 @@ export const MangaGridCard = ({ )} - + {mangaBadges} {continueReadingButton} {actions.extra.show && ( diff --git a/src/components/settings/DateSetting.tsx b/src/components/settings/DateSetting.tsx index c254a6e8..6fa80538 100644 --- a/src/components/settings/DateSetting.tsx +++ b/src/components/settings/DateSetting.tsx @@ -100,7 +100,14 @@ export const DateSetting = ({ - + {defaultValue !== undefined && ( diff --git a/src/components/settings/NumberSetting.tsx b/src/components/settings/NumberSetting.tsx index 3daddc4e..65e1b17c 100644 --- a/src/components/settings/NumberSetting.tsx +++ b/src/components/settings/NumberSetting.tsx @@ -139,7 +139,12 @@ export const NumberSetting = ({ )} {dialogDisclaimer && ( - + {valueUnit}, - }} autoFocus value={dialogValue} type="number" @@ -171,6 +172,12 @@ export const NumberSetting = ({ const newValue = Number(e.target.value); updateValue(newValue, false); }} + slotProps={{ + input: { + inputProps: { min: minValue, max: maxValue, step: stepSize }, + endAdornment: {valueUnit}, + }, + }} /> {showSlider ? ( ({ )} {dialogValueDisplayInfo.disclaimer && ( - + - + setNewSavedSearch(e.target.value as string)} + slotProps={{ + htmlInput: { maxLength: 50 }, + }} /> diff --git a/src/components/tracker/TrackerActiveCard.tsx b/src/components/tracker/TrackerActiveCard.tsx index 82b302f5..6b4f53ca 100644 --- a/src/components/tracker/TrackerActiveCard.tsx +++ b/src/components/tracker/TrackerActiveCard.tsx @@ -153,7 +153,13 @@ const TrackerActiveHeader = ({ const { t } = useTranslation(); return ( - + - + {(popupState) => ( <> diff --git a/src/components/tracker/TrackerMangaCard.tsx b/src/components/tracker/TrackerMangaCard.tsx index 2914a8e6..58adc676 100644 --- a/src/components/tracker/TrackerMangaCard.tsx +++ b/src/components/tracker/TrackerMangaCard.tsx @@ -29,7 +29,13 @@ import { MediaQuery } from '@/lib/ui/MediaQuery.tsx'; import { TTrackerManga } from '@/lib/data/Trackers.ts'; const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => ( - + {title} @@ -125,7 +131,13 @@ export const TrackerMangaCard = ({ borderColor: selected ? 'primary.main' : 'transparent', }} > - + - + {getOptionForDirection(, )} @@ -164,8 +170,8 @@ export const TrackerSearch = ({ {showTrackButton && ( - + {showText && ( - {`${Math.round(progress)}%`} + {`${Math.round(progress)}%`} )} diff --git a/src/components/util/SpinnerImage.tsx b/src/components/util/SpinnerImage.tsx index 1fa66fb2..90eec73b 100644 --- a/src/components/util/SpinnerImage.tsx +++ b/src/components/util/SpinnerImage.tsx @@ -104,7 +104,13 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef {(isLoading || hasError) && ( - + {isLoading && } {hasError && isLoading === false && ( <> @@ -128,10 +134,13 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef theme.palette.background.default, ...spinnerStyle }} + sx={{ + height: '100%', + alignItems: 'center', + justifyContent: 'center', + background: (theme) => theme.palette.background.default, + ...spinnerStyle, + }} > diff --git a/src/components/util/VersionUpdateInfoDialog.tsx b/src/components/util/VersionUpdateInfoDialog.tsx index 1afc3a3a..37bec751 100644 --- a/src/components/util/VersionUpdateInfoDialog.tsx +++ b/src/components/util/VersionUpdateInfoDialog.tsx @@ -63,7 +63,13 @@ export const VersionUpdateInfoDialog = ({ {info} - + {changelogUrl && (