add copy icon, keep hover neutral

Author: carlos-granados

src/components/InstallCommand/index.js

@@ -10,6 +10,31 @@ const UNIX_COMMAND =
 const WINDOWS_COMMAND =
   'powershell -c "irm https://github.com/php-debugger/installer/releases/latest/download/install.ps1 | iex"';
 
+const iconProps = {
+  width: 15,
+  height: 15,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': true,
+};
+
+const CopyIcon = () => (
+  <svg {...iconProps}>
+    <rect x="9" y="9" width="11" height="11" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg {...iconProps}>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
 const PLATFORMS = [
   {id: 'macos', label: 'macOS', language: 'bash', command: UNIX_COMMAND},
   {id: 'linux', label: 'Linux', language: 'bash', command: UNIX_COMMAND},
@@ -74,7 +99,8 @@ export default function InstallCommand() {
     return ok;
   }
 
-  async function copy() {
+  async function copy(event) {
+    event.currentTarget.blur();
     let ok = false;
     try {
       await navigator.clipboard.writeText(active.command);
@@ -111,9 +137,10 @@ export default function InstallCommand() {
         </div>
         <button
           type="button"
-          className={styles.copy}
+          className={clsx(styles.copy, copied && styles.copied)}
           onClick={copy}
           aria-label={`Copy the ${active.label} install command`}>
+          {copied ? <CheckIcon /> : <CopyIcon />}
           {copied ? 'Copied' : 'Copy'}
         </button>
       </div>

src/components/InstallCommand/styles.module.css

@@ -39,6 +39,9 @@
 }
 
 .copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
   border: 1px solid var(--phpdbg-card-border);
   background: transparent;
   color: var(--ifm-color-emphasis-700);
@@ -50,7 +53,17 @@
   flex-shrink: 0;
 }
 
+/* Hover stays deliberately neutral. The brand red is what the tabs beside this
+   button use to mean "selected", so an accented Copy button reads as still being
+   active -- which is exactly how it looked after a click, with the pointer still
+   resting on it. The accent is reserved for the moment the copy succeeds. */
 .copy:hover {
+  border-color: var(--ifm-color-emphasis-400);
+  color: var(--ifm-color-emphasis-800);
+}
+
+.copied,
+.copied:hover {
   border-color: var(--ifm-color-primary);
   color: var(--ifm-color-primary);
 }