performance: replace tabler-icons-react with react-icons to reduce bundle size

frontend/package-lock.json

@@ -26,7 +26,7 @@
         "next-pwa": "^5.6.0",
         "react": "18.0.0",
         "react-dom": "18.0.0",
-        "tabler-icons-react": "^1.44.0",
+        "react-icons": "^4.4.0",
         "yup": "^0.32.11"
       },
       "devDependencies": {
@@ -6381,6 +6381,14 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -6971,14 +6979,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tabler-icons-react": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.44.0.tgz",
-      "integrity": "sha512-AYQQGl55yVe1KHZl+zyDAAwDOcPknKZNC7vgwmjyvpmz4P5Gjb7DtpsOPa1nB0qMYW5Orsrt+1e4qnRoCKgo6A==",
-      "peerDependencies": {
-        "react": ">= 16.8.0"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -12479,6 +12479,12 @@
         "prop-types": "^15.8.1"
       }
     },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12910,12 +12916,6 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
-    "tabler-icons-react": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.44.0.tgz",
-      "integrity": "sha512-AYQQGl55yVe1KHZl+zyDAAwDOcPknKZNC7vgwmjyvpmz4P5Gjb7DtpsOPa1nB0qMYW5Orsrt+1e4qnRoCKgo6A==",
-      "requires": {}
-    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

frontend/package.json

@@ -27,7 +27,7 @@
     "next-pwa": "^5.6.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
-    "tabler-icons-react": "^1.44.0",
+    "react-icons": "^4.4.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {

frontend/src/components/navBar/ActionAvatar.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Avatar, Menu } from "@mantine/core";
 import { NextLink } from "@mantine/next";
