Restore iOS-specific theme; colors on left in android theme

2025-12-24 20:26:24 +00:00 · 2018-10-09 15:56:14 -07:00
parent ca61c9cb85
commit 7d9711ba65
19 changed files with 1280 additions and 538 deletions
--- a/ts/components/conversation/EmbeddedContact.md
+++ b/ts/components/conversation/EmbeddedContact.md
@@ -22,10 +22,10 @@ const contact = {
  onSendMessage: () => console.log('onSendMessage'),
  hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -34,7 +34,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -44,7 +44,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -54,7 +54,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -86,10 +86,10 @@ const contact = {
  },
  hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme}  ios={util.ios}>
  <li>
    <Message
-    conversationColor="green"
+    authorColor="green"
    direction="incoming"
    i18n={util.i18n}
    timestamp={Date.now()}
@@ -97,7 +97,7 @@ const contact = {
  </li>
  <li>
  <Message
-    conversationColor="green"
+    authorColor="green"
    direction="outgoing"
    status="delivered"
    i18n={util.i18n}
@@ -127,10 +127,10 @@ const contact = {
  },
  hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme} type="group">
+<util.ConversationContext theme={util.theme} type="group" ios={util.ios}>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      conversationType="group"
      authorName="Mr. Fire"
      authorAvatarPath={util.gifObjectUrl}
@@ -142,7 +142,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      authorName="Mr. Fire"
      conversationType="group"
@@ -154,7 +154,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      conversationType="group"
      authorName="Mr. Fire"
