From 1dbb7c7a51492ee0e1af7045a3ef3b3526554370 Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan@squareup.com>
Date: Sun, 30 Mar 2025 17:23:12 -0400
Subject: [PATCH 1/3] updated styles

---
 ui/desktop/src/components/MarkdownContent.tsx | 36 +++++++++------
 ui/desktop/src/components/UserMessage.tsx     |  5 +-
 ui/desktop/src/styles/main.css                | 46 +++++++++++--------
 ui/desktop/tailwind.config.ts                 |  8 ++++
 4 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/ui/desktop/src/components/MarkdownContent.tsx b/ui/desktop/src/components/MarkdownContent.tsx
index c4ee7037ea85..eaf1d0787beb 100644
--- a/ui/desktop/src/components/MarkdownContent.tsx
+++ b/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,27 +90,41 @@ 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,
-          code({ node, className, children, inlinecode, ...props }) {
+          a: ({ node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
+          code({
+            node,
+            children,
+            inlinecode,
+            ...props
+          }: {
+            node: any;
+            className?: string;
+            children: React.ReactNode;
+            inlinecode?: string;
+            [key: string]: any;
+          }) {
             const match = /language-(\w+)/.exec(className || 'language-text');
             return inlinecode == 'false' && match ? (
               <CodeBlock language={match[1]}>{String(children).replace(/\n$/, '')}</CodeBlock>
             ) : (
               <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}
diff --git a/ui/desktop/src/components/UserMessage.tsx b/ui/desktop/src/components/UserMessage.tsx
index 06b4b831ab0a..b6ab90143216 100644
--- a/ui/desktop/src/components/UserMessage.tsx
+++ b/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">
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 2fcf0167f52a..745b7660e9b9 100644
--- a/ui/desktop/src/styles/main.css
+++ b/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;
 }
 
@@ -245,6 +245,7 @@
     word-wrap: break-word;
     word-break: break-word;
   }
+
   .titlebar-drag-region {
     -webkit-app-region: drag;
     height: 32px;
@@ -261,8 +262,9 @@
 
   .bg-inline-code {
     border-radius: 4px;
-    color: rgba(255, 130, 130, 0.85);
-    font-family: 'Square Sans Mono';
+    color: rgb(255 67 67);
+    background-color: rgb(255 130 130 / 10%);
+    font-family: 'Cash Sans Mono', monospace;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
@@ -289,4 +291,8 @@
   .dark .bg-inline-code {
     color: rgba(248, 155, 89, 0.7);
   }
+
+  .user-message p {
+    margin-bottom: 0 !important;
+  }
 }
diff --git a/ui/desktop/tailwind.config.ts b/ui/desktop/tailwind.config.ts
index 0309b53ce272..89f06f79eb1d 100644
--- a/ui/desktop/tailwind.config.ts
+++ b/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)',
+          },
+        },
+      },
     },
   },
 };

From 0c7767a16a3c7c37c18d5acae214649810ebefe1 Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan@squareup.com>
Date: Mon, 31 Mar 2025 15:55:41 -0400
Subject: [PATCH 2/3] revert

---
 ui/desktop/src/components/MarkdownContent.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/ui/desktop/src/components/MarkdownContent.tsx b/ui/desktop/src/components/MarkdownContent.tsx
index eaf1d0787beb..26c63fe31c23 100644
--- a/ui/desktop/src/components/MarkdownContent.tsx
+++ b/ui/desktop/src/components/MarkdownContent.tsx
@@ -101,18 +101,7 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
           ${className}`}
         components={{
           a: ({ node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
-          code({
-            node,
-            children,
-            inlinecode,
-            ...props
-          }: {
-            node: any;
-            className?: string;
-            children: React.ReactNode;
-            inlinecode?: string;
-            [key: string]: any;
-          }) {
+          code({ node, className, children, inlinecode, ...props }) {
             const match = /language-(\w+)/.exec(className || 'language-text');
             return inlinecode == 'false' && match ? (
               <CodeBlock language={match[1]}>{String(children).replace(/\n$/, '')}</CodeBlock>

From 1c5667e602a4654740fc23bc27ac48a74f728afb Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan@squareup.com>
Date: Mon, 31 Mar 2025 16:16:32 -0400
Subject: [PATCH 3/3] updated code blocks

---
 ui/desktop/src/styles/main.css | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 745b7660e9b9..a67c69c50782 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -262,8 +262,9 @@
 
   .bg-inline-code {
     border-radius: 4px;
-    color: rgb(255 67 67);
-    background-color: rgb(255 130 130 / 10%);
+    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;
@@ -288,10 +289,6 @@
     content: '';
   }
 
-  .dark .bg-inline-code {
-    color: rgba(248, 155, 89, 0.7);
-  }
-
   .user-message p {
     margin-bottom: 0 !important;
   }