adding visual indicator of clipboard copy success

components/Form.tsx

@@ -6,7 +6,7 @@ export default function Form() {
           Content
         </label>
         <textarea
-          class="min-w-full h-44 px-3 py-2 font-mono shadow-sm border-0 rounded-md ring-1 ring-inset ring-gray-600"
+          class="min-w-full h-44 px-4 py-2 border rounded-md border-gray-600 font-mono"
           id="content"
           name="content"
           type="text"

components/Paste.tsx

@@ -8,7 +8,7 @@ export default function Paste({ id, contents }: PasteProps) {
     <main class="my-6">
       <div class="mb-6 flex items-center justify-end gap-x-4">
         <a
-          class="px-4 py-2 font-semibold rounded-md hover:text-gray-200"
+          class="px-4 py-2 font-semibold rounded-md hover:text-gray-600 hover:dark:text-gray-400"
           href={`/${id}/raw`}
         >
           View raw

static/copyToClipboard.js

@@ -1,20 +1,30 @@
+const button = document.getElementById("copy-btn");
+
 function copyToClipboard(text) {
   navigator.clipboard.writeText(text)
     .then(function () {
+      button.textContent = "Copied!";
+      button.style.paddingLeft = "3.38rem";
+      button.style.paddingRight = "3.38rem";
+
+      setTimeout(function () {
+        button.textContent = "Copy to clipboard";
+        button.style.removeProperty("padding-left");
+        button.style.removeProperty("padding-right");
+      }, 750);
+
       console.log("content copied to clipboard.");
     })
     .catch(function (err) {
       console.error("failed to copy content to clipboard.", err);
     });
 }
 
-document
-  .getElementById("copy-btn")
-  .addEventListener(
-    "click",
-    function () {
-      const text = document.getElementsByTagName("pre").item(0).innerText;
-      copyToClipboard(text);
-    },
-    false,
-  );
+button.addEventListener(
+  "click",
+  function () {
+    const text = document.getElementsByTagName("pre").item(0).innerText;
+    copyToClipboard(text);
+  },
+  false,
+);