♻️ Refactor and WIP towards mantine v5

This commit is contained in:
ajnart
2022-07-26 01:21:04 +02:00
parent d4d9e5cfcb
commit 9f9566b27c
5 changed files with 28 additions and 23 deletions

View File

@@ -38,7 +38,7 @@ export function AddItemShelfButton(props: any) {
> >
<AddAppShelfItemForm setOpened={setOpened} /> <AddAppShelfItemForm setOpened={setOpened} />
</Modal> </Modal>
<Tooltip label="Add a service"> <Tooltip withinPortal label="Add a service">
<ActionIcon <ActionIcon
variant="default" variant="default"
radius="md" radius="md"

View File

@@ -44,18 +44,18 @@ export function SettingsMenuButton(props: any) {
<SettingsMenu /> <SettingsMenu />
<Credits /> <Credits />
</Drawer> </Drawer>
<ActionIcon <Tooltip label="Settings">
variant="default" <ActionIcon
radius="md" variant="default"
size="xl" radius="md"
color="blue" size="xl"
style={props.style} color="blue"
onClick={() => setOpened(true)} style={props.style}
> onClick={() => setOpened(true)}
<Tooltip label="Settings"> >
<IconSettings /> <IconSettings />
</Tooltip> </ActionIcon>
</ActionIcon> </Tooltip>
</> </>
); );
} }

View File

@@ -1,4 +1,4 @@
import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core'; import { ActionIcon, Drawer, Group, LoadingOverlay, Text, Tooltip } from '@mantine/core';
import axios from 'axios'; import axios from 'axios';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Docker from 'dockerode'; import Docker from 'dockerode';
@@ -67,7 +67,7 @@ export default function DockerMenuButton(props: any) {
> >
<DockerTable containers={containers} selection={selection} setSelection={setSelection} /> <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
</Drawer> </Drawer>
<Group position="center"> <Tooltip label="Docker">
<ActionIcon <ActionIcon
variant="default" variant="default"
radius="md" radius="md"
@@ -77,7 +77,7 @@ export default function DockerMenuButton(props: any) {
> >
<IconBrandDocker /> <IconBrandDocker />
</ActionIcon> </ActionIcon>
</Group> </Tooltip>
</> </>
); );
} }

View File

@@ -83,10 +83,10 @@ export default function DownloadComponent() {
if (downloadServices.length === 0) { if (downloadServices.length === 0) {
return ( return (
<Group direction="column"> <Group>
<Title order={3}>No supported download clients found!</Title> <Title order={3}>No supported download clients found!</Title>
<Group> <Group>
<Text>Add a download service to view your current downloads...</Text> <Text>Add a download service to view your current downloads</Text>
<AddItemShelfButton /> <AddItemShelfButton />
</Group> </Group>
</Group> </Group>

View File

@@ -43,6 +43,7 @@ export default function TotalDownloadsComponent() {
const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0); const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0); const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
useEffect(() => { useEffect(() => {
if (downloadServices.length === 0) return;
const interval = setSafeInterval(() => { const interval = setSafeInterval(() => {
// Send one request with each download service inside // Send one request with each download service inside
axios axios
@@ -78,13 +79,17 @@ export default function TotalDownloadsComponent() {
if (downloadServices.length === 0) { if (downloadServices.length === 0) {
return ( return (
<Stack> <Group>
<Title order={4}>No supported download clients found!</Title> <Title order={4}>No supported download clients found!</Title>
<Group noWrap> <div>
<Text>Add a download service to view your current downloads...</Text> <AddItemShelfButton
<AddItemShelfButton /> style={{
</Group> float: 'inline-end',
</Stack> }}
/>
Add a download service to view your current downloads
</div>
</Group>
); );
} }