diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 5a4048cfec..cd9a77efc0 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1394,6 +1394,10 @@ "messageformat": "About", "description": "Title of About modal" }, + "icu:AboutContactModal__title--myself": { + "messageformat": "You", + "description": "Title of About modal when viewing your own information" + }, "icu:AboutContactModal__verified": { "messageformat": "Verified", "description": "Text of a button on About modal leading to a safety number modal" diff --git a/stylesheets/components/AboutContactModal.scss b/stylesheets/components/AboutContactModal.scss index e8dc7084fa..b1eb4bebd9 100644 --- a/stylesheets/components/AboutContactModal.scss +++ b/stylesheets/components/AboutContactModal.scss @@ -27,6 +27,7 @@ &__title { @include font-title-2; + font-weight: 500; margin: 0; margin-block-end: 4px; diff --git a/ts/components/GlobalModalContainer.tsx b/ts/components/GlobalModalContainer.tsx index c75b703ba1..2c67ae0cd0 100644 --- a/ts/components/GlobalModalContainer.tsx +++ b/ts/components/GlobalModalContainer.tsx @@ -23,8 +23,6 @@ import { ConfirmationDialog } from './ConfirmationDialog'; import { FormattingWarningModal } from './FormattingWarningModal'; import { SendEditWarningModal } from './SendEditWarningModal'; import { SignalConnectionsModal } from './SignalConnectionsModal'; -import { AboutContactModal } from './conversation/AboutContactModal'; -import type { ExternalPropsType as AboutContactModalPropsType } from './conversation/AboutContactModal'; import { WhatsNewModal } from './WhatsNewModal'; // NOTE: All types should be required for this component so that the smart @@ -76,8 +74,8 @@ export type PropsType = { isSignalConnectionsVisible: boolean; toggleSignalConnectionsModal: () => unknown; // AboutContactModal - aboutContactModalProps: AboutContactModalPropsType | undefined; - toggleAboutContactModal: () => unknown; + isAboutContactModalVisible: boolean; + renderAboutContactModal: () => JSX.Element | null; // StickerPackPreviewModal stickerPackPreviewId: string | undefined; renderStickerPreviewModal: () => JSX.Element | null; @@ -145,8 +143,8 @@ export function GlobalModalContainer({ isSignalConnectionsVisible, toggleSignalConnectionsModal, // AboutContactModal - aboutContactModalProps, - toggleAboutContactModal, + isAboutContactModalVisible, + renderAboutContactModal, // StickerPackPreviewModal stickerPackPreviewId, renderStickerPreviewModal, @@ -260,14 +258,8 @@ export function GlobalModalContainer({ return renderSafetyNumber(); } - if (aboutContactModalProps) { - return ( - - ); + if (isAboutContactModalVisible) { + return renderAboutContactModal(); } if (contactModalState) { diff --git a/ts/components/conversation/AboutContactModal.stories.tsx b/ts/components/conversation/AboutContactModal.stories.tsx index da814e2141..30d14e8096 100644 --- a/ts/components/conversation/AboutContactModal.stories.tsx +++ b/ts/components/conversation/AboutContactModal.stories.tsx @@ -44,6 +44,11 @@ const systemContact = getDefaultConversation({ phoneNumber: '+1 555 123-4567', hasMessages: true, }); +const me = getDefaultConversation({ + isMe: true, + acceptedMessageRequest: true, + hasMessages: true, +}); export default { title: 'Components/Conversation/AboutContactModal', @@ -67,6 +72,10 @@ export function Defaults(args: PropsType): JSX.Element { return ; } +export function Me(args: PropsType): JSX.Element { + return ; +} + export function Verified(args: PropsType): JSX.Element { return ; } diff --git a/ts/components/conversation/AboutContactModal.tsx b/ts/components/conversation/AboutContactModal.tsx index b7241e8d09..b55d43a0c6 100644 --- a/ts/components/conversation/AboutContactModal.tsx +++ b/ts/components/conversation/AboutContactModal.tsx @@ -15,10 +15,6 @@ import { About } from './About'; export type PropsType = Readonly<{ i18n: LocalizerType; onClose: () => void; -}> & - ExternalPropsType; - -export type ExternalPropsType = Readonly<{ conversation: ConversationType; isSignalConnection: boolean; toggleSignalConnectionsModal: () => void; @@ -37,6 +33,8 @@ export function AboutContactModal({ unblurAvatar, onClose, }: PropsType): JSX.Element { + const { isMe } = conversation; + useEffect(() => { // Kick off the expensive hydration of the current sharedGroupNames updateSharedGroups(conversation.id); @@ -70,7 +68,9 @@ export function AboutContactModal({ let statusRow: JSX.Element | undefined; - if (conversation.isBlocked) { + if (isMe) { + // No status for ourselves + } else if (conversation.isBlocked) { statusRow = (
@@ -127,7 +127,9 @@ export function AboutContactModal({

- {i18n('icu:AboutContactModal__title')} + {isMe + ? i18n('icu:AboutContactModal__title--myself') + : i18n('icu:AboutContactModal__title')}

@@ -136,7 +138,7 @@ export function AboutContactModal({
- {conversation.isVerified ? ( + {!isMe && conversation.isVerified ? (