chore: improve copy icon names ux (#8386)

SAP · Mar 1, 2024 · 10b1de8 · 10b1de8
1 parent 6931210
commit 10b1de8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/packages/website/build-scripts/icons-generation/index.mjs b/packages/website/build-scripts/icons-generation/index.mjs
@@ -54,9 +54,10 @@ import ${svgImport} from "../local-cdn/local-cdn/${collection}/dist/${version}/$
 
         setTimeout(() => {
             target.classList.remove("icon__wrapper--copied");
-        }, 500)
+        }, 600)
     }}>
     <CopySvg className="icon__wrapper__copy"/>
+    <AcceptSvg className="icon__wrapper__accept"/>
     <div className="icon__wrapper__svg"><${svgImport} fill="var(--ifm-font-color-base)"/></div>
     <span className="icon__wrapper__title">{${iconNameImport}}</span>
 </div>`;
@@ -103,6 +104,7 @@ const generateTNTIconsPage = (sourceDir, collection, version) => {
      const content =`
 ${commonImports}
 import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
+import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg";
 
 ${imports}
  
@@ -138,6 +140,8 @@ const generateBSIconsPage = (sourceDir, collection, version) => {
 ${commonImports}
  
 import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
+import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg";
+
 ${imports}
  
  export default function SAPBSIcons() {

diff --git a/packages/website/src/pages/icons.css b/packages/website/src/pages/icons.css
@@ -22,32 +22,40 @@
 	background-color: var(--ifm-background-color);
 }
 
+.icon__wrapper__svg {
+	width: 2rem;
+	height: 2rem;
+	pointer-events: none;
+}
+
 .icon__wrapper:hover {
 	background-color: var(--ifm-menu-color-background-active);
 }
 
 .icon__wrapper.icon__wrapper--copied .icon__wrapper__copy {
-	fill: var(--ifm-color-primary);
+	display: none;
 }
 
-.icon__wrapper__svg {
-	width: 2rem;
-	height: 2rem;
-	pointer-events: none;
-}
-
-.icon__wrapper__copy {
+.icon__wrapper.icon__wrapper--copied .icon__wrapper__accept {
 	fill: var(--ifm-color-primary);
+	display: inline-block;
 }
 
-.icon__wrapper__copy {
+.icon__wrapper__copy,
+.icon__wrapper__accept {
 	width: 1rem;
 	height: 1rem;
 	align-self: end;
 	fill: var(--ifm-font-color-base);
 	pointer-events: none;
 }
 
+.icon__wrapper__accept {
+	display: none;
+}
+
+
+
 .icon__wrapper__title {
 	color: var(--ifm-font-color-base);
 	text-align: center;