@@ -187,10 +187,10 @@ const contact = {
  },
  hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -199,7 +199,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -209,7 +209,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -219,7 +219,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -249,10 +249,10 @@ const contact = {
  },
  hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -261,7 +261,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -271,7 +271,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -281,7 +281,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -313,10 +313,10 @@ const contact = {
  },
  hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -325,7 +325,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -335,7 +335,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -345,7 +345,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -372,10 +372,10 @@ const contact = {
  ],
  hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -384,7 +384,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -394,7 +394,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -404,7 +404,7 @@ const contact = {
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -420,10 +420,10 @@ const contact = {

 ```jsx
 const contact = {};
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -432,7 +432,7 @@ const contact = {};
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -442,7 +442,7 @@ const contact = {};
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -452,7 +452,7 @@ const contact = {};
  </li>
  <li>
    <Message
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -501,11 +501,11 @@ const contactWithoutAccount = {
  },
  hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -515,7 +515,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -526,7 +526,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -536,7 +536,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -547,7 +547,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -558,7 +558,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -570,7 +570,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -581,7 +581,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
--- a/ts/components/conversation/ExpireTimer.md
+++ b/ts/components/conversation/ExpireTimer.md
@@ -1,10 +1,10 @@
 ### Countdown at different rates

 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="10 second timer"
@@ -18,7 +18,7 @@
    <Message
      direction="outgoing"
      status="delivered"
-      conversationColor="blue"
+      authorColor="blue"
      text="30 second timer"
      i18n={util.i18n}
      timestamp={Date.now() + 30 * 1000}
@@ -28,7 +28,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="1 minute timer"
@@ -40,7 +40,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="5 minute timer"
@@ -56,10 +56,10 @@
 ### Timer calculations

 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="incoming"
      text="Full timer"
      i18n={util.i18n}
@@ -70,7 +70,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="Full timer"
@@ -82,7 +82,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="incoming"
      text="55 timer"
      i18n={util.i18n}
@@ -93,7 +93,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="55 timer"
@@ -105,7 +105,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="incoming"
      text="30 timer"
      i18n={util.i18n}
@@ -116,7 +116,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="30 timer"
@@ -128,7 +128,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="incoming"
      text="5 timer"
      i18n={util.i18n}
@@ -139,7 +139,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="5 timer"
@@ -151,7 +151,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="incoming"
      text="Expired timer"
      i18n={util.i18n}
@@ -162,7 +162,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="Expired timer"
@@ -174,7 +174,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="incoming"
      text="Expiration is too far away"
      i18n={util.i18n}
@@ -185,7 +185,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="Expiration is too far away"
@@ -197,7 +197,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="incoming"
      text="Already expired"
      i18n={util.i18n}
@@ -208,7 +208,7 @@
  </li>
  <li>
    <Message
-      conversationColor="blue"
+      authorColor="blue"
      direction="outgoing"
      status="delivered"
      text="Already expired"
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -68,7 +68,7 @@ export interface Props {
  authorProfileName?: string;
  /** Note: this should be formatted for display */
  authorPhoneNumber: string;
-  conversationColor: Color;
+  authorColor?: Color;
  conversationType: 'group' | 'direct';
  attachment?: Attachment;
  quote?: {
@@ -78,6 +78,7 @@ export interface Props {
    authorPhoneNumber: string;
    authorProfileName?: string;
    authorName?: string;
+    authorColor?: Color;
    onClick?: () => void;
    referencedMessageNotFound: boolean;
  };
@@ -556,13 +557,7 @@ export class Message extends React.Component<Props, State> {
  }

  public renderQuote() {
-    const {
-      conversationType,
-      conversationColor,
-      direction,
-      i18n,
-      quote,
-    } = this.props;
+    const { conversationType, direction, i18n, quote } = this.props;

    if (!quote) {
      return null;
@@ -581,7 +576,7 @@ export class Message extends React.Component<Props, State> {
        authorPhoneNumber={quote.authorPhoneNumber}
        authorProfileName={quote.authorProfileName}
        authorName={quote.authorName}
-        conversationColor={conversationColor}
+        authorColor={quote.authorColor}
        referencedMessageNotFound={quote.referencedMessageNotFound}
        isFromMe={quote.isFromMe}
        withContentAbove={withContentAbove}
@@ -644,7 +639,7 @@ export class Message extends React.Component<Props, State> {
      authorPhoneNumber,
      authorProfileName,
      collapseMetadata,
-      conversationColor,
+      authorColor,
      conversationType,
      direction,
      i18n,
@@ -662,7 +657,7 @@ export class Message extends React.Component<Props, State> {
      <div className="module-message__author-avatar">
        <Avatar
          avatarPath={authorAvatarPath}
-          color={conversationColor}
+          color={authorColor}
          conversationType="direct"
          i18n={i18n}
          name={authorName}
@@ -870,7 +865,7 @@ export class Message extends React.Component<Props, State> {
  public render() {
    const {
      authorPhoneNumber,
-      conversationColor,
+      authorColor,
      direction,
      id,
      timestamp,
@@ -899,8 +894,8 @@ export class Message extends React.Component<Props, State> {
          className={classNames(
            'module-message__container',
            `module-message__container--${direction}`,
-            direction === 'outgoing'
-              ? `module-message__container--outgoing-${conversationColor}`
+            direction === 'incoming'
+              ? `module-message__container--incoming-${authorColor}`
              : null
          )}
        >
--- a/ts/components/conversation/MessageDetail.md
+++ b/ts/components/conversation/MessageDetail.md
@@ -6,7 +6,7 @@
    disableMenu: true,
    direction: 'incoming',
    timestamp: Date.now(),
-    conversationColor: 'pink',
+    authorColor: 'pink',
    text:
      'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
    onDelete: () => console.log('onDelete'),
@@ -31,7 +31,7 @@
    disableMenu: true,
    direction: 'outgoing',
    timestamp: Date.now(),
-    conversationColor: 'pink',
+    authorColor: 'pink',
    text:
      'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
    status: 'read',
@@ -68,7 +68,7 @@
    disableMenu: true,
    direction: 'outgoing',
    timestamp: Date.now(),
-    conversationColor: 'pink',
+    authorColor: 'pink',
    text:
      'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
    status: 'sending',
@@ -94,7 +94,7 @@
    disableMenu: true,
    direction: 'outgoing',
    timestamp: Date.now(),
-    conversationColor: 'pink',
+    authorColor: 'pink',
    text:
      'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
    status: 'error',
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
--- a/ts/components/conversation/Quote.tsx
+++ b/ts/components/conversation/Quote.tsx
@@ -15,7 +15,7 @@ interface Props {
  authorPhoneNumber: string;
  authorProfileName?: string;
  authorName?: string;
-  conversationColor: Color;
+  authorColor?: Color;
  i18n: Localizer;
  isFromMe: boolean;
  isIncoming: boolean;
@@ -318,7 +318,7 @@ export class Quote extends React.Component<Props> {

  public render() {
    const {
-      conversationColor,
+      authorColor,
      isIncoming,
      onClick,
      referencedMessageNotFound,
@@ -343,8 +343,8 @@ export class Quote extends React.Component<Props> {
            'module-quote',
            isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
            isIncoming
-              ? `module-quote--incoming-${conversationColor}`
-              : `module-quote--outgoing-${conversationColor}`,
+              ? `module-quote--incoming-${authorColor}`
+              : `module-quote--outgoing-${authorColor}`,
            !onClick ? 'module-quote--no-click' : null,
            withContentAbove ? 'module-quote--with-content-above' : null,
            referencedMessageNotFound
--- a/ts/components/conversation/Timestamp.md
+++ b/ts/components/conversation/Timestamp.md
@@ -18,12 +18,12 @@ function getDecember1159() {
  return getJanuary1201() - 2 * 60 * 1000;
 }

-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="red"
+      authorColor="red"
      timestamp={Date.now() - 500}
      text="500ms ago - all below 1 minute are 'now'"
      i18n={util.i18n}
@@ -31,9 +31,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={Date.now() - 5 * 1000}
      text="Five seconds ago"
      i18n={util.i18n}
@@ -41,9 +41,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={Date.now() - 30 * 1000}
      text="30 seconds ago"
      i18n={util.i18n}
@@ -51,9 +51,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="red"
+      authorColor="red"
      timestamp={Date.now() - 60 * 1000}
      text="One minute ago - in minutes"
      i18n={util.i18n}
@@ -61,9 +61,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={Date.now() - 30 * 60 * 1000}
      text="30 minutes ago"
      i18n={util.i18n}
@@ -71,9 +71,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={Date.now() - 45 * 60 * 1000}
      text="45 minutes ago (used to round up to 1 hour with moment)"
      i18n={util.i18n}
@@ -81,9 +81,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="red"
+      authorColor="red"
      timestamp={Date.now() - 60 * 60 * 1000}
      text="One hour ago - in hours"
      i18n={util.i18n}
@@ -91,9 +91,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={get1201()}
      text="12:01am today"
      i18n={util.i18n}
@@ -101,9 +101,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="red"
+      authorColor="red"
      timestamp={getYesterday1159()}
      text="11:59pm yesterday - adds day name"
      i18n={util.i18n}
@@ -111,9 +111,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={Date.now() - 24 * 60 * 60 * 1000}
      text="24 hours ago"
      i18n={util.i18n}
@@ -121,9 +121,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
      text="Two days ago"
      i18n={util.i18n}
@@ -131,9 +131,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="red"
+      authorColor="red"
      timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
      text="Seven days ago - adds month"
      i18n={util.i18n}
@@ -141,9 +141,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
      text="Thirty days ago"
      i18n={util.i18n}
@@ -151,9 +151,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={getJanuary1201()}
      text="January 1st at 12:01am"
      i18n={util.i18n}
@@ -161,9 +161,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="red"
+      authorColor="red"
      timestamp={getDecember1159()}
      text="December 31st at 11:59pm - adds year"
      i18n={util.i18n}
@@ -171,9 +171,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="outgoing"
+      direction="incoming"
      status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
      timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
      text="One year ago"
      i18n={util.i18n}