fix: ui menu

Author: Daniele-rolli

src/composable/FileUpload.tsx

@@ -1,8 +1,11 @@
 import React from "react";
-import { Directory, Filesystem, FilesystemDirectory } from "@capacitor/filesystem";
+import {
+  Directory,
+  Filesystem,
+  FilesystemDirectory,
+} from "@capacitor/filesystem";
 import Icon from "@/components/UI/Icon";
 
-
 interface FileUploadProps {
   onFileUpload: (fileUrl: string, fileName: string) => void;
   noteId: string;
@@ -88,22 +91,22 @@ const FileUploadComponent: React.FC<FileUploadProps> = ({
       {/* Conditionally render content based on `menu` value */}
       {menu ? (
         <div
-          className="flex items-center p-2 rounded-lg text-black dark:text-[color:var(--selected-dark-text)] cursor-pointer hover:bg-neutral-100 dark:hover:bg-[#353333] transition duration-200"
+          className="flex items-center rounded-lg transition"
           aria-label={translations.menu.file || "Upload File"}
         >
           <label
             htmlFor="file-upload-input"
-            className="flex items-center cursor-pointer"
+            className="text-left flex overflow-hidden text-ellipsis whitespace-nowrap"
             aria-label={translations.menu.file || "Upload a file"}
           >
             {/* Icon */}
-            <Icon name="File" />
+            <Icon name="File" className={`mr-2 ltr:ml-2 text-lg`} />
 
             {/* Text Container */}
             <div className="flex flex-col text-left">
               <h3
-                className="font-medium text-neutral-900 dark:text-[color:var(--selected-dark-text)]"
-                aria-hidden="true" // Hidden from screen readers
+                className="text-lg font-medium"
+                aria-hidden="true"
               >
                 {translations.menu.file || "Upload File"}
               </h3>

src/composable/ImageUpload.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { Directory, Filesystem, FilesystemDirectory } from "@capacitor/filesystem";
+import {
+  Directory,
+  Filesystem,
+  FilesystemDirectory,
+} from "@capacitor/filesystem";
 import Icon from "@/components/UI/Icon";
 
 interface ImageUploadProps {
@@ -100,20 +104,18 @@ const ImageUploadComponent: React.FC<ImageUploadProps> = ({
     <div>
       {/* Conditionally render content based on `menu` value */}
       {menu ? (
-        <div className="flex items-center p-2 rounded-lg text-black dark:text-[color:var(--selected-dark-text)] cursor-pointer hover:bg-neutral-100 dark:hover:bg-[#353333] transition duration-200">
+        <div className="flex items-center rounded-lg transition">
           <button
             onClick={triggerFileInput}
             className="flex items-center cursor-pointer"
             aria-label={translations.menu.image}
           >
             {/* Icon */}
-            <Icon name="ImageLine" />
+            <Icon name="ImageLine" className={`mr-2 ltr:ml-2 text-lg`} />
 
             {/* Text Container */}
             <div className="flex flex-col text-left">
-              <h3 className="font-medium text-neutral-900 dark:text-[color:var(--selected-dark-text)]">
-                {translations.menu.image}
-              </h3>
+              <h3 className="text-lg font-medium">{translations.menu.image}</h3>
             </div>
           </button>
 

src/composable/VideoUpload.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { Directory, Filesystem, FilesystemDirectory } from "@capacitor/filesystem";
+import {
+  Directory,
+  Filesystem,
+  FilesystemDirectory,
+} from "@capacitor/filesystem";
 import Icon from "@/components/UI/Icon";
 
 interface FileUploadProps {
@@ -78,7 +82,7 @@ const VideoUploadComponent: React.FC<FileUploadProps> = ({
     <div>
       {/* Conditionally render content based on `menu` value */}
       {menu ? (
-        <div className="flex items-center p-2 rounded-lg text-black dark:text-[color:var(--selected-dark-text)] cursor-pointer hover:bg-neutral-100 dark:hover:bg-[#353333] transition duration-200">
+        <div className="flex items-center rounded-lg transition">
           <button
             onClick={() => {
               const inputElement = document.getElementById(
@@ -88,17 +92,15 @@ const VideoUploadComponent: React.FC<FileUploadProps> = ({
                 inputElement.click();
               }
             }}
-            className="flex items-center"
+            className="flex items-center cursor-pointer"
             aria-label={translations.menu.video}
           >
             {/* Icon */}
-            <Icon name="Video" />
+            <Icon name="Video" className={`mr-2 ltr:ml-2 text-lg`} />
 
             {/* Text Container */}
             <div className="flex flex-col text-left">
-              <h3 className="font-medium text-neutral-900 dark:text-[color:var(--selected-dark-text)]">
-                {translations.menu.video}
-              </h3>
+              <h3 className="text-lg font-medium">{translations.menu.video}</h3>
             </div>
           </button>