feat: Add styling to codeblock copy button

Author: lamATnginx

assets/css/v2/style.css

@@ -18,6 +18,7 @@
   --color-background: #ffffff;
   --color-foreground: #000000;
   --color-shadow: #d2d2d2;
+  --color-codeblock-shadow: #d2d2d2;
   --color-footer: #1d1d1d;
   --color-footer-text: #e2e2e2;
   --color-product-title: #8d8d8d;
@@ -1144,27 +1145,28 @@ li .code-block {
 }
 
 .code-copy-button {
-  background-color: #f2f2f2;
-  border: none;
+  background-color: white;
+  border: 1px solid black;
   padding: 5px 10px;
   cursor: pointer;
   font-family: "JetBrains Mono", monospace;
   font-size: 12px;
   color: #000;
-  display: none;
+  /* display: none; */
   position: absolute;
   margin-top: 8px;
   right: 1rem;
-  z-index: 2;
+  --color-codeblock-shadow: #d2d2d2;
+  box-shadow: 0px 2px 0px var(--color-codeblock-shadow);
 }
 
 .code-copy-button:hover {
-  background-color: #e0e0e0;
+  --color-codeblock-shadow: #0096394d;
 }
 
 .code-copy-button:focus {
   outline: none;
-  box-shadow: 0 0 2px 2px #a5a5a5;
+  --color-codeblock-shadow: #009639;
 }
 
 .next-prev-icon {

assets/js/code-copy-v2.js

@@ -26,6 +26,7 @@ const copyToClipBoard = ((clipboard) => async (button, codeBlockId) => {
 
 const updateButtonState = (button, message, revertDelay, disable = false) => {
   button.innerHTML = message;
+  $(button).css('box-shadow', '0px 2px 0px #009639');
 
   if (disable) {
     button.disabled = true;
@@ -34,6 +35,7 @@ const updateButtonState = (button, message, revertDelay, disable = false) => {
   if (revertDelay) {
     setTimeout(() => {
       button.innerHTML = 'Copy';
+      $(button).css('box-shadow', '0px 2px 0px var(--color-codeblock-shadow)');
       button.disabled = false;
     }, revertDelay);
   }