feat(ui): Add text labels to action buttons for clarity - Original PR stonith404/pingvin-share#813

frontend/src/components/header/ActionAvatar.tsx

@@ -1,6 +1,6 @@
-import { ActionIcon, Avatar, Menu } from "@mantine/core";
+import { Button, 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";
@@ -11,9 +11,13 @@ const ActionAvatar = () => {
   return (
     <Menu position="bottom-start" withinPortal>
       <Menu.Target>
-        <ActionIcon>
-          <Avatar size={28} />
-        </ActionIcon>
+        <Button
+          variant="default"
+          size="xs"
+          leftIcon={<TbUserCircle size={18} />}
+        >
+          <FormattedMessage id="common.button.profile" />
+        </Button>
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item component={Link} href="/account" icon={<TbUser size={14} />}>

frontend/src/components/header/NavbarShareMenu.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Menu } from "@mantine/core";
+import { Button, Menu } from "@mantine/core";
 import Link from "next/link";
 import { TbArrowLoopLeft, TbLink } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
@@ -7,9 +7,9 @@ const NavbarShareMneu = () => {
   return (
     <Menu position="bottom-start" withinPortal>
       <Menu.Target>
-        <ActionIcon>
-          <TbLink />
-        </ActionIcon>
+        <Button variant="default" size="xs" leftIcon={<TbLink size={18} />}>
+          <FormattedMessage id="common.button.shares" />
+        </Button>
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item component={Link} href="/account/shares" icon={<TbLink />}>

frontend/src/components/share/DownloadAllButton.tsx

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

frontend/src/components/share/FileList.tsx

@@ -6,6 +6,7 @@ import {
   Stack,
   Table,
   TextInput,
+  Tooltip,
 } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
@@ -116,31 +117,61 @@ const FileList = ({
                   <td>
                     <Group position="right">
                       {shareService.doesFileSupportPreview(file.name) && (
-                        <ActionIcon
-                          onClick={() =>
-                            showFilePreviewModal(share.id, file, modals)
-                          }
-                          size={25}
+                        <Tooltip
+                          position="bottom"
+                          multiline
+                          width={70}
+                          label={t("common.button.preview")}
+                          events={{ hover: true, focus: false, touch: true }}
                         >
-                          <TbEye />
-                        </ActionIcon>
+                          <ActionIcon
+                            color="green"
+                            variant="light"
+                            size={25}
+                            onClick={() =>
+                              showFilePreviewModal(share.id, file, modals)
+                            }
+                          >
+                            <TbEye />
+                          </ActionIcon>
+                        </Tooltip>
                       )}
                       {!share.hasPassword && (
+                        <Tooltip
+                          position="bottom"
+                          multiline
+                          width={80}
+                          label={t("common.button.copy-link")}
+                          events={{ hover: true, focus: false, touch: true }}
+                        >
+                          <ActionIcon
+                            color="victoria"
+                            variant="light"
+                            size={25}
+                            onClick={() => copyFileLink(file)}
+                          >
+                            <TbLink />
+                          </ActionIcon>
+                        </Tooltip>
+                      )}
+                      <Tooltip
+                        position="bottom"
+                        multiline
+                        width={85}
+                        label={t("common.button.download")}
+                        events={{ hover: true, focus: false, touch: true }}
+                      >
                         <ActionIcon
+                          color="blue"
+                          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>
+                      </Tooltip>
                     </Group>
                   </td>
                 </tr>

frontend/src/components/upload/FileList.tsx

@@ -1,10 +1,11 @@
-import { ActionIcon, Table } from "@mantine/core";
+import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { TbTrash } from "react-icons/tb";
 import { GrUndo } from "react-icons/gr";
 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";
 
 const FileListRow = ({
   file,
@@ -23,6 +24,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 +37,43 @@ const FileListRow = ({
         <td>{byteToHumanSizeString(+file.size)}</td>
         <td>
           {removable && (
-            <ActionIcon
-              color="red"
-              variant="light"
-              size={25}
-              onClick={onRemove}
+            <Tooltip
+              position="bottom"
+              multiline
+              width={60}
+              label={t("common.button.delete")}
+              events={{ hover: true, focus: false, touch: true }}
             >
-              <TbTrash />
-            </ActionIcon>
+              <ActionIcon
+                color="red"
+                variant="light"
+                size={25}
+                onClick={onRemove}
+              >
+                <TbTrash />
+              </ActionIcon>
+            </Tooltip>
           )}
           {uploading && (
             <UploadProgressIndicator progress={file.uploadingProgress} />
           )}
           {restorable && (
-            <ActionIcon
-              color="primary"
-              variant="light"
-              size={25}
-              onClick={onRestore}
+            <Tooltip
+              position="bottom"
+              multiline
+              width={60}
+              label={t("common.button.undo")}
+              events={{ hover: true, focus: false, touch: true }}
             >
-              <GrUndo />
-            </ActionIcon>
+              <ActionIcon
+                color="primary"
+                variant="light"
+                size={25}
+                onClick={onRestore}
+              >
+                <GrUndo />
+              </ActionIcon>
+            </Tooltip>
           )}
         </td>
       </tr>

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

@@ -502,6 +502,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": "إرسال",
@@ -531,4 +540,4 @@ export default {
   "common.error.exact-length": "يجب أن يكون بالضبط {length} حرفًا",
   "common.error.invalid-number": "يجب أن يكون رقماً",
   "common.error.field-required": "هذا الحقل مطلوب"
-};
+};

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

@@ -502,6 +502,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

@@ -502,6 +502,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",
@@ -531,4 +540,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

@@ -502,6 +502,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",
@@ -531,4 +540,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

@@ -502,6 +502,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": "Υποβολή",
@@ -531,4 +540,4 @@ export default {
   "common.error.exact-length": "Πρέπει να αποτελείται ακριβώς από {length} χαρακτήρες",
   "common.error.invalid-number": "Πρέπει να είναι αριθμός",
   "common.error.field-required": "Αυτό το πεδίο είναι υποχρεωτικό"
-};
+};

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

@@ -702,6 +702,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

@@ -502,6 +502,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",
@@ -531,4 +540,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"
-};
+};

frontend/src/i18n/translations/et-EE.ts

@@ -502,6 +502,15 @@ export default {
   "error.param.provider_discord": "Discord",
   "error.param.provider_oidc": "OpenID Connect",
   // Common translations
+  "common.button.info": "Info",
+  "common.button.undo": "Võta tagasi",
+  "common.button.download": "Laadi alla",
+  "common.button.copy": "Kopeeri",
+  "common.button.copy-link": "Kopeeri link",
+  "common.button.preview": "Eelvaade",
+  "common.button.edit": "Muuda",
+  "common.button.profile": "Profiil",
+  "common.button.shares": "Jagamised",
   "common.button.save": "Salvesta",
   "common.button.create": "Loo",
   "common.button.submit": "Esita",
@@ -531,4 +540,4 @@ export default {
   "common.error.exact-length": "Peab olema täpselt {length} tähemärki",
   "common.error.invalid-number": "Peab olema number",
   "common.error.field-required": "See väli on kohustuslik"
-};
+};