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 = ({