From 564453c84ef08ff8c59362b915c9be8010784d03 Mon Sep 17 00:00:00 2001
From: Edouard Wautier <4435185+Duncid@users.noreply.github.com>
Date: Thu, 2 Jan 2025 15:44:11 +0100
Subject: [PATCH] Small contrast adjustments (#9690)

---
 .../components/markdown/BlockquoteBlock.tsx   |  2 +-
 .../markdown/ContentBlockWrapper.tsx          |  6 ++--
 sparkle/src/components/markdown/Markdown.tsx  | 32 +++++++++++++++----
 .../src/components/markdown/TableBlock.tsx    |  4 +--
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/sparkle/src/components/markdown/BlockquoteBlock.tsx b/sparkle/src/components/markdown/BlockquoteBlock.tsx
index 113b85d7203b..a0cfa2c48fd5 100644
--- a/sparkle/src/components/markdown/BlockquoteBlock.tsx
+++ b/sparkle/src/components/markdown/BlockquoteBlock.tsx
@@ -27,7 +27,7 @@ export function BlockquoteBlock({ children }: BlockquoteBlockProps) {
       <blockquote
         className={cn(
           "s-w-full s-text-base s-italic s-text-foreground",
-          "s-rounded-2xl s-border s-border-border s-bg-white s-py-3 s-pl-5 s-pr-12"
+          "s-rounded-2xl s-bg-muted-background s-py-3 s-pl-5 s-pr-12"
         )}
       >
         {children}
diff --git a/sparkle/src/components/markdown/ContentBlockWrapper.tsx b/sparkle/src/components/markdown/ContentBlockWrapper.tsx
index c0d14ef5d8c8..3edffe4cb38b 100644
--- a/sparkle/src/components/markdown/ContentBlockWrapper.tsx
+++ b/sparkle/src/components/markdown/ContentBlockWrapper.tsx
@@ -98,7 +98,7 @@ export function ContentBlockWrapper({
         className
       )}
     >
-      <div className="s-sticky s-top-0 s-z-50 s-w-full">
+      <div className="s-sticky s-top-0 s-z-[1] s-w-full">
         <div
           id="BlockActions"
           className="s-flex s-w-full s-justify-end s-gap-1 s-p-2"
@@ -124,7 +124,9 @@ export function ContentBlockWrapper({
           )}
         </div>
       </div>
-      <div className={cn("-s-mt-11 s-w-full", innerClassName)}>{children}</div>
+      <div className={cn("s-z-0 -s-mt-11 s-w-full", innerClassName)}>
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/sparkle/src/components/markdown/Markdown.tsx b/sparkle/src/components/markdown/Markdown.tsx
index 23b276140b76..01f05fe65d7b 100644
--- a/sparkle/src/components/markdown/Markdown.tsx
+++ b/sparkle/src/components/markdown/Markdown.tsx
@@ -240,7 +240,7 @@ function PreBlock({ children }: { children: React.ReactNode }) {
   return (
     <pre
       className={cn(
-        "s-my-2 s-w-full s-break-all s-rounded-2xl s-border s-border-border s-bg-muted-background"
+        "s-my-2 s-w-full s-break-all s-rounded-2xl s-border s-border-border-dark s-bg-muted-background"
       )}
     >
       {validChildrenContent ? children : fallbackData || children}
@@ -341,20 +341,38 @@ function ParagraphBlock({
   );
 }
 
-type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'ref'> & ReactMarkdownProps & {
-  ref?: React.Ref<HTMLInputElement>;
-};
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "ref"> &
+  ReactMarkdownProps & {
+    ref?: React.Ref<HTMLInputElement>;
+  };
 
-function Input({ type, checked, className, onChange, ref, ...props }: InputProps) {
+function Input({
+  type,
+  checked,
+  className,
+  onChange,
+  ref,
+  ...props
+}: InputProps) {
   const inputRef = React.useRef<HTMLInputElement>(null);
   React.useImperativeHandle(ref, () => inputRef.current!);
 
   if (type !== "checkbox") {
-    return <input ref={inputRef} type={type} checked={checked} className={className} {...props} />;
+    return (
+      <input
+        ref={inputRef}
+        type={type}
+        checked={checked}
+        className={className}
+        {...props}
+      />
+    );
   }
 
   const handleCheckedChange = (isChecked: boolean) => {
-    onChange?.({ target: { type: "checkbox", checked: isChecked } } as React.ChangeEvent<HTMLInputElement>);
+    onChange?.({
+      target: { type: "checkbox", checked: isChecked },
+    } as React.ChangeEvent<HTMLInputElement>);
   };
 
   return (
diff --git a/sparkle/src/components/markdown/TableBlock.tsx b/sparkle/src/components/markdown/TableBlock.tsx
index 1b4ddce4ddb8..34dc2b4bdb9b 100644
--- a/sparkle/src/components/markdown/TableBlock.tsx
+++ b/sparkle/src/components/markdown/TableBlock.tsx
@@ -66,10 +66,10 @@ export function TableBlock({ children }: { children: React.ReactNode }) {
 
   return (
     <ContentBlockWrapper
-      innerClassName="s-relative s-my-2 s-w-full s-border s-border-border s-rounded-2xl"
+      innerClassName="s-relative s-my-2 s-w-full s-border s-border-border-dark s-rounded-2xl"
       content={tableData}
     >
-      <ScrollArea className="s-z-0 s-w-full s-rounded-2xl">
+      <ScrollArea className="s-w-full s-rounded-2xl">
         <table className="s-w-full">{children}</table>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>