Timer notifications complete

stylesheets/_modules.scss

@@ -33,6 +33,10 @@
 
 .module-contact-name.compact {
   display: block;
+
+  span::after {
+    content: '\00a0';
+  }
 }
 
 // Module: Message
@@ -1242,7 +1246,7 @@
   width: 90%;
   max-width: 700px;
   margin: 10px auto;
-  padding: 5px 20px;
+  padding: 5px 0px;
   border-radius: 4px;
   word-break: break-word;
 }
@@ -1380,7 +1384,7 @@
 
 .module-timer-notification__message {
   display: grid;
-  grid-template-columns: 20px auto 20px;
+  grid-template-columns: 40px auto 40px;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
@@ -1389,7 +1393,6 @@
     align-self: center;
     justify-self: center;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
   }

ts/components/conversation/ContactName.tsx

@@ -28,7 +28,8 @@ export class ContactName extends React.Component<Props> {
     const prefix = module ? module : 'module-contact-name';
 
     const title = name ? name : phoneNumber;
-    const shouldShowProfile = Boolean(profileName && !name);
+    const shouldShowProfile = Boolean(profileName && !profileName);
+
     const styles = (boldProfileName
       ? {
           fontWeight: 'bold',

ts/components/conversation/TimerNotification.tsx

@@ -21,7 +21,6 @@ export class TimerNotification extends React.Component<Props> {
   public renderContents() {
     const {
       i18n,
-      name,
       phoneNumber,
       profileName,
       timespan,
@@ -32,23 +31,14 @@ export class TimerNotification extends React.Component<Props> {
       ? 'disabledDisappearingMessages'
       : 'theyChangedTheTimer';
 
+    const recipient = profileName ?? phoneNumber;
+
     switch (type) {
       case 'fromOther':
         return (
-          <Intl
-            i18n={i18n}
-            id={changeKey}
-            components={[
-              <ContactName
-                i18n={i18n}
-                key="external-1"
-                phoneNumber={phoneNumber}
-                profileName={profileName}
-                name={name}
-              />,
-              timespan,
-            ]}
-          />
+          <>
+            {i18n(changeKey, [recipient, timespan])}
+          </>
         );
       case 'fromMe':
         return disabled

ts/components/session/conversation/SessionConversation.tsx

@@ -521,7 +521,6 @@ export class SessionConversation extends React.Component<any, State> {
     console.log(`[header] HeaderProps:`, headerProps);
     console.log(`[header] Conv: `, conversation);
 
-
     return headerProps;
   }