From 2f97099e945ac01cc8097dfcfe52869c4637b463 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Fri, 20 Mar 2020 15:22:32 +1000
Subject: [PATCH] chat-fe: correct light mode autocomplete styling

---
 .../chat/src/js/components/lib/chat-input.js  | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

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 c9611d083c..ffde08b2fb 100644
--- a/pkg/interface/chat/src/js/components/lib/chat-input.js
+++ b/pkg/interface/chat/src/js/components/lib/chat-input.js
@@ -10,8 +10,12 @@ import { uuid, uxToHex } from '/lib/util';
 
 const DEFAULT_INPUT_HEIGHT = 28;
 
+
 function getAdvance(a, b) {
   let res = '';
+  if(!a) {
+    return b;
+  }
   for (let i = 0; i < Math.min(a.length, b.length); i++) {
     if (a[i] !== b[i]) {
       return res;
@@ -29,26 +33,23 @@ function ChatInputSuggestions({ suggestions, onSelect, selected }) {
         left: '48px'
       }}
       className={
-        'absolute bg-white bg-gray0-d ' +
-        'w7 pv3 z-1 mt1 ba b--white-d overflow-y-scroll'
+        'absolute black white-d bg-white bg-gray0-d ' +
+        'w7 pv1 z-1 mt1 ba b--gray1-d b--gray4'
       }
     >
       {suggestions.map(ship => (
         <div
           className={cn(
-            'list mono f8 pv1 ph3 pointer' + ' hover-bg-gray4 relative',
+            'list mono f8 pv1 ph3 pointer' + ' hover-bg-gray4 relative bb b--gray1-d b--gray4',
             {
               'white-d': ship !== selected,
               'black-d': ship === selected,
               'bg-gray0-d': ship !== selected,
-              'bg-gray1-d': ship === selected
+              'bg-white': ship !== selected,
+              'bg-gray1-d': ship === selected,
+              'bg-gray5': ship === selected
             }
           )}
-          style={{
-            borderBottom: '1px solid #4d4d4d',
-            zIndex: '99',
-            fontFamily: 'monospace'
-          }}
           key={ship}
         >
           <Sigil
@@ -57,7 +58,7 @@ function ChatInputSuggestions({ suggestions, onSelect, selected }) {
             color="#000000"
             classes="mix-blend-diff v-mid"
           />
-          <span className="v-mid ml2 mw5 truncate dib mix-blend-diff">
+          <span className="v-mid ml2 mw5 truncate dib">
             {'~' + ship}
           </span>
         </div>
@@ -139,21 +140,20 @@ export class ChatInput extends Component {
     const match = /~([a-z\-]*)$/.exec(message);
 
     if (!match) {
-      return null;
+      this.setState({ patpSuggestions: [] })
     }
 
-    const envelopes = ['hastuc', 'hastuc-dibtux', 'hasfun'];
 
-    // const suggestions = _.chain(props.envelopes)
-    // .map("author")
-    // .uniq()
-    const suggestions = _.chain(envelopes)
+    const suggestions = _.chain(this.props.envelopes)
+      .map("author")
+      .uniq()
       .filter(s => s.startsWith(match[1]))
+      .take(3)
       .value();
 
     const advance = _.chain(suggestions)
       .map(s => s.replace(match[0], ''))
-      .reduce(getAdvance)
+      .reduce(getAdvance, )
       .value();
 
     let newState = {