From 3fa759c4847cdb09bdac46cc7f74d4cbd41e6da2 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Fri, 23 Oct 2020 17:58:16 -0400
Subject: [PATCH] chat: indigo-react inline code

Fixes urbit/landscape#124.
---
 .../apps/chat/components/content/code.js      |  2 +-
 .../apps/chat/components/content/text.js      | 20 +++++++++++++++++++
 .../src/views/apps/chat/css/custom.css        | 11 +---------
 3 files changed, 22 insertions(+), 11 deletions(-)

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 3a133e06d..29589f02e 100644
--- a/pkg/interface/src/views/apps/chat/components/content/code.js
+++ b/pkg/interface/src/views/apps/chat/components/content/code.js
@@ -20,7 +20,7 @@ export default class CodeContent extends Component {
           maxHeight='10em'
           maxWidth='100%'
           style={{ whiteSpace: 'pre' }}
-          backgroundColor='scales.black10'
+          backgroundColor='washedGray'
         >
           {content.code.output[0].join('\n')}
         </Text>
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 d15b14ba9..be66a6177 100644
--- a/pkg/interface/src/views/apps/chat/components/content/text.js
+++ b/pkg/interface/src/views/apps/chat/components/content/text.js
@@ -24,10 +24,30 @@ const DISABLED_INLINE_TOKENS = [
   'reference'
 ];
 
+const renderers = {
+  inlineCode: ({language, value}) => {
+    return <Text mono fontSize='14px' backgroundColor='washedGray' style={{ whiteSpace: 'preWrap'}}>{value}</Text>
+  },
+  code: ({language, value}) => {
+    return <Text
+              py='1'
+              className='clamp-message'
+              fontSize='14px'
+              display='block'
+              mono
+              backgroundColor='washedGray'
+              overflowX='scroll'
+              style={{ whiteSpace: 'pre'}}>
+              {value}
+            </Text>
+  }
+};
+
 const MessageMarkdown = React.memo(props => (
   <ReactMarkdown
     {...props}
     unwrapDisallowed={true}
+    renderers={renderers}
     allowNode={(node, index, parent) => {
       if (
         node.type === 'blockquote'
diff --git a/pkg/interface/src/views/apps/chat/css/custom.css b/pkg/interface/src/views/apps/chat/css/custom.css
index bc3f69166..a4b5691d7 100644
--- a/pkg/interface/src/views/apps/chat/css/custom.css
+++ b/pkg/interface/src/views/apps/chat/css/custom.css
@@ -225,16 +225,7 @@ blockquote {
   font-size: 14px;
 }
 
-pre, code {
-  background-color: var(--light-gray);
-}
-
-pre code {
-  background-color: transparent;
-  white-space: pre-wrap;
-}
-
-code, .code, .chat.code .react-codemirror2 .CodeMirror * {
+.chat.code .react-codemirror2 .CodeMirror * {
   font-family: 'Source Code Pro';
 }