feat(ui): Add text labels to action buttons for clarity

frontend/src/components/core/HoverTip.tsx

@@ -0,0 +1,29 @@
+import { Tooltip } from "@mantine/core";
+import type { ReactNode } from "react";
+
+type HoverTipProps = {
+  width?: number;
+  label: string;
+  children: ReactNode;
+  disabled?: boolean;
+};
+
+export const HoverTip = ({
+  width,
+  label,
+  children,
+  disabled,
+}: HoverTipProps) => {
+  return (
+    <Tooltip
+      position="bottom"
+      multiline
+      events={{ hover: true, focus: false, touch: true }}
+      width={width}
+      label={label}
+      disabled={disabled}
+    >
+      {children}
+    </Tooltip>
+  );
+};

frontend/src/components/header/ActionAvatar.tsx

@@ -1,18 +1,25 @@
 import { ActionIcon, Avatar, Menu } from "@mantine/core";
 import Link from "next/link";
-import { TbDoorExit, TbSettings, TbUser } from "react-icons/tb";
+import { TbDoorExit, TbSettings, TbUser, TbUserCircle } from "react-icons/tb";
 import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
 import { FormattedMessage, useIntl } from "react-intl";
+import { HoverTip } from "../../components/core/HoverTip";
+import useTranslate from "../../hooks/useTranslate.hook";
+import { useState } from "react";
 
 const ActionAvatar = () => {
   const { user } = useUser();
+  const t = useTranslate();
+  const [menuOpened, setMenuOpened] = useState(false);
 
   return (
-    <Menu position="bottom-start" withinPortal>
+    <Menu position="bottom-start" withinPortal onChange={setMenuOpened}>
       <Menu.Target>
         <ActionIcon>
-          <Avatar size={28} />
+          <HoverTip label={t("common.button.profile")} disabled={menuOpened}>
+            <Avatar size={28} />
+          </HoverTip>
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>

frontend/src/components/header/NavbarShareMenu.tsx

@@ -2,13 +2,23 @@ import { ActionIcon, Menu } from "@mantine/core";
 import Link from "next/link";
 import { TbArrowLoopLeft, TbLink } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
+import { HoverTip } from "../../components/core/HoverTip";
+import useTranslate from "../../hooks/useTranslate.hook";
+import { useState } from "react";
 
 const NavbarShareMneu = () => {
+  const t = useTranslate();
+  const [menuOpened, setMenuOpened] = useState(false);
+
   return (
-    <Menu position="bottom-start" withinPortal>
+    <Menu position="bottom-start" withinPortal onChange={setMenuOpened}>
       <Menu.Target>
         <ActionIcon>
-          <TbLink />
+          <HoverTip label={t("common.button.shares")} disabled={menuOpened}>
+            <div>
+              <TbLink />
+            </div>
+          </HoverTip>
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>

frontend/src/components/share/DownloadAllButton.tsx

@@ -39,7 +39,8 @@ const DownloadAllButton = ({ shareId }: { shareId: string }) => {
 
   return (
     <Button
-      variant="outline"
+      variant="light"
+      color="victoria"
       loading={isLoading}
       onClick={() => {
         if (!isZipReady) {

frontend/src/components/share/FileList.tsx

@@ -21,6 +21,7 @@ import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import toast from "../../utils/toast.util";
 import TableSortIcon, { TableSort } from "../core/SortIcon";
 import showFilePreviewModal from "./modals/showFilePreviewModal";
+import { HoverTip } from "../core/HoverTip";
 
 const FileList = ({
   files,
@@ -116,31 +117,46 @@ const FileList = ({
                   <td>
                     <Group position="right">
                       {shareService.doesFileSupportPreview(file.name) && (
-                        <ActionIcon
-                          onClick={() =>
-                            showFilePreviewModal(share.id, file, modals)
-                          }
-                          size={25}
-                        >
-                          <TbEye />
-                        </ActionIcon>
+                        <HoverTip width={70} label={t("common.button.preview")}>
+                          <ActionIcon
+                            color="green"
+                            variant="light"
+                            size={25}
+                            onClick={() =>
+                              showFilePreviewModal(share.id, file, modals)
+                            }
+                          >
+                            <TbEye />
+                          </ActionIcon>
+                        </HoverTip>
                       )}
                       {!share.hasPassword && (
+                        <HoverTip
+                          width={80}
+                          label={t("common.button.copy-link")}
+                        >
+                          <ActionIcon
+                            color="orange"
+                            variant="light"
+                            size={25}
+                            onClick={() => copyFileLink(file)}
+                          >
+                            <TbLink />
+                          </ActionIcon>
+                        </HoverTip>
+                      )}
+                      <HoverTip width={85} label={t("common.button.download")}>
                         <ActionIcon
+                          color="victoria"
+                          variant="light"
                           size={25}
-                          onClick={() => copyFileLink(file)}
+                          onClick={async () => {
+                            await shareService.downloadFile(share.id, file.id);
+                          }}
                         >
-                          <TbLink />
+                          <TbDownload />
                         </ActionIcon>
-                      )}
-                      <ActionIcon
-                        size={25}
-                        onClick={async () => {
-                          await shareService.downloadFile(share.id, file.id);
-                        }}
-                      >
-                        <TbDownload />
-                      </ActionIcon>
+                      </HoverTip>
                     </Group>
                   </td>
                 </tr>

frontend/src/components/upload/FileList.tsx

@@ -5,6 +5,8 @@ import { FileListItem } from "../../types/File.type";
 import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import UploadProgressIndicator from "./UploadProgressIndicator";
 import { FormattedMessage } from "react-intl";
+import useTranslate from "../../hooks/useTranslate.hook";
+import { HoverTip } from "../core/HoverTip";
 
 const FileListRow = ({
   file,
@@ -23,6 +25,7 @@ const FileListRow = ({
       : onRemove && !file.deleted;
     const restorable = onRestore && !uploadable && !!file.deleted; // maybe undefined, force boolean
     const deleted = !uploadable && !!file.deleted;
+    const t = useTranslate();
 
     return (
       <tr
@@ -35,27 +38,31 @@ const FileListRow = ({
         <td>{byteToHumanSizeString(+file.size)}</td>
         <td>
           {removable && (
-            <ActionIcon
-              color="red"
-              variant="light"
-              size={25}
-              onClick={onRemove}
-            >
-              <TbTrash />
-            </ActionIcon>
+            <HoverTip width={60} label={t("common.button.delete")}>
+              <ActionIcon
+                color="red"
+                variant="light"
+                size={25}
+                onClick={onRemove}
+              >
+                <TbTrash />
+              </ActionIcon>
+            </HoverTip>
           )}
           {uploading && (
             <UploadProgressIndicator progress={file.uploadingProgress} />
           )}
           {restorable && (
-            <ActionIcon
-              color="primary"
-              variant="light"
-              size={25}
-              onClick={onRestore}
-            >
-              <GrUndo />
-            </ActionIcon>
+            <HoverTip width={60} label={t("common.button.undo")}>
+              <ActionIcon
+                color="primary"
+                variant="light"
+                size={25}
+                onClick={onRestore}
+              >
+                <GrUndo />
+              </ActionIcon>
+            </HoverTip>
           )}
         </td>
       </tr>

frontend/src/i18n/translations/ar-EG.ts

@@ -512,6 +512,15 @@ export default {
   "error.param.provider_discord": "Discord",
   "error.param.provider_oidc": "OpenID Connect",
   // Common translations
+  "common.button.info": "معلومات",
+  "common.button.undo": "تراجع",
+  "common.button.download": "تنزيل",
+  "common.button.copy": "نسخ",
+  "common.button.copy-link": "نسخ الرابط",
+  "common.button.preview": "معاينة",
+  "common.button.edit": "تحرير",
+  "common.button.profile": "الملف الشخصي",
+  "common.button.shares": "مشاركات",
   "common.button.save": "حفظ",
   "common.button.create": "إنشاء",
   "common.button.submit": "إرسال",
@@ -541,4 +550,4 @@ export default {
   "common.error.exact-length": "يجب أن يكون بالضبط {length} حرفًا",
   "common.error.invalid-number": "يجب أن يكون رقماً",
   "common.error.field-required": "هذا الحقل مطلوب"
-};
+};

frontend/src/i18n/translations/cs-CZ.ts

@@ -512,6 +512,15 @@ export default {
   "error.param.provider_discord": "Discord",
   "error.param.provider_oidc": "OpenID Connect",
   // Common translations
+  "common.button.info": "Info",
+  "common.button.undo": "Zpět",
+  "common.button.download": "Stáhnout",
+  "common.button.copy": "Kopírovat",
+  "common.button.copy-link": "Kopírovat odkaz",
+  "common.button.preview": "Náhled",
+  "common.button.edit": "Upravit",
+  "common.button.profile": "Profil",
+  "common.button.shares": "Sdílení",
   "common.button.save": "Uložit",
   "common.button.create": "Vytvořit",
   "common.button.submit": "Odeslat",

frontend/src/i18n/translations/da-DK.ts

@@ -512,6 +512,15 @@ export default {
   "error.param.provider_discord": "Discord",
   "error.param.provider_oidc": "OpenID Connect",
   // Common translations
+  "common.button.info": "Info",
+  "common.button.undo": "Fortryd",
+  "common.button.download": "Download",
+  "common.button.copy": "Kopiér",
+  "common.button.copy-link": "Kopiér link",
+  "common.button.preview": "Forhåndsvisning",
+  "common.button.edit": "Rediger",
+  "common.button.profile": "Profil",
+  "common.button.shares": "Delinger",
   "common.button.save": "Gem",
   "common.button.create": "Opret",
   "common.button.submit": "Submit",
@@ -541,4 +550,4 @@ export default {
   "common.error.exact-length": "Skal være præcis {length} tegn",
   "common.error.invalid-number": "Skal være et tal",
   "common.error.field-required": "Dette felt er påkrævet"
-};
+};

frontend/src/i18n/translations/de-DE.ts

@@ -512,6 +512,15 @@ export default {
   "error.param.provider_discord": "Discord",
   "error.param.provider_oidc": "OpenID Connect",
   // Common translations
+  "common.button.info": "Info",
+  "common.button.undo": "Rückgängig",
+  "common.button.download": "Herunterladen",
+  "common.button.copy": "Kopieren",
+  "common.button.copy-link": "Link kopieren",
+  "common.button.preview": "Vorschau",
+  "common.button.edit": "Bearbeiten",
+  "common.button.profile": "Profil",
+  "common.button.shares": "Freigaben",
   "common.button.save": "Speichern",
   "common.button.create": "Erstellen",
   "common.button.submit": "Bestätigen",
@@ -541,4 +550,4 @@ export default {
   "common.error.exact-length": "Muss genau {length} Zeichen lang sein",
   "common.error.invalid-number": "Muss eine Zahl sein",
   "common.error.field-required": "Dieses Feld ist erforderlich"
-};
+};

frontend/src/i18n/translations/el-GR.ts

@@ -512,6 +512,15 @@ export default {
   "error.param.provider_discord": "Discord",
   "error.param.provider_oidc": "Σύνδεση OpenID",
   // Common translations
+  "common.button.info": "Πληροφορίες",
+  "common.button.undo": "Αναίρεση",
+  "common.button.download": "Λήψη",
+  "common.button.copy": "Αντιγραφή",
+  "common.button.copy-link": "Αντιγραφή συνδέσμου",
+  "common.button.preview": "Προεπισκόπηση",
+  "common.button.edit": "Επεξεργασία",
+  "common.button.profile": "Προφίλ",
+  "common.button.shares": "Κοινοποιήσεις",
   "common.button.save": "Αποθήκευση",
   "common.button.create": "Δημιουργία",
   "common.button.submit": "Υποβολή",
@@ -541,4 +550,4 @@ export default {
   "common.error.exact-length": "Πρέπει να αποτελείται ακριβώς από {length} χαρακτήρες",
   "common.error.invalid-number": "Πρέπει να είναι αριθμός",
   "common.error.field-required": "Αυτό το πεδίο είναι υποχρεωτικό"
-};
+};

frontend/src/i18n/translations/en-US.ts

@@ -729,6 +729,15 @@ export default {
   "error.param.provider_oidc": "OpenID Connect",
 
   // Common translations
+  "common.button.info": "Info",
+  "common.button.undo": "Undo",
+  "common.button.download": "Download",
+  "common.button.copy": "Copy",
+  "common.button.copy-link": "Copy link",
+  "common.button.preview": "Preview",
+  "common.button.edit": "Edit",
+  "common.button.profile": "Profile",
+  "common.button.shares": "Shares",
   "common.button.save": "Save",
   "common.button.create": "Create",
   "common.button.submit": "Submit",

frontend/src/i18n/translations/es-ES.ts

@@ -512,6 +512,15 @@ export default {
   "error.param.provider_discord": "Discord",
   "error.param.provider_oidc": "Conexión OpenID",
   // Common translations
+  "common.button.info": "Info",
+  "common.button.undo": "Deshacer",
+  "common.button.download": "Descargar",
+  "common.button.copy": "Copiar",
+  "common.button.copy-link": "Copiar enlace",
+  "common.button.preview": "Vista previa",
+  "common.button.edit": "Editar",
+  "common.button.profile": "Perfil",
+  "common.button.shares": "Compartidos",
   "common.button.save": "Guardar",
   "common.button.create": "Crear",
   "common.button.submit": "Enviar",
@@ -541,4 +550,4 @@ export default {
   "common.error.exact-length": "Debe tener exactamente {length} caracteres",
   "common.error.invalid-number": "Debe ser un número",
   "common.error.field-required": "Este campo es requerido"
-};
+};