chat: resolve conflicts in #3646

pkg/interface/src/views/apps/chat/components/ChatInput.tsx

@@ -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,

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}

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>

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' }}
+    <Box style={{ left: '0px' }}
-         className="pa4 w-100 absolute z-1 unread-notice">
+      p='4'
-      <div className={
+      width='100%'
-        "ba b--green2 green2 bg-white bg-gray0-d flex items-center " +
+      position='absolute'
-        "pa2 f9 justify-between br1"
+      zIndex='1'
-      }>
+      className='unread-notice'
-        <p className="lh-copy db pointer" onClick={onClick}>
+    >
+      <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>
+          <Text color='blue'>{timestamp}</Text>
-        </p>
+        </Text>
-        <div onClick={dismissUnread}
+        <Text
-             className="ml4 inter b--green2 pointer tr lh-copy">
+          ml='4'
+          color='blue'
+          cursor='pointer'
+          textAlign='right'
+          onClick={dismissUnread}>
           Mark as Read
-        </div>
+        </Text>
-      </div>
+      </Box>
-    </div>
+    </Box>
   );
 }

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 {