refactor: file context menu icons

packages/web/src/javascripts/Components/FileContextMenu/FileContextMenuBackupOption.tsx

@@ -3,6 +3,7 @@ import MenuItem from '../Menu/MenuItem'
 import { useApplication } from '../ApplicationProvider'
 import { FileBackupRecord, FileItem } from '@standardnotes/snjs'
 import { dateToStringStyle1 } from '@/Utils/DateUtils'
+import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 
 export const FileContextMenuBackupOption: FunctionComponent<{ file: FileItem }> = ({ file }) => {
   const application = useApplication()
@@ -28,7 +29,7 @@ export const FileContextMenuBackupOption: FunctionComponent<{ file: FileItem }>
       {backupInfo && (
         <MenuItem
           icon={'check-circle'}
-          iconClassName={'text-success mt-1'}
+          iconClassName={`text-success mt-1 ${MenuItemIconSize}`}
           className={'items-start'}
           onClick={openFileBackup}
         >
@@ -43,7 +44,7 @@ export const FileContextMenuBackupOption: FunctionComponent<{ file: FileItem }>
         <MenuItem
           icon={'safe-square'}
           className={'items-start'}
-          iconClassName={'text-neutral mt-1'}
+          iconClassName={`text-neutral mt-1 ${MenuItemIconSize}`}
           onClick={configureFileBackups}
         >
           <div className="ml-2">

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -102,7 +102,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           void filesController.setProtectionForFiles(hasProtectedFiles, selectedFiles)
         }}
       >
-        <Icon type="lock" className="mr-2 text-neutral" />
+        <Icon type="lock" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
         Password protect
       </MenuSwitchButtonItem>
       <HorizontalSeparator classes="my-1" />
@@ -111,7 +111,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           void filesController.downloadFiles(selectedFiles)
         }}
       >
-        <Icon type="download" className="mr-2 text-neutral" />
+        <Icon type="download" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
         Download
       </MenuItem>
       {shouldShowRenameOption && (
@@ -120,7 +120,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
             renameToggleCallback?.(true)
           }}
         >
-          <Icon type="pencil" className="mr-2 text-neutral" />
+          <Icon type="pencil" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
           Rename
         </MenuItem>
       )}
@@ -130,7 +130,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           void filesController.deleteFilesPermanently(selectedFiles)
         }}
       >
-        <Icon type="trash" className="mr-2 text-danger" />
+        <Icon type="trash" className={`mr-2 text-danger ${MenuItemIconSize}`} />
         <span className="text-danger">Delete permanently</span>
       </MenuItem>
 

packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx

@@ -59,7 +59,7 @@ const AddTagOption: FunctionComponent<Props> = ({
         ref={buttonRef}
       >
         <div className="flex items-center">
-          <Icon type="hashtag" className={`${iconClassName} mr-2 text-neutral`} />
+          <Icon type="hashtag" className={iconClassName} />
           Add tag
         </div>
         <Icon type="chevron-right" className="text-neutral" />