iio/pingvin-share
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate to mantine v5

Browse Source
This commit is contained in:
Elias Schneider
2022-10-10 22:14:23 +02:00
parent 68ce8af197
commit db7edc4cd6
14 changed files with 1073 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/upload/Dropzone.tsx
View File

@@ -3,17 +3,17 @@ import {
Center,
createStyles,
Group,
MantineTheme,
Text,
useMantineTheme,
} from "@mantine/core";
import { Dropzone as MantineDropzone, DropzoneStatus } from "@mantine/dropzone";
import { Dropzone as MantineDropzone } from "@mantine/dropzone";
import getConfig from "next/config";
import React, { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
import { CloudUpload, Upload } from "tabler-icons-react";
import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
import toast from "../../utils/toast.util";
const { publicRuntimeConfig } = getConfig()
const { publicRuntimeConfig } = getConfig();
const useStyles = createStyles((theme) => ({
wrapper: {
@@ -39,14 +39,6 @@ const useStyles = createStyles((theme) => ({
},
}));
function getActiveColor(status: DropzoneStatus, theme: MantineTheme) {
return status.accepted
? theme.colors[theme.primaryColor][6]
: theme.colorScheme === "dark"
? theme.colors.dark[2]
: theme.black;
}
const Dropzone = ({
isUploading,
setFiles,
@@ -76,26 +68,20 @@ const Dropzone = ({
className={classes.dropzone}
radius="md"
>
{(status) => (
<div style={{ pointerEvents: "none" }}>
<Group position="center">
<CloudUpload size={50} color={getActiveColor(status, theme)} />
</Group>
<Text
align="center"
weight={700}
size="lg"
mt="xl"
sx={{ color: getActiveColor(status, theme) }}
>
{status.accepted ? "Drop files here" : "Upload files"}
</Text>
<Text align="center" size="sm" mt="xs" color="dimmed">
Drag and drop your files or use the upload button to start your
share.
</Text>
</div>
)}
<div style={{ pointerEvents: "none" }}>
<Group position="center">
<CloudUpload size={50} />
</Group>
<Text align="center" weight={700} size="lg" mt="xl">
Upload files
</Text>
<Text align="center" size="sm" mt="xs" color="dimmed">
Drag&apos;n&apos;drop files here to start your share. We can accept
only files that are less than{" "}
{byteStringToHumanSizeString(publicRuntimeConfig.MAX_FILE_SIZE)} in
size.
</Text>
</div>
</MantineDropzone>
<Center>
<Button

11
frontend/src/components/upload/showCompletedUploadModal.tsx
View File

@@ -2,9 +2,10 @@ import {
ActionIcon,
Button,
Group,
Stack,
Text,
TextInput,
Title,
Title
} from "@mantine/core";
import { useClipboard } from "@mantine/hooks";
import { useModals } from "@mantine/modals";
@@ -24,9 +25,9 @@ const showCompletedUploadModal = (
withCloseButton: false,
closeOnEscape: false,
title: (
<Group grow direction="column" spacing={0}>
<Stack align="stretch" spacing={0}>
<Title order={4}>Share ready</Title>
</Group>
</Stack>
),
children: <Body share={share} />,
});
@@ -38,7 +39,7 @@ const Body = ({ share }: { share: Share }) => {
const router = useRouter();
const link = `${window.location.origin}/share/${share.id}`;
return (
<Group grow direction="column">
<Stack align="stretch">
<TextInput
variant="filled"
value={link}
@@ -70,7 +71,7 @@ const Body = ({ share }: { share: Share }) => {
>
Done
</Button>
</Group>
</Stack>
);
};