feat: updated timer notification design and copy

_locales/en/messages.json

@@ -181,9 +181,8 @@
   "timer": "Timer",
   "timerModeRead": "read",
   "timerModeSent": "sent",
-  "youChangedTheTimer": "You have changed messages to disappear $time$ after they have been $mode$",
-  "timerSetOnSync": "Updated disappearing message timer to $time$",
-  "theyChangedTheTimer": "$name$ has changed messages to disappear $time$ after they have been $mode$",
+  "youChangedTheTimer": "You have set messages to disappear $time$ after they have been $mode$",
+  "theyChangedTheTimer": "$name$ has set messages to disappear $time$ after they have been $mode$",
   "timerOption_0_seconds": "Off",
   "timerOption_5_seconds": "5 seconds",
   "timerOption_10_seconds": "10 seconds",
@@ -197,19 +196,6 @@
   "timerOption_1_day": "1 day",
   "timerOption_1_week": "1 week",
   "timerOption_2_weeks": "2 weeks",
-  "disappearingMessages": "Disappearing messages",
-  "disappearingMessagesSubtitle": "This setting applies to everyone in this conversation",
-  "disappearingMessagesModeLabel": "Delete Type",
-  "disappearingMessagesModeOff": "Off",
-  "disappearingMessagesModeAfterRead": "Disappear After Read",
-  "disappearingMessagesModeAfterReadSubtitle": "Messages delete after they have been read.",
-  "disappearingMessagesModeAfterSend": "Disappear After Send",
-  "disappearingMessagesModeAfterSendSubtitle": "Messages delete after they have been sent.",
-  "set": "Set",
-  "changeNickname": "Change Nickname",
-  "clearNickname": "Clear Nickname",
-  "nicknamePlaceholder": "New Nickname",
-  "changeNicknameMessage": "Enter a nickname for this user",
   "timerOption_0_seconds_abbreviated": "off",
   "timerOption_5_seconds_abbreviated": "5s",
   "timerOption_10_seconds_abbreviated": "10s",
@@ -223,10 +209,23 @@
   "timerOption_1_day_abbreviated": "1d",
   "timerOption_1_week_abbreviated": "1w",
   "timerOption_2_weeks_abbreviated": "2w",
+  "disappearingMessages": "Disappearing messages",
+  "disappearingMessagesSubtitle": "This setting applies to everyone in this conversation",
+  "disappearingMessagesModeLabel": "Delete Type",
+  "disappearingMessagesModeOff": "Off",
+  "disappearingMessagesModeAfterRead": "Disappear After Read",
+  "disappearingMessagesModeAfterReadSubtitle": "Messages delete after they have been read.",
+  "disappearingMessagesModeAfterSend": "Disappear After Send",
+  "disappearingMessagesModeAfterSendSubtitle": "Messages delete after they have been sent.",
   "disappearingMessagesDisabled": "Disappearing messages disabled",
   "disabledDisappearingMessages": "$name$ has turned off disappearing messages.",
-  "youDisabledDisappearingMessages": "You disabled disappearing messages.",
+  "youDisabledDisappearingMessages": "You have turned off disappearing messages.",
   "timerSetTo": "Disappearing message time set to $time$",
+  "set": "Set",
+  "changeNickname": "Change Nickname",
+  "clearNickname": "Clear Nickname",
+  "nicknamePlaceholder": "New Nickname",
+  "changeNicknameMessage": "Enter a nickname for this user",
   "noteToSelf": "Note to Self",
   "hideMenuBarTitle": "Hide Menu Bar",
   "hideMenuBarDescription": "Toggle system menu bar visibility.",

ts/components/conversation/ExpireTimer.tsx

