copy button improvements

Author: moribellamy

internal/dev_server/ui/src/App.css

@@ -216,6 +216,16 @@ code.has-override {
   transform: translateX(-50%) translateY(100px);
 }
 
+/* Dark mode copy notification styling */
+@media (prefers-color-scheme: dark) {
+  .copy-notification {
+    background-color: var(--lp-color-blue-700, #1d4ed8);
+    color: var(--lp-color-gray-100, #f3f4f6);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+}
+
+
 /* Streaming toggle button */
 .streaming-toggle-button {
   margin-bottom: 16px;
@@ -244,3 +254,40 @@ code.has-override {
 .streaming-toggle-button:active {
   transform: translateY(1px);
 }
+
+/* Copy button styling */
+.copy-button {
+  background: none;
+  border: none;
+  color: var(--lp-color-blue-600);
+  cursor: pointer;
+  text-decoration: underline;
+  font-size: var(--lp-font-size-200);
+  padding: 0;
+  margin: 0;
+  transition: color 0.2s ease;
+}
+
+.copy-button:hover {
+  color: var(--lp-color-blue-700);
+  text-decoration: none;
+}
+
+.copy-button:active {
+  color: var(--lp-color-blue-800);
+}
+
+/* Dark mode styling for copy button */
+@media (prefers-color-scheme: dark) {
+  .copy-button {
+    color: var(--lp-color-blue-400);
+  }
+
+  .copy-button:hover {
+    color: var(--lp-color-blue-300);
+  }
+
+  .copy-button:active {
+    color: var(--lp-color-blue-200);
+  }
+}

internal/dev_server/ui/src/EventsTable.tsx

@@ -9,8 +9,9 @@ type Props = {
 
 const clipboardLink = (linkText: string, value: string, showNotification: (message: string) => void) => {
   return (
-    <a
-      href="#"
+    <button
+      type="button"
+      className="copy-button"
       onClick={(e) => {
         e.preventDefault();
         navigator.clipboard.writeText(value).then(() => {
@@ -21,7 +22,7 @@ const clipboardLink = (linkText: string, value: string, showNotification: (messa
       }}
     >
       {linkText}
-    </a>
+    </button>
   );
 }