Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff
2025-06-24 00:04:36 -07:00
committed by GitHub
parent bea55d48a8
commit c1330d92b2
473 changed files with 12469 additions and 11607 deletions
@@ -1,42 +1,32 @@
import { ButtonProps } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { RiSortAsc, RiSortDesc } from 'react-icons/ri';
import { Button, Tooltip } from '/@/renderer/components';
import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/action-icon';
import { SortOrder } from '/@/shared/types/domain-types';
interface OrderToggleButtonProps {
buttonProps?: Partial<ButtonProps>;
buttonProps?: Partial<ActionIconProps>;
onToggle: () => void;
sortOrder: SortOrder;
}
export const OrderToggleButton = ({ buttonProps, onToggle, sortOrder }: OrderToggleButtonProps) => {
const { t } = useTranslation();
return (
<Tooltip
label={
sortOrder === SortOrder.ASC
? t('common.ascending', { postProcess: 'sentenceCase' })
: t('common.descending', { postProcess: 'sentenceCase' })
}
>
<Button
compact
fw="600"
onClick={onToggle}
size="md"
variant="subtle"
{...buttonProps}
>
<>
{sortOrder === SortOrder.ASC ? (
<RiSortAsc size="1.3rem" />
) : (
<RiSortDesc size="1.3rem" />
)}
</>
</Button>
</Tooltip>
<ActionIcon
icon={sortOrder === SortOrder.ASC ? 'sortAsc' : 'sortDesc'}
iconProps={{
size: 'lg',
}}
onClick={onToggle}
tooltip={{
label:
sortOrder === SortOrder.ASC
? t('common.ascending', { postProcess: 'sentenceCase' })
: t('common.descending', { postProcess: 'sentenceCase' }),
}}
variant="subtle"
{...buttonProps}
/>
);
};