From a247ffe5cfb273a6fceb384c7a50945f5face9a9 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Mon, 13 Aug 2018 17:06:50 -0700
Subject: [PATCH] When iOS device has been linked, use iOS color scheme

---
 app/auto_update.js                            |   2 +-
 js/views/app_view.js                          |   7 +
 stylesheets/_ios.scss                         | 380 ++++++++++++++++++
 stylesheets/_modules.scss                     |   2 +
 stylesheets/_variables.scss                   |   3 +
 stylesheets/manifest.scss                     |   3 +
 ts/components/conversation/EmbeddedContact.md |  18 +-
 ts/components/conversation/Message.md         |  38 +-
 ts/components/conversation/Quote.md           | 138 +++++--
 ts/components/conversation/Quote.tsx          |  34 +-
 ts/styleguide/ConversationContext.tsx         |   7 +-
 ts/styleguide/StyleGuideUtil.ts               |   6 +-
 12 files changed, 556 insertions(+), 82 deletions(-)
 create mode 100644 stylesheets/_ios.scss

diff --git a/app/auto_update.js b/app/auto_update.js
index 959826b92..26bc105ee 100644
--- a/app/auto_update.js
+++ b/app/auto_update.js
@@ -24,7 +24,7 @@ function checkForUpdates() {
 
 let showingDialog = false;
 function showUpdateDialog(mainWindow, messages) {
-  if (showingDialog) {
+  if (showingDialog || !mainWindow) {
     return;
   }
   showingDialog = true;
diff --git a/js/views/app_view.js b/js/views/app_view.js
index 65dc701c3..1db6314e3 100644
--- a/js/views/app_view.js
+++ b/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);
diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
new file mode 100644
index 000000000..659f807b9
--- /dev/null
+++ b/stylesheets/_ios.scss
@@ -0,0 +1,380 @@
+// 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-light-90;
+  }
+
+  .module-message__container--incoming-grey {
+    background-color: $color-light-10;
+  }
+  .module-message__container--incoming-blue {
+    background-color: $color-light-10;
+  }
+  .module-message__container--incoming-cyan {
+    background-color: $color-light-10;
+  }
+  .module-message__container--incoming-deep_orange {
+    background-color: $color-light-10;
+  }
+  .module-message__container--incoming-green {
+    background-color: $color-light-10;
+  }
+  .module-message__container--incoming-indigo {
+    background-color: $color-light-10;
+  }
+  .module-message__container--incoming-pink {
+    background-color: $color-light-10;
+  }
+  .module-message__container--incoming-purple {
+    background-color: $color-light-10;
+  }
+  .module-message__container--incoming-red {
+    background-color: $color-light-10;
+  }
+  .module-message__container--incoming-teal {
+    background-color: $color-light-10;
+  }
+
+  .module-message__author {
+    color: $color-light-90;
+  }
+
+  .module-message__text {
+    color: $color-white;
+    font-size: 14px;
+    a {
+      text-decoration: underline;
+      color: $color-white;
+    }
+  }
+
+  .module-message__text--incoming {
+    color: $color-light-90;
+    a {
+      text-decoration: underline;
+      color: $color-light-90;
+    }
+  }
+
+  .module-message__metadata__date {
+    color: $color-white-07;
+  }
+  .module-message__metadata__date--incoming {
+    color: $color-light-45;
+  }
+  .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-07);
+  }
+  .module-message__metadata__status-icon--delivered {
+    @include color-svg('../images/double-check.svg', $color-white-07);
+  }
+  .module-message__metadata__status-icon--read {
+    @include color-svg('../images/read.svg', $color-white-07);
+  }
+
+  .module-message__metadata__status-icon--with-image-no-caption {
+    background-color: $color-white;
+  }
+
+  .module-message__broken-image {
+    color: $color-white;
+  }
+
+  .module-message__broken-image--incoming {
+    color: $color-light-90;
+  }
+
+  .module-message__broken-video-screenshot {
+    color: $color-white;
+  }
+
+  .module-message__broken-video-screenshot--incoming {
+    color: $color-light-90;
+  }
+
+  .module-message__generic-attachment__file-name {
+    color: $color-white;
+  }
+
+  .module-message__generic-attachment__file-name--incoming {
+    color: $color-light-90;
+  }
+
+  .module-message__generic-attachment__file-size {
+    color: $color-white;
+  }
+
+  .module-message__generic-attachment__file-size--incoming {
+    color: $color-light-90;
+  }
+
+  .module-quote--incoming {
+    background-color: $color-signal-blue-025;
+    border-left-color: $color-signal-blue;
+  }
+
+  .module-quote--outgoing-you {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-grey {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-blue {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-cyan {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-deep_orange {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-green {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-indigo {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-pink {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-purple {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-red {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+  .module-quote--outgoing-teal {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+
+  .module-quote__primary__author--grey {
+    color: $color-light-90;
+  }
+  .module-quote__primary__author--blue {
+    color: $color-light-90;
+  }
+  .module-quote__primary__author--cyan {
+    color: $color-light-90;
+  }
+  .module-quote__primary__author--deep_orange {
+    color: $color-light-90;
+  }
+  .module-quote__primary__author--green {
+    color: $color-light-90;
+  }
+  .module-quote__primary__author--indigo {
+    color: $color-light-90;
+  }
+  .module-quote__primary__author--pink {
+    color: $color-light-90;
+  }
+  .module-quote__primary__author--purple {
+    color: $color-light-90;
+  }
+  .module-quote__primary__author--red {
+    color: $color-light-90;
+  }
+  .module-quote__primary__author--teal {
+    color: $color-light-90;
+  }
+
+  // When you're composing a new quote
+  .bottom-bar {
+    .module-quote {
+      background-color: $color-signal-blue-025;
+      border-left-color: $color-signal-blue;
+    }
+  }
+
+  &.dark-theme {
+    // _modules
+
+    .module-message__container--incoming {
+      background-color: $color-dark-70;
+      color: $color-white;
+    }
+
+    .module-message__container--incoming-grey {
+      background-color: $color-dark-70;
+    }
+    .module-message__container--incoming-blue {
+      background-color: $color-dark-70;
+    }
+    .module-message__container--incoming-cyan {
+      background-color: $color-dark-70;
+    }
+    .module-message__container--incoming-deep_orange {
+      background-color: $color-dark-70;
+    }
+    .module-message__container--incoming-green {
+      background-color: $color-dark-70;
+    }
+    .module-message__container--incoming-indigo {
+      background-color: $color-dark-70;
+    }
+    .module-message__container--incoming-pink {
+      background-color: $color-dark-70;
+    }
+    .module-message__container--incoming-purple {
+      background-color: $color-dark-70;
+    }
+    .module-message__container--incoming-red {
+      background-color: $color-dark-70;
+    }
+    .module-message__container--incoming-teal {
+      background-color: $color-dark-70;
+    }
+
+    .module-message__author {
+      color: $color-white;
+    }
+
+    .module-message__text--incoming {
+      color: $color-white;
+      a {
+        text-decoration: underline;
+        color: $color-white;
+      }
+    }
+
+    .module-message__metadata__date--incoming {
+      color: $color-white;
+    }
+
+    .module-message__broken-image--incoming {
+      color: $color-white;
+    }
+    .module-message__broken-video-screenshot--incoming {
+      color: $color-white;
+    }
+    .module-message__generic-attachment__file-name--incoming {
+      color: $color-white;
+    }
+    .module-message__generic-attachment__file-size--incoming {
+      color: $color-white;
+    }
+
+    .module-quote__primary__author {
+      color: $color-light-90;
+    }
+
+    .module-quote__primary__author--grey {
+      color: $color-light-90;
+    }
+    .module-quote__primary__author--blue {
+      color: $color-light-90;
+    }
+    .module-quote__primary__author--cyan {
+      color: $color-light-90;
+    }
+    .module-quote__primary__author--deep_orange {
+      color: $color-light-90;
+    }
+    .module-quote__primary__author--green {
+      color: $color-light-90;
+    }
+    .module-quote__primary__author--indigo {
+      color: $color-light-90;
+    }
+    .module-quote__primary__author--pink {
+      color: $color-light-90;
+    }
+    .module-quote__primary__author--purple {
+      color: $color-light-90;
+    }
+    .module-quote__primary__author--red {
+      color: $color-light-90;
+    }
+    .module-quote__primary__author--teal {
+      color: $color-light-90;
+    }
+
+    .module-quote__primary__text {
+      color: $color-light-90;
+      a {
+        color: $color-light-90;
+      }
+    }
+
+    .module-quote__primary__type-label {
+      color: $color-light-90;
+    }
+
+    .module-quote__primary__type-label--incoming {
+      color: $color-white;
+    }
+
+    .module-quote__primary__author--incoming {
+      color: $color-white;
+    }
+
+    .module-quote__primary__text--incoming {
+      color: $color-white;
+      a {
+        color: $color-white;
+      }
+    }
+
+    .module-quote__generic-file__text {
+      color: $color-light-90;
+    }
+
+    .module-quote__generic-file__text--incoming {
+      color: $color-white;
+    }
+
+    // When you're composing a new quote
+    .bottom-bar {
+      .module-quote__primary__author {
+        color: $color-white;
+      }
+
+      .module-quote__primary__type-label {
+        color: $color-white;
+      }
+
+      .module-quote__generic-file__text {
+        color: $color-white;
+      }
+
+      .module-quote__primary__text {
+        color: $color-white;
+        a {
+          color: $color-white;
+        }
+      }
+    }
+
+    .module-embedded-contact__contact-method {
+      color: $color-white-07;
+    }
+  }
+}
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 7bf1f5187..e0890dcaf 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -388,6 +388,8 @@
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: clip;
+
+  color: $color-light-90;
 }
 
 .module-message__generic-attachment__text {
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 31a83d998..2692e2f76 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -31,8 +31,11 @@ $color-signal-blue: #2090ea;
 $color-core-green: #4caf50;
 $color-core-red: #f44336;
 
+$color-signal-blue-025: rgba($color-signal-blue, 0.25);
+
 $color-white: #ffffff;
 $color-white-02: rgba($color-white, 0.2);
+$color-white-06: rgba($color-white, 0.6);
 $color-white-07: rgba($color-white, 0.7);
 $color-white-075: rgba($color-white, 0.75);
 $color-light-02: #f9fafa;
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 0cddebd2a..c5b5b81d4 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -15,7 +15,10 @@
 // Build the main view
 @import 'index';
 @import 'conversation';
+
+// Themes
 @import 'theme_dark';
+@import 'ios';
 
 // New CSS
 @import 'modules';
diff --git a/ts/components/conversation/EmbeddedContact.md b/ts/components/conversation/EmbeddedContact.md
index 2b3059e39..db2840091 100644
--- a/ts/components/conversation/EmbeddedContact.md
+++ b/ts/components/conversation/EmbeddedContact.md
@@ -22,7 +22,7 @@ const contact = {
   onSendMessage: () => console.log('onSendMessage'),
   hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -80,7 +80,7 @@ const contact = {
   },
   hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li><Message
     authorColor="green"
     direction="incoming"
@@ -114,7 +114,7 @@ const contact = {
   },
   hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme} type="group">
+<util.ConversationContext theme={util.theme} ios={util.ios} type="group">
   <li>
     <Message
       authorColor="green"
@@ -170,7 +170,7 @@ const contact = {
   },
   hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -226,7 +226,7 @@ const contact = {
   },
   hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -284,7 +284,7 @@ const contact = {
   },
   hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -337,7 +337,7 @@ const contact = {
   ],
   hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -379,7 +379,7 @@ const contact = {
 
 ```jsx
 const contact = {};
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -454,7 +454,7 @@ 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..."
diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
index 26a5e7256..dd4aac4ab 100644
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
@@ -3,7 +3,7 @@
 Note that timestamp and status can be hidden with the `collapseMetadata` boolean property.
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -148,7 +148,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
 ### Status
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="outgoing"
@@ -277,7 +277,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
 ### Long data
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="cyan"
@@ -330,7 +330,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
 #### Image with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="cyan"
@@ -388,7 +388,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
 First, showing the metadata overlay on dark and light images, then a message with `collapseMetadata` set.
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -457,7 +457,7 @@ First, showing the metadata overlay on dark and light images, then a message wit
 Note that the delivered indicator is always Signal Blue, not the conversation color.
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="outgoing"
@@ -508,7 +508,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image with portrait aspect ratio
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -564,7 +564,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image with portrait aspect ratio and caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -624,7 +624,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image with landscape aspect ratio
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -680,7 +680,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image with landscape aspect ratio and caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -740,7 +740,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Video with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -808,7 +808,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Video
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -873,7 +873,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Missing images and videos
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -992,7 +992,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Broken source URL images and videos
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -1111,7 +1111,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Audio with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -1171,7 +1171,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Audio
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -1231,7 +1231,7 @@ Voice notes are not shown any differently from audio attachments.
 #### Other file type with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -1345,7 +1345,7 @@ Voice notes are not shown any differently from audio attachments.
 #### Other file type
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="green"
@@ -1411,7 +1411,7 @@ Voice notes are not shown any differently from audio attachments.
 Note that the author avatar goes away if `collapseMetadata` is set.
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md
index 0638a14a0..b399aa13c 100644
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
@@ -3,7 +3,7 @@
 #### Plain text
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -41,7 +41,7 @@
 #### Name variations
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -112,7 +112,7 @@
 #### With emoji
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -148,7 +148,7 @@
 #### Replies to you or yourself
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -186,7 +186,7 @@
 #### In a group conversation
 
 ```jsx
-<util.ConversationContext theme={util.theme} type="group">
+<util.ConversationContext theme={util.theme} ios={util.ios} type="group">
   <li>
     <Message
       direction="incoming"
@@ -228,7 +228,7 @@
 #### Long names and context
 
 ```jsx
-<util.ConversationContext theme={util.theme} type="group">
+<util.ConversationContext theme={util.theme} ios={util.ios} type="group">
   <li>
     <Message
       direction="incoming"
@@ -270,7 +270,7 @@
 #### A lot of text in quotation
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -314,7 +314,7 @@
 #### A lot of text in quotation, with icon
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -366,7 +366,7 @@
 #### A lot of text in quotation, with image
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -426,7 +426,7 @@
 #### Image with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -478,7 +478,7 @@
 #### Image
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -528,7 +528,7 @@
 #### Image with no thumbnail
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -570,7 +570,7 @@
 #### Video with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -622,7 +622,7 @@
 #### Video
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -672,7 +672,7 @@
 #### Video with no thumbnail
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -720,7 +720,7 @@
 #### Audio with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -764,7 +764,7 @@
 #### Audio
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -806,7 +806,7 @@
 #### Voice message
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -852,7 +852,7 @@
 #### Other file type with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -935,7 +935,7 @@
 #### Other file type
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -979,7 +979,7 @@
 #### Quote, image attachment, and caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -1025,7 +1025,7 @@
 #### Quote, image attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -1069,7 +1069,7 @@
 #### Quote, portrait image attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -1113,14 +1113,17 @@
 #### Quote, video attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
       authorColor="green"
       attachment={{
-        url: util.mp4ObjectUrl,
+        screenshot: {
+          url: util.pngObjectUrl,
+          contentType: 'image/png',
+        },
         fileName: 'freezing_bubble.mp4',
         contentType: 'video/mp4',
       }}
@@ -1138,7 +1141,10 @@
       timestamp={Date.now()}
       status="sending"
       attachment={{
-        url: util.mp4ObjectUrl,
+        screenshot: {
+          url: util.pngObjectUrl,
+          contentType: 'image/png',
+        },
         fileName: 'freezing_bubble.mp4',
         contentType: 'video/mp4',
       }}
@@ -1157,7 +1163,7 @@
 #### Quote, audio attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -1201,7 +1207,7 @@
 #### Quote, file attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
@@ -1249,7 +1255,7 @@
 #### Plain text
 
 ```jsx
-<div className={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
@@ -1257,17 +1263,17 @@
       authorPhoneNumber="(202) 555-1000"
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
-      i18n={window.i18n}
+      i18n={util.i18n}
       onClick={() => console.log('onClick')}
     />
   </div>
-</div>
+</util.ConversationContext>
 ```
 
 #### With an icon
 
 ```jsx
-<div className={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
@@ -1283,13 +1289,13 @@
       onClick={() => console.log('onClick')}
     />
   </div>
-</div>
+</util.ConversationContext>
 ```
 
 #### With an image
 
 ```jsx
-<div className={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
@@ -1308,13 +1314,59 @@
       onClick={() => console.log('onClick')}
     />
   </div>
-</div>
+</util.ConversationContext>
+```
+
+#### With attachment and no text
+
+```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <div className="bottom-bar">
+    <Quote
+      authorColor="blue"
+      authorPhoneNumber="(202) 555-1000"
+      authorProfileName="Mr. Blue"
+      id={Date.now() - 1000}
+      i18n={util.i18n}
+      attachment={{
+        contentType: 'image/gif',
+        fileName: 'llama.gif',
+        thumbnail: {
+          objectUrl: util.gifObjectUrl,
+        },
+      }}
+      onClick={() => console.log('onClick')}
+    />
+  </div>
+</util.ConversationContext>
+```
+
+#### With generic attachment
+
+```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <div className="bottom-bar">
+    <Quote
+      text="How many ferrets do you have?"
+      authorColor="blue"
+      authorPhoneNumber="(202) 555-1000"
+      authorProfileName="Mr. Blue"
+      id={Date.now() - 1000}
+      i18n={util.i18n}
+      attachment={{
+        contentType: 'text/plain',
+        fileName: 'manifesto.text',
+      }}
+      onClick={() => console.log('onClick')}
+    />
+  </div>
+</util.ConversationContext>
 ```
 
 #### With a close button
 
 ```jsx
-<div className={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
@@ -1324,16 +1376,16 @@
       id={Date.now() - 1000}
       onClose={() => console.log('onClose')}
       onClick={() => console.log('onClick')}
-      i18n={window.i18n}
+      i18n={util.i18n}
     />
   </div>
-</div>
+</util.ConversationContext>
 ```
 
 #### With a close button and icon
 
 ```jsx
-<div className={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
@@ -1343,20 +1395,20 @@
       id={Date.now() - 1000}
       onClose={() => console.log('onClose')}
       onClick={() => console.log('onClick')}
-      i18n={window.i18n}
+      i18n={util.i18n}
       attachment={{
         contentType: 'image/jpeg',
         fileName: 'llama.jpg',
       }}
     />
   </div>
-</div>
+</util.ConversationContext>
 ```
 
 #### With a close button and image
 
 ```jsx
-<div className={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
@@ -1376,5 +1428,5 @@
       }}
     />
   </div>
-</div>
+</util.ConversationContext>
 ```
diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx
index f24b4614d..8e6dc925a 100644
--- a/ts/components/conversation/Quote.tsx
+++ b/ts/components/conversation/Quote.tsx
@@ -125,7 +125,7 @@ export class Quote extends React.Component<Props> {
   }
 
   public renderGenericFile() {
-    const { attachment } = this.props;
+    const { attachment, isIncoming } = this.props;
 
     if (!attachment) {
       return;
@@ -144,7 +144,14 @@ export class Quote extends React.Component<Props> {
     return (
       <div className="module-quote__generic-file">
         <div className="module-quote__generic-file__icon" />
-        <div className="module-quote__generic-file__text">{fileName}</div>
+        <div
+          className={classNames(
+            'module-quote__generic-file__text',
+            isIncoming ? 'module-quote__generic-file__text--incoming' : null
+          )}
+        >
+          {fileName}
+        </div>
       </div>
     );
   }
@@ -176,11 +183,17 @@ export class Quote extends React.Component<Props> {
   }
 
   public renderText() {
-    const { i18n, text, attachment } = this.props;
+    const { i18n, text, attachment, isIncoming } = this.props;
 
     if (text) {
       return (
-        <div dir="auto" className="module-quote__primary__text">
+        <div
+          dir="auto"
+          className={classNames(
+            'module-quote__primary__text',
+            isIncoming ? 'module-quote__primary__text--incoming' : null
+          )}
+        >
           <MessageBody text={text} i18n={i18n} />
         </div>
       );
@@ -195,7 +208,14 @@ export class Quote extends React.Component<Props> {
     const typeLabel = getTypeLabel({ i18n, contentType, isVoiceMessage });
     if (typeLabel) {
       return (
-        <div className="module-quote__primary__type-label">{typeLabel}</div>
+        <div
+          className={classNames(
+            'module-quote__primary__type-label',
+            isIncoming ? 'module-quote__primary__type-label--incoming' : null
+          )}
+        >
+          {typeLabel}
+        </div>
       );
     }
 
@@ -236,13 +256,15 @@ export class Quote extends React.Component<Props> {
       authorColor,
       i18n,
       isFromMe,
+      isIncoming,
     } = this.props;
 
     return (
       <div
         className={classNames(
           'module-quote__primary__author',
-          !isFromMe ? `module-quote__primary__author--${authorColor}` : null
+          !isFromMe ? `module-quote__primary__author--${authorColor}` : null,
+          isIncoming ? 'module-quote__primary__author--incoming' : null
         )}
       >
         {isFromMe ? (
diff --git a/ts/styleguide/ConversationContext.tsx b/ts/styleguide/ConversationContext.tsx
index 7b6cc5fa6..ec21c3364 100644
--- a/ts/styleguide/ConversationContext.tsx
+++ b/ts/styleguide/ConversationContext.tsx
@@ -7,6 +7,7 @@ interface Props {
    */
   theme: 'light-theme' | 'dark-theme';
   type: 'private' | 'group';
+  ios: boolean;
 }
 
 /**
@@ -15,10 +16,12 @@ interface Props {
  */
 export class ConversationContext extends React.Component<Props> {
   public render() {
-    const { theme, type } = this.props;
+    const { theme, type, ios } = this.props;
 
     return (
-      <div className={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>
diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts
index 8a144a2f8..6bf8176fb 100644
--- a/ts/styleguide/StyleGuideUtil.ts
+++ b/ts/styleguide/StyleGuideUtil.ts
@@ -1,4 +1,5 @@
 import QueryString from 'qs';
+import classNames from 'classnames';
 
 // This file provides helpers for the Style Guide, exposed at 'util' in the global scope
 //   via the 'context' option in react-styleguidist.
@@ -6,7 +7,7 @@ import QueryString from 'qs';
 import { default as _ } from 'lodash';
 export { ConversationContext } from './ConversationContext';
 
-export { _ };
+export { _, classNames };
 
 // TypeScript wants two things when you import:
 //   1) a normal typescript file
@@ -81,6 +82,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
@@ -90,7 +92,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