♻️ 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,6 +44,7 @@ export function SettingsMenuButton(props: any) {
<SettingsMenu /> <SettingsMenu />
<Credits /> <Credits />
</Drawer> </Drawer>
<Tooltip label="Settings">
<ActionIcon <ActionIcon
variant="default" variant="default"
radius="md" radius="md"
@@ -52,10 +53,9 @@ export function SettingsMenuButton(props: any) {
style={props.style} style={props.style}
onClick={() => setOpened(true)} 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={{
float: 'inline-end',
}}
/>
Add a download service to view your current downloads
</div>
</Group> </Group>
</Stack>
); );
} }