feat: copy button styling improvements

Author: thetutlage

src/public/error_info/style.css

@@ -1,3 +1,20 @@
+:root {
+  --copy-button-bg: var(--slate-3);
+  --copy-button-active-bg: var(--slate-a4);
+  --copy-button-border: var(--slate-7);
+  --copy-button-success-bg: var(--green-5);
+  --copy-button-success-border: var(--green-7);
+  --copy-button-success-fg: var(--green-12);
+}
+html.dark {
+  --copy-button-bg: var(--slate-3);
+  --copy-button-active-bg: var(--slate-a4);
+  --copy-button-border: var(--slate-7);
+  --copy-button-success-bg: var(--green-3);
+  --copy-button-success-border: var(--green-4);
+  --copy-button-success-fg: var(--green-11);
+}
+
 #error-name {
   color: var(--danger-fg);
   font-size: 16px;
@@ -50,65 +67,75 @@
 }
 
 #copy-error-btn {
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 8px;
-  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: auto;
-  color: var(--text-fg);
-  transition: all 0.2s ease;
-  opacity: 0.7;
   position: relative;
+  cursor: pointer;
+
+  background: transparent;
+  border: 1px solid var(--copy-button-border);
+
+  font-size: 13px;
+  font-family: inherit;
+  font-weight: 500;
+  padding: 4px 8px 6px 8px;
+  border-radius: var(--radius);
+  color: var(--title-fg);
+  transition: all 0.2s ease;
+}
+
+#copy-error-btn svg {
+  width: 18px;
+  height: 18px;
 }
 
 #copy-error-btn:hover {
-  opacity: 1;
-  background: var(--bg-hover);
-  border-color: var(--border-hover);
+  background: var(--copy-button-active-bg);
 }
 
 #copy-error-btn:active {
   transform: scale(0.95);
 }
 
-#copy-error-btn.copied {
-  background: var(--success-bg);
-  color: var(--success-fg);
-  border-color: var(--success-border);
-  opacity: 1;
-}
-
 #copy-error-btn.copied::after {
-  content: 'Copied!';
+  content: 'Copied';
   position: absolute;
-  top: -35px;
+  top: -30px;
   left: 50%;
   transform: translateX(-50%);
-  background: var(--slate-12);
-  color: var(--slate-1);
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
+  background: var(--copy-button-success-bg);
+  color: var(--copy-button-success-fg);
+  border: 1px solid var(--copy-button-success-border);
+  border-radius: 20px;
+  font-size: 13px;
+  font-family: inherit;
+  font-weight: 500;
+  padding: 2px 8px 4px 8px;
+  letter-spacing: 0.3px;
   white-space: nowrap;
   opacity: 0;
   animation: copyFeedback 2s ease-in-out forwards;
 }
 
-
 @keyframes copyFeedback {
-  0% { opacity: 0; transform: translateX(-50%) translateY(5px); }
-  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
-  90% { opacity: 1; transform: translateX(-50%) translateY(0); }
-  100% { opacity: 0; transform: translateX(-50%) translateY(-5px); }
-}
-
-#copy-error-btn svg {
-  width: 16px;
-  height: 16px;
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(5px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  90% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-5px);
+  }
 }
 
 @media (min-width: 1024px) {

src/templates/error_info/main.ts

@@ -16,7 +16,7 @@ const ERROR_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="tru
 
 const HINT_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 2-1 1M3 2l1 1m17 13-1-1M3 16l1-1m5 3h6m-5 3h4M12 3C8 3 5.952 4.95 6 8c.023 1.487.5 2.5 1.5 3.5S9 13 9 15h6c0-2 .5-2.5 1.5-3.5h0c1-1 1.477-2.013 1.5-3.5.048-3.05-2-5-6-5Z"/></svg>`
 
-const COPY_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2m8 0V2a2 2 0 0 0-2-2H10a2 2 0 0 0-2 2v2m8 0H8"/></svg>`
+const COPY_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" /></svg>`
 
 function htmlAttributeEscape(value: string): string {
   return value