From 9c5978e85bd85a02a115acd1657e622cbb0e2fc0 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Thu, 19 Sep 2024 02:09:46 +0530
Subject: [PATCH] copy: Use redesigned copy button in codeblocks of /help docs.

Fixes #28700.
---
 web/src/portico/help.ts                 | 30 +++++++++--------------
 web/styles/portico/markdown.css         | 32 +++++++++++++++++++++++--
 web/templates/copy_to_clipboard_svg.hbs |  3 ---
 web/templates/zulip_copy_icon.hbs       |  1 +
 4 files changed, 42 insertions(+), 24 deletions(-)
 delete mode 100644 web/templates/copy_to_clipboard_svg.hbs
 create mode 100644 web/templates/zulip_copy_icon.hbs

diff --git a/web/src/portico/help.ts b/web/src/portico/help.ts
index a448a10797..395d0ad464 100644
--- a/web/src/portico/help.ts
+++ b/web/src/portico/help.ts
@@ -1,10 +1,12 @@
 import ClipboardJS from "clipboard";
 import $ from "jquery";
+import assert from "minimalistic-assert";
 import SimpleBar from "simplebar";
 import * as tippy from "tippy.js";
 
-import copy_to_clipboard_svg from "../../templates/copy_to_clipboard_svg.hbs";
+import zulip_copy_icon from "../../templates/zulip_copy_icon.hbs";
 import * as common from "../common";
+import {show_copied_confirmation} from "../copied_tooltip";
 import * as util from "../util";
 
 import {activate_correct_tab} from "./tabbed-instructions";
@@ -33,8 +35,8 @@ function register_tabbed_section($tabbed_section: JQuery): void {
 // Display the copy-to-clipboard button inside the .codehilite element
 // within the API and Help Center docs using clipboard.js
 function add_copy_to_clipboard_element($codehilite: JQuery): void {
-    const $copy_button = $("<button>").addClass("copy-codeblock");
-    $copy_button.html(copy_to_clipboard_svg());
+    const $copy_button = $("<span>").addClass("copy-btn copy-codeblock");
+    $copy_button.html(zulip_copy_icon());
 
     $($codehilite).append($copy_button);
 
@@ -47,28 +49,18 @@ function add_copy_to_clipboard_element($codehilite: JQuery): void {
     });
 
     // Show a tippy tooltip when the button is hovered
-    const tooltip_copy = tippy.default(util.the($copy_button), {
+    tippy.default(util.the($copy_button), {
         content: "Copy code",
         trigger: "mouseenter",
         placement: "top",
     });
 
-    // Show a tippy tooltip when the code is copied
-    const tooltip_copied = tippy.default(util.the($copy_button), {
-        content: "Copied!",
-        trigger: "manual",
-        placement: "top",
-    });
-
     // Show "Copied!" tooltip when code is successfully copied
-    clipboard.on("success", () => {
-        tooltip_copy.hide();
-        tooltip_copied.show();
-
-        // Hide the "Copied!" tooltip after 1 second
-        setTimeout(() => {
-            tooltip_copied.hide();
-        }, 1000);
+    clipboard.on("success", (e) => {
+        assert(e.trigger instanceof HTMLElement);
+        show_copied_confirmation(e.trigger, {
+            show_check_icon: true,
+        });
     });
 }
 
diff --git a/web/styles/portico/markdown.css b/web/styles/portico/markdown.css
index ff9ba9202b..183c03dfde 100644
--- a/web/styles/portico/markdown.css
+++ b/web/styles/portico/markdown.css
@@ -1,4 +1,14 @@
 .markdown {
+    /* Copied from app_variables.css to be used in portico pages. */
+    --color-copy-btn: color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent);
+    --color-copy-btn-hover: hsl(229deg 9% 36%);
+    --color-copy-btn-active: color-mix(
+        in oklch,
+        hsla(229deg 9% 36%) 70%,
+        transparent
+    );
+    --color-copy-btn-success: hsl(146deg 90% 27%);
+
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.5;
@@ -412,9 +422,27 @@
             outline-offset: -1px;
             outline-color: hsl(176deg 46% 41%);
         }
+    }
 
-        &:hover svg path {
-            fill: hsl(200deg 100% 40%);
+    .copy-btn {
+        display: flex;
+        border-radius: 4px;
+        color: var(--color-copy-btn);
+        /* 2px at 16px/1em */
+        padding: 0.125em;
+        cursor: pointer;
+
+        &:hover,
+        &:focus-visible {
+            color: var(--color-copy-btn-hover);
+        }
+
+        &:active {
+            color: var(--color-copy-btn-active);
+        }
+
+        &.copy-btn-success {
+            color: var(--color-copy-btn-success);
         }
     }
 
diff --git a/web/templates/copy_to_clipboard_svg.hbs b/web/templates/copy_to_clipboard_svg.hbs
deleted file mode 100644
index 4e9c7874d7..0000000000
--- a/web/templates/copy_to_clipboard_svg.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg height="20" width="16" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" id="clipboard_image">
-    <path fill="#777" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
-</svg>
diff --git a/web/templates/zulip_copy_icon.hbs b/web/templates/zulip_copy_icon.hbs
new file mode 100644
index 0000000000..b9a87c7156
--- /dev/null
+++ b/web/templates/zulip_copy_icon.hbs
@@ -0,0 +1 @@
+<i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>