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,14 +1,17 @@
import { Divider, Group, Stack } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import isElectron from 'is-electron';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { RiDeleteBin2Line, RiEdit2Fill } from 'react-icons/ri';
import { Button, Text, TimeoutButton } from '/@/renderer/components';
import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
import { ServerSection } from '/@/renderer/features/servers/components/server-section';
import { useAuthStoreActions } from '/@/renderer/store';
import { Button, TimeoutButton } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { Stack } from '/@/shared/components/stack/stack';
import { Table } from '/@/shared/components/table/table';
import { ServerListItem as ServerItem } from '/@/shared/types/domain-types';
const localSettings = isElectron() ? window.api.localSettings : null;
@@ -54,17 +57,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
return (
<Stack>
<ServerSection
title={
<Group position="apart">
<Text>
{t('page.manageServers.serverDetails', {
postProcess: 'sentenceCase',
})}
</Text>
</Group>
}
>
<ServerSection title={null}>
{edit ? (
<EditServerForm
onCancel={() => editHandlers.toggle()}
@@ -73,36 +66,41 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
/>
) : (
<Stack>
<Group noWrap>
<Stack>
<Text>
{t('page.manageServers.url', {
postProcess: 'sentenceCase',
})}
</Text>
<Text>
{t('page.manageServers.username', {
postProcess: 'sentenceCase',
})}
</Text>
</Stack>
<Stack>
<Text>{server.url}</Text>
<Text>{server.username}</Text>
</Stack>
</Group>
<Table
layout="fixed"
variant="vertical"
withTableBorder
>
<Table.Tbody>
<Table.Tr>
<Table.Th>
{t('page.manageServers.url', {
postProcess: 'sentenceCase',
})}
</Table.Th>
<Table.Td>{server.url}</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Th>
{t('page.manageServers.username', {
postProcess: 'sentenceCase',
})}
</Table.Th>
<Table.Td>{server.username}</Table.Td>
</Table.Tr>
</Table.Tbody>
</Table>
<Group grow>
<Button
leftIcon={<RiEdit2Fill />}
leftSection={<Icon icon="edit" />}
onClick={() => handleEdit()}
tooltip={{
label: t('page.manageServers.editServerDetailsTooltip', {
postProcess: 'sentenceCase',
}),
}}
variant="subtle"
>
{t('common.edit')}
{t('common.edit', { postProcess: 'titleCase' })}
</Button>
</Group>
</Stack>
@@ -110,9 +108,9 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
</ServerSection>
<Divider my="sm" />
<TimeoutButton
leftIcon={<RiDeleteBin2Line />}
leftSection={<Icon icon="delete" />}
timeoutProps={{ callback: handleDeleteServer, duration: 1000 }}
variant="subtle"
variant="state-error"
>
{t('page.manageServers.removeServer', { postProcess: 'sentenceCase' })}
</TimeoutButton>