Message / Context Menu: Better icons (#1734)

src/components/middle/message/MessageContextMenu.tsx

@@ -234,8 +234,8 @@ const MessageContextMenu: FC<OwnProps> = ({
         {canUnfaveSticker && (
           <MenuItem icon="favorite" onClick={onUnfaveSticker}>{lang('Stickers.RemoveFromFavorites')}</MenuItem>
         )}
-        {canCopy && copyOptions.map((options) => (
-          <MenuItem key={options.label} icon="copy" onClick={options.handler}>{lang(options.label)}</MenuItem>
+        {canCopy && copyOptions.map((option) => (
+          <MenuItem key={option.label} icon={option.icon} onClick={option.handler}>{lang(option.label)}</MenuItem>
         ))}
         {canPin && <MenuItem icon="pin" onClick={onPin}>{lang('DialogPin')}</MenuItem>}
         {canUnpin && <MenuItem icon="unpin" onClick={onUnpin}>{lang('DialogUnpin')}</MenuItem>}

src/components/middle/message/helpers/copyOptions.ts

@@ -15,6 +15,7 @@ import getMessageIdsForSelectedText from '../../../../util/getMessageIdsForSelec
 
 type ICopyOptions = {
   label: string;
+  icon: string;
   handler: () => void;
 }[];
 
@@ -35,6 +36,7 @@ export function getMessageCopyOptions(
   if (canImageBeCopied) {
     options.push({
       label: 'lng_context_copy_image',
+      icon: 'copy-media',
       handler: () => {
         Promise.resolve(mediaHash ? mediaLoader.fetch(mediaHash, ApiMediaFormat.BlobUrl) : photo!.blobUrl)
           .then(copyImageToClipboard);
@@ -56,6 +58,7 @@ export function getMessageCopyOptions(
 
     options.push({
       label: getCopyLabel(hasSelection),
+      icon: 'copy',
       handler: () => {
         const messageIds = getMessageIdsForSelectedText();
         if (messageIds?.length && onCopyMessages) {
@@ -75,6 +78,7 @@ export function getMessageCopyOptions(
   if (onCopyLink) {
     options.push({
       label: 'lng_context_copy_message_link',
+      icon: 'link',
       handler: () => {
         onCopyLink();
 

src/styles/icons.scss

@@ -51,6 +51,9 @@
 .icon-volume-3:before {
   content: "\e991";
 }
+.icon-copy-media:before {
+  content: "\e995";
+}
 .icon-reaction-filled:before {
   content: "\e994";
 }