From decd7f7918c2f2d64ad1f017a50aa28c12790ab7 Mon Sep 17 00:00:00 2001
From: dicedtomato <35403473+diced@users.noreply.github.com>
Date: Sun, 26 Feb 2023 20:20:36 +0000
Subject: [PATCH] fix: revamp uploaded file modal

---
 .../pages/Upload/showFilesModal.tsx           | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/Upload/showFilesModal.tsx b/src/components/pages/Upload/showFilesModal.tsx
index 17330a5..4531f3c 100644
--- a/src/components/pages/Upload/showFilesModal.tsx
+++ b/src/components/pages/Upload/showFilesModal.tsx
@@ -1,6 +1,6 @@
-import { Button, Table, Title } from '@mantine/core';
+import { ActionIcon, Box, Button, Group, Stack, Table, Title, Tooltip } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
-import { CopyIcon } from 'components/icons';
+import { CopyIcon, LinkIcon } from 'components/icons';
 import Link from 'components/Link';
 
 export default function showFilesModal(clipboard, modals, files: string[]) {
@@ -26,25 +26,27 @@ export default function showFilesModal(clipboard, modals, files: string[]) {
     size: 'auto',
     children: (
       <Table withBorder={false} withColumnBorders={false} highlightOnHover horizontalSpacing={'sm'}>
-        <tbody>
+        <Stack>
           {files.map((file, idx) => (
-            <tr key={file}>
-              <td>
+            <Group key={idx} position='apart'>
+              <Group position='left'>
                 <Link href={file}>{file}</Link>
-              </td>
-              <td>
-                <Button.Group>
-                  <Button variant='outline' onClick={() => copy(idx)}>
-                    Copy
-                  </Button>
-                  <Button variant='outline' onClick={() => open(idx)}>
-                    Open
-                  </Button>
-                </Button.Group>
-              </td>
-            </tr>
+              </Group>
+              <Group position='right'>
+                <Tooltip label='Open link in a new tab'>
+                  <ActionIcon onClick={() => open(idx)} variant='filled' color='primary'>
+                    <LinkIcon />
+                  </ActionIcon>
+                </Tooltip>
+                <Tooltip label='Copy link to clipboard'>
+                  <ActionIcon onClick={() => copy(idx)} variant='filled' color='primary'>
+                    <CopyIcon />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
+            </Group>
           ))}
-        </tbody>
+        </Stack>
       </Table>
     ),
   });