@@ -63,6 +63,7 @@ export const ExpireTimer = (props: Props) => {
   if (timeLeft <= 60) {
     return <ExpireTimerCount color={expireTimerColor}>{timeLeft}</ExpireTimerCount>;
   }
+
   const bucket = getTimerBucketIcon(expirationTimestamp, expirationLength);
 
   return (

ts/components/conversation/TimerNotification.tsx

@@ -2,8 +2,12 @@ import React from 'react';
 
 import { missingCaseError } from '../../util/missingCaseError';
 import { PropsForExpirationTimer } from '../../state/ducks/conversations';
-import { NotificationBubble } from './message/message-item/notification-bubble/NotificationBubble';
+
 import { ExpirableReadableMessage } from './message/message-item/ExpirableReadableMessage';
+import { SessionIcon } from '../icon';
+import { SpacerSM } from '../basic/Text';
+import { Flex } from '../basic/Flex';
+import { Text } from '../basic/Text';
 
 export const TimerNotification = (props: PropsForExpirationTimer) => {
   const {
@@ -32,16 +36,11 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
         : window.i18n('theyChangedTheTimer', [contact, timespan, mode]);
       break;
     case 'fromMe':
+    case 'fromSync':
       textToRender = disabled
         ? window.i18n('youDisabledDisappearingMessages')
         : window.i18n('youChangedTheTimer', [timespan, mode]);
       break;
-    // TODO update synced control message?
-    case 'fromSync':
-      textToRender = disabled
-        ? window.i18n('disappearingMessagesDisabled')
-        : window.i18n('timerSetOnSync', [timespan]);
-      break;
     default:
       throw missingCaseError(type);
   }
@@ -49,6 +48,7 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
   if (!textToRender || textToRender.length === 0) {
     throw new Error('textToRender invalid key used TimerNotification');
   }
+
   return (
     <ExpirableReadableMessage
       convoId={props.convoId}
@@ -61,11 +61,20 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
       isExpired={props.isExpired}
       key={`readable-message-${messageId}`}
     >
-      <NotificationBubble
-        iconType="stopwatch"
-        iconColor="inherit"
-        notificationText={textToRender}
-      />
+      <Flex
+        container={true}
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        width="90%"
+        maxWidth="700px"
+        margin="10px auto"
+        padding="5px 10px"
+      >
+        <SessionIcon iconType="stopwatch" iconColor="inherit" iconSize="medium" />
+        <SpacerSM />
+        <Text text={textToRender} />
+      </Flex>
     </ExpirableReadableMessage>
   );
 };

ts/components/icon/Icons.tsx

@@ -401,8 +401,8 @@ export const icons = {
   },
   stopwatch: {
     path:
-      'm282.523438 1.34375c-8.800782-.886719-17.640626-1.328125-26.484376-1.3242188h-.265624c-14.636719.2421878-26.339844 12.2421878-26.214844 26.8828128v105.53125c-.035156 3.554687.6875 7.074218 2.117187 10.328125 4.582031 10.90625 15.863281 17.429687 27.597657 15.964843 13.554687-2.03125 23.5-13.792968 23.25-27.492187v-76.484375c98.890624 12.980469 173.726562 95.839844 176.59375 195.539062 2.867187 99.699219-67.078126 186.726563-165.058594 205.367188-97.980469 18.644531-195-36.613281-228.945313-130.398438-33.945312-93.785156 5.226563-198.339843 92.441407-246.730468 11.59375-6.566406 16.445312-20.769532 11.289062-33.054688l-.03125-.074218c-2.890625-6.988282-8.625-12.40625-15.765625-14.902344-7.136719-2.492188-15-1.820313-21.613281 1.84375-110.347656 61.484375-159.351563 194.269531-115.402344 312.695312 43.945312 118.429688 167.710938 187.097656 291.453125 161.710938 123.742187-25.386719 210.472656-137.238282 204.238281-263.40625-6.230468-126.164063-103.558594-228.925782-229.199218-241.996094zm0 0 M159.300781 170.949219c10.652344 28.050781 45.503907 94.28125 71.574219 122.480469 16.027344 18.09375 43.394531 20.515624 62.351562 5.523437 9.484376-7.957031 15.191407-19.527344 15.738282-31.894531.542968-12.363282-4.132813-24.390625-12.878906-33.148438-27.265626-27.261718-96.464844-63.382812-125.480469-74.398437-3.25-1.222657-6.917969-.417969-9.363281 2.050781-2.441407 2.472656-3.203126 6.148438-1.941407 9.386719zm0 0',
-    viewBox: '0 0 512 512',
+      'M3.72595 5.64444C4.38882 6.30732 5.06159 6.93556 5.68489 7.51434C6.32303 8.09312 7.01064 8.71147 7.71309 9.30509C8.5392 10.0075 9.19219 10.527 9.83527 10.9969C10.043 11.1503 10.2904 11.2294 10.5476 11.2294C10.8741 11.2294 11.1956 11.0958 11.4232 10.8584C11.8882 10.3786 11.8734 9.60685 11.3935 9.14184C10.8197 8.59275 10.1964 8.0387 9.36038 7.34615C8.65298 6.75748 7.9258 6.18859 7.24808 5.65928C6.56542 5.14481 5.83329 4.59077 5.06159 4.05156C4.17116 3.42332 3.46871 2.95832 2.78605 2.54773C2.67227 2.47848 2.53871 2.44385 2.40515 2.44385C2.22706 2.44385 2.05392 2.50816 1.92036 2.62688C1.61365 2.89401 1.58397 3.35901 1.8511 3.66571C2.37546 4.26922 2.95424 4.88263 3.72595 5.64444V5.64444Z M10.5571 0.0595703C10.0228 0.0595703 9.58752 0.494891 9.58752 1.02915V4.71948C9.58752 5.25373 10.0228 5.68905 10.5571 5.68905C11.0914 5.68905 11.5267 5.25373 11.5267 4.71948V2.05809C15.5237 2.54287 18.6155 6.00565 18.6155 10.062C18.6155 14.5043 14.9993 18.1204 10.5571 18.1204C6.11485 18.1204 2.49872 14.5043 2.49872 10.0571C2.49872 9.52284 2.0634 9.08752 1.52915 9.08752C0.994891 9.08752 0.55957 9.52284 0.55957 10.0571C0.55957 15.5728 5.04634 20.0546 10.5571 20.0546C16.0679 20.0546 20.5546 15.5679 20.5546 10.0571C20.5546 4.54634 16.0728 0.0595703 10.5571 0.0595703Z',
+    viewBox: '0 0 21 21',
     ratio: 1,
   },
   sun: {

ts/models/conversation.ts

@@ -1238,7 +1238,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
       ...messageAttributes,
       conversationId: this.id,
       type: 'incoming',
-      direction: 'outgoing',
+      direction: 'incoming',
     });
   }
 

