From fc7f8600fbc1c31ea66a6642a478189befe2cee9 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Mon, 5 Oct 2020 19:12:33 -0400
Subject: [PATCH] chat: resolve conflicts in #3646

---
 .../views/apps/chat/components/ChatInput.tsx  | 10 ++--
 .../views/apps/chat/components/chat-editor.js |  2 +-
 .../apps/chat/components/content/text.js      |  2 +-
 .../apps/chat/components/unread-notice.js     | 50 ++++++++++++-------
 .../src/views/apps/chat/css/custom.css        |  8 ++-
 5 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
index 957288182..0fdfd289f 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
@@ -49,7 +49,7 @@ export default class ChatInput extends Component<ChatInputProps, ChatInputState>
 
     this.submit = this.submit.bind(this);
     this.toggleCode = this.toggleCode.bind(this);
-    
+
   }
 
   toggleCode() {
@@ -81,7 +81,7 @@ export default class ChatInput extends Component<ChatInputProps, ChatInputState>
     }
   }
 
-  
+
 
   submit(text) {
     const { props, state } = this;
@@ -133,7 +133,7 @@ export default class ChatInput extends Component<ChatInputProps, ChatInputState>
         { url }
       );
     }
-    
+
   }
 
   uploadError(error) {
@@ -205,7 +205,7 @@ export default class ChatInput extends Component<ChatInputProps, ChatInputState>
           onPaste={this.onPaste.bind(this)}
           placeholder='Message...'
         />
-        <div className="ml2 mr2"
+        <div className="ml2 mr2 flex-shrink-0"
              style={{
                 height: '16px',
                 width: '16px',
@@ -227,7 +227,7 @@ export default class ChatInput extends Component<ChatInputProps, ChatInputState>
             />
           </S3Upload>
         </div>
-        <div className="mr2" style={{
+        <div className="mr2 flex-shrink-0" style={{
             height: '16px',
             width: '16px',
             flexBasis: 16,
diff --git a/pkg/interface/src/views/apps/chat/components/chat-editor.js b/pkg/interface/src/views/apps/chat/components/chat-editor.js
index 32c15add1..6d6389916 100644
--- a/pkg/interface/src/views/apps/chat/components/chat-editor.js
+++ b/pkg/interface/src/views/apps/chat/components/chat-editor.js
@@ -136,7 +136,7 @@ export default class ChatEditor extends Component {
           'chat fr h-100 flex bg-gray0-d lh-copy w-100 items-center ' +
           (inCodeMode ? ' code' : '')
         }
-        style={{ flexGrow: 1, paddingBottom: '3px', maxHeight: '224px', width: 'calc(100% - 72px)' }}>
+        style={{ flexGrow: 1, paddingBottom: '3px', maxHeight: '224px', width: 'calc(100% - 88px)' }}>
         <CodeEditor
           value={message}
           options={options}
diff --git a/pkg/interface/src/views/apps/chat/components/content/text.js b/pkg/interface/src/views/apps/chat/components/content/text.js
index 2f415e27e..b331c43f0 100644
--- a/pkg/interface/src/views/apps/chat/components/content/text.js
+++ b/pkg/interface/src/views/apps/chat/components/content/text.js
@@ -64,7 +64,7 @@ export default class TextContent extends Component {
       && (group[0] === content.text))) { // entire message is room name?
       return (
         <Link
-          className="bb b--black b--white-d f9 mono lh-copy v-top"
+          className="bb b--black b--white-d f8 mono lh-copy v-top"
           to={'/~groups/join/' + group.input}>
           {content.text}
         </Link>
diff --git a/pkg/interface/src/views/apps/chat/components/unread-notice.js b/pkg/interface/src/views/apps/chat/components/unread-notice.js
index 954ed3357..d4a673048 100644
--- a/pkg/interface/src/views/apps/chat/components/unread-notice.js
+++ b/pkg/interface/src/views/apps/chat/components/unread-notice.js
@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React from 'react';
 import moment from 'moment';
+import { Box, Text } from '@tlon/indigo-react';
 
 export const UnreadNotice = (props) => {
   const { unreadCount, unreadMsg, dismissUnread, onClick } = props;
@@ -16,26 +17,41 @@ export const UnreadNotice = (props) => {
   }
 
   return (
-    <div style={{ left: '0px' }}
-         className="pa4 w-100 absolute z-1 unread-notice">
-      <div className={
-        "ba b--green2 green2 bg-white bg-gray0-d flex items-center " +
-        "pa2 f9 justify-between br1"
-      }>
-        <p className="lh-copy db pointer" onClick={onClick}>
+    <Box style={{ left: '0px' }}
+      p='4'
+      width='100%'
+      position='absolute'
+      zIndex='1'
+      className='unread-notice'
+    >
+      <Box
+        backgroundColor='white'
+        display='flex'
+        alignItems='center'
+        p='2'
+        fontSize='0'
+        justifyContent='space-between'
+        borderRadius='1'
+        border='1'
+        borderColor='blue'>
+        <Text flexShrink='0' display='block' cursor='pointer' onClick={onClick}>
           {unreadCount} new messages since{' '}
           {datestamp && (
             <>
-              <span className="green3">~{datestamp}</span> at{' '}
+              <Text color='blue'>~{datestamp}</Text> at{' '}
             </>
           )}
-          <span className="green3">{timestamp}</span>
-        </p>
-        <div onClick={dismissUnread}
-             className="ml4 inter b--green2 pointer tr lh-copy">
+          <Text color='blue'>{timestamp}</Text>
+        </Text>
+        <Text
+          ml='4'
+          color='blue'
+          cursor='pointer'
+          textAlign='right'
+          onClick={dismissUnread}>
           Mark as Read
-        </div>
-      </div>
-    </div>
+        </Text>
+      </Box>
+    </Box>
   );
-}
+}
\ No newline at end of file
diff --git a/pkg/interface/src/views/apps/chat/css/custom.css b/pkg/interface/src/views/apps/chat/css/custom.css
index af5e573d7..09c32edd1 100644
--- a/pkg/interface/src/views/apps/chat/css/custom.css
+++ b/pkg/interface/src/views/apps/chat/css/custom.css
@@ -231,6 +231,11 @@ blockquote {
     font-family: 'Inter';
 }
 
+.chat .cm-s-tlon.CodeMirror {
+  font-size: 16px;
+  margin-top: 6px;
+}
+
 pre, code {
   background-color: var(--light-gray);
 }
@@ -380,7 +385,8 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
   .chat .cm-s-tlon.CodeMirror {
     background: #333;
     color: #fff;
-    font-size: 12px;
+    font-size: 16px;
+    margin-top: 6px;
   }
 
   .chat .cm-s-tlon span.cm-def {