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

js/background.js

@@ -766,6 +766,7 @@
     if (firstRun === true && deviceId !== '1') {
       const hasThemeSetting = Boolean(storage.get('theme-setting'));
       if (!hasThemeSetting && textsecure.storage.get('userAgent') === 'OWI') {
+        storage.put('theme-setting', 'ios');
         onChangeTheme();
       }
       const syncRequest = new textsecure.SyncRequest(

js/models/conversations.js

@@ -1374,6 +1374,10 @@
     },
 
     getColor() {
+      if (!this.isPrivate()) {
+        return null;
+      }
+
       const { migrateColor } = Util;
       return migrateColor(this.get('color'));
     },

js/models/messages.js

@@ -393,6 +393,7 @@
       const contact = this.findAndFormatContact(phoneNumber);
       const contactModel = this.findContact(phoneNumber);
 
+      const authorColor = contactModel ? contactModel.getColor() : null;
       const authorAvatarPath = contactModel
         ? contactModel.getAvatarPath()
         : null;
@@ -406,7 +407,6 @@
 
       const conversation = this.getConversation();
       const isGroup = conversation && !conversation.isPrivate();
-      const conversationColor = conversation && conversation.getColor();
 
       const attachments = this.get('attachments');
       const firstAttachment = attachments && attachments[0];
@@ -418,10 +418,10 @@
         timestamp: this.get('sent_at'),
         status: this.getMessagePropStatus(),
         contact: this.getPropsForEmbeddedContact(),
+        authorColor,
         authorName: contact.name,
         authorProfileName: contact.profileName,
         authorPhoneNumber: contact.phoneNumber,
-        conversationColor,
         conversationType: isGroup ? 'group' : 'direct',
         attachment: this.getPropsForAttachment(firstAttachment),
         quote: this.getPropsForQuote(),
@@ -534,9 +534,9 @@
       const { format } = PhoneNumber;
       const regionCode = storage.get('regionCode');
 
-      const conversation = this.getConversation();
       const { author, id, referencedMessageNotFound } = quote;
       const contact = author && ConversationController.get(author);
+      const authorColor = contact ? contact.getColor() : 'grey';
 
       const authorPhoneNumber = format(author, {
         ourRegionCode: regionCode,
@@ -563,7 +563,7 @@
         authorPhoneNumber,
         authorProfileName,
         authorName,
-        conversationColor: conversation && conversation.getColor(),
+        authorColor,
         onClick,
         referencedMessageNotFound,
       };

js/views/app_view.js

@@ -21,11 +21,18 @@
       openInbox: 'openInbox',
     },
     applyTheme() {
+      const iOS = storage.get('userAgent') === 'OWI';
       const theme = storage.get('theme-setting') || 'light';
       this.$el
         .removeClass('light-theme')
         .removeClass('dark-theme')
         .addClass(`${theme}-theme`);
+
+      if (iOS) {
+        this.$el.addClass('ios-theme');
+      } else {
+        this.$el.removeClass('ios-theme');
+      }
     },
     applyHideMenu() {
       const hideMenuBar = storage.get('hide-menu-bar', false);

stylesheets/_ios.scss

@@ -0,0 +1,291 @@
+// When paired with an iOS device, this stylesheet will apply
+
+.ios-theme {
+  // _modules
+
+  .module-message__container--outgoing {
+    background-color: $color-signal-blue;
+    color: $color-white;
+  }
+
+  .module-message__container--incoming {
+    background-color: $color-light-10;
+    color: $color-gray-90;
+  }
+
+  .module-message__author {
+    color: $color-gray-90;
+  }
+
+  .module-message__text {
+    color: $color-white;
+    font-size: 14px;
+    a {
+      text-decoration: underline;
+      color: $color-white;
+    }
+  }
+
+  .module-message__text--incoming {
+    color: $color-gray-90;
+    a {
+      text-decoration: underline;
+      color: $color-gray-90;
+    }
+  }
+
+  .module-message__metadata__date {
+    color: $color-white-08;
+  }
+  .module-message__metadata__date--incoming {
+    color: $color-gray-60;
+  }
+  .module-message__metadata__date--with-image-no-caption {
+    color: $color-white;
+  }
+
+  .module-message__metadata__status-icon--sending {
+    @include color-svg('../images/sending.svg', $color-white);
+  }
+
+  .module-message__metadata__status-icon--sent {
+    @include color-svg('../images/check-circle-outline.svg', $color-white-08);
+  }
+  .module-message__metadata__status-icon--delivered {
+    @include color-svg('../images/double-check.svg', $color-white-08);
+  }
+  .module-message__metadata__status-icon--read {
+    @include color-svg('../images/read.svg', $color-white-08);
+  }
+
+  .module-message__metadata__status-icon--with-image-no-caption {
+    background-color: $color-white;
+  }
+
+  .module-message__generic-attachment__file-name {
+    color: $color-white;
+  }
+
+  .module-message__generic-attachment__file-name--incoming {
+    color: $color-gray-90;
+  }
+
+  .module-message__generic-attachment__file-size {
+    color: $color-white;
+  }
+
+  .module-message__generic-attachment__file-size--incoming {
+    color: $color-gray-90;
+  }
+
+  .module-expire-timer {
+    background-color: $color-white-08;
+  }
+
+  .module-expire-timer--incoming {
+    background-color: $color-gray-60;
+  }
+
+  .module-quote--outgoing {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+
+  .module-quote--incoming {
+    background-color: $color-signal-blue-025;
+    border-left-color: $color-signal-blue;
+  }
+
+  .module-quote__reference-warning--incoming {
+    background-color: $color-signal-blue-mix;
+  }
+
+  // When you're composing a new quote
+  .bottom-bar {
+    .module-quote {
+      background-color: $color-signal-blue-025;
+      border-left-color: $color-signal-blue;
+    }
+  }
+
+  .module-embedded-contact__contact-name {
+    color: $color-white;
+  }
+
+  .module-embedded-contact__contact-method {
+    color: $color-white-07;
+  }
+
+  .module-embedded-contact__contact-name--incoming {
+    color: $color-gray-90;
+  }
+
+  .module-embedded-contact__contact-method--incoming {
+    color: $color-light-60;
+  }
+
+  &.dark-theme {
+    // _modules
+
+    .module-message__container--outgoing {
+      background-color: $color-signal-blue;
+      color: $color-gray-05;
+    }
+
+    .module-message__container--incoming {
+      background-color: $color-gray-75;
+      color: $color-gray-05;
+    }
+
+    .module-message__author {
+      color: $color-gray-05;
+    }
+
+    .module-message__text--incoming {
+      color: $color-gray-05;
+      a {
+        text-decoration: underline;
+        color: $color-gray-05;
+      }
+    }
+
+    .module-message__metadata__status-icon--sending {
+      @include color-svg('../images/sending.svg', $color-white);
+    }
+
+    .module-message__metadata__status-icon--sent {
+      @include color-svg('../images/check-circle-outline.svg', $color-white-08);
+    }
+    .module-message__metadata__status-icon--delivered {
+      @include color-svg('../images/double-check.svg', $color-white-08);
+    }
+    .module-message__metadata__status-icon--read {
+      @include color-svg('../images/read.svg', $color-white-08);
+    }
+
+    .module-message__metadata__date {
+      color: $color-white-08;
+    }
+
+    .module-message__metadata__date--incoming {
+      color: $color-gray-25;
+    }
+
+    .module-message__generic-attachment__file-name--incoming {
+      color: $color-gray-25;
+    }
+    .module-message__generic-attachment__file-size--incoming {
+      color: $color-gray-25;
+    }
+
+    .module-expire-timer {
+      background-color: $color-white-08;
+    }
+
+    .module-expire-timer--incoming {
+      background-color: $color-gray-25;
+    }
+
+    .module-quote--outgoing {
+      border-left-color: $color-black;
+      background-color: $color-conversation-blue-shade;
+    }
+
+    .module-quote--incoming {
+      background-color: $color-conversation-blue-shade;
+      border-left-color: $color-signal-blue;
+    }
+
+    .module-quote__primary__author {
+      color: $color-gray-05;
+    }
+
+    .module-quote__primary__text {
+      color: $color-gray-05;
+      a {
+        color: $color-gray-05;
+      }
+    }
+
+    .module-quote__primary__type-label {
+      color: $color-gray-05;
+    }
+
+    .module-quote__primary__type-label--incoming {
+      color: $color-gray-05;
+    }
+
+    .module-quote__primary__author--incoming {
+      color: $color-gray-05;
+    }
+
+    .module-quote__primary__text--incoming {
+      color: $color-gray-05;
+      a {
+        color: $color-gray-05;
+      }
+    }
+
+    .module-quote__generic-file__text {
+      color: $color-gray-05;
+    }
+
+    .module-quote__generic-file__text--incoming {
+      color: $color-gray-05;
+    }
+
+    .module-quote__reference-warning {
+      background-color: $color-white-04;
+    }
+
+    .module-quote__reference-warning--incoming {
+      background-color: $color-signal-blue-050;
+    }
+
+    .module-quote__reference-warning__text {
+      color: $color-gray-90;
+    }
+
+    .module-quote__reference-warning__text--incoming {
+      color: $color-gray-05;
+    }
+
+    .module-quote__reference-warning__icon {
+      @include color-svg('../images/broken-link.svg', $color-signal-blue);
+    }
+
+    .module-quote__reference-warning__icon--incoming {
+      @include color-svg('../images/broken-link.svg', $color-gray-75);
+    }
+
+    // When you're composing a new quote
+    .bottom-bar {
+      .module-quote__primary__author {
+        color: $color-gray-05;
+      }
+
+      .module-quote__primary__type-label {
+        color: $color-gray-05;
+      }
+
+      .module-quote__generic-file__text {
+        color: $color-gray-05;
+      }
+
+      .module-quote__primary__text {
+        color: $color-gray-05;
+        a {
+          color: $color-gray-05;
+        }
+      }
+    }
+
+    .module-embedded-contact__contact-name--incoming {
+      color: $color-gray-05;
+    }
+
+    .module-embedded-contact__contact-method--incoming {
+      color: $color-gray-25;
+    }
+  }
+}

stylesheets/_modules.scss

@@ -76,7 +76,7 @@
   cursor: pointer;
   @include color-svg('../images/download.svg', $color-light-45);
   &:hover {
-    @include color-svg('../images/download.svg', $color-light-90);
+    @include color-svg('../images/download.svg', $color-gray-90);
   }
 }
 
@@ -94,7 +94,7 @@
   cursor: pointer;
   @include color-svg('../images/reply.svg', $color-light-45);
   &:hover {
-    @include color-svg('../images/reply.svg', $color-light-90);
+    @include color-svg('../images/reply.svg', $color-gray-90);
   }
 }
 
@@ -112,7 +112,7 @@
   cursor: pointer;
   @include color-svg('../images/ellipsis.svg', $color-light-45);
   &:hover {
-    @include color-svg('../images/ellipsis.svg', $color-light-90);
+    @include color-svg('../images/ellipsis.svg', $color-gray-90);
   }
 }
 
