fix: code block color

Author: typeling1578

components/code/code-block.tsx

@@ -21,11 +21,11 @@ export default function CodeBlock({children, className, copyString, preClassName
   return (
     <div
       className={cn(
-        'relative bg-gray-300 grid grid-cols-6 gap-x-2 w-full dark:bg-gray-700 rounded-md p-4 justify-between',
+        'relative bg-gray-100 flex gap-x-2 w-full dark:bg-gray-900 rounded-md p-4 justify-between',
         className
       )}
     >
-      <pre className={cn('text-foreground col-span-5 whitespace-pre-wrap w-full content-center overflow-x-auto', preClassName)}>
+      <pre className={cn('text-foreground basis-full whitespace-pre-wrap content-center overflow-x-auto', preClassName)}>
         {children}
       </pre>
       <CopyButton content={copyString || children as string} className={'m-0 self-center'}/>

components/code/copy2clipboard.tsx

@@ -25,9 +25,9 @@ export default function CopyButton({content, className, ...rest}: CopyButtonProp
     }
   }, [copied])
 
-  const icon = copied ? <ClipboardCheck size={18} className={'text-green-800'}/> : <ClipboardCopy size={18} className={'text-black'}/>
-  const border = copied ? 'border-green-700' : 'border-gray-500'
-  const classes = `m-3 text-white bg-gray-300 hover:bg-gray-400 border ${border}`
+  const icon = copied ? <ClipboardCheck size={18} className={'text-green-600'}/> : <ClipboardCopy size={18} className={'text-black dark:text-white'}/>
+  const border = copied ? 'border-green-500' : 'border-gray-500'
+  const classes = `m-3 text-white bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 border ${border}`
   return (
     <Button paddingH={'sm'} onClick={copyToClipboard} className={cn(classes, className)}  {...rest}>
       {icon}