styles: update markdown styles (#2005)

ui/desktop/src/components/MarkdownContent.tsx

@@ -8,10 +8,6 @@ import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { Check, Copy } from './icons';
 import { visit } from 'unist-util-visit';
 
-const UrlTransform = {
-  a: ({ node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
-};
-
 function rehypeinlineCodeProperty() {
   return function (tree) {
     if (!tree) return;
@@ -86,7 +82,7 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeinlineCodeProperty, rehypeRaw]}
-        className={`prose prose-xs dark:prose-invert w-full max-w-full word-break
+        className={`prose prose-sm text-textStandard dark:prose-invert w-full max-w-full word-break
           prose-pre:p-0 prose-pre:m-0 !p-0
           prose-code:break-all prose-code:whitespace-pre-wrap
           prose-table:table prose-table:w-full
@@ -94,9 +90,17 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
           prose-td:border prose-td:border-borderSubtle prose-td:p-2
           prose-th:border prose-th:border-borderSubtle prose-th:p-2
           prose-thead:bg-bgSubtle
+          prose-h1:text-2xl prose-h1:font-medium prose-h1:mb-5 prose-h1:mt-5
+          prose-h2:text-xl prose-h2:font-medium prose-h2:mb-4 prose-h2:mt-4
+          prose-h3:text-lg prose-h3:font-medium prose-h3:mb-3 prose-h3:mt-3
+          prose-p:mt-0 prose-p:mb-2
+          prose-ol:my-2
+          prose-ul:mt-0 prose-ul:mb-3
+          prose-li:m-0
+
           ${className}`}
         components={{
-          ...UrlTransform,
+          a: ({ node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
           code({ node, className, children, inlinecode, ...props }) {
             const match = /language-(\w+)/.exec(className || 'language-text');
             return inlinecode == 'false' && match ? (
@@ -104,17 +108,12 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
             ) : (
               <code
                 {...props}
-                className={`${className} break-all bg-inline-code dark:bg-inline-code-dark whitespace-pre-wrap`}
+                className={`break-all bg-inline-code dark:bg-inline-code-dark whitespace-pre-wrap`}
               >
                 {children}
               </code>
             );
           },
-          // h3: 'div',
-          h3(props) {
-            const { node, ...rest } = props;
-            return <div className="text-textStandard text-sm" {...rest} />;
-          },
         }}
       >
         {content}

ui/desktop/src/components/UserMessage.tsx

@@ -24,7 +24,10 @@ export default function UserMessage({ message }: UserMessageProps) {
         <div className="flex flex-col group">
           <div className="flex bg-slate text-white rounded-xl rounded-br-none py-2 px-3">
             <div ref={contentRef}>
-              <MarkdownContent content={textContent} className="text-white prose-a:text-white" />
+              <MarkdownContent
+                content={textContent}
+                className="text-white prose-a:text-white user-message"
+              />
             </div>
           </div>
           <div className="flex justify-end">

ui/desktop/src/styles/main.css

@@ -5,34 +5,34 @@
 /* Cash Sans */
 
 @font-face {
-  font-family: Cash Sans;
-  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
-    format('woff2');
+  font-family: 'Cash Sans';
+  src:
+    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
+      format('woff2'),
+    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff)
+      format('woff');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
-  font-family: Cash Sans;
-  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2)
-    format('woff2');
+  font-family: 'Cash Sans';
+  src:
+    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2)
+      format('woff2'),
+    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Medium.woff) format('woff');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
-  font-family: Cash Sans;
-  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Semibold.woff2)
-    format('woff2');
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: Cash Sans;
-  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Bold.woff2)
-    format('woff2');
-  font-weight: 700;
+  font-family: 'Cash Sans Mono';
+  src:
+    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Regular.woff2)
+      format('woff2'),
+    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Regular.woff)
+      format('woff');
+  font-weight: 400;
   font-style: normal;
 }
 
@@ -249,6 +249,7 @@
     word-wrap: break-word;
     word-break: break-word;
   }
+
   .titlebar-drag-region {
     -webkit-app-region: drag;
     height: 32px;
@@ -265,8 +266,10 @@
 
   .bg-inline-code {
     border-radius: 4px;
-    color: rgba(255, 130, 130, 0.85);
-    font-family: 'Square Sans Mono';
+    color: rgb(255 119 43);
+    background-color: var(--background-app);
+    border: 1px solid var(--border-subtle);
+    font-family: 'Cash Sans Mono', monospace;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
@@ -290,7 +293,7 @@
     content: '';
   }
 
-  .dark .bg-inline-code {
-    color: rgba(248, 155, 89, 0.7);
+  .user-message p {
+    margin-bottom: 0 !important;
   }
 }

ui/desktop/tailwind.config.ts

@@ -7,6 +7,7 @@ export default {
     extend: {
       fontFamily: {
         sans: ['Cash Sans', 'sans-serif'],
+        mono: ['Cash Sans Mono', 'monospace'],
       },
       keyframes: {
         shimmer: {
@@ -73,6 +74,13 @@ export default {
         blockTeal: 'var(--block-teal)',
         blockOrange: 'var(--block-orange)',
       },
+      typography: {
+        DEFAULT: {
+          css: {
+            color: 'var(--text-standard)',
+          },
+        },
+      },
     },
   },
 };