fix: make the copy icon in the copy button for code blocks in light mode visible

app/(root)/blog/[slug]/page.tsx

@@ -123,23 +123,21 @@ const customPortableTextComponents: PortableTextComponents = {
       );
     },
     code: ({ value }) => {
-      const language = value.language;
+      const language = value.language || "none";
       const grammar = Prism.languages[language];
 
-      if (language && !grammar) {
+      if (!grammar) {
         console.error(`No grammar found for language: "${language}"`);
       }
 
       return (
         <div className="relative my-8">
           <pre
-            className={`${language ? "language-" + language + " " : ""}p-4 rounded-md overflow-x-auto text-sm`}
+            className={`language-${language} p-4 rounded-md overflow-x-auto text-sm`}
           >
-            <code className={language ? "language-" + language : ""}>
+            <code className={`language-${language}`}>{value.code}</code>
-              {value.code}
-            </code>
           </pre>
-          {language ? <PrismLoader /> : ""}
+          {language == "none" ? "" : <PrismLoader />}
           <CopyButton code={value.code} />
         </div>
       );

components/shared/copyButton.tsx

@@ -20,7 +20,7 @@ export default function CopyButton({ code }: { code: string }) {
   return (
     <Button
       onClick={copyCode}
-      className="absolute top-2 right-2 bg-accent hover:bg-muted text-white p-2 rounded"
+      className="absolute top-2 right-2 bg-accent hover:bg-muted p-2 rounded"
       size={"icon"}
     >
       {copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}