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

Prevent tooltip on disabled button warning

Browse Source
This commit is contained in:
schroda
2025-02-01 14:24:38 +01:00
parent dc9f6fc863
commit 8ddb259c82
46 changed files with 229 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/modules/category/components/CategorySettingsCard.tsx
View File

@@ -7,7 +7,6 @@
*/
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import { DraggableProvided } from 'react-beautiful-dnd';
import DragHandleIcon from '@mui/icons-material/DragHandle';
import EditIcon from '@mui/icons-material/Edit';
@@ -18,6 +17,7 @@ import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { CategoryType } from '@/lib/graphql/generated/graphql.ts';
@@ -56,16 +56,16 @@ export const CategorySettingsCard = ({
{category.name}
</Typography>
<Stack sx={{ flexDirection: 'row' }}>
<Tooltip title={t('global.button.edit')}>
<CustomTooltip title={t('global.button.edit')}>
<IconButton component={Box} onClick={onEdit} size="large">
<EditIcon />
</IconButton>
</Tooltip>
<Tooltip title={t('chapter.action.download.delete.label.action')}>
</CustomTooltip>
<CustomTooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton component={Box} onClick={deleteCategory} size="large">
<DeleteIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
</CardContent>
</Card>

16
src/modules/chapter/components/ChapterList.tsx
View File

@@ -8,7 +8,6 @@
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import { ComponentProps, useCallback, useMemo, useState } from 'react';
@@ -19,6 +18,7 @@ import DownloadIcon from '@mui/icons-material/Download';
import DoneAllIcon from '@mui/icons-material/DoneAll';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import Menu from '@mui/material/Menu';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx';
import { ResumeFab } from '@/modules/manga/components/ResumeFAB.tsx';
@@ -186,7 +186,10 @@ export const ChapterList = ({
</Typography>
<Stack direction="row">
<Tooltip title={t('chapter.action.mark_as_read.add.label.action.current')}>
<CustomTooltip
title={t('chapter.action.mark_as_read.add.label.action.current')}
disabled={areAllChaptersRead}
>
<IconButton
disabled={areAllChaptersRead}
onClick={() => Chapters.markAsRead(Chapters.getNonRead(chapters), true, manga.id)}
@@ -194,11 +197,14 @@ export const ChapterList = ({
>
<DoneAllIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<PopupState variant="popover" popupId="chapterlist-download-button">
{(popupState) => (
<>
<Tooltip title={t('chapter.action.download.add.label.action')}>
<CustomTooltip
title={t('chapter.action.download.add.label.action')}
disabled={areAllChaptersRead}
>
<IconButton
disabled={areAllChaptersDownloaded}
{...bindTrigger(popupState)}
@@ -206,7 +212,7 @@ export const ChapterList = ({
>
<DownloadIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
{popupState.isOpen && (
<Menu {...bindMenu(popupState)}>
<ChaptersDownloadActionMenuItems

6
src/modules/chapter/components/ChaptersToolbarMenu.tsx
View File

@@ -8,9 +8,9 @@
import FilterList from '@mui/icons-material/FilterList';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ChapterOptions } from '@/modules/chapter/components/ChapterOptions.tsx';
import { isFilterActive } from '@/modules/chapter/utils/ChapterList.util.tsx';
import { ChapterListOptions, ChapterOptionsReducerAction } from '@/modules/chapter/Chapter.types.ts';
@@ -28,11 +28,11 @@ export const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
return (
<>
<Tooltip title={t('settings.title')}>
<CustomTooltip title={t('settings.title')}>
<IconButton onClick={() => setOpen(true)} color="inherit">
<FilterList color={isFiltered ? 'warning' : undefined} />
</IconButton>
</Tooltip>
</CustomTooltip>
<ChapterOptions
open={open}
onClose={() => setOpen(false)}

10
src/modules/chapter/components/cards/ChapterCard.tsx
View File

@@ -11,7 +11,6 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
import CardActionArea from '@mui/material/CardActionArea';
import Checkbox from '@mui/material/Checkbox';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton';
@@ -22,6 +21,7 @@ import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import { useLongPress } from 'use-long-press';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { getDateString } from '@/util/DateHelper.ts';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
@@ -204,7 +204,7 @@ export const ChapterCard = memo((props: IProps) => {
<Stack sx={{ minHeight: '48px' }}>
{selected === null ? (
<Tooltip title={t('global.button.options')}>
<CustomTooltip title={t('global.button.options')}>
<IconButton
ref={menuButtonRef}
{...bindTrigger(popupState)}
@@ -220,13 +220,13 @@ export const ChapterCard = memo((props: IProps) => {
>
<MoreVertIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
) : (
<Tooltip
<CustomTooltip
title={t(selected ? 'global.button.deselect' : 'global.button.select')}
>
<Checkbox checked={selected} />
</Tooltip>
</CustomTooltip>
)}
</Stack>
</CardContent>

6
src/modules/collection/components/SelectableCollectionSelectAll.tsx
View File

@@ -6,9 +6,9 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Tooltip from '@mui/material/Tooltip';
import Checkbox from '@mui/material/Checkbox';
import { useTranslation } from 'react-i18next';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
export const SelectableCollectionSelectAll = ({
areAllItemsSelected,
@@ -22,7 +22,7 @@ export const SelectableCollectionSelectAll = ({
const { t } = useTranslation();
return (
<Tooltip title={t(!areAllItemsSelected ? 'global.button.select_all' : 'global.button.clear')}>
<CustomTooltip title={t(!areAllItemsSelected ? 'global.button.select_all' : 'global.button.clear')}>
<Checkbox
sx={{
padding: '8px',
@@ -35,6 +35,6 @@ export const SelectableCollectionSelectAll = ({
indeterminate={!areNoItemsSelected && !areAllItemsSelected}
onChange={(_, checked) => onChange(checked)}
/>
</Tooltip>
</CustomTooltip>
);
};

6
src/modules/collection/components/SelectableCollectionSelectMode.tsx
View File

@@ -6,10 +6,10 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Tooltip from '@mui/material/Tooltip';
import Checkbox from '@mui/material/Checkbox';
import { useTranslation } from 'react-i18next';
import ClearIcon from '@mui/icons-material/Clear';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SelectableCollectionSelectAll } from '@/modules/collection/components/SelectableCollectionSelectAll.tsx';
export const SelectableCollectionSelectMode = ({
@@ -36,7 +36,7 @@ export const SelectableCollectionSelectMode = ({
onChange={onSelectAll}
/>
)}
<Tooltip title={t(!isActive ? 'global.button.select_all' : 'global.button.cancel')}>
<CustomTooltip title={t(!isActive ? 'global.button.select_all' : 'global.button.cancel')}>
<Checkbox
checkedIcon={<ClearIcon />}
sx={{
@@ -49,7 +49,7 @@ export const SelectableCollectionSelectMode = ({
checked={isActive}
onChange={(_, checked) => onModeChange(checked)}
/>
</Tooltip>
</CustomTooltip>
</>
);
};

6
src/modules/core/components/AppbarSearch.tsx
View File

@@ -9,11 +9,11 @@
import React, { useState, useEffect } from 'react';
import SearchIcon from '@mui/icons-material/Search';
import IconButton from '@mui/material/IconButton';
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 { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SearchTextField } from '@/modules/core/components/inputs/SearchTextField.tsx';
interface IProps {
@@ -124,10 +124,10 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
}
return (
<Tooltip title={t('search.title.search')}>
<CustomTooltip title={t('search.title.search')}>
<IconButton onClick={() => updateSearchOpenState(true)} color="inherit">
<SearchIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
);
};

20
src/modules/core/components/CustomTooltip.tsx Normal file
View File

@@ -0,0 +1,20 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
export const CustomTooltip = ({
children,
disabled = false,
title,
...props
}: TooltipProps & { disabled?: boolean }) => (
<Tooltip {...props} title={disabled ? '' : title}>
{children}
</Tooltip>
);

6
src/modules/core/components/GridLayouts.tsx
View File

@@ -11,10 +11,10 @@ import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import Tooltip from '@mui/material/Tooltip';
import React from 'react';
import ViewModuleIcon from '@mui/icons-material/ViewModule';
import { useTranslation } from 'react-i18next';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { GridLayout } from '@/modules/core/Core.types.ts';
@@ -43,7 +43,7 @@ export function GridLayouts({
return (
<>
<Tooltip title={t('global.label.display')}>
<CustomTooltip title={t('global.label.display')}>
<IconButton
onClick={handleClick}
size="small"
@@ -55,7 +55,7 @@ export function GridLayouts({
>
<ViewModuleIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<Menu
id="basic-menu"
anchorEl={anchorEl}

6
src/modules/core/components/UpdateChecker.tsx
View File

@@ -10,12 +10,12 @@ import { useEffect, useMemo, useState } from 'react';
import IconButton from '@mui/material/IconButton';
import RefreshIcon from '@mui/icons-material/Refresh';
import { useTranslation } from 'react-i18next';
import Tooltip from '@mui/material/Tooltip';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ClearIcon from '@mui/icons-material/Clear';
import Stack from '@mui/material/Stack';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';
@@ -118,7 +118,7 @@ export function UpdateChecker({
<PopupState variant="popover" popupId="library-update-checker-menu">
{(popupState) => (
<>
<Tooltip
<CustomTooltip
title={
isRunning
? t('library.action.label.stop_update')
@@ -151,7 +151,7 @@ export function UpdateChecker({
</>
)}
</IconButton>
</Tooltip>
</CustomTooltip>
<Menu {...bindMenu(popupState)}>
<MenuItem
onClick={() => {

6
src/modules/core/components/buttons/ButtonSelect.tsx
View File

@@ -9,7 +9,7 @@
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
import { Superscript } from '@/modules/core/components/Superscript.tsx';
@@ -39,7 +39,7 @@ export const ButtonSelect = <Value extends string | number>({
: t(valueToDisplayData[displayValue].title);
return (
<Tooltip key={displayValue} title={isDefault ? t('reader.settings.active_setting') : ''}>
<CustomTooltip key={displayValue} title={isDefault ? t('reader.settings.active_setting') : ''}>
<Button
onClick={() => setValue(displayValue)}
variant={displayValue === value ? 'contained' : 'outlined'}
@@ -47,7 +47,7 @@ export const ButtonSelect = <Value extends string | number>({
>
{isDefault ? <Superscript i18nKey="global.label.footnote" value={text} /> : text}
</Button>
</Tooltip>
</CustomTooltip>
);
})}
</Stack>

6
src/modules/core/components/buttons/ResetButton.tsx
View File

@@ -9,8 +9,8 @@
import Button, { ButtonProps } from '@mui/material/Button';
import { useTranslation } from 'react-i18next';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import Tooltip from '@mui/material/Tooltip';
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
type PropsIconButton = { asIconButton: true } & IconButtonProps;
type PropsButton = { asIconButton?: false } & ButtonProps;
@@ -21,11 +21,11 @@ export const ResetButton = ({ asIconButton, ...props }: Props) => {
if (asIconButton) {
return (
<Tooltip title={t('global.button.reset')}>
<CustomTooltip title={t('global.button.reset')}>
<IconButton color="inherit" {...props}>
<RestartAltIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
);
}

6
src/modules/core/components/buttons/ValueRotationButton.tsx
View File

@@ -9,7 +9,7 @@
import { useTranslation } from 'react-i18next';
import { ReactNode, useMemo } from 'react';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
import { getNextRotationValue } from '@/modules/core/utils/ValueRotationButton.utils.ts';
import { Superscript } from '@/modules/core/components/Superscript.tsx';
@@ -37,7 +37,7 @@ export const ValueRotationButton = <Value extends string | number>({
}, [value, values]);
return (
<Tooltip title={tooltip}>
<CustomTooltip title={tooltip}>
{isDefault ? (
<Button
onClick={() => setValue(values[0])}
@@ -81,6 +81,6 @@ export const ValueRotationButton = <Value extends string | number>({
: t(valueToDisplayData[value].title)}
</Button>
)}
</Tooltip>
</CustomTooltip>
);
};

6
src/modules/core/components/inputs/LangSelect.tsx
View File

@@ -17,9 +17,9 @@ import IconButton from '@mui/material/IconButton';
import FilterListIcon from '@mui/icons-material/FilterList';
import List from '@mui/material/List';
import ListItemText from '@mui/material/ListItemText';
import Tooltip from '@mui/material/Tooltip';
import ListItem from '@mui/material/ListItem';
import { useTranslation } from 'react-i18next';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { cloneObject } from '@/util/cloneObject.tsx';
import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
@@ -72,7 +72,7 @@ export function LangSelect(props: IProps) {
return (
<>
<Tooltip title={t('settings.title')}>
<CustomTooltip title={t('settings.title')}>
<IconButton
onClick={() => setOpen(true)}
aria-label="display more actions"
@@ -82,7 +82,7 @@ export function LangSelect(props: IProps) {
>
<FilterListIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<Dialog
sx={{
'.MuiDialog-paper': {

6
src/modules/core/components/settings/MutableListSetting.tsx
View File

@@ -13,7 +13,6 @@ import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import { useEffect, useState } from 'react';
import DialogContent from '@mui/material/DialogContent';
@@ -24,6 +23,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import DialogContentText from '@mui/material/DialogContentText';
import InfoIcon from '@mui/icons-material/Info';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { TextSetting, TextSettingProps } from '@/modules/core/components/settings/text/TextSetting.tsx';
import { TextSettingDialog } from '@/modules/core/components/settings/text/TextSettingDialog.tsx';
import { makeToast } from '@/modules/core/utils/Toast.ts';
@@ -49,11 +49,11 @@ const MutableListItem = ({
<ListItemText secondary={textSettingProps.value} />
</ListItem>
)}
<Tooltip title={t('chapter.action.download.delete.label.action')}>
<CustomTooltip title={t('chapter.action.download.delete.label.action')} disabled={!deletable}>
<IconButton disabled={!deletable} size="large" onClick={handleDelete}>
<DeleteIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
);
};

21
src/modules/downloads/screens/DownloadQueue.tsx
View File

@@ -14,7 +14,6 @@ import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import Stack from '@mui/material/Stack';
import Box, { BoxProps } from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import React, { memo, useCallback, useEffect, useLayoutEffect } from 'react';
import { DragDropContext, Draggable, DraggableProvided, DropResult } from 'react-beautiful-dnd';
@@ -25,6 +24,7 @@ import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
import { Virtuoso } from 'react-virtuoso';
import CardContent from '@mui/material/CardContent';
import Refresh from '@mui/icons-material/Refresh';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { StrictModeDroppable } from '@/modules/core/components/StrictModeDroppable.tsx';
import { makeToast } from '@/modules/core/utils/Toast.ts';
@@ -93,7 +93,7 @@ const DownloadChapterItem = memo(
</Stack>
<DownloadStateIndicator chapterId={item.chapter.id} />
{item.state === DownloadState.Error && (
<Tooltip title={t('global.button.retry')}>
<CustomTooltip title={t('global.button.retry')}>
<IconButton
onClick={(e) => {
e.preventDefault();
@@ -104,9 +104,9 @@ const DownloadChapterItem = memo(
>
<Refresh />
</IconButton>
</Tooltip>
</CustomTooltip>
)}
<Tooltip title={t('chapter.action.download.delete.label.action')}>
<CustomTooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton
onClick={(e) => {
e.preventDefault();
@@ -117,7 +117,7 @@ const DownloadChapterItem = memo(
>
<DeleteIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
</CardContent>
</CardActionArea>
</Card>
@@ -165,17 +165,20 @@ export const DownloadQueue: React.FC = () => {
setTitle(t('download.queue.title'));
setAction(
<>
<Tooltip title={t('download.queue.label.delete_all')}>
<CustomTooltip title={t('download.queue.label.delete_all')}>
<IconButton onClick={clearQueue} size="large" color="inherit">
<DeleteSweepIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<Tooltip title={t(status === DownloaderState.Started ? 'global.button.start' : 'global.button.stop')}>
<CustomTooltip
title={t(status === DownloaderState.Started ? 'global.button.start' : 'global.button.stop')}
disabled={isQueueEmpty}
>
<IconButton onClick={toggleQueueStatus} size="large" disabled={isQueueEmpty} color="inherit">
{status === DownloaderState.Stopped ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
</Tooltip>
</CustomTooltip>
</>,
);

6
src/modules/extension/screens/Extensions.tsx
View File

@@ -13,10 +13,10 @@ import AddIcon from '@mui/icons-material/Add';
import { StringParam, useQueryParam } from 'use-query-params';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { extensionDefaultLangs } from '@/modules/core/utils/Languages.ts';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
@@ -134,11 +134,11 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
setAction(
<>
<AppbarSearch />
<Tooltip title={t('extension.action.label.install_external')}>
<CustomTooltip title={t('extension.action.label.install_external')}>
<IconButton onClick={() => inputRef.current?.click()} size="large" color="inherit">
<AddIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={allLangs} />
</>,

6
src/modules/library/components/LibraryToolbarMenu.tsx
View File

@@ -8,9 +8,9 @@
import FilterList from '@mui/icons-material/FilterList';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import { ComponentProps, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { LibraryOptionsPanel } from '@/modules/library/components/LibraryOptionsPanel.tsx';
import { useLibraryOptionsContext } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
@@ -34,11 +34,11 @@ export const LibraryToolbarMenu = ({
return (
<>
<Tooltip title={t('settings.title')}>
<CustomTooltip title={t('settings.title')}>
<IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'inherit'}>
<FilterList />
</IconButton>
</Tooltip>
</CustomTooltip>
<LibraryOptionsPanel category={category} open={open} onClose={() => setOpen(false)} />
</>
);

6
src/modules/manga/components/ContinueReadingButton.tsx
View File

@@ -8,9 +8,9 @@
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import { Link } from 'react-router-dom';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ChapterReadInfo, Chapters, ChapterSourceOrderInfo } from '@/modules/chapter/services/Chapters.ts';
export const ContinueReadingButton = ({
@@ -32,7 +32,7 @@ export const ContinueReadingButton = ({
const isFirstChapter = sourceOrder === 1;
return (
<Tooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
<CustomTooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
<Button
variant="contained"
size="small"
@@ -45,6 +45,6 @@ export const ContinueReadingButton = ({
>
<PlayArrowIcon />
</Button>
</Tooltip>
</CustomTooltip>
);
};

10
src/modules/manga/components/MangaDetails.tsx
View File

@@ -15,7 +15,6 @@ import { t as translate } from 'i18next';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Tooltip from '@mui/material/Tooltip';
import LaunchIcon from '@mui/icons-material/Launch';
import Collapse from '@mui/material/Collapse';
import Stack from '@mui/material/Stack';
@@ -28,6 +27,7 @@ import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { Vibrant } from 'node-vibrant/browser';
import { FastAverageColor } from 'fast-average-color';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
@@ -129,7 +129,7 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
const { t } = useTranslation();
return (
<Tooltip title={t('global.button.open_site')}>
<CustomTooltip title={t('global.button.open_site')} disabled={!url}>
<CustomIconButton
size="medium"
disabled={!url}
@@ -141,7 +141,7 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
>
<LaunchIcon />
</CustomIconButton>
</Tooltip>
</CustomTooltip>
);
};
@@ -391,11 +391,11 @@ export const MangaDetails = ({
<Typography variant="h5" component="h2" sx={{ wordBreak: 'break-word' }}>
{manga.title}
</Typography>
<Tooltip title={t('global.button.copy')}>
<CustomTooltip title={t('global.button.copy')}>
<IconButton onClick={copyTitle} color="inherit">
<ContentCopyIcon fontSize="small" />
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
<Metadata title={t('manga.label.author')} value={getValueOrUnknown(manga.author)} />
<Metadata title={t('manga.label.artist')} value={getValueOrUnknown(manga.artist)} />

14
src/modules/manga/components/MangaOptionButton.tsx
View File

@@ -9,12 +9,12 @@
import { useTranslation } from 'react-i18next';
import { BaseSyntheticEvent, MouseEvent, TouchEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { PopupState } from 'material-ui-popup-state/hooks';
import { bindTrigger } from 'material-ui-popup-state';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SelectableCollectionReturnType } from '@/modules/collection/hooks/useSelectableCollection.ts';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
@@ -71,15 +71,15 @@ export const MangaOptionButton = forwardRef(
}
return (
<Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
<CustomTooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
<Checkbox checked={selected} onMouseDown={preventDefaultAction} onChange={handleSelectionChange} />
</Tooltip>
</CustomTooltip>
);
}
if (asCheckbox) {
return (
<Tooltip title={t('global.button.options')}>
<CustomTooltip title={t('global.button.options')}>
<IconButton
ref={ref}
{...bindTriggerProps}
@@ -90,12 +90,12 @@ export const MangaOptionButton = forwardRef(
>
<MoreVertIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
);
}
return (
<Tooltip title={t('global.button.options')}>
<CustomTooltip title={t('global.button.options')}>
<Button
ref={ref}
{...bindTriggerProps}
@@ -118,7 +118,7 @@ export const MangaOptionButton = forwardRef(
>
<MoreVertIcon />
</Button>
</Tooltip>
</CustomTooltip>
);
},
);

14
src/modules/manga/components/MangaToolbarMenu.tsx
View File

@@ -14,13 +14,13 @@ import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Tooltip from '@mui/material/Tooltip';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import SyncAltIcon from '@mui/icons-material/SyncAlt';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { useCategorySelect } from '@/modules/category/hooks/useCategorySelect.tsx';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
@@ -51,7 +51,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
<>
{isLargeScreen && (
<>
<Tooltip title={t('manga.label.reload_from_source')}>
<CustomTooltip title={t('manga.label.reload_from_source')} disabled={refreshing}>
<IconButton
onClick={() => {
onRefresh();
@@ -61,10 +61,10 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
>
<Refresh />
</IconButton>
</Tooltip>
</CustomTooltip>
{manga.inLibrary && (
<>
<Tooltip title={t('global.button.migrate')}>
<CustomTooltip title={t('global.button.migrate')}>
<Link
to={`${AppRoutes.migrate.childRoutes.search.path(manga.sourceId, manga.id)}?query=${manga.title}`}
state={{ mangaTitle: manga.title }}
@@ -74,8 +74,8 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
<SyncAltIcon />
</IconButton>
</Link>
</Tooltip>
<Tooltip title={t('manga.label.edit_categories')}>
</CustomTooltip>
<CustomTooltip title={t('manga.label.edit_categories')}>
<IconButton
onClick={() => {
openCategorySelect(true);
@@ -84,7 +84,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
>
<Label />
</IconButton>
</Tooltip>
</CustomTooltip>
</>
)}
</>

10
src/modules/manga/components/cards/MangaGridCard.tsx
View File

@@ -12,9 +12,9 @@ import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import { memo, useRef } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { MangaOptionButton } from '@/modules/manga/components/MangaOptionButton.tsx';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
@@ -166,7 +166,7 @@ export const MangaGridCard = memo(
}}
>
{gridLayout !== GridLayout.Comfortable && (
<Tooltip title={title} placement="top">
<CustomTooltip title={title} placement="top">
<TypographyMaxLines
component="h3"
sx={{
@@ -176,7 +176,7 @@ export const MangaGridCard = memo(
>
{title}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
)}
{continueReadingButton}
</Stack>
@@ -185,7 +185,7 @@ export const MangaGridCard = memo(
</Card>
{gridLayout === GridLayout.Comfortable && (
<Stack sx={{ pb: 1 }}>
<Tooltip title={title} placement="top">
<CustomTooltip title={title} placement="top">
<TypographyMaxLines
component="h3"
sx={{
@@ -197,7 +197,7 @@ export const MangaGridCard = memo(
>
{title}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
</Stack>
)}
</Box>

6
src/modules/manga/components/cards/MangaListCard.tsx
View File

@@ -12,9 +12,9 @@ import CardActionArea from '@mui/material/CardActionArea';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { Link as RouterLink } from 'react-router-dom';
import { memo, useRef } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { SpecificMangaCardProps } from '@/modules/manga/Manga.types.ts';
@@ -103,11 +103,11 @@ export const MangaListCard = memo(
width: 'min-content',
}}
>
<Tooltip title={title} placement="top">
<CustomTooltip title={title} placement="top">
<TypographyMaxLines variant="h6" component="h3">
{title}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
</Box>
<Stack
direction="row"

6
src/modules/manga/screens/Manga.tsx
View File

@@ -10,12 +10,12 @@ import Warning from '@mui/icons-material/Warning';
import CircularProgress from '@mui/material/CircularProgress';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Box from '@mui/material/Box';
import React, { useEffect, useLayoutEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
import { isNetworkRequestInFlight } from '@apollo/client/core/networkStatus';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { ChapterList } from '@/modules/chapter/components/ChapterList.tsx';
import { useRefreshManga } from '@/modules/manga/hooks/useRefreshManga.ts';
@@ -78,7 +78,7 @@ export const Manga: React.FC = () => {
}}
>
{error && !isValidating && !refreshing && (
<Tooltip
<CustomTooltip
title={
<>
{t('manga.error.label.request_failure')}
@@ -90,7 +90,7 @@ export const Manga: React.FC = () => {
<IconButton onClick={() => refetch()}>
<Warning color="error" />
</IconButton>
</Tooltip>
</CustomTooltip>
)}
{manga && (refreshing || isValidating) && (
<IconButton disabled>

10
src/modules/migration/screens/Migration.tsx
View File

@@ -15,7 +15,7 @@ import SortByAlphaIcon from '@mui/icons-material/SortByAlpha';
import TagIcon from '@mui/icons-material/Tag';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import Tooltip from '@mui/material/Tooltip';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
@@ -123,7 +123,7 @@ export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => {
zIndex: 1,
}}
>
<Tooltip title={t(sortByToTranslationKey[sortBy])}>
<CustomTooltip title={t(sortByToTranslationKey[sortBy])}>
<IconButton
size="large"
color="inherit"
@@ -133,8 +133,8 @@ export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => {
>
{sortBy ? <TagIcon /> : <SortByAlphaIcon />}
</IconButton>
</Tooltip>
<Tooltip title={t(sortOrderToTranslationKey[sortOrder])}>
</CustomTooltip>
<CustomTooltip title={t(sortOrderToTranslationKey[sortOrder])}>
<IconButton
size="large"
color="inherit"
@@ -147,7 +147,7 @@ export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => {
>
{sortOrder ? <ArrowDownwardIcon /> : <ArrowUpwardIcon />}
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
<List sx={{ p: 0 }}>
{migratableSources.map((migratableSource) => (

6
src/modules/navigation-bar/components/DesktopSideBar.tsx
View File

@@ -20,7 +20,7 @@ import { styled, useTheme } from '@mui/material/styles';
import { useCallback, useMemo, useRef } from 'react';
import Box from '@mui/material/Box';
import ListItem from '@mui/material/ListItem';
import Tooltip from '@mui/material/Tooltip';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
@@ -55,7 +55,7 @@ const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }
return (
<ListItemLink selected={!isCollapsed && isActive} sx={{ p: 0, m: 0 }} to={path}>
<Tooltip title={t(title)} placement="right">
<CustomTooltip title={t(title)} placement="right">
<ListItem sx={listItemProps}>
<ListItemIcon sx={listItemIconProps}>
<Icon
@@ -84,7 +84,7 @@ const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }
}}
/>
</ListItem>
</Tooltip>
</CustomTooltip>
</ListItemLink>
);
};

18
src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
View File

@@ -20,9 +20,9 @@ import Menu from '@mui/material/Menu';
import Link from '@mui/material/Link';
import { Link as RouterLink } from 'react-router-dom';
import { alpha } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import Slide from '@mui/material/Slide';
import { forwardRef, memo } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
@@ -80,15 +80,15 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
boxShadow: 2,
}}
>
<Tooltip title={t('reader.button.exit')}>
<CustomTooltip title={t('reader.button.exit')}>
<IconButton sx={{ marginRight: 2 }} onClick={handleBack} color="inherit">
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
</Tooltip>
</CustomTooltip>
<Stack sx={{ flexGrow: 1 }}>
{manga && currentChapter ? (
<>
<Tooltip title={title}>
<CustomTooltip title={title}>
<TypographyMaxLines lines={1} component="h1" variant="h5">
<Link
component={RouterLink}
@@ -98,20 +98,20 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
{title}
</Link>
</TypographyMaxLines>
</Tooltip>
<Tooltip title={name}>
</CustomTooltip>
<CustomTooltip title={name}>
<TypographyMaxLines lines={1}>{name}</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
</>
) : (
<LoadingPlaceholder />
)}
</Stack>
<Tooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
<CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
<IconButton onClick={() => Chapters.performAction(bookmarkAction, [chapterId], {})} color="inherit">
{isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
</IconButton>
</Tooltip>
</CustomTooltip>
<IconButton {...bindTrigger(popupState)} color="inherit">
<MoreVertIcon />
</IconButton>

10
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
View File

@@ -7,7 +7,6 @@
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton';
import ArrowBack from '@mui/icons-material/ArrowBack';
@@ -17,6 +16,7 @@ import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
import Divider from '@mui/material/Divider';
import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
import Drawer from '@mui/material/Drawer';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { ReaderNavContainer } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx';
@@ -111,12 +111,12 @@ const BaseReaderNavBarDesktop = ({
<ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
<Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
<Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<Tooltip title={t('reader.button.exit')}>
<CustomTooltip title={t('reader.button.exit')}>
<IconButton onClick={exit} color="inherit">
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
</Tooltip>
<Tooltip title={t('reader.settings.label.static_navigation')}>
</CustomTooltip>
<CustomTooltip title={t('reader.settings.label.static_navigation')}>
<IconButton
onClick={() => {
setReaderNavBarWidth(0);
@@ -126,7 +126,7 @@ const BaseReaderNavBarDesktop = ({
>
{isStaticNav ? <PushPinIcon /> : <PushPinOutlinedIcon />}
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
{manga && currentChapter ? (
<>

22
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx
View File

@@ -7,7 +7,6 @@
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton';
import BookmarkIcon from '@mui/icons-material/Bookmark';
@@ -17,6 +16,7 @@ import DownloadIcon from '@mui/icons-material/Download';
import ReplayIcon from '@mui/icons-material/Replay';
import { memo, useMemo, useRef } from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
@@ -32,11 +32,11 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
if (currentChapter && Chapters.isDownloaded(currentChapter)) {
return (
<Tooltip title={t(actionToTranslationKey.delete.action.single)}>
<CustomTooltip title={t(actionToTranslationKey.delete.action.single)}>
<IconButton onClick={() => Chapters.performAction('delete', [currentChapter.id], {})} color="inherit">
<DeleteIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
);
}
@@ -45,7 +45,7 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
}
return (
<Tooltip title={t(actionToTranslationKey.download.action.single)}>
<CustomTooltip title={t(actionToTranslationKey.download.action.single)} disabled={!currentChapter}>
<IconButton
disabled={!currentChapter}
onClick={() => Chapters.performAction('download', [currentChapter?.id ?? -1], {})}
@@ -53,7 +53,7 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
>
<DownloadIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
);
};
@@ -82,12 +82,12 @@ const BaseReaderNavBarDesktopActions = memo(
return (
<Stack sx={{ flexDirection: 'row', justifyContent: 'center', gap: 1 }}>
<Tooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
<CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
<IconButton onClick={() => Chapters.performAction(bookmarkAction, [id], {})} color="inherit">
{isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
</IconButton>
</Tooltip>
<Tooltip title={t('reader.button.retry_load_pages')}>
</CustomTooltip>
<CustomTooltip title={t('reader.button.retry_load_pages')} disabled={!haveSomePagesFailedToLoad}>
<IconButton
onClick={() => {
setPageLoadStates((statePageLoadStates) =>
@@ -104,9 +104,9 @@ const BaseReaderNavBarDesktopActions = memo(
>
<ReplayIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<DownloadButton currentChapter={currentChapter} />
<Tooltip title={t('chapter.action.label.open_on_source')}>
<CustomTooltip title={t('chapter.action.label.open_on_source')} disabled={!realUrl}>
<IconButton
disabled={!realUrl}
href={realUrl ?? ''}
@@ -116,7 +116,7 @@ const BaseReaderNavBarDesktopActions = memo(
>
<OpenInNewIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
);
},

14
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx
View File

@@ -7,11 +7,11 @@
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Link from '@mui/material/Link';
import { Link as RouterLink } from 'react-router-dom';
import { memo } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
@@ -28,7 +28,7 @@ export const ReaderNavBarDesktopMetadata = memo(
scanlator?: string | null;
}) => (
<Stack>
<Tooltip title={mangaTitle} placement="right">
<CustomTooltip title={mangaTitle} placement="right">
<TypographyMaxLines lines={3} variant="h6" component="h1" sx={{ textAlign: 'center' }}>
<Link
component={RouterLink}
@@ -38,14 +38,14 @@ export const ReaderNavBarDesktopMetadata = memo(
{mangaTitle}
</Link>
</TypographyMaxLines>
</Tooltip>
<Tooltip title={chapterTitle} placement="right">
</CustomTooltip>
<CustomTooltip title={chapterTitle} placement="right">
<TypographyMaxLines lines={4} variant="body1" component="h2" sx={{ textAlign: 'center' }}>
{chapterTitle}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
{scanlator && (
<Tooltip title={scanlator} placement="right">
<CustomTooltip title={scanlator} placement="right">
<TypographyMaxLines
lines={4}
variant="body2"
@@ -55,7 +55,7 @@ export const ReaderNavBarDesktopMetadata = memo(
>
{scanlator}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
)}
</Stack>
),

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

@@ -6,23 +6,29 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Tooltip from '@mui/material/Tooltip';
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 { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton';
export const ReaderNavBarDesktopNextPreviousButton = ({
title,
type,
disabled,
...customIconButtonProps
}: Omit<ComponentProps<typeof CustomIconButton>, 'children'> & {
title: string;
type: 'previous' | 'next';
}) => (
<Tooltip title={title}>
<CustomIconButton sx={{ minWidth: 0, px: 1, flexBasis: '15%' }} variant="contained" {...customIconButtonProps}>
<CustomTooltip title={title} disabled={disabled}>
<CustomIconButton
sx={{ minWidth: 0, px: 1, flexBasis: '15%' }}
variant="contained"
disabled={disabled}
{...customIconButtonProps}
>
{type === 'previous' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
</CustomIconButton>
</Tooltip>
</CustomTooltip>
);

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

@@ -7,9 +7,9 @@
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import FitScreenIcon from '@mui/icons-material/FitScreen';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
import {
@@ -51,7 +51,7 @@ export const ReaderNavBarDesktopPageScale = ({
defaultIcon={PAGE_SCALE_VALUE_TO_DISPLAY_DATA[pageScaleMode.value].icon}
/>
{READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
<Tooltip title={t('reader.settings.page_scale.stretch')}>
<CustomTooltip title={t('reader.settings.page_scale.stretch')}>
<CustomIconButton
onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)}
sx={{ minWidth: 0 }}
@@ -60,7 +60,7 @@ export const ReaderNavBarDesktopPageScale = ({
>
<FitScreenIcon />
</CustomIconButton>
</Tooltip>
</CustomTooltip>
)}
</Stack>
);

14
src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
View File

@@ -15,10 +15,10 @@ import { alpha } from '@mui/material/styles';
import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import Slide from '@mui/material/Slide';
import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ReaderBottomBarMobileProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { MobileReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx';
import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
@@ -89,21 +89,21 @@ const BaseReaderBottomBarMobile = ({
alignItems: 'center',
}}
>
<Tooltip title={t('reader.button.chapter_list')}>
<CustomTooltip title={t('reader.button.chapter_list')}>
<IconButton {...bindTrigger(chapterListPopupState)} size="large" color="inherit">
<FormatListBulletedIcon />
</IconButton>
</Tooltip>
<Tooltip title={t('reader.settings.title.quick_settings')}>
</CustomTooltip>
<CustomTooltip title={t('reader.settings.title.quick_settings')}>
<IconButton {...bindTrigger(quickSettingsPopupState)} size="large" color="inherit">
<AppSettingsAltIcon />
</IconButton>
</Tooltip>
<Tooltip title={t('settings.title')}>
</CustomTooltip>
<CustomTooltip title={t('settings.title')}>
<IconButton onClick={openSettings} size="large" color="inherit">
<SettingsIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
</Stack>
</Slide>

6
src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx
View File

@@ -7,8 +7,8 @@
*/
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import { ReactNode } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { CurrentPageSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
@@ -23,7 +23,7 @@ export const ReaderProgressBarCurrentPageSlot = ({
children,
progressBarPosition,
}: CurrentPageSlotProps & { children?: ReactNode }) => (
<Tooltip
<CustomTooltip
title={pageName}
slotProps={{
tooltip: { sx: { backgroundColor: 'primary.main', color: 'primary.contrastText' } },
@@ -50,5 +50,5 @@ export const ReaderProgressBarCurrentPageSlot = ({
>
{children}
</Box>
</Tooltip>
</CustomTooltip>
);

6
src/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx
View File

@@ -7,15 +7,15 @@
*/
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import { memo, ReactNode } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ReaderProgressBarSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
export const ReaderProgressBarSlot = memo(
({ pageName, progressBarPosition, slotProps, children }: ReaderProgressBarSlotProps & { children?: ReactNode }) => (
<Tooltip
<CustomTooltip
{...slotProps?.tooltip}
key={pageName}
title={pageName}
@@ -24,6 +24,6 @@ export const ReaderProgressBarSlot = memo(
<Box {...slotProps?.box} sx={{ width: '100%', height: '100%', ...slotProps?.box?.sx }}>
{children}
</Box>
</Tooltip>
</CustomTooltip>
),
);

6
src/modules/reader/components/settings/hotkeys/Hotkey.tsx
View File

@@ -9,7 +9,7 @@
import { Fragment } from 'react';
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import Tooltip from '@mui/material/Tooltip';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { Kbd } from '@/modules/core/components/Kbd.tsx';
export const Hotkey = ({ keys, removeKey }: { keys: string[]; removeKey?: (key: string) => void }) => {
@@ -19,7 +19,7 @@ export const Hotkey = ({ keys, removeKey }: { keys: string[]; removeKey?: (key:
<Stack sx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
{keys.map((key, index) => (
<Fragment key={key}>
<Tooltip title={t('global.button.delete')} hidden={!removeKey}>
<CustomTooltip title={t('global.button.delete')} hidden={!removeKey}>
<Stack
sx={{
flexDirection: 'row',
@@ -36,7 +36,7 @@ export const Hotkey = ({ keys, removeKey }: { keys: string[]; removeKey?: (key:
</Fragment>
))}
</Stack>
</Tooltip>
</CustomTooltip>
{index === keys.length - 1 ? '' : ','}
</Fragment>
))}

6
src/modules/reader/components/settings/hotkeys/ReaderSettingHotkey.tsx
View File

@@ -10,9 +10,9 @@ import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import AddIcon from '@mui/icons-material/Add';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import { bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
import IconButton from '@mui/material/IconButton';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ReaderHotkey } from '@/modules/reader/types/Reader.types.ts';
import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { TranslationKey } from '@/Base.types.ts';
@@ -60,11 +60,11 @@ export const ReaderSettingHotkey = ({
keys={keys}
removeKey={(keyToRemove) => updateSetting(keys.filter((key) => key !== keyToRemove))}
/>
<Tooltip title={t('global.button.add')}>
<CustomTooltip title={t('global.button.add')}>
<IconButton {...bindTrigger(popupState)} color="inherit">
<AddIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<ResetButton asIconButton onClick={() => updateSetting(DEFAULT_READER_SETTINGS.hotkeys[hotkey])} />
</Stack>
{popupState.isOpen && (

10
src/modules/source/components/SourceOptions.tsx
View File

@@ -23,7 +23,7 @@ import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import TextField from '@mui/material/TextField';
import Tooltip from '@mui/material/Tooltip';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { OptionsPanel } from '@/modules/core/components/OptionsPanel.tsx';
import { CheckBoxFilter } from '@/modules/source/components/filters/CheckBoxFilter.tsx';
import { HeaderFilter } from '@/modules/source/components/filters/HeaderFilter.tsx';
@@ -199,11 +199,11 @@ export function SourceOptions({
<PopupState variant="dialog" popupId="source-browse-save-search">
{(popupState) => (
<>
<Tooltip title={t('source.filter.save_search.label.save')}>
<CustomTooltip title={t('source.filter.save_search.label.save')}>
<IconButton sx={{ marginLeft: 'auto' }} {...bindTrigger(popupState)}>
<SaveIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<Dialog {...bindDialog(popupState)} maxWidth="xs" fullWidth>
<DialogTitle>{t('source.filter.save_search.dialog.label.title')}</DialogTitle>
<DialogContent>
@@ -269,9 +269,9 @@ export function SourceOptions({
.catch(defaultPromiseErrorHandler('SourceOptions::deleteSavedSearch'));
}}
deleteIcon={
<Tooltip title={t('source.filter.save_search.label.delete')}>
<CustomTooltip title={t('source.filter.save_search.label.delete')}>
<DeleteIcon />
</Tooltip>
</CustomTooltip>
}
variant="outlined"
/>

6
src/modules/source/screens/SourceMangas.tsx
View File

@@ -15,11 +15,11 @@ import { useTranslation } from 'react-i18next';
import Link from '@mui/material/Link';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import FavoriteIcon from '@mui/icons-material/Favorite';
import NewReleasesIcon from '@mui/icons-material/NewReleases';
import FilterListIcon from '@mui/icons-material/FilterList';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import {
requestManager,
AbortableApolloUseMutationPaginatedResponse,
@@ -405,7 +405,7 @@ export function SourceMangas() {
<AppbarSearch />
<SourceGridLayout />
{source?.isConfigurable && (
<Tooltip title={t('settings.title')}>
<CustomTooltip title={t('settings.title')}>
<IconButton
onClick={() => navigate(AppRoutes.sources.childRoutes.configure.path(sourceId))}
aria-label="display more actions"
@@ -415,7 +415,7 @@ export function SourceMangas() {
>
<SettingsIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
)}
</>,
);

6
src/modules/source/screens/Sources.tsx
View File

@@ -8,11 +8,11 @@
import { Fragment, useEffect, useLayoutEffect, useMemo } from 'react';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import TravelExploreIcon from '@mui/icons-material/TravelExplore';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import {
@@ -108,7 +108,7 @@ export function Sources() {
useLayoutEffect(() => {
setAction(
<>
<Tooltip title={t('search.title.global_search')}>
<CustomTooltip title={t('search.title.global_search')}>
<IconButton
onClick={() => navigate(AppRoutes.sources.childRoutes.searchAll.path)}
size="large"
@@ -116,7 +116,7 @@ export function Sources() {
>
<TravelExploreIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<LangSelect
shownLangs={shownLangs}
setShownLangs={setShownLangs}

6
src/modules/theme/components/CreateThemeButton.tsx
View File

@@ -11,7 +11,7 @@ import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
import Tooltip from '@mui/material/Tooltip';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ThemeCreationDialog } from '@/modules/theme/components/CreateThemeDialog.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
@@ -34,11 +34,11 @@ export const CreateThemeButton = () => {
>
<AddCircleIcon fontSize="large" />
</Button>
<Tooltip title={t('settings.appearance.theme.create.title')} placement="top">
<CustomTooltip title={t('settings.appearance.theme.create.title')} placement="top">
<TypographyMaxLines sx={{ maxWidth: '100%' }}>
{t('settings.appearance.theme.create.title')}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
</Stack>
{popupState.isOpen && <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="create" />}
</>

14
src/modules/theme/components/ThemePreview.tsx
View File

@@ -16,9 +16,9 @@ import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import EditIcon from '@mui/icons-material/Edit';
import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { AppThemeContext } from '@/modules/theme/contexts/AppThemeContext.tsx';
import { AppTheme, hasMissingFonts, loadThemeFonts } from '@/modules/theme/services/AppThemes.ts';
import { createTheme } from '@/modules/theme/services/ThemeCreator.ts';
@@ -154,9 +154,9 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
size="small"
sx={{ mt: -0.5 }}
>
<Tooltip title={t('global.button.delete')}>
<CustomTooltip title={t('global.button.delete')}>
<DeleteIcon />
</Tooltip>
</CustomTooltip>
</IconButton>
)}
{appTheme.isCustom && (
@@ -169,9 +169,9 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
component="div"
size="small"
>
<Tooltip title={t('global.button.edit')}>
<CustomTooltip title={t('global.button.edit')}>
<EditIcon />
</Tooltip>
</CustomTooltip>
</IconButton>
)}
</Stack>
@@ -229,9 +229,9 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
</CardActionArea>
</Card>
</ThemeProvider>
<Tooltip title={getName()} placement="top">
<CustomTooltip title={getName()} placement="top">
<TypographyMaxLines sx={{ maxWidth: '100%' }}>{getName()}</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
</Stack>
<ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={appTheme} />
</>

6
src/modules/tracker/components/cards/TrackerActiveCard.tsx
View File

@@ -23,11 +23,11 @@ import Link from '@mui/material/Link';
import ListItemButton from '@mui/material/ListItemButton';
import MenuItem from '@mui/material/MenuItem';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import PopupState, { bindDialog, bindMenu, bindTrigger } from 'material-ui-popup-state';
import { useMemo, useState } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { Trackers, TTrackerBind, TTrackRecordBind, UNSET_DATE } from '@/modules/tracker/services/Trackers.ts';
import { ListPreference } from '@/modules/source/components/sourceConfiguration/ListPreference.tsx';
@@ -167,11 +167,11 @@ const TrackerActiveHeader = ({
</TrackerActiveLink>
<ListItemButton sx={{ flexGrow: 1 }} onClick={openSearch}>
<Tooltip title={trackRecord.title}>
<CustomTooltip title={trackRecord.title}>
<TypographyMaxLines flexGrow={1} lines={1}>
{trackRecord.title}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
</ListItemButton>
<Stack
sx={{

6
src/modules/tracker/components/cards/TrackerMangaCard.tsx
View File

@@ -16,12 +16,12 @@ import CardMedia from '@mui/material/CardMedia';
import Collapse from '@mui/material/Collapse';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import { useLayoutEffect, useRef, useState } from 'react';
import parseHtml from 'html-react-parser';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import sanitizeHtml from 'sanitize-html';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { Metadata } from '@/modules/core/components/Metadata.tsx';
@@ -37,11 +37,11 @@ const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: b
justifyContent: 'space-between',
}}
>
<Tooltip title={title}>
<CustomTooltip title={title}>
<TypographyMaxLines variant="h5" component="h1">
{title}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
<CheckCircleIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} color="primary" />
</Stack>
);

10
src/modules/updates/components/ChapterUpdateCard.tsx
View File

@@ -9,7 +9,6 @@
import DownloadIcon from '@mui/icons-material/Download';
import Box from '@mui/material/Box';
import CardActionArea from '@mui/material/CardActionArea';
import Tooltip from '@mui/material/Tooltip';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
@@ -18,6 +17,7 @@ import { Link, useLocation } from 'react-router-dom';
import Refresh from '@mui/icons-material/Refresh';
import { useTranslation } from 'react-i18next';
import { memo } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
import { ChapterUpdateListFieldsFragment, DownloadState } from '@/lib/graphql/generated/graphql.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
@@ -115,7 +115,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
</Box>
<DownloadStateIndicator chapterId={chapter.id} />
{download?.state === DownloadState.Error && (
<Tooltip title={t('global.button.retry')}>
<CustomTooltip title={t('global.button.retry')}>
<IconButton
onClick={(e) => {
e.preventDefault();
@@ -126,10 +126,10 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
>
<Refresh />
</IconButton>
</Tooltip>
</CustomTooltip>
)}
{download == null && !chapter.isDownloaded && (
<Tooltip title={t('chapter.action.download.add.label.action')}>
<CustomTooltip title={t('chapter.action.download.add.label.action')}>
<IconButton
onClick={(e) => {
e.stopPropagation();
@@ -140,7 +140,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
>
<DownloadIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
)}
</CardContent>
</CardActionArea>