Release notes UI fixes

ts/components/conversation/ContactName.tsx

@@ -43,6 +43,7 @@ export type PropsType = ContactNameData & {
   module?: string;
   preferFirstName?: boolean;
   onClick?: VoidFunction;
+  largeVerifiedBadge?: boolean;
 };
 
 export function ContactName({
@@ -54,6 +55,7 @@ export function ContactName({
   preferFirstName,
   title,
   onClick,
+  largeVerifiedBadge,
 }: PropsType): JSX.Element {
   const getClassName = getClassNamesFor('module-contact-name', module);
 
@@ -75,7 +77,13 @@ export function ContactName({
     >
       <Emojify text={text} />
       {(isSignalConversation || isMe) && (
-        <span className="ContactModal__official-badge" />
+        <span
+          className={
+            largeVerifiedBadge
+              ? 'ContactModal__official-badge__large'
+              : 'ContactModal__official-badge'
+          }
+        />
       )}
     </WrappingElement>
   );

ts/components/conversation/ConversationHero.stories.tsx

@@ -120,6 +120,8 @@ DirectNoGroupsJustProfile.args = {
 
 export const SignalConversation = Template.bind({});
 SignalConversation.args = {
+  avatarUrl: 'images/profile-avatar.svg',
+  title: 'Signal',
   isSignalConversation: true,
   phoneNumber: casual.phone,
 };

ts/components/conversation/ConversationHero.tsx

@@ -291,10 +291,20 @@ export function ConversationHero({
   let titleElem: JSX.Element | undefined;
 
   if (isMe) {
-    titleElem = <>{i18n('icu:noteToSelf')}</>;
+    titleElem = (
+      <ContactName
+        isMe={isMe}
+        title={i18n('icu:noteToSelf')}
+        largeVerifiedBadge={isMe}
+      />
+    );
   } else if (isSignalConversation || conversationType !== 'direct') {
     titleElem = (
-      <ContactName isSignalConversation={isSignalConversation} title={title} />
+      <ContactName
+        isSignalConversation={isSignalConversation}
+        title={title}
+        largeVerifiedBadge={isSignalConversation}
+      />
     );
   } else if (title) {
     titleElem = (
@@ -336,10 +346,7 @@ export function ConversationHero({
           theme={theme}
           title={title}
         />
-        <h1 className="module-conversation-hero__profile-name">
-          {titleElem}
-          {isMe && <span className="ContactModal__official-badge__large" />}
-        </h1>
+        <h1 className="module-conversation-hero__profile-name">{titleElem}</h1>
         {about && !isMe && (
           <div className="module-about__container">
             <About text={about} />

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

@@ -495,7 +495,7 @@ export function ConversationDetails({
               icon={
                 <ConversationDetailsIcon
                   ariaLabel={i18n('icu:ConversationHero--signal-official-chat')}
-                  icon={IconType.timer}
+                  icon={IconType.official}
                 />
               }
               label={i18n('icu:ConversationHero--signal-official-chat')}

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

@@ -26,6 +26,7 @@ export enum IconType {
   'mention' = 'mention',
   'mute' = 'mute',
   'notifications' = 'notifications',
+  'official' = 'official',
   'reset' = 'reset',
   'share' = 'share',
   'spinner' = 'spinner',