@@ -157,46 +157,46 @@
   min-width: 0px;
 }
 
-.module-message__container--incoming {
+.module-message__container--outgoing {
   background-color: $color-light-10;
 }
 
 // In case the color gets messed up
-.module-message__container--outgoing {
+.module-message__container--incoming {
   background-color: $color-conversation-grey;
 }
 
-.module-message__container--outgoing-red {
+.module-message__container--incoming-red {
   background-color: $color-conversation-red;
 }
-.module-message__container--outgoing-deep_orange {
+.module-message__container--incoming-deep_orange {
   background-color: $color-conversation-deep_orange;
 }
-.module-message__container--outgoing-brown {
+.module-message__container--incoming-brown {
   background-color: $color-conversation-brown;
 }
-.module-message__container--outgoing-pink {
+.module-message__container--incoming-pink {
   background-color: $color-conversation-pink;
 }
-.module-message__container--outgoing-purple {
+.module-message__container--incoming-purple {
   background-color: $color-conversation-purple;
 }
-.module-message__container--outgoing-indigo {
+.module-message__container--incoming-indigo {
   background-color: $color-conversation-indigo;
 }
-.module-message__container--outgoing-blue {
+.module-message__container--incoming-blue {
   background-color: $color-conversation-blue;
 }
-.module-message__container--outgoing-teal {
+.module-message__container--incoming-teal {
   background-color: $color-conversation-teal;
 }
-.module-message__container--outgoing-green {
+.module-message__container--incoming-green {
   background-color: $color-conversation-green;
 }
-.module-message__container--outgoing-light_green {
+.module-message__container--incoming-light_green {
   background-color: $color-conversation-light_green;
 }
-.module-message__container--outgoing-blue_grey {
+.module-message__container--incoming-blue_grey {
   background-color: $color-conversation-blue_grey;
 }
 
@@ -400,7 +400,7 @@
   white-space: nowrap;
   text-overflow: clip;
 
-  color: $color-light-90;
+  color: $color-gray-90;
 }
 
 .module-message__generic-attachment__text {
@@ -411,7 +411,7 @@
 }
 
 .module-message__generic-attachment__file-name {
-  color: $color-white;
+  color: $color-gray-90;
   font-size: 14px;
   line-height: 18px;
   font-weight: 300;
@@ -424,11 +424,11 @@
 }
 
 .module-message__generic-attachment__file-name--incoming {
-  color: $color-light-90;
+  color: $color-white;
 }
 
 .module-message__generic-attachment__file-size {
-  color: $color-white;
+  color: $color-gray-90;
   font-size: 11px;
   line-height: 16px;
   letter-spacing: 0.3px;
@@ -436,11 +436,11 @@
 }
 
 .module-message__generic-attachment__file-size--incoming {
-  color: $color-light-90;
+  color: $color-white;
 }
 
 .module-message__author {
-  color: $color-light-90;
+  color: $color-white;
   font-size: 13px;
   font-weight: 300;
   line-height: 18px;
@@ -456,7 +456,7 @@
 }
 
 .module-message__text {
-  color: $color-white;
+  color: $color-gray-90;
   font-size: 14px;
   line-height: 18px;
   text-align: start;
@@ -468,15 +468,15 @@
 
   a {
     text-decoration: underline;
-    color: $color-white;
+    color: $color-gray-90;
   }
 }
 
 .module-message__text--incoming {
-  color: $color-light-90;
+  color: $color-white;
   a {
     text-decoration: underline;
-    color: $color-light-90;
+    color: $color-white;
   }
 }
 
@@ -508,11 +508,11 @@
   font-size: 11px;
   line-height: 16px;
   letter-spacing: 0.3px;
-  color: $color-white-08;
+  color: $color-gray-60;
   text-transform: uppercase;
 }
 .module-message__metadata__date--incoming {
-  color: $color-light-60;
+  color: $color-white-08;
 }
 .module-message__metadata__date--with-image-no-caption {
   color: $color-white;
@@ -531,7 +531,7 @@
 }
 
 .module-message__metadata__status-icon--sending {
-  @include color-svg('../images/sending.svg', $color-white-08);
+  @include color-svg('../images/sending.svg', $color-gray-60);
   animation: module-message__metdata__status-icon--spinning 4s linear infinite;
 }
 
@@ -543,14 +543,14 @@
 }
 
 .module-message__metadata__status-icon--sent {
-  @include color-svg('../images/check-circle-outline.svg', $color-white-08);
+  @include color-svg('../images/check-circle-outline.svg', $color-gray-60);
 }
 .module-message__metadata__status-icon--delivered {
-  @include color-svg('../images/double-check.svg', $color-white-08);
+  @include color-svg('../images/double-check.svg', $color-gray-60);
   width: 18px;
 }
 .module-message__metadata__status-icon--read {
-  @include color-svg('../images/read.svg', $color-white-08);
+  @include color-svg('../images/read.svg', $color-gray-60);
   width: 18px;
 }
 
@@ -595,48 +595,48 @@
   display: inline-block;
   margin-left: 6px;
   margin-bottom: 2px;
-  @include color-svg('../images/timer-60.svg', $color-white-08);
+  @include color-svg('../images/timer-60.svg', $color-gray-60);
 }
 
 .module-expire-timer--55 {
-  @include color-svg('../images/timer-55.svg', $color-white-08);
+  @include color-svg('../images/timer-55.svg', $color-gray-60);
 }
 .module-expire-timer--50 {
-  @include color-svg('../images/timer-50.svg', $color-white-08);
+  @include color-svg('../images/timer-50.svg', $color-gray-60);
 }
 .module-expire-timer--45 {
-  @include color-svg('../images/timer-45.svg', $color-white-08);
+  @include color-svg('../images/timer-45.svg', $color-gray-60);
 }
 .module-expire-timer--40 {
-  @include color-svg('../images/timer-40.svg', $color-white-08);
+  @include color-svg('../images/timer-40.svg', $color-gray-60);
 }
 .module-expire-timer--35 {
-  @include color-svg('../images/timer-35.svg', $color-white-08);
+  @include color-svg('../images/timer-35.svg', $color-gray-60);
 }
 .module-expire-timer--30 {
-  @include color-svg('../images/timer-30.svg', $color-white-08);
+  @include color-svg('../images/timer-30.svg', $color-gray-60);
 }
 .module-expire-timer--25 {
-  @include color-svg('../images/timer-25.svg', $color-white-08);
+  @include color-svg('../images/timer-25.svg', $color-gray-60);
 }
 .module-expire-timer--20 {
-  @include color-svg('../images/timer-20.svg', $color-white-08);
+  @include color-svg('../images/timer-20.svg', $color-gray-60);
 }
 .module-expire-timer--15 {
-  @include color-svg('../images/timer-15.svg', $color-white-08);
+  @include color-svg('../images/timer-15.svg', $color-gray-60);
 }
 .module-expire-timer--10 {
-  @include color-svg('../images/timer-10.svg', $color-white-08);
+  @include color-svg('../images/timer-10.svg', $color-gray-60);
 }
 .module-expire-timer--05 {
-  @include color-svg('../images/timer-05.svg', $color-white-08);
+  @include color-svg('../images/timer-05.svg', $color-gray-60);
 }
 .module-expire-timer--00 {
-  @include color-svg('../images/timer-00.svg', $color-white-08);
+  @include color-svg('../images/timer-00.svg', $color-gray-60);
 }
 
 .module-expire-timer--incoming {
-  background-color: $color-gray-60;
+  background-color: $color-white-08;
 }
 
 // When status indicators are overlaid on top of an image, they use different colors
@@ -687,90 +687,90 @@
   border-bottom-right-radius: 0px;
 }
 
-.module-quote--incoming {
+.module-quote--outgoing {
   border-left-color: $color-conversation-grey;
   background-color: $color-conversation-grey-tint;
 }
-.module-quote--incoming-red {
+.module-quote--outgoing-red {
   border-left-color: $color-conversation-red;
   background-color: $color-conversation-red-tint;
 }
-.module-quote--incoming-deep_orange {
+.module-quote--outgoing-deep_orange {
   border-left-color: $color-conversation-deep_orange;
   background-color: $color-conversation-deep_orange-tint;
 }
-.module-quote--incoming-brown {
+.module-quote--outgoing-brown {
   border-left-color: $color-conversation-brown;
   background-color: $color-conversation-brown-tint;
 }
-.module-quote--incoming-pink {
+.module-quote--outgoing-pink {
   border-left-color: $color-conversation-pink;
   background-color: $color-conversation-pink-tint;
 }
-.module-quote--incoming-purple {
+.module-quote--outgoing-purple {
   border-left-color: $color-conversation-purple;
   background-color: $color-conversation-purple-tint;
 }
-.module-quote--incoming-indigo {
+.module-quote--outgoing-indigo {
   border-left-color: $color-conversation-indigo;
   background-color: $color-conversation-indigo-tint;
 }
-.module-quote--incoming-blue {
+.module-quote--outgoing-blue {
   border-left-color: $color-conversation-blue;
   background-color: $color-conversation-blue-tint;
 }
-.module-quote--incoming-teal {
+.module-quote--outgoing-teal {
   border-left-color: $color-conversation-teal;
   background-color: $color-conversation-teal-tint;
 }
-.module-quote--incoming-green {
+.module-quote--outgoing-green {
   border-left-color: $color-conversation-green;
   background-color: $color-conversation-green-tint;
 }
-.module-quote--incoming-light_green {
+.module-quote--outgoing-light_green {
   border-left-color: $color-conversation-light_green;
   background-color: $color-conversation-light_green-tint;
 }
-.module-quote--incoming-blue_grey {
+.module-quote--outgoing-blue_grey {
   border-left-color: $color-conversation-blue_grey;
   background-color: $color-conversation-blue_grey-tint;
 }
 
-.module-quote--outgoing {
+.module-quote--incoming {
   border-left-color: $color-white;
   background-color: $color-conversation-grey-tint;
 }
-.module-quote--outgoing-red {
+.module-quote--incoming-red {
   background-color: $color-conversation-red-tint;
 }
-.module-quote--outgoing-deep_orange {
+.module-quote--incoming-deep_orange {
   background-color: $color-conversation-deep_orange-tint;
 }
-.module-quote--outgoing-brown {
+.module-quote--incoming-brown {
   background-color: $color-conversation-brown-tint;
 }
-.module-quote--outgoing-pink {
+.module-quote--incoming-pink {
   background-color: $color-conversation-pink-tint;
 }
-.module-quote--outgoing-purple {
+.module-quote--incoming-purple {
   background-color: $color-conversation-purple-tint;
 }
-.module-quote--outgoing-indigo {
+.module-quote--incoming-indigo {
   background-color: $color-conversation-indigo-tint;
 }
-.module-quote--outgoing-blue {
+.module-quote--incoming-blue {
   background-color: $color-conversation-blue-tint;
 }
-.module-quote--outgoing-teal {
+.module-quote--incoming-teal {
   background-color: $color-conversation-teal-tint;
 }
-.module-quote--outgoing-green {
+.module-quote--incoming-green {
   background-color: $color-conversation-green-tint;
 }
-.module-quote--outgoing-light_green {
+.module-quote--incoming-light_green {
   background-color: $color-conversation-light_green-tint;
 }
-.module-quote--outgoing-blue_grey {
+.module-quote--incoming-blue_grey {
   background-color: $color-conversation-blue_grey-tint;
 }
 
@@ -788,7 +788,7 @@
   font-size: 13px;
   line-height: 18px;
   font-weight: 300;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   overflow-x: hidden;
   white-space: nowrap;
@@ -802,10 +802,10 @@
 .module-quote__primary__text {
   font-size: 14px;
   line-height: 18px;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   a {
-    color: $color-light-90;
+    color: $color-gray-90;
   }
 
   overflow-wrap: break-word;
@@ -827,7 +827,7 @@
 
 .module-quote__primary__type-label {
   font-style: italic;
-  color: $color-light-90;
+  color: $color-gray-90;
   font-size: 13px;
   line-height: 18px;
 }
@@ -930,7 +930,7 @@
 .module-quote__generic-file__text {
   font-size: 14px;
   line-height: 18px;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   max-width: calc(100% - 26px);
   overflow-x: hidden;
@@ -954,12 +954,12 @@
 .module-quote__reference-warning__icon {
   height: 16px;
   width: 16px;
-  @include color-svg('../images/broken-link.svg', $color-light-60);
+  @include color-svg('../images/broken-link.svg', $color-gray-60);
 }
 
 .module-quote__reference-warning__text {
   margin-left: 6px;
-  color: $color-light-90;
+  color: $color-gray-90;
   font-size: 13px;
   line-height: 18px;
 }
@@ -994,7 +994,7 @@
   line-height: 18px;
   font-weight: 300;
   margin-top: 6px;
-  color: $color-white;
+  color: $color-gray-90;
 
   max-width: 100%;
   white-space: nowrap;
@@ -1003,7 +1003,7 @@
 }
 
 .module-embedded-contact__contact-name--incoming {
-  color: $color-light-90;
+  color: $color-white;
 }
 
 .module-embedded-contact__contact-method {
@@ -1011,7 +1011,7 @@
   line-height: 16px;
   letter-spacing: 0.3px;
   margin-top: 3px;
-  color: $color-white-07;
+  color: $color-gray-60;
 
   max-width: 100%;
   white-space: nowrap;
@@ -1020,7 +1020,7 @@
 }
 
 .module-embedded-contact__contact-method--incoming {
-  color: $color-light-60;
+  color: $color-white-07;
 }
 
 // Module: Contact Detail
@@ -1098,7 +1098,7 @@
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
   text-align: center;
 }
 
@@ -1117,7 +1117,7 @@
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
   text-align: center;
 }
 
@@ -1134,14 +1134,14 @@
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 7px;
-  @include color-svg('../images/shield.svg', $color-light-60);
+  @include color-svg('../images/shield.svg', $color-gray-60);
 }
 
 .module-safety-number-notification__text {
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
 }
 
 .module-safety-number-notification__contact {
@@ -1168,7 +1168,7 @@
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
   text-align: center;
 }
 
@@ -1182,7 +1182,7 @@
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 4px;
-  @include color-svg('../images/verified-check.svg', $color-light-60);
+  @include color-svg('../images/verified-check.svg', $color-gray-60);
 }
 
 .module-verification-notification__icon--mark-not-verified {
@@ -1191,7 +1191,7 @@
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 7px;
-  @include color-svg('../images/shield.svg', $color-light-60);
+  @include color-svg('../images/shield.svg', $color-gray-60);
 }
 
 // Module: Timer Notification
@@ -1201,7 +1201,7 @@
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
   text-align: center;
 }
 
@@ -1218,11 +1218,11 @@
   height: 20px;
   width: 20px;
   display: inline-block;
-  @include color-svg('../images/timer.svg', $color-light-60);
+  @include color-svg('../images/timer.svg', $color-gray-60);
 }
 
 .module-timer-notification__icon--disabled {
-  @include color-svg('../images/timer-disabled.svg', $color-light-60);
+  @include color-svg('../images/timer-disabled.svg', $color-gray-60);
 }
 
 .module-timer-notification__icon-label {
@@ -1262,7 +1262,7 @@
   flex-direction: row;
   align-items: center;
 
-  color: $color-light-60;
+  color: $color-gray-60;
 }
 
 .module-contact-list-item--with-click-handler {
@@ -1288,7 +1288,7 @@
 }
 
 .module-contact-list-item__text__verified-icon {
-  @include color-svg('../images/verified-check.svg', $color-light-60);
+  @include color-svg('../images/verified-check.svg', $color-gray-60);
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -1308,14 +1308,14 @@
   align-items: center;
 
   height: $header-height;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   background-color: $color-white;
   border-bottom: 1px solid $color-black-02;
 }
 
 .module-conversation-header__back-icon {
-  @include color-svg('../images/back.svg', $color-light-90);
+  @include color-svg('../images/back.svg', $color-gray-90);
   display: inline-block;
   margin-left: -10px;
   margin-right: -2px;
@@ -1357,7 +1357,7 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 300;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   // width of avatar (28px) and our 8px left margin
   max-width: calc(100% - 36px);
@@ -1373,7 +1373,7 @@
 }
 
 .module-conversation-header__title__verified-icon {
-  @include color-svg('../images/verified-check.svg', $color-light-90);
+  @include color-svg('../images/verified-check.svg', $color-gray-90);
   display: inline-block;
   width: 1.25em;
   height: 1.25em;
@@ -1389,7 +1389,7 @@
 }
 
 .module-conversation-header__expiration__clock-icon {
-  @include color-svg('../images/timer.svg', $color-light-60);
+  @include color-svg('../images/timer.svg', $color-gray-60);
   height: 20px;
   width: 20px;
   display: inline-block;
@@ -1401,7 +1401,7 @@
 }
 
 .module-conversation-header__gear-icon {
-  @include color-svg('../images/gear.svg', $color-light-60);
+  @include color-svg('../images/gear.svg', $color-gray-60);
   height: 20px;
   width: 20px;
   margin-left: 4px;
@@ -1487,7 +1487,7 @@
 }
 
 .module-message-detail__contact__status-icon--sending {
-  @include color-svg('../images/sending.svg', $color-light-60);
+  @include color-svg('../images/sending.svg', $color-gray-60);
   animation: module-message-detail__contact__status-icon--spinning 4s linear
     infinite;
 }
@@ -1882,7 +1882,7 @@
 }
 
 .module-conversation-list-item__message__status-icon--sending {
-  @include color-svg('../images/sending.svg', $color-light-60);
+  @include color-svg('../images/sending.svg', $color-gray-60);
   animation: module-conversation-list-item__message__status-icon--spinning 4s
     linear infinite;
 }
@@ -2086,7 +2086,7 @@
   line-height: 24px;
   font-weight: 300;
   margin-left: 32px;
-  color: $color-light-90;
+  color: $color-gray-90;
 }
 
 // Third-party module: react-contextmenu
@@ -2108,7 +2108,7 @@
 }
 
 .react-contextmenu-item {
-  color: $color-light-90;
+  color: $color-gray-90;
 
   cursor: pointer;
   font-size: 13px;
@@ -2126,7 +2126,7 @@
   display: inline-block;
   position: absolute;
   right: 7px;
-  color: $color-light-90;
+  color: $color-gray-90;
 }
 
 .react-contextmenu-item.react-contextmenu-submenu {
@@ -2143,7 +2143,7 @@
   display: inline-block;
   position: absolute;
   right: 7px;
-  color: $color-light-90;
+  color: $color-gray-90;
 }
 
 .react-contextmenu-item.react-contextmenu-item--active,

stylesheets/_theme_dark.scss

@@ -617,46 +617,46 @@ body.dark-theme {
     @include color-svg('../images/error.svg', $color-core-red);
   }
 
-  .module-message__container--incoming {
+  .module-message__container--outgoing {
     background-color: $color-dark-70;
   }
 
   // In case the color gets messed up
-  .module-message__container--outgoing {
+  .module-message__container--incoming {
     background-color: $color-conversation-grey;
   }
 
-  .module-message__container--outgoing-red {
+  .module-message__container--incoming-red {
     background-color: $color-conversation-red;
   }
-  .module-message__container--outgoing-deep_orange {
+  .module-message__container--incoming-deep_orange {
     background-color: $color-conversation-deep_orange;
   }
-  .module-message__container--outgoing-brown {
+  .module-message__container--incoming-brown {
     background-color: $color-conversation-brown;
   }
-  .module-message__container--outgoing-pink {
+  .module-message__container--incoming-pink {
     background-color: $color-conversation-pink;
   }
-  .module-message__container--outgoing-purple {
+  .module-message__container--incoming-purple {
     background-color: $color-conversation-purple;
   }
-  .module-message__container--outgoing-indigo {
+  .module-message__container--incoming-indigo {
     background-color: $color-conversation-indigo;
   }
-  .module-message__container--outgoing-blue {
+  .module-message__container--incoming-blue {
     background-color: $color-conversation-blue;
   }
-  .module-message__container--outgoing-teal {
+  .module-message__container--incoming-teal {
     background-color: $color-conversation-teal;
   }
-  .module-message__container--outgoing-green {
+  .module-message__container--incoming-green {
     background-color: $color-conversation-green;
   }
-  .module-message__container--outgoing-light_green {
+  .module-message__container--incoming-light_green {
     background-color: $color-conversation-light_green;
   }
-  .module-message__container--outgoing-blue_grey {
+  .module-message__container--incoming-blue_grey {
     background-color: $color-conversation-blue_grey;
   }
 
@@ -847,90 +847,90 @@ body.dark-theme {
 
   // Module: Quoted Reply
 
-  .module-quote--incoming {
+  .module-quote--outgoing {
     border-left-color: $color-conversation-grey;
     background-color: $color-conversation-grey-shade;
   }
-  .module-quote--incoming-red {
+  .module-quote--outgoing-red {
     border-left-color: $color-conversation-red;
     background-color: $color-conversation-red-shade;
   }
-  .module-quote--incoming-deep_orange {
+  .module-quote--outgoing-deep_orange {
     border-left-color: $color-conversation-deep_orange;
     background-color: $color-conversation-deep_orange-shade;
   }
-  .module-quote--incoming-brown {
+  .module-quote--outgoing-brown {
     border-left-color: $color-conversation-brown;
     background-color: $color-conversation-brown-shade;
   }
-  .module-quote--incoming-pink {
+  .module-quote--outgoing-pink {
     border-left-color: $color-conversation-pink;
     background-color: $color-conversation-pink-shade;
   }
-  .module-quote--incoming-purple {
+  .module-quote--outgoing-purple {
     border-left-color: $color-conversation-purple;
     background-color: $color-conversation-purple-shade;
   }
-  .module-quote--incoming-indigo {
+  .module-quote--outgoing-indigo {
     border-left-color: $color-conversation-indigo;
     background-color: $color-conversation-indigo-shade;
   }
-  .module-quote--incoming-blue {
+  .module-quote--outgoing-blue {
     border-left-color: $color-conversation-blue;
     background-color: $color-conversation-blue-shade;
   }
-  .module-quote--incoming-teal {
+  .module-quote--outgoing-teal {
     border-left-color: $color-conversation-teal;
     background-color: $color-conversation-teal-shade;
   }
-  .module-quote--incoming-green {
+  .module-quote--outgoing-green {
     border-left-color: $color-conversation-green;
     background-color: $color-conversation-green-shade;
   }
-  .module-quote--incoming-light_green {
+  .module-quote--outgoing-light_green {
     border-left-color: $color-conversation-light_green;
     background-color: $color-conversation-light_green-shade;
   }
-  .module-quote--incoming-blue_grey {
+  .module-quote--outgoing-blue_grey {
     border-left-color: $color-conversation-blue_grey;
     background-color: $color-conversation-blue_grey-shade;
   }
 
-  .module-quote--outgoing {
+  .module-quote--incoming {
     border-left-color: $color-black;
     background-color: $color-conversation-grey-shade;
   }
-  .module-quote--outgoing-red {
+  .module-quote--incoming-red {
     background-color: $color-conversation-red-shade;
   }
-  .module-quote--outgoing-deep_orange {
+  .module-quote--incoming-deep_orange {
     background-color: $color-conversation-deep_orange-shade;
   }
-  .module-quote--outgoing-brown {
+  .module-quote--incoming-brown {
     background-color: $color-conversation-brown-shade;
   }
-  .module-quote--outgoing-pink {
+  .module-quote--incoming-pink {
     background-color: $color-conversation-pink-shade;
   }
-  .module-quote--outgoing-purple {
+  .module-quote--incoming-purple {
     background-color: $color-conversation-purple-shade;
   }
-  .module-quote--outgoing-indigo {
+  .module-quote--incoming-indigo {
     background-color: $color-conversation-indigo-shade;
   }
-  .module-quote--outgoing-blue {
+  .module-quote--incoming-blue {
     background-color: $color-conversation-blue-shade;
   }
-  .module-quote--outgoing-teal {
+  .module-quote--incoming-teal {
     background-color: $color-conversation-teal-shade;
   }
-  .module-quote--outgoing-green {
+  .module-quote--incoming-green {
     background-color: $color-conversation-green-shade;
   }
-  .module-quote--outgoing-light_green {
+  .module-quote--incoming-light_green {
     background-color: $color-conversation-light_green-shade;
   }
-  .module-quote--outgoing-blue_grey {
+  .module-quote--incoming-blue_grey {
     background-color: $color-conversation-blue_grey-shade;
   }
 

stylesheets/_variables.scss

@@ -40,7 +40,7 @@ $color-gray-05: #eeefef;
 $color-gray-15: #d5d6d6;
 $color-gray-25: #bbbdbe;
 $color-gray-45: #898a8c;
-$color-gray-60: #636467;
+$color-gray-60: #6b6d70;
 $color-gray-75: #3d3e44;
 $color-gray-85: #23252a;
 $color-gray-90: #17191d;

stylesheets/manifest.scss

@@ -17,6 +17,7 @@
 @import 'conversation';
 
 // Themes
+@import 'ios';
 @import 'theme_dark';
 
 // New CSS

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"

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"

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 {
+    const { conversationType, direction, i18n, quote } = this.props;
-      conversationType,
-      conversationColor,
-      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'
+            direction === 'incoming'
-              ? `module-message__container--outgoing-${conversationColor}`
+              ? `module-message__container--incoming-${authorColor}`
               : null
           )}
         >

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',

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--incoming-${authorColor}`
-              : `module-quote--outgoing-${conversationColor}`,
+              : `module-quote--outgoing-${authorColor}`,
             !onClick ? 'module-quote--no-click' : null,
             withContentAbove ? 'module-quote--with-content-above' : null,
             referencedMessageNotFound

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}

ts/styleguide/ConversationContext.tsx

@@ -5,6 +5,7 @@ interface Props {
   /**
    * Corresponds to the theme setting in the app, and the class added to the root element.
    */
+  ios: boolean;
   theme: 'light-theme' | 'dark-theme';
   type: 'private' | 'group';
 }
@@ -15,10 +16,12 @@ interface Props {
  */
 export class ConversationContext extends React.Component<Props> {
   public render() {
-    const { theme, type } = this.props;
+    const { ios, theme, type } = this.props;
 
     return (
-      <div className={classNames(theme || 'light-theme')}>
+      <div
+        className={classNames(theme || 'light-theme', ios ? 'ios-theme' : null)}
+      >
         <div className={classNames('conversation', type || 'private')}>
           <div className="discussion-container" style={{ padding: '0.5em' }}>
             <ul className="message-list">{this.props.children}</ul>

ts/styleguide/StyleGuideUtil.ts

@@ -83,6 +83,7 @@ export {
 const query = window.location.search.replace(/^\?/, '');
 const urlOptions = QueryString.parse(query);
 const theme = urlOptions.theme || 'light-theme';
+const ios = urlOptions.ios || false;
 const locale = urlOptions.locale || 'en';
 
 // @ts-ignore
@@ -92,7 +93,7 @@ import localeMessages from '../../_locales/en/messages.json';
 import { setup } from '../../js/modules/i18n';
 const i18n = setup(locale, localeMessages);
 
-export { theme, locale, i18n };
+export { theme, ios, locale, i18n };
 
 // Telling Lodash to relinquish _ for use by underscore
 // @ts-ignore