From 09d2057284589a5d4bc8026b837d835bc6aa1e7b Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 20 Feb 2020 01:37:16 -0500
Subject: [PATCH] chat: blend uncustomised sigils

---
 pkg/interface/chat/src/js/components/chat.js  |  6 ++---
 .../chat/src/js/components/lib/chat-input.js  | 24 ++++++++++++++++---
 .../chat/src/js/components/lib/message.js     |  8 +++++--
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/pkg/interface/chat/src/js/components/chat.js b/pkg/interface/chat/src/js/components/chat.js
index 1c14760129..92193d7a62 100644
--- a/pkg/interface/chat/src/js/components/chat.js
+++ b/pkg/interface/chat/src/js/components/chat.js
@@ -237,8 +237,8 @@ export class ChatScreen extends Component {
          <Link to="/~chat/">{"⟵ All Chats"}</Link>
        </div>
        <div
-         className={`pl3 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative overflow-x-scroll
-         overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`}
+         className={"pl3 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative " +
+         "overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"}
          style={{ height: 48 }}>
          <SidebarSwitcher
            sidebarShown={this.props.sidebarShown}
@@ -261,7 +261,7 @@ export class ChatScreen extends Component {
          />
        </div>
        <div
-         className="overflow-y-scroll bg-gray0-d pt3 pb2 flex flex-column-reverse"
+         className="overflow-y-scroll bg-white bg-gray0-d pt3 pb2 flex flex-column-reverse"
          style={{ height: "100%", resize: "vertical" }}
          onScroll={this.onScroll}>
          <div
diff --git a/pkg/interface/chat/src/js/components/lib/chat-input.js b/pkg/interface/chat/src/js/components/lib/chat-input.js
index fe7ecb0781..78dd5c9601 100644
--- a/pkg/interface/chat/src/js/components/lib/chat-input.js
+++ b/pkg/interface/chat/src/js/components/lib/chat-input.js
@@ -172,6 +172,9 @@ export class ChatInput extends Component {
     let color = !!props.ownerContact
       ? uxToHex(props.ownerContact.color) : '#000000';
 
+    let sigilClass = !!props.ownerContact
+      ? "" : "mix-blend-diff";
+
     return (
       <div className="pa3 cf flex black bt b--gray4 o-50">
         <div className="fl" style={{
@@ -179,7 +182,12 @@ export class ChatInput extends Component {
           flexBasis: 24,
           height: 24
         }}>
-          <Sigil ship={window.ship} size={24} color={`#${color}`} />
+          <Sigil
+            ship={window.ship}
+            size={24}
+            color={`#${color}`}
+            classes={sigilClass}
+          />
         </div>
         <div className="fr h-100 flex" style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}>
           <p className="pl3">This chat is read only and you cannot post.</p>
@@ -193,10 +201,15 @@ export class ChatInput extends Component {
 
     let color = !!props.ownerContact
       ? uxToHex(props.ownerContact.color) : '#000000';
+
+    let sigilClass = !!props.ownerContact
+      ? "" : "mix-blend-diff";
+
     this.bindShortcuts();
 
     return (
-      <div className="pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-gray0-d" style={{ flexGrow: 1 }}>
+      <div className="pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white bg-gray0-d"
+      style={{ flexGrow: 1 }}>
         <div
           className="fl"
           style={{
@@ -204,7 +217,12 @@ export class ChatInput extends Component {
             flexBasis: 24,
             height: 24
           }}>
-          <Sigil ship={window.ship} size={24} color={`#${color}`} />
+          <Sigil
+            ship={window.ship}
+            size={24}
+            color={`#${color}`}
+            classes={sigilClass}
+            />
         </div>
         <div className="fr h-100 flex bg-gray0-d" style={{ flexGrow: 1 }}>
           <textarea
diff --git a/pkg/interface/chat/src/js/components/lib/message.js b/pkg/interface/chat/src/js/components/lib/message.js
index 9ed3cc5938..317c616eb9 100644
--- a/pkg/interface/chat/src/js/components/lib/message.js
+++ b/pkg/interface/chat/src/js/components/lib/message.js
@@ -162,12 +162,14 @@ export class Message extends Component {
 
       let contact = !!(props.msg.author in props.contacts)
         ? props.contacts[props.msg.author] : false;
-      let name = props.msg.author;
+      let name = `~${props.msg.author}`;
       let color = "#000000";
+      let sigilClass = "mix-blend-diff"
       if (contact) {
         name = (contact.nickname.length > 0)
           ? contact.nickname : `~${props.msg.author}`;
         color = `#${uxToHex(contact.color)}`;
+        sigilClass = "";
       }
       return (
         <div
@@ -181,7 +183,9 @@ export class Message extends Component {
             <Sigil
               ship={props.msg.author}
               size={24}
-              color={color} />
+              color={color}
+              classes={sigilClass}
+              />
           </div>
           <div
             className="fr clamp-message white-d"