Fixed markdown code block colouring and changed gradient colour

jordan-dalby · Nov 26, 2024 · e60d4d4 · e60d4d4
1 parent 483fb9c
commit e60d4d4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/client/src/components/editor/PreviewCodeBlock.tsx b/client/src/components/editor/PreviewCodeBlock.tsx
@@ -135,8 +135,11 @@ export const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({
         )}
 
         <div 
-          className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-light-surface dark:from-dark-surface to-transparent pointer-events-none rounded-b-lg"
-          style={{ height: `${LINE_HEIGHT * 2}px` }}
+          className="absolute inset-x-0 bottom-0 bg-gradient-to-t to-transparent pointer-events-none rounded-b-lg"
+          style={{ 
+            height: `${LINE_HEIGHT * 2}px`,
+            background: `linear-gradient(to top, ${backgroundColor}, transparent)`
+          }}
         />
 
         <CopyButton text={code} />

diff --git a/client/src/index.css b/client/src/index.css
@@ -42,20 +42,17 @@ code {
 
 /* Markdown styles */
 .markdown pre {
-  @apply bg-slate-200 dark:bg-slate-600;
-  padding: 0.75rem;
-  border-radius: 0.5rem;
-  overflow-x: auto;
+  @apply bg-slate-200 dark:bg-slate-800;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
   @apply text-light-text dark:text-dark-text;
-  @apply border border-light-border dark:border-dark-border;
 }
 
 .markdown code {
-  @apply bg-slate-200 dark:bg-slate-600;
+  @apply bg-slate-200 dark:bg-slate-800;
   padding: 0.2rem 0.4rem;
   border-radius: 0.25rem;
   @apply text-light-text dark:text-dark-text;
-  @apply border border-light-border dark:border-dark-border;
 }
 
 .markdown pre code {