ts/receiver/contentMessage.ts

@@ -414,7 +414,7 @@ export async function innerHandleSwarmContentMessage(
 
       expireUpdate = {
         expirationType,
-        // TODO rename to expireTimer
+        // TODO rename to expirationTimer?
         expireTimer,
         lastDisappearingMessageChangeTimestamp,
       };

ts/types/LocalizerKeys.ts

@@ -182,7 +182,6 @@ export type LocalizerKeys =
   | 'timerModeRead'
   | 'timerModeSent'
   | 'youChangedTheTimer'
-  | 'timerSetOnSync'
   | 'theyChangedTheTimer'
   | 'timerOption_0_seconds'
   | 'timerOption_5_seconds'
@@ -197,19 +196,6 @@ export type LocalizerKeys =
   | 'timerOption_1_day'
   | 'timerOption_1_week'
   | 'timerOption_2_weeks'
-  | 'disappearingMessages'
-  | 'disappearingMessagesSubtitle'
-  | 'disappearingMessagesModeLabel'
-  | 'disappearingMessagesModeOff'
-  | 'disappearingMessagesModeAfterRead'
-  | 'disappearingMessagesModeAfterReadSubtitle'
-  | 'disappearingMessagesModeAfterSend'
-  | 'disappearingMessagesModeAfterSendSubtitle'
-  | 'set'
-  | 'changeNickname'
-  | 'clearNickname'
-  | 'nicknamePlaceholder'
-  | 'changeNicknameMessage'
   | 'timerOption_0_seconds_abbreviated'
   | 'timerOption_5_seconds_abbreviated'
   | 'timerOption_10_seconds_abbreviated'
@@ -223,10 +209,23 @@ export type LocalizerKeys =
   | 'timerOption_1_day_abbreviated'
   | 'timerOption_1_week_abbreviated'
   | 'timerOption_2_weeks_abbreviated'
+  | 'disappearingMessages'
+  | 'disappearingMessagesSubtitle'
+  | 'disappearingMessagesModeLabel'
+  | 'disappearingMessagesModeOff'
+  | 'disappearingMessagesModeAfterRead'
+  | 'disappearingMessagesModeAfterReadSubtitle'
+  | 'disappearingMessagesModeAfterSend'
+  | 'disappearingMessagesModeAfterSendSubtitle'
   | 'disappearingMessagesDisabled'
   | 'disabledDisappearingMessages'
   | 'youDisabledDisappearingMessages'
   | 'timerSetTo'
+  | 'set'
+  | 'changeNickname'
+  | 'clearNickname'
+  | 'nicknamePlaceholder'
+  | 'changeNicknameMessage'
   | 'noteToSelf'
   | 'hideMenuBarTitle'
   | 'hideMenuBarDescription'

ts/util/expiringMessages.ts

@@ -238,7 +238,7 @@ export function setExpirationStartTimestamp(
       message
     );
   } else {
-    console.log(`WIP: Invalid disappearing message mode set. Ignoring.`, message);
+    console.log(`WIP: Invalid disappearing message mode "${mode}" set. Ignoring`);
     return null;
   }