When iOS device has been linked, use iOS color scheme

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..."

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"

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>
 ```

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 ? (