From 2b5f6d8b5ea821a7f243d17955ef1ed6027ab23d Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Thu, 18 Oct 2018 15:41:05 -0700
Subject: [PATCH] Ensure that blue group avatars are preserved in dark theme

---
 stylesheets/_theme_dark.scss |   3 +
 ts/components/Avatar.md      | 519 ++++++++++++++++++-----------------
 2 files changed, 265 insertions(+), 257 deletions(-)

diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 6f6a4ce8336..defec00e9e2 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -1325,6 +1325,9 @@ body.dark-theme {
     background-color: $color-conversation-grey-shade;
   }
 
+  .module-avatar--signal-blue {
+    background-color: $color-signal-blue;
+  }
   .module-avatar--red {
     background-color: $color-conversation-red-shade;
   }
diff --git a/ts/components/Avatar.md b/ts/components/Avatar.md
index 5e15cb4b190..a6e1146b4d3 100644
--- a/ts/components/Avatar.md
+++ b/ts/components/Avatar.md
@@ -1,306 +1,311 @@
 ### With avatar
 
 ```jsx
-<Avatar
-  size={28}
-  color="pink"
-  name="John Smith"
-  avatarPath={util.gifObjectUrl}
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="pink"
-  name="Puppies"
-  avatarPath={util.gifObjectUrl}
-  conversationType="group"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={28}
+    color="pink"
+    name="John Smith"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="pink"
+    name="Puppies"
+    avatarPath={util.gifObjectUrl}
+    conversationType="group"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```
 
 ### With only name
 
 ```jsx
-<Avatar
-  size={28}
-  color="blue"
-  name="John"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="green"
-  name="John Smith"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="red"
-  name="Puppies"
-  conversationType="group"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={28}
+    color="blue"
+    name="John"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="green"
+    name="John Smith"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="red"
+    name="Puppies"
+    conversationType="group"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```
 
 ### Just phone number
 
 ```jsx
-<Avatar
-  size={28}
-  color="pink"
-  phoneNumber="(555) 353-3433"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={28}
+    color="pink"
+    phoneNumber="(555) 353-3433"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```
 
 ### All colors
 
 ```jsx
-<Avatar
-  size={28}
-  color="signal-blue"
-  name="Group"
-  conversationType="group"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="red"
-  name="Red"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="deep_orange"
-  name="Deep Orange"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="brown"
-  name="Broen"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="pink"
-  name="Pink"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="purple"
-  name="Purple"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="indigo"
-  name="Indigo"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="blue"
-  name="Blue"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="teal"
-  name="Teal"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="green"
-  name="Green"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="light_green"
-  name="Light Green"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={28}
-  color="blue_grey"
-  name="Blue Grey"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={28}
+    color="signal-blue"
+    name="Group"
+    conversationType="group"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="red"
+    name="Red"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="deep_orange"
+    name="Deep Orange"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="brown"
+    name="Broen"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="pink"
+    name="Pink"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="purple"
+    name="Purple"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="indigo"
+    name="Indigo"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="blue"
+    name="Blue"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="teal"
+    name="Teal"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="green"
+    name="Green"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="light_green"
+    name="Light Green"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={28}
+    color="blue_grey"
+    name="Blue Grey"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```
 
 ### 36px
 
 ```jsx
-<Avatar
-  size={36}
-  color="teal"
-  name="John Smith"
-  avatarPath={util.gifObjectUrl}
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={36}
-  color="teal"
-  name="John"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={36}
-  color="teal"
-  name="John Smith"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={36}
-  color="teal"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={36}
-  color="teal"
-  name="Pupplies"
-  conversationType="group"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={36}
+    color="teal"
+    name="John Smith"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={36}
+    color="teal"
+    name="John"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={36}
+    color="teal"
+    name="John Smith"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar size={36} color="teal" conversationType="direct" i18n={util.i18n} />
+  <Avatar
+    size={36}
+    color="teal"
+    name="Pupplies"
+    conversationType="group"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```
 
 ### 48px
 
 ```jsx
-<Avatar
-  size={48}
-  color="teal"
-  name="John Smith"
-  avatarPath={util.gifObjectUrl}
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={48}
-  color="teal"
-  name="John"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={48}
-  color="teal"
-  name="John Smith"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={48}
-  color="teal"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={48}
-  color="teal"
-  name="Pupplies"
-  conversationType="group"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={48}
+    color="teal"
+    name="John Smith"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={48}
+    color="teal"
+    name="John"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={48}
+    color="teal"
+    name="John Smith"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar size={48} color="teal" conversationType="direct" i18n={util.i18n} />
+  <Avatar
+    size={48}
+    color="teal"
+    name="Pupplies"
+    conversationType="group"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```
 
 ### 80px
 
 ```jsx
-<Avatar
-  size={80}
-  color="teal"
-  name="John Smith"
-  avatarPath={util.gifObjectUrl}
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={80}
-  color="teal"
-  name="John"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={80}
-  color="teal"
-  name="John Smith"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={80}
-  color="teal"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
-<Avatar
-  size={80}
-  color="teal"
-  name="Pupplies"
-  conversationType="group"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={80}
+    color="teal"
+    name="John Smith"
+    avatarPath={util.gifObjectUrl}
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={80}
+    color="teal"
+    name="John"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar
+    size={80}
+    color="teal"
+    name="John Smith"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+  <Avatar size={80} color="teal" conversationType="direct" i18n={util.i18n} />
+  <Avatar
+    size={80}
+    color="teal"
+    name="Pupplies"
+    conversationType="group"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```
 
 ### Broken color
 
 ```jsx
-<Avatar
-  size={28}
-  color="fake"
-  name="F"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={28}
+    color="fake"
+    name="F"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```
 
 ### Broken image
 
 ```jsx
-<Avatar
-  size={28}
-  color="pink"
-  name="John Smith"
-  avatarPath="nonexistent"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={28}
+    color="pink"
+    name="John Smith"
+    avatarPath="nonexistent"
+    conversationType="direct"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```
 
 ### Broken image for group
 
 ```jsx
-<Avatar
-  size={28}
-  avatarPath="nonexistent"
-  color="pink"
-  name="Puppies"
-  avatarPath="nonexistent"
-  conversationType="group"
-  i18n={util.i18n}
-/>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <Avatar
+    size={28}
+    avatarPath="nonexistent"
+    color="pink"
+    name="Puppies"
+    avatarPath="nonexistent"
+    conversationType="group"
+    i18n={util.i18n}
+  />
+</util.ConversationContext>
 ```