From 0a5a91619e93e859899b1a8649c87756e27c02ca Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Tue, 9 Apr 2024 23:35:23 +0530
Subject: [PATCH] Improve copy button's icon, hover color & click animation in
 Desktop UI

---
 .../assets/icons/copy-button-success.svg      |  6 +++
 .../desktop/assets/icons/copy-button.svg      |  5 +++
 src/interface/desktop/chat.html               | 38 ++++++++++++-------
 3 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 src/interface/desktop/assets/icons/copy-button-success.svg
 create mode 100644 src/interface/desktop/assets/icons/copy-button.svg

diff --git a/src/interface/desktop/assets/icons/copy-button-success.svg b/src/interface/desktop/assets/icons/copy-button-success.svg
new file mode 100644
index 00000000..7a00dcd0
--- /dev/null
+++ b/src/interface/desktop/assets/icons/copy-button-success.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M22 11.1V6.9C22 3.4 20.6 2 17.1 2H12.9C9.4 2 8 3.4 8 6.9V8H11.1C14.6 8 16 9.4 16 12.9V16H17.1C20.6 16 22 14.6 22 11.1Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill="#00ff00" d="M16 17.1V12.9C16 9.4 14.6 8 11.1 8H6.9C3.4 8 2 9.4 2 12.9V17.1C2 20.6 3.4 22 6.9 22H11.1C14.6 22 16 20.6 16 17.1Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.08008 14.9998L8.03008 16.9498L11.9201 13.0498" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/interface/desktop/assets/icons/copy-button.svg b/src/interface/desktop/assets/icons/copy-button.svg
new file mode 100644
index 00000000..36fc8971
--- /dev/null
+++ b/src/interface/desktop/assets/icons/copy-button.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index 14dd9e6b..1e5d3390 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -13,21 +13,22 @@
 
     <script>
         let chatOptions = [];
-        function copyProgrammaticOutput(event) {
-            // Remove the first 4 characters which are the "Copy" button
-            const originalCopyText = event.target.parentNode.textContent.trim().slice(0, 4);
-            const programmaticOutput = event.target.parentNode.textContent.trim().slice(4);
-            navigator.clipboard.writeText(programmaticOutput).then(() => {
-                event.target.textContent = "✅ Copied to clipboard!";
+        function copyParentText(event) {
+            const button = event.currentTarget;
+            const textContent = button.parentNode.textContent.trim();
+            navigator.clipboard.writeText(textContent).then(() => {
+                button.firstChild.src = "./assets/icons/copy-button-success.svg";
                 setTimeout(() => {
-                    event.target.textContent = originalCopyText;
+                    button.firstChild.src = "./assets/icons/copy-button.svg";
                 }, 1000);
             }).catch((error) => {
-                console.error("Error copying programmatic output to clipboard:", error);
-                event.target.textContent = "⛔️ Failed to copy!";
+                console.error("Error copying text to clipboard:", error);
+                const originalButtonText = button.innerHTML;
+                button.innerHTML = "⛔️";
                 setTimeout(() => {
-                    event.target.textContent = originalCopyText;
-                }, 1000);
+                    button.innerHTML = originalButtonText;
+                    button.firstChild.src = "./assets/icons/copy-button.svg";
+                }, 2000);
             });
         }
 
@@ -338,8 +339,12 @@
                 // Add a copy button to each element
                 let copyButton = document.createElement('button');
                 copyButton.classList.add("copy-button");
-                copyButton.innerHTML = "Copy";
-                copyButton.addEventListener('click', copyProgrammaticOutput);
+                copyButton.title = "Copy Code";
+                let copyIcon = document.createElement("img");
+                copyIcon.src = "./assets/icons/copy-button.svg";
+                copyIcon.classList.add("copy-icon");
+                copyButton.appendChild(copyIcon);
+                copyButton.addEventListener('click', copyParentText);
                 codeElement.prepend(copyButton);
             });
 
@@ -1608,8 +1613,13 @@
             transition: 0.5s;
         }
 
+        img.copy-icon {
+            width: 16px;
+            height: 16px;
+        }
+
         button.copy-button:hover {
-            background-color: black;
+            background-color: var(--primary-hover);
             color: #f5f5f5;
         }