From 099151243467ffb522d0fecab44762bd6579a883 Mon Sep 17 00:00:00 2001
From: PrimeTestLab <arifkhann5321@gmail.com>
Date: Tue, 10 Nov 2026 16:55:00 +0500
Subject: [PATCH] Polish The Copy Confetti On The Icons Page (#5191)

- Say "Copied SVG!" and "Copied name!" when an icon is copied with
  Shift + click or Ctrl/Cmd + click.
- Center the text over the icon instead of starting at its left edge.
- Give the icon the brand border while the confetti plays.
- Keep the confetti visible when reduced motion is on; the site-wide
  reduced-motion rule shrank it to 0.01ms so it never showed.

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/.vitepress/theme/components/icons/IconItem.vue | 11 +++++++++--
 docs/.vitepress/theme/components/icons/confetti.css |  9 +++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/theme/components/icons/IconItem.vue b/docs/.vitepress/theme/components/icons/IconItem.vue
index 4f1ac7c14..775f11367 100644
--- a/docs/.vitepress/theme/components/icons/IconItem.vue
+++ b/docs/.vitepress/theme/components/icons/IconItem.vue
@@ -49,7 +49,7 @@ async function copyToClipboard(text: string, confettiMessage: string, toastMessa
 }
 
 function copyName() {
-  return copyToClipboard(props.name, `Copied name`, `Copied the name of ${props.name}`);
+  return copyToClipboard(props.name, `Copied name!`, `Copied the name of ${props.name}`);
 }
 
 function copySVG(iconButton: HTMLElement) {
@@ -57,7 +57,7 @@ function copySVG(iconButton: HTMLElement) {
     class: `lucide lucide-${props.name}`,
   });
 
-  return copyToClipboard(svgString, `Copied svg`, `Copied the SVG of ${props.name}`);
+  return copyToClipboard(svgString, `Copied SVG!`, `Copied the SVG of ${props.name}`);
 }
 
 async function navigateToIcon(event) {
@@ -202,6 +202,12 @@ const DiamondIcon = createLucideIcon('Diamond', diamond);
 
 .confetti-button:before {
   line-height: 80px;
+  /* Center the "Copied ..." text over the icon (it started at the icon's left edge and ran off to the right). */
+  width: 160px;
+  max-width: none;
+  left: calc(50% - 80px);
+  text-align: center;
+  white-space: nowrap;
 }
 
 .icon-button:active {
@@ -238,6 +244,7 @@ const DiamondIcon = createLucideIcon('Diamond', diamond);
 }
 
 .icon-button.active,
+.icon-button.animate,
 .icon-button:focus-visible {
   border-color: var(--vp-c-brand);
 }
diff --git a/docs/.vitepress/theme/components/icons/confetti.css b/docs/.vitepress/theme/components/icons/confetti.css
index c6962115e..6962d7f2d 100644
--- a/docs/.vitepress/theme/components/icons/confetti.css
+++ b/docs/.vitepress/theme/components/icons/confetti.css
@@ -173,3 +173,12 @@
       0% 0%;
   }
 }
+
+/* Keep the copy confetti even with reduced motion turned on (owner request): the site-wide
+   reduced-motion rule in style.css shrinks every animation to 0.01ms, which hid it at once. */
+@media (prefers-reduced-motion: reduce) {
+  .confetti-button.animate:before,
+  .confetti-button.animate:after {
+    animation-duration: 1s !important;
+  }
+}