From 7e83932c96d9c2a1a4e625af085f8e740db264d3 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sat, 9 Nov 2024 15:40:43 +0400 Subject: [PATCH] Messaage: Fixes for Context Menu, Report and Payment Modal (#5178) --- src/assets/font-icons/edited.svg | 6 + .../middle/message/LastEditTimeMenuItem.tsx | 12 +- .../middle/message/MessageContextMenu.tsx | 14 +- .../middle/message/ReadTimeMenuItem.tsx | 41 +- .../middle/message/TimeMenuItem.module.scss | 1 + .../modals/reportModal/ReportModal.tsx | 6 +- src/components/payment/PaymentModal.scss | 2 +- src/styles/icons.scss | 354 +++++++++--------- src/styles/icons.woff | Bin 30892 -> 31012 bytes src/styles/icons.woff2 | Bin 25860 -> 25956 bytes src/types/icons/font.ts | 1 + 11 files changed, 222 insertions(+), 215 deletions(-) create mode 100644 src/assets/font-icons/edited.svg diff --git a/src/assets/font-icons/edited.svg b/src/assets/font-icons/edited.svg new file mode 100644 index 000000000..a63e43b4a --- /dev/null +++ b/src/assets/font-icons/edited.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/middle/message/LastEditTimeMenuItem.tsx b/src/components/middle/message/LastEditTimeMenuItem.tsx index 0056be0c1..6c3aead9a 100644 --- a/src/components/middle/message/LastEditTimeMenuItem.tsx +++ b/src/components/middle/message/LastEditTimeMenuItem.tsx @@ -7,7 +7,6 @@ import { formatDateAtTime } from '../../../util/dates/dateFormat'; import useOldLang from '../../../hooks/useOldLang'; import MenuItem from '../../ui/MenuItem'; -import MenuSeparator from '../../ui/MenuSeparator'; import Skeleton from '../../ui/placeholder/Skeleton'; import styles from './TimeMenuItem.module.scss'; @@ -24,13 +23,10 @@ function LastEditTimeMenuItem({ const shouldRenderSkeleton = !editDate; return ( - <> - - - {shouldRenderSkeleton ? : Boolean(editDate) - && lang('Chat.PrivateMessageEditTimestamp.Date', formatDateAtTime(lang, editDate * 1000))} - - + + {shouldRenderSkeleton ? : Boolean(editDate) + && lang('Chat.PrivateMessageEditTimestamp.Date', formatDateAtTime(lang, editDate * 1000))} + ); } diff --git a/src/components/middle/message/MessageContextMenu.tsx b/src/components/middle/message/MessageContextMenu.tsx index 274b23a64..e00737cda 100644 --- a/src/components/middle/message/MessageContextMenu.tsx +++ b/src/components/middle/message/MessageContextMenu.tsx @@ -483,11 +483,6 @@ const MessageContextMenu: FC = ({ {lang('HideAd')} )} - {isEdited && ( - - )} {(canShowSeenBy || canShowReactionsCount) && !isSponsoredMessage && ( <> @@ -523,15 +518,22 @@ const MessageContextMenu: FC = ({ )} + {((!isSponsoredMessage && (canLoadReadDate || shouldRenderShowWhen)) || isEdited) && ( + + )} {!isSponsoredMessage && (canLoadReadDate || shouldRenderShowWhen) && ( )} + {isEdited && ( + + )} ); diff --git a/src/components/middle/message/ReadTimeMenuItem.tsx b/src/components/middle/message/ReadTimeMenuItem.tsx index 5901f08f5..30a6b43d3 100644 --- a/src/components/middle/message/ReadTimeMenuItem.tsx +++ b/src/components/middle/message/ReadTimeMenuItem.tsx @@ -8,7 +8,6 @@ import { formatDateAtTime } from '../../../util/dates/dateFormat'; import useOldLang from '../../../hooks/useOldLang'; import MenuItem from '../../ui/MenuItem'; -import MenuSeparator from '../../ui/MenuSeparator'; import Skeleton from '../../ui/placeholder/Skeleton'; import Transition from '../../ui/Transition'; @@ -18,12 +17,11 @@ type OwnProps = { message: ApiMessage; shouldRenderShowWhen?: boolean; canLoadReadDate?: boolean; - menuSeparatorSize: 'thin' | 'thick'; closeContextMenu: NoneToVoidFunction; }; function ReadTimeMenuItem({ - message, shouldRenderShowWhen, canLoadReadDate, closeContextMenu, menuSeparatorSize, + message, shouldRenderShowWhen, canLoadReadDate, closeContextMenu, }: OwnProps) { const { openPrivacySettingsNoticeModal } = getActions(); const lang = useOldLang(); @@ -36,26 +34,23 @@ function ReadTimeMenuItem({ }; return ( - <> - - - - {shouldRenderSkeleton ? : ( - <> - {Boolean(readDate) && lang('PmReadAt', formatDateAtTime(lang, readDate * 1000))} - {!readDate && shouldRenderShowWhen && ( -
- {lang('PmRead')} - - {lang('PmReadShowWhen')} - -
- )} - - )} - - - + + + {shouldRenderSkeleton ? : ( + <> + {Boolean(readDate) && lang('PmReadAt', formatDateAtTime(lang, readDate * 1000))} + {!readDate && shouldRenderShowWhen && ( +
+ {lang('PmRead')} + + {lang('PmReadShowWhen')} + +
+ )} + + )} + + ); } diff --git a/src/components/middle/message/TimeMenuItem.module.scss b/src/components/middle/message/TimeMenuItem.module.scss index acb3d0ccf..9b54eb239 100644 --- a/src/components/middle/message/TimeMenuItem.module.scss +++ b/src/components/middle/message/TimeMenuItem.module.scss @@ -1,6 +1,7 @@ :global(.MenuItem).item { margin-bottom: 0; font-size: 0.8125rem; + font-weight: 400; cursor: var(--custom-cursor, default); pointer-events: none; --color-skeleton-background: #2121211a; diff --git a/src/components/modals/reportModal/ReportModal.tsx b/src/components/modals/reportModal/ReportModal.tsx index cf62ecb7c..fd516224e 100644 --- a/src/components/modals/reportModal/ReportModal.tsx +++ b/src/components/modals/reportModal/ReportModal.tsx @@ -24,6 +24,7 @@ import Transition, { ACTIVE_SLIDE_CLASS_NAME, TO_SLIDE_CLASS_NAME } from '../../ import styles from './ReportModal.module.scss'; const MAX_DESCRIPTION = 512; +const ADDED_PADDING = 20; export type OwnProps = { modal: TabState['reportModal']; @@ -138,7 +139,7 @@ const ReportModal = ({ requestMeasure(() => { const height = slide.scrollHeight; requestMutation(() => { - transitionRef.current!.style.height = `${height}px`; + transitionRef.current!.style.height = `${height + ADDED_PADDING}px`; }); }); }); @@ -200,10 +201,11 @@ const ReportModal = ({