From c57ceb0bfbcbd4eb1728716829a1bba2b8cf8296 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 14 Oct 2020 21:54:46 -0400
Subject: [PATCH] chat: messages use 'black'

---
 .../apps/chat/components/ChatMessage.tsx      | 12 +++----
 .../apps/chat/components/content/code.js      | 34 ++++++++++++++-----
 .../apps/chat/components/content/text.js      |  6 ++--
 .../src/views/apps/chat/css/custom.css        | 14 --------
 4 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index b346a33a0..999e8eda3 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -223,7 +223,7 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
           api={api}
           className="fl pr3 v-top bg-white bg-gray0-d pt1"
         />
-        <div className="clamp-message" style={{ flexGrow: 1 }}>
+        <Box flexGrow='1' display='block' className="clamp-message">
           <Box
             className="hide-child"
             pt={1}
@@ -247,7 +247,7 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
             <Text gray mono ml={2} className="v-mid child dn-s">{datestamp}</Text>
           </Box>
           <Box fontSize='14px'><MessageContent content={msg.letter} remoteContentPolicy={remoteContentPolicy} measure={measure} /></Box>
-        </div>
+        </Box>
       </>
     );
   }
@@ -256,7 +256,7 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
 export const MessageWithoutSigil = ({ timestamp, msg, remoteContentPolicy, measure }) => (
   <>
     <p className="child pr1 mono f9 gray2 dib">{timestamp}</p>
-    <Box fontSize={0} className="clamp-message" style={{ flexGrow: 1 }}>
+    <Box fontSize='14px' className="clamp-message" style={{ flexGrow: 1 }}>
       <MessageContent content={msg.letter} remoteContentPolicy={remoteContentPolicy} measure={measure}/>
     </Box>
   </>
@@ -267,7 +267,7 @@ export const MessageContent = ({ content, remoteContentPolicy, measure }) => {
     return <CodeContent content={content} />;
   } else if ('url' in content) {
     return (
-      <Text fontSize='14px' lineHeight="tall" color='gray'>
+      <Text fontSize='14px' lineHeight="tall" color='black'>
         <RemoteContent
           url={content.url}
           remoteContentPolicy={remoteContentPolicy}
@@ -283,9 +283,9 @@ export const MessageContent = ({ content, remoteContentPolicy, measure }) => {
     );
   } else if ('me' in content) {
     return (
-      <p className='f9 i lh-copy v-top'>
+      <Text fontStyle='italic' fontSize='14px' lineHeight='tall' color='black'>
         {content.me}
-      </p>
+      </Text>
     );
   }
   else if ('text' in content) {
diff --git a/pkg/interface/src/views/apps/chat/components/content/code.js b/pkg/interface/src/views/apps/chat/components/content/code.js
index 4dda92f0a..e0a97a818 100644
--- a/pkg/interface/src/views/apps/chat/components/content/code.js
+++ b/pkg/interface/src/views/apps/chat/components/content/code.js
@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-
+import { Box, Text } from '@tlon/indigo-react';
 
 export default class CodeContent extends Component {
-
   render() {
     const { props } = this;
     const content = props.content;
@@ -11,18 +10,37 @@ export default class CodeContent extends Component {
       (Boolean(content.code.output) &&
        content.code.output.length && content.code.output.length > 0) ?
       (
-        <pre className={`code f9 clamp-attachment pa1 mt0 mb0`}>
+        <Text
+          display='block'
+          mono
+          p='1'
+          my='0'
+          fontSize='14px'
+          overflow='auto'
+          maxHeight='10em'
+          maxWidth='100%'
+          backgroundColor='scales.black10'
+        >
           {content.code.output[0].join('\n')}
-        </pre>
+        </Text>
       ) : null;
 
     return (
-      <div className="mv2">
-        <pre className={`code f9 clamp-attachment pa1 mt0 mb0`}>
+      <Box my='2'>
+        <Text
+          display='block'
+          mono
+          my='0'
+          p='1'
+          fontSize='14px'
+          overflow='auto'
+          maxHeight='10em'
+          maxWidth='100%'
+        >
           {content.code.expression}
-        </pre>
+        </Text>
         {outputElement}
-      </div>
+      </Box>
     );
   }
 }
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 52e3011a6..d15b14ba9 100644
--- a/pkg/interface/src/views/apps/chat/components/content/text.js
+++ b/pkg/interface/src/views/apps/chat/components/content/text.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import RemarkDisableTokenizers from 'remark-disable-tokenizers';
 import urbitOb from 'urbit-ob';
-import { Box, Text } from '@tlon/indigo-react';
+import { Text } from '@tlon/indigo-react';
 
 const DISABLED_BLOCK_TOKENS = [
   'indentedCode',
@@ -63,7 +63,7 @@ export default class TextContent extends Component {
       && (urbitOb.isValidPatp(group[2]) // valid patp?
       && (group[0] === content.text))) { // entire message is room name?
       return (
-        <Text fontSize='14px' color='gray' lineHeight="tall">
+        <Text fontSize='14px' color='black' lineHeight="tall">
           <Link
             className="bb b--black b--white-d mono"
             to={'/~landscape/join/' + group.input}>
@@ -73,7 +73,7 @@ export default class TextContent extends Component {
       );
     } else {
       return (
-        <Text color='gray' fontSize='14px' lineHeight="tall" style={{ overflowWrap: 'break-word' }}>
+        <Text color='black' fontSize='14px' lineHeight="tall" style={{ overflowWrap: 'break-word' }}>
           <MessageMarkdown source={content.text} />
         </Text>
       );
diff --git a/pkg/interface/src/views/apps/chat/css/custom.css b/pkg/interface/src/views/apps/chat/css/custom.css
index 90bc1f1e8..bc3f69166 100644
--- a/pkg/interface/src/views/apps/chat/css/custom.css
+++ b/pkg/interface/src/views/apps/chat/css/custom.css
@@ -63,16 +63,6 @@ h2 {
   max-width: calc(100% - 36px - 1.5rem);
 }
 
-.clamp-attachment {
-  overflow: auto;
-  max-height: 10em;
-  max-width: 100%;
-}
-
-.lh-16 {
-  line-height: 16px;
-}
-
 .mono {
   font-family: "Source Code Pro", monospace;
 }
@@ -81,10 +71,6 @@ h2 {
   background-color: #ECF6F2;
 }
 
-.list-ship {
-  line-height: 2.2;
-}
-
 .c-default {
   cursor: default;
 }