Show the system contacts icon in more places

stylesheets/components/ContactListItem.scss

@@ -121,3 +121,9 @@
     }
   }
 }
+
+.ContactListItem__contact-icon {
+  width: 14px;
+  height: 14px;
+  color: currentColor;
+}

stylesheets/components/ContactModal.scss

@@ -29,6 +29,14 @@
     white-space: nowrap;
   }
 
+  &__name__contact-icon {
+    height: 22px;
+    width: 22px;
+    @include any-theme {
+      background-color: currentColor;
+    }
+  }
+
   &__name__chevron {
     flex-shrink: 0;
 

stylesheets/components/ConversationDetailsHeader.scss

@@ -21,14 +21,17 @@
   &__title {
     @include font-title-1;
     font-weight: 400;
-    align-items: baseline;
-    display: flex;
-    justify-content: center;
     padding-bottom: 8px;
     padding-top: 12px;
     user-select: text;
   }
 
+  &__title-contact-icon {
+    width: 22px;
+    height: 22px;
+    background-color: currentColor;
+  }
+
   &__subtitle {
     @include font-body-1;
     color: $color-gray-60;

ts/components/ConversationList.stories.tsx

@@ -140,6 +140,20 @@ export function ContactDirect(): JSX.Element {
   );
 }
 
+export function ContactInSystemContacts(): JSX.Element {
+  const contact = defaultConversations[0];
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.Contact,
+          contact: { ...contact, systemGivenName: contact.title },
+        },
+      ]}
+    />
+  );
+}
+
 export function ContactDirectWithContextMenu(): JSX.Element {
   return (
     <Wrapper

ts/components/Tooltip.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { noop } from 'lodash';
 import { Manager, Reference, Popper } from 'react-popper';
 import type { StrictModifiers } from '@popperjs/core';
+import { createPortal } from 'react-dom';
 import type { Theme } from '../util/theme';
 import { themeClassName } from '../util/theme';
 import { refMerger } from '../util/refMerger';
@@ -169,34 +170,37 @@ export function Tooltip({
           </TooltipEventWrapper>
         )}
       </Reference>
-      <Popper
+      {createPortal(
-        placement={direction}
+        <Popper
-        modifiers={[offsetDistanceModifier(12), ...popperModifiers]}
+          placement={direction}
-      >
+          modifiers={[offsetDistanceModifier(12), ...popperModifiers]}
-        {({ arrowProps, placement, ref, style }) =>
+        >
-          showTooltip && (
+          {({ arrowProps, placement, ref, style }) =>
-            <div
+            showTooltip && (
-              className={classNames(
+              <div
-                'module-tooltip',
+                className={classNames(
-                tooltipThemeClassName,
+                  'module-tooltip',
-                className
+                  tooltipThemeClassName,
-              )}
+                  className
-              ref={ref}
+                )}
-              style={style}
+                ref={ref}
-              data-placement={placement}
+                style={style}
-            >
+                data-placement={placement}
-              {content}
+              >
-              {!hideArrow ? (
+                {content}
-                <div
+                {!hideArrow ? (
-                  className="module-tooltip-arrow"
+                  <div
-                  ref={arrowProps.ref}
+                    className="module-tooltip-arrow"
-                  style={arrowProps.style}
+                    ref={arrowProps.ref}
-                />
+                    style={arrowProps.style}
-              ) : null}
+                  />
-            </div>
+                ) : null}
-          )
+              </div>
-        }
+            )
-      </Popper>
+          }
+        </Popper>,
+        document.body
+      )}
     </Manager>
   );
 }

ts/components/conversation/ContactModal.stories.tsx

@@ -119,3 +119,11 @@ WithUnreadStories.args = {
   hasStories: HasStories.Unread,
 };
 WithUnreadStories.storyName = 'Unread Stories';
+
+export const InSystemContacts = Template.bind({});
+InSystemContacts.args = {
+  contact: {
+    ...defaultContact,
+    systemGivenName: defaultContact.title,
+  },
+};

