Add verified badge to Notes to Self

stylesheets/components/ContactModal.scss

@@ -143,4 +143,23 @@
       );
     }
   }
+  
+  &__official-badge {
+    background: url('../images/icons/v2/official-20.svg') no-repeat center;
+    display: inline-block;
+    height: 18px;
+    margin-left: 4px;
+    margin-bottom: -4px;
+    width: 18px;
+  }
+
+  &__official-badge__large {
+    background: url('../images/icons/v2/official-20.svg') no-repeat center;
+    display: inline-block;
+    height: 18px;
+    margin-left: 9px;
+    margin-bottom: -2px;
+    width: 18px;
+    scale: 1.3;
+  }
 }

stylesheets/components/StoryListItem.scss

@@ -180,12 +180,4 @@
     width: 12px;
     @include color-svg('../images/icons/v2/chevron-right-20.svg', $color-white);
   }
-
-  &__signal-official {
-    background: url('../images/icons/v2/official-20.svg') no-repeat center;
-    display: inline-block;
-    height: 16px;
-    margin-left: 6px;
-    width: 16px;
-  }
 }

ts/components/conversation/ContactName.tsx

@@ -12,6 +12,7 @@ export type PropsType = {
   contactNameColor?: ContactNameColorType;
   firstName?: string;
   isSignalConversation?: boolean;
+  isMe?: boolean;
   module?: string;
   preferFirstName?: boolean;
   title: string;
@@ -21,6 +22,7 @@ export function ContactName({
   contactNameColor,
   firstName,
   isSignalConversation,
+  isMe,
   module,
   preferFirstName,
   title,
@@ -43,8 +45,8 @@ export function ContactName({
       dir="auto"
     >
       <Emojify text={text} />
-      {isSignalConversation && (
+      {(isSignalConversation || isMe) && (
-        <span className="StoryListItem__signal-official" />
+        <span className="ContactModal__official-badge" />
       )}
     </span>
   );

ts/components/conversation/ConversationHeader.tsx

@@ -177,6 +177,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       return (
         <div className="module-ConversationHeader__header__info__title">
           {i18n('noteToSelf')}
+          <span className="ContactModal__official-badge" />
         </div>
       );
     }

ts/components/conversation/ConversationHero.tsx

@@ -195,6 +195,7 @@ export function ConversationHero({
               title={title}
             />
           )}
+          {isMe && (<span className="ContactModal__official-badge__large" />)}
         </h1>
         {about && !isMe && (
           <div className="module-about__container">

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

@@ -107,6 +107,7 @@ export function ConversationDetailsHeader({
     <div>
       <div className={bem('title')}>
         <Emojify text={isMe ? i18n('noteToSelf') : conversation.title} />
+        {isMe && (<span className="ContactModal__official-badge__large" />)}
       </div>
     </div>
   );

ts/components/conversationList/ContactCheckbox.tsx

@@ -76,9 +76,10 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
     const disabled = Boolean(disabledReason);
 
     const headerName = isMe ? (
-      <span className={HEADER_CONTACT_NAME_CLASS_NAME}>
+      <ContactName module={HEADER_CONTACT_NAME_CLASS_NAME} 
-        {i18n('noteToSelf')}
+        title={i18n('noteToSelf')} 
-      </span>
+        isMe={isMe} 
+      />
     ) : (
       <ContactName module={HEADER_CONTACT_NAME_CLASS_NAME} title={title} />
     );

ts/components/conversationList/ContactListItem.tsx

@@ -68,9 +68,11 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
     uuid,
   }) {
     const headerName = isMe ? (
-      <span className={HEADER_CONTACT_NAME_CLASS_NAME}>
+      <ContactName
-        {i18n('noteToSelf')}
+        isMe={isMe}
-      </span>
+        module={HEADER_CONTACT_NAME_CLASS_NAME}
+        title={i18n('noteToSelf')}
+      />
     ) : (
       <ContactName
         isSignalConversation={isSignalConversation({ id, uuid })}

ts/components/conversationList/ConversationListItem.tsx

@@ -106,9 +106,11 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
     const headerName = (
       <>
         {isMe ? (
-          <span className={HEADER_CONTACT_NAME_CLASS_NAME}>
+          <ContactName
-            {i18n('noteToSelf')}
+            module={HEADER_CONTACT_NAME_CLASS_NAME}
-          </span>
+            isMe={isMe}
+            title={i18n('noteToSelf')}
+          />
         ) : (
           <ContactName
             module={HEADER_CONTACT_NAME_CLASS_NAME}