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 ? (