From 15dec536a3d5da44d442e5d8b0628ffdb4e8c6b1 Mon Sep 17 00:00:00 2001
From: vadim <vadim@appsmith.com>
Date: Mon, 14 Apr 2025 15:29:11 +0200
Subject: [PATCH] chore: Adjust agent chat code elements (#40230)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Fixes #39836

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/dabefaab-71a1-41e1-b84a-7fcb115c2c86)
|
![image](https://github.com/user-attachments/assets/f98e5b06-6cb7-499b-8a55-44b358c1af58)
|

## Automation

/ok-to-test tags="@tag.Sanity"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]
> 🟣 🟣 🟣 Your tests are running.
> Tests running at:
<https://github.com/appsmithorg/appsmith/actions/runs/14445548010>
> Commit: d93e974ef879e773c24189647f87a0c7ecce977f
> Workflow: `PR Automation test suite`
> Tags: `@tag.Sanity`
> Spec: ``
> <hr>Mon, 14 Apr 2025 12:25:09 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
---
 .../theming/src/color/src/DarkModeTheme.ts    | 12 +++---------
 .../components/CodeBlock/src/CodeBlock.tsx    |  2 +-
 .../Markdown/src/mdComponents/Code.tsx        |  1 +
 .../components/Markdown/src/styles.module.css | 19 ++++++++++++++-----
 .../src/components/Sidebar/src/constants.ts   |  2 +-
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
index 8fbf1fc19f..fe05257410 100644
--- a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
@@ -1301,13 +1301,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdElevation1() {
     const color = this.bdNeutral.clone();
 
-    if (this.seedIsVeryLight) {
-      color.oklch.l = 0.13;
-    }
-
-    if (!this.seedIsVeryLight) {
-      color.oklch.l -= 0.75;
-    }
+    color.oklch.l -= 0.39;
 
     return color;
   }
@@ -1315,7 +1309,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdElevation2() {
     const color = this.bdElevation1.clone();
 
-    color.oklch.l += 0.015;
+    color.oklch.l += 0.07;
 
     return color;
   }
@@ -1323,7 +1317,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdElevation3() {
     const color = this.bdElevation2.clone();
 
-    color.oklch.l += 0.035;
+    color.oklch.l += 0.05;
 
     return color;
   }
diff --git a/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx
index 951e6d9e26..d17e96b8c3 100644
--- a/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx
+++ b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx
@@ -12,7 +12,7 @@ export const CodeBlock = (props: SyntaxHighlighterProps) => {
 
   return (
     <SyntaxHighlighter
-      className={getTypographyClassName("caption")}
+      className={getTypographyClassName("body") + " wds-codeblock"}
       {...props}
       style={theme.colorMode === "dark" ? darkTheme : lightTheme}
       useInlineStyles
diff --git a/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx b/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx
index f8a1b8d8ad..d1a7198c9c 100644
--- a/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx
@@ -35,6 +35,7 @@ export const Code = (props: CodeProps) => {
       >
         <Text size="caption">{match[1]}</Text>
         <Button
+          color="neutral"
           icon={copied ? "check" : "copy"}
           onPress={handleCopy}
           size="small"
diff --git a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css
index 0c9f84a0bb..e76a3264c3 100644
--- a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css
@@ -79,7 +79,6 @@
 
   li {
     margin-bottom: var(--inner-spacing-2);
-    margin-left: 1em;
     position: relative;
     list-style-type: auto;
     letter-spacing: -0.02em;
@@ -92,19 +91,29 @@
   [data-component="code"] {
     background-color: var(--color-bg-elevation-2);
     border-radius: var(--border-radius-elevation-3);
-    outline: var(--border-width-1) solid var(--color-bg-neutral-subtle);
+    outline: var(--border-width-1) solid var(--color-bd-elevation-2);
     margin-bottom: var(--inner-spacing-2);
     overflow: auto;
   }
 
+  [data-component="code"] [class*="wds-codeblock"]::before,
+  [data-component="code"] [class*="wds-codeblock"]::after {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  code:is([class*="language-"]) {
+    font-size: 0.85em;
+  }
   code:not([class*="language-"]) {
+    font-size: 0.85em;
     padding-inline: var(--inner-spacing-1);
     background: var(--color-bg-neutral-subtle);
-    color: var(--color-fg-negative);
-    border-radius: var(--border-radius-elevation-3);
+    color: var(--color-fg-accent);
+    border-radius: calc(var(--border-radius-elevation-3) / 4);
     word-break: break-word;
     white-space: normal;
-    outline: var(--border-width-1) solid var(--color-bg-neutral-soft);
+    outline: var(--border-width-1) solid var(--color-bd-elevation-3);
   }
 
   pre {
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/constants.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/constants.ts
index 9633b7ebf4..be7f258826 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/constants.ts
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/constants.ts
@@ -4,5 +4,5 @@ export const SIDEBAR_CONSTANTS = {
     ICON: "var(--sizing-14)",
   },
   KEYBOARD_SHORTCUT: "b",
-  MOBILE_BREAKPOINT: 768,
+  MOBILE_BREAKPOINT: 720,
 } as const;