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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions

View file

@ -1,17 +1,16 @@
import { Box, Group, Stack, TextInput } from '@mantine/core';
import { DateTimePicker } from '@mantine/dates';
import { useForm } from '@mantine/form';
import { closeModal, ContextModalProps } from '@mantine/modals';
import { useTranslation } from 'react-i18next';
import { Button, Switch, toast } from '/@/renderer/components';
import { useShareItem } from '/@/renderer/features/sharing/mutations/share-item-mutation';
import { useCurrentServer } from '/@/renderer/store';
// Bugged prop types in mantine v6
const WrappedDateTimePicker = ({ ...props }: any) => {
return <DateTimePicker {...props} />;
};
import { Button } from '/@/shared/components/button/button';
import { DateTimePicker } from '/@/shared/components/date-time-picker/date-time-picker';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
import { Switch } from '/@/shared/components/switch/switch';
import { Textarea } from '/@/shared/components/textarea/textarea';
import { toast } from '/@/shared/components/toast/toast';
export const ShareItemContextModal = ({
id,
@ -98,53 +97,54 @@ export const ShareItemContextModal = ({
});
return (
<Box p="1rem">
<form onSubmit={handleSubmit}>
<Stack>
<TextInput
label={t('form.shareItem.description', {
postProcess: 'titleCase',
})}
{...form.getInputProps('description')}
/>
<Switch
defaultChecked={false}
label={t('form.shareItem.allowDownloading', {
postProcess: 'titleCase',
})}
{...form.getInputProps('allowDownloading')}
/>
<WrappedDateTimePicker
clearable
label={t('form.shareItem.setExpiration', {
postProcess: 'titleCase',
})}
minDate={new Date()}
placeholder={defaultDate.toLocaleDateString()}
popoverProps={{ withinPortal: true }}
valueFormat="MM/DD/YYYY HH:mm"
{...form.getInputProps('expires')}
/>
<Group position="right">
<Group>
<Button
onClick={() => closeModal(id)}
size="md"
variant="subtle"
>
{t('common.cancel', { postProcess: 'titleCase' })}
</Button>
<Button
size="md"
type="submit"
variant="filled"
>
{t('common.share', { postProcess: 'titleCase' })}
</Button>
</Group>
<form onSubmit={handleSubmit}>
<Stack>
<DateTimePicker
clearable
label={t('form.shareItem.setExpiration', {
postProcess: 'titleCase',
})}
minDate={new Date()}
placeholder={defaultDate.toLocaleDateString()}
popoverProps={{ withinPortal: true }}
valueFormat="MM/DD/YYYY HH:mm"
{...form.getInputProps('expires')}
/>
<Textarea
autosize
label={t('form.shareItem.description', {
postProcess: 'titleCase',
})}
minRows={5}
{...form.getInputProps('description')}
/>
<Switch
defaultChecked={false}
label={t('form.shareItem.allowDownloading', {
postProcess: 'titleCase',
})}
{...form.getInputProps('allowDownloading')}
/>
<Group justify="flex-end">
<Group>
<Button
onClick={() => closeModal(id)}
size="md"
variant="subtle"
>
{t('common.cancel', { postProcess: 'titleCase' })}
</Button>
<Button
size="md"
type="submit"
variant="filled"
>
{t('common.share', { postProcess: 'titleCase' })}
</Button>
</Group>
</Stack>
</form>
</Box>
</Group>
</Stack>
</form>
);
};