From 810c436fb96fe19114eaeee491a4ea1b2c83d3b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Wed, 28 Feb 2024 14:09:56 +0000
Subject: [PATCH] feat(blog): improve codeblock styles

---
 .../post/[slug]/_components/copy-button.tsx   |  2 +-
 src/styles/components.css                     | 31 +++++++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/app/blog/post/[slug]/_components/copy-button.tsx b/src/app/blog/post/[slug]/_components/copy-button.tsx
index 4b5a1c9a..994d6bf5 100644
--- a/src/app/blog/post/[slug]/_components/copy-button.tsx
+++ b/src/app/blog/post/[slug]/_components/copy-button.tsx
@@ -19,7 +19,7 @@ export const CopyButton = ({ text }) => {
     <button
       disabled={isCopied}
       onClick={copy}
-      className={`absolute bottom-0 right-0 flex items-center gap-1 rounded p-2 leading-none   hover:opacity-100 active:opacity-100 ${
+      className={`absolute bottom-0 right-0 flex items-center gap-1 rounded-tl-lg p-2 leading-none hover:opacity-100 active:opacity-100 ${
         isCopied
           ? 'bg-green-100/40 text-green-800 opacity-100 dark:bg-green-300/10 dark:text-green-500'
           : 'cursor-pointer bg-neutral-300 text-neutral-600 opacity-40 dark:bg-neutral-800 dark:text-neutral-400'
diff --git a/src/styles/components.css b/src/styles/components.css
index cc6585cb..6e2ff936 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -163,9 +163,11 @@
 
     figure[data-rehype-pretty-code-figure=''] {
       @apply overflow-hidden rounded-lg;
-      @apply bg-black/5 dark:bg-[rgb(15,15,15,0.5)];
+      @apply bg-neutral-100 dark:bg-neutral-950;
+      @apply space-y-1;
+      @apply border border-neutral-200 dark:border-neutral-900;
 
-      @apply backdrop-blur;
+      /* @apply backdrop-blur; */
 
       pre {
         @apply overflow-auto;
@@ -184,7 +186,7 @@
               content: counter(line);
 
               @apply mr-5 inline-block w-4;
-              @apply text-right text-gray-500;
+              @apply text-right text-neutral-500;
             }
           }
 
@@ -192,23 +194,23 @@
             @apply px-3;
 
             &[data-highlighted-line=''] {
-              @apply border-l-2 border-l-gray-400 bg-gray-400/30 dark:border-l-neutral-700 dark:bg-neutral-800/30;
+              @apply border-l-2 border-neutral-500 bg-neutral-300/40 dark:border-neutral-500 dark:bg-neutral-700/30;
             }
 
             mark[data-highlighted-chars=''] {
-              @apply rounded-lg border-b border-gray-400 bg-gray-400/30 px-1 py-px dark:border-neutral-700 dark:bg-neutral-700/30;
+              @apply rounded-lg bg-neutral-300/50 px-[0.45rem] py-[0.14rem] dark:bg-neutral-700/40;
 
               &[data-chars-id='r'] {
-                @apply border-red-300 bg-red-300/30 dark:border-red-900 dark:bg-red-700/30;
+                @apply bg-red-300/30 dark:bg-red-700/30;
               }
               &[data-chars-id='g'] {
-                @apply border-green-300 bg-green-300/30 dark:border-green-900 dark:bg-green-700/30;
+                @apply bg-green-300/30 dark:bg-green-700/30;
               }
               &[data-chars-id='b'] {
-                @apply border-blue-300 bg-blue-300/30 dark:border-blue-900 dark:bg-blue-700/30;
+                @apply bg-blue-300/30 dark:bg-blue-700/30;
               }
               &[data-chars-id='y'] {
-                @apply border-yellow-300 bg-yellow-300/30 dark:border-yellow-900 dark:bg-yellow-700/30;
+                @apply bg-yellow-300/30 dark:bg-yellow-700/30;
               }
             }
           }
@@ -217,14 +219,17 @@
 
       figcaption[data-rehype-pretty-code-title=''],
       div[data-rehype-pretty-code-title=''] {
-        @apply bg-black/[.03] p-2 dark:bg-white/[.03];
-        @apply text-gray-500;
+        @apply bg-neutral-300/40 p-2 dark:bg-neutral-800/60;
+        @apply text-neutral-700 dark:text-neutral-400;
+        @apply font-mono;
+        @apply rounded-lg;
       }
 
       figcaption[data-rehype-pretty-code-caption=''] {
         @apply p-2;
-        @apply italic text-neutral-500/80;
-        @apply border-t border-t-neutral-300/40 dark:border-t-neutral-600/40;
+        @apply text-sm italic text-neutral-500 dark:text-neutral-400;
+        @apply bg-neutral-300/20 p-2 dark:bg-white/[.02];
+        @apply border-t border-dashed border-neutral-300 dark:border-neutral-600/40;
       }
     }