-import { DoorExit, Link } from "tabler-icons-react";
+import { TbDoorExit, TbLink } from "react-icons/tb";;
 import authService from "../../services/auth.service";
 
 const ActionAvatar = () => {
@@ -15,7 +15,7 @@ const ActionAvatar = () => {
         <Menu.Item
           component={NextLink}
           href="/account/shares"
-          icon={<Link size={14} />}
+          icon={<TbLink size={14} />}
         >
           My shares
         </Menu.Item>
@@ -23,7 +23,7 @@ const ActionAvatar = () => {
           onClick={async () => {
             authService.signOut();
           }}
-          icon={<DoorExit size={14} />}
+          icon={<TbDoorExit size={14} />}
         >
           Sign out
         </Menu.Item>

frontend/src/components/share/FileList.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Loader, Skeleton, Table } from "@mantine/core";
-import { CircleCheck, Download } from "tabler-icons-react";
+import { TbCircleCheck, TbDownload } from "react-icons/tb";;
 import shareService from "../../services/share.service";
 
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
@@ -39,7 +39,7 @@ const FileList = ({
           file.uploadingState != "finished" ? (
             <Loader size={22} />
           ) : (
-            <CircleCheck color="green" size={22} />
+            <TbCircleCheck color="green" size={22} />
           )
         ) : (
           <ActionIcon
@@ -48,7 +48,7 @@ const FileList = ({
               await shareService.downloadFile(shareId, file.id);
             }}
           >
-            <Download />
+            <TbDownload />
           </ActionIcon>
         )}
       </td>

frontend/src/components/upload/Dropzone.tsx

@@ -2,7 +2,7 @@ import { Button, Center, createStyles, Group, Text } from "@mantine/core";
 import { Dropzone as MantineDropzone } from "@mantine/dropzone";
 import getConfig from "next/config";
 import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
-import { CloudUpload, Upload } from "tabler-icons-react";
+import { TbCloudUpload, TbUpload } from "react-icons/tb";;;
 import { FileUpload } from "../../types/File.type";
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
 import toast from "../../utils/toast.util";
@@ -67,7 +67,7 @@ const Dropzone = ({
       >
         <div style={{ pointerEvents: "none" }}>
           <Group position="center">
-            <CloudUpload size={50} />
+            <TbCloudUpload size={50} />
           </Group>
           <Text align="center" weight={700} size="lg" mt="xl">
             Upload files
@@ -89,7 +89,7 @@ const Dropzone = ({
           disabled={isUploading}
           onClick={() => openRef.current && openRef.current()}
         >
-          {<Upload />}
+          {<TbUpload />}
         </Button>
       </Center>
     </div>

frontend/src/components/upload/FileList.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Table } from "@mantine/core";
 import { Dispatch, SetStateAction } from "react";
-import { Trash } from "tabler-icons-react";
+import { TbTrash } from "react-icons/tb";;
 import { FileUpload } from "../../types/File.type";
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
 import UploadProgressIndicator from "./UploadProgressIndicator";
@@ -28,7 +28,7 @@ const FileList = ({
             size={25}
             onClick={() => remove(i)}
           >
-            <Trash />
+            <TbTrash />
           </ActionIcon>
         ) : (
           <UploadProgressIndicator progress={file.uploadingProgress} />

frontend/src/components/upload/UploadProgressIndicator.tsx

@@ -1,5 +1,5 @@
 import { RingProgress } from "@mantine/core";
-import { CircleCheck, CircleX } from "tabler-icons-react";
+import { TbCircleCheck, TbCircleX } from "react-icons/tb";;
 
 const UploadProgressIndicator = ({ progress }: { progress: number }) => {
   if (progress > 0 && progress < 100) {
@@ -11,9 +11,9 @@ const UploadProgressIndicator = ({ progress }: { progress: number }) => {
       />
     );
   } else if (progress == 100) {
-    return <CircleCheck color="green" size={22} />;
+    return <TbCircleCheck color="green" size={22} />;
   } else {
-    return <CircleX color="red" size={22} />;
+    return <TbCircleX color="red" size={22} />;
   }
 };
 

frontend/src/components/upload/showCompletedUploadModal.tsx

@@ -1,25 +1,20 @@
 import {
   ActionIcon,
   Button,
-  Group,
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
 } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import moment from "moment";
 import { useRouter } from "next/router";
-import { Copy } from "tabler-icons-react";
+import { TbCopy } from "react-icons/tb";
 import { Share } from "../../types/share.type";
 import toast from "../../utils/toast.util";
-
+const showCompletedUploadModal = (modals: ModalsContextProps, share: Share) => {
-const showCompletedUploadModal = (
-  modals: ModalsContextProps,
-  share: Share,
-) => {
   return modals.openModal({
     closeOnClickOutside: false,
     withCloseButton: false,
@@ -39,7 +34,7 @@ const Body = ({ share }: { share: Share }) => {
   const router = useRouter();
   const link = `${window.location.origin}/share/${share.id}`;
   return (
-    <Stack  align="stretch">
+    <Stack align="stretch">
       <TextInput
         variant="filled"
         value={link}
@@ -50,7 +45,7 @@ const Body = ({ share }: { share: Share }) => {
               toast.success("Your link was copied to the keyboard.");
             }}
           >
-            <Copy />
+            <TbCopy />
           </ActionIcon>
         }
       />

frontend/src/pages/account/shares.tsx

@@ -16,7 +16,7 @@ import { NextLink } from "@mantine/next";
 import moment from "moment";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { Link, Trash } from "tabler-icons-react";
+import { TbLink, TbTrash } from "react-icons/tb";;
 import Meta from "../../components/Meta";
 import useUser from "../../hooks/user.hook";
 import shareService from "../../services/share.service";
@@ -89,7 +89,7 @@ const MyShares = () => {
                           );
                         }}
                       >
-                        <Link />
+                        <TbLink />
                       </ActionIcon>
                       <ActionIcon
                         color="red"
@@ -116,7 +116,7 @@ const MyShares = () => {
                           });
                         }}
                       >
-                        <Trash />
+                        <TbTrash />
                       </ActionIcon>
                     </Group>
                   </td>

frontend/src/pages/index.tsx

@@ -12,10 +12,9 @@ import { NextLink } from "@mantine/next";
 import getConfig from "next/config";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { Check } from "tabler-icons-react";
+import { TbCheck } from "react-icons/tb";
 import Meta from "../components/Meta";
 import useUser from "../hooks/user.hook";
-
 const { publicRuntimeConfig } = getConfig();
 
 const useStyles = createStyles((theme) => ({
@@ -101,7 +100,7 @@ export default function Home() {
                 size="sm"
                 icon={
                   <ThemeIcon size={20} radius="xl">
-                    <Check size={12} />
+                    <TbCheck size={12} />
                   </ThemeIcon>
                 }
               >

frontend/src/utils/toast.util.tsx

@@ -1,19 +1,18 @@
 import { showNotification } from "@mantine/notifications";
-import { Check, X } from "tabler-icons-react";
+import { TbCheck, TbX } from "react-icons/tb";
-
 const error = (message: string) =>
   showNotification({
-    icon: <X />,
+    icon: <TbX />,
     color: "red",
     radius: "md",
     title: "Error",
-    
+
     message: message,
   });
 
 const success = (message: string) =>
   showNotification({
-    icon: <Check />,
+    icon: <TbCheck />,
     color: "green",
     radius: "md",
     title: "Success",