From fbaef50c4a58df3e86d31856ae73b1131f70eab9 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Thu, 18 Oct 2018 11:57:10 -0700
Subject: [PATCH] Android theme: Incoming quotes take color from containing
 message

---
 ts/components/conversation/Message.tsx | 12 ++++-
 ts/components/conversation/Quote.md    | 69 ++++++++++++++------------
 2 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index c89334c6f00..a7812a749d3 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -557,7 +557,13 @@ export class Message extends React.Component<Props, State> {
   }
 
   public renderQuote() {
-    const { conversationType, direction, i18n, quote } = this.props;
+    const {
+      conversationType,
+      authorColor,
+      direction,
+      i18n,
+      quote,
+    } = this.props;
 
     if (!quote) {
       return null;
@@ -565,6 +571,8 @@ export class Message extends React.Component<Props, State> {
 
     const withContentAbove =
       conversationType === 'group' && direction === 'incoming';
+    const quoteColor =
+      direction === 'incoming' ? authorColor : quote.authorColor;
 
     return (
       <Quote
@@ -576,7 +584,7 @@ export class Message extends React.Component<Props, State> {
         authorPhoneNumber={quote.authorPhoneNumber}
         authorProfileName={quote.authorProfileName}
         authorName={quote.authorName}
-        authorColor={quote.authorColor}
+        authorColor={quoteColor}
         referencedMessageNotFound={quote.referencedMessageNotFound}
         isFromMe={quote.isFromMe}
         withContentAbove={withContentAbove}
diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md
index ad65338bfbf..3668e9ef1be 100644
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
@@ -227,17 +227,20 @@
 
 #### All colors
 
+Note: for incoming messages, quote color is taken from the parent message. For outgoing
+messages the color is taken from the contact who wrote the quoted message.
+
 ```jsx
 <util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="red"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'red',
+        authorColor: 'pink',
         text: 'red',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -249,7 +252,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="red"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -264,11 +267,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="red"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'deep_orange',
+        authorColor: 'pink',
         text: 'deep_orange',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -280,7 +283,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="deep_orange"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -295,11 +298,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="brown"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'brown',
+        authorColor: 'pink',
         text: 'brown',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -311,7 +314,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="brown"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -326,7 +329,7 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="pink"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -342,7 +345,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="pink"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -357,11 +360,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="purple"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'purple',
+        authorColor: 'pink',
         text: 'purple',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -373,7 +376,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="purple"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -388,11 +391,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="indigo"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'indigo',
+        authorColor: 'pink',
         text: 'indigo',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -404,7 +407,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="indigo"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -419,11 +422,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="blue"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'blue',
+        authorColor: 'pink',
         text: 'blue',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -435,7 +438,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="blue"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -450,11 +453,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="teal"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'teal',
+        authorColor: 'pink',
         text: 'teal',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -466,7 +469,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="teal"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -481,11 +484,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="green"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'green',
+        authorColor: 'pink',
         text: 'green',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -497,7 +500,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="green"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -512,11 +515,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="light_green"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'light_green',
+        authorColor: 'pink',
         text: 'light_green',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -528,7 +531,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="light_green"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -543,11 +546,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      authorColor="grey"
+      authorColor="blue_grey"
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'blue_grey',
+        authorColor: 'pink',
         text: 'blue_grey',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -559,7 +562,7 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      authorColor="grey"
+      authorColor="blue_grey"
       text="Nice!"
       i18n={util.i18n}
       quote={{
@@ -578,7 +581,7 @@
       text="Nice!"
       i18n={util.i18n}
       quote={{
-        authorColor: 'grey',
+        authorColor: 'pink',
         text: 'grey',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),