Merge pull request #3797 from urbit/mp/chat/indigo-inline-code

chat: indigo-react inline code

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>

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'

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';
 }