ts/components/conversation/ContactModal.tsx

@@ -23,6 +23,8 @@ import { RemoveGroupMemberConfirmationDialog } from './RemoveGroupMemberConfirma
 import { missingCaseError } from '../../util/missingCaseError';
 import { UserText } from '../UserText';
 import { Button, ButtonIconType, ButtonVariant } from '../Button';
+import { isInSystemContacts } from '../../util/isInSystemContacts';
+import { InContactsIcon } from '../InContactsIcon';
 
 export type PropsDataType = {
   areWeASubscriber: boolean;
@@ -200,7 +202,6 @@ export function ContactModal({
   switch (view) {
     case ContactModalView.Default: {
       const preferredBadge: undefined | BadgeType = badges[0];
-
       return (
         <Modal
           modalName="ContactModal"
@@ -249,6 +250,15 @@ export function ContactModal({
             >
               <div className="ContactModal__name__text">
                 <UserText text={contact.title} />
+                {isInSystemContacts(contact) && (
+                  <span>
+                    {' '}
+                    <InContactsIcon
+                      className="ContactModal__name__contact-icon"
+                      i18n={i18n}
+                    />
+                  </span>
+                )}
               </div>
               <i className="ContactModal__name__chevron" />
             </button>

ts/components/conversation/conversation-details/ConversationDetails.stories.tsx

@@ -142,6 +142,22 @@ export function Basic(): JSX.Element {
   return <ConversationDetails {...props} />;
 }
 
+export function SystemContact(): JSX.Element {
+  const props = createProps();
+  const contact = getDefaultConversation();
+
+  return (
+    <ConversationDetails
+      {...props}
+      isGroup={false}
+      conversation={{
+        ...contact,
+        systemGivenName: contact.title,
+      }}
+    />
+  );
+}
+
 export function AsAdmin(): JSX.Element {
   const props = createProps();
 

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -15,6 +15,8 @@ import { assertDev } from '../../../util/assert';
 import { BadgeDialog } from '../../BadgeDialog';
 import type { BadgeType } from '../../../badges/types';
 import { UserText } from '../../UserText';
+import { isInSystemContacts } from '../../../util/isInSystemContacts';
+import { InContactsIcon } from '../../InContactsIcon';
 
 export type Props = {
   areWeASubscriber: boolean;
@@ -211,7 +213,15 @@ export function ConversationDetailsHeader({
       >
         <div className="ConversationDetailsHeader__title">
           <UserText text={conversation.title} />
-
+          {isInSystemContacts(conversation) && (
+            <span>
+              {' '}
+              <InContactsIcon
+                className="ConversationDetailsHeader__title-contact-icon"
+                i18n={i18n}
+              />
+            </span>
+          )}
           <span className="ConversationDetailsHeader__about-icon" />
         </div>
       </button>

ts/components/conversationList/ContactListItem.tsx

@@ -17,6 +17,7 @@ import { Intl } from '../Intl';
 import { ConfirmationDialog } from '../ConfirmationDialog';
 import { isSignalConversation } from '../../util/isSignalConversation';
 import { isInSystemContacts } from '../../util/isInSystemContacts';
+import { InContactsIcon } from '../InContactsIcon';
 
 export type ContactListItemConversationType = Pick<
   ConversationType,
@@ -281,7 +282,25 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
             />
           }
           trailing={trailing}
-          title={headerName}
+          title={
+            <>
+              {headerName}
+              {isInSystemContacts({
+                type,
+                name,
+                systemGivenName,
+                systemFamilyName,
+              }) && (
+                <span>
+                  {' '}
+                  <InContactsIcon
+                    className="ContactListItem__contact-icon"
+                    i18n={i18n}
+                  />
+                </span>
+              )}
+            </>
+          }
           subtitle={messageText}
           subtitleMaxLines={1}
           onClick={onClick ? () => onClick(id) : undefined}