copy: Use redesigned copy button in rendered codeblocks.

web/src/message_list_tooltips.ts

@@ -263,7 +263,14 @@ export function initialize(): void {
         },
     });
 
-    message_list_tooltip(".code_external_link");
+    message_list_tooltip(
+        ".rendered_markdown .copy_codeblock, .rendered_markdown .code_external_link",
+        {
+            onHidden(instance) {
+                instance.destroy();
+            },
+        },
+    );
 
     message_list_tooltip("#message_feed_container .change_visibility_policy > i", {
         ...topic_visibility_policy_tooltip_props,
@@ -276,7 +283,7 @@ export function initialize(): void {
         },
     });
 
-    message_list_tooltip(".rendered_markdown time, .rendered_markdown .copy_codeblock", {
+    message_list_tooltip(".rendered_markdown time", {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         content: timerender.get_markdown_time_tooltip as tippy.Content,
         onHidden(instance) {

web/src/rendered_markdown.ts

@@ -341,7 +341,9 @@ export const update_elements = ($content: JQuery): void => {
         });
 
         clipboard.on("success", () => {
-            show_copied_confirmation(util.the($copy_button));
+            show_copied_confirmation(util.the($copy_button), {
+                show_check_icon: true,
+            });
         });
         $codehilite.addClass("zulip-code-block");
     });

web/styles/rendered_markdown.css

@@ -776,7 +776,7 @@
         /* Having absolute positioning here ensures that the element
         doesn't scroll along with the code div in narrow windows */
         position: absolute;
-        top: 2px;
+        top: 5px;
         right: 0;
         padding: 0 4px;
         /* Invisible unless <pre> is hovered. */
@@ -799,41 +799,6 @@
                 hsl(0deg 0% 0% / 50%)
             );
         }
-
-        #clipboard_image {
-            /* Zero out legacy negative margins */
-            margin: 0;
-        }
-    }
-
-    /* Style copy-to-clipboard button inside code blocks */
-    .copy_codeblock {
-        display: flex;
-        align-content: center;
-        /* Push back on legacy styles from .copy_button_base,
-           which are not necessary in the flex setting established
-           on the .code-buttons-container. */
-        height: auto;
-        width: auto;
-        background-clip: unset;
-        /* Don't let the default button color appear
-           behind the icon. Regrettably, !important
-           is necessary for a thorny selector-specificity
-           issue in dark mode. */
-        background-color: transparent !important;
-        /* Square off the box around the copy-to-clipboard icon. */
-        padding: 0 2px 0 4px;
-
-        &:hover {
-            /* Regrettably, !important is necessary for a thorny
-               selector-specificity issue in dark mode. */
-            background-color: transparent !important;
-        }
-
-        /* Remove the outline when clicking on the copy-to-clipboard button */
-        &:focus {
-            outline: none;
-        }
     }
 
     .code_external_link {

web/templates/code_buttons_container.hbs

@@ -1,5 +1,7 @@
 <div class="code-buttons-container">
-    {{~> copy_code_button~}}
+    <span class="copy_codeblock copy-btn" data-tippy-content="{{t 'Copy code' }}" aria-label="{{t 'Copy code' }}" role="button">
+        <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+    </span>
     {{~#if show_playground_button~}}
     {{~> view_code_in_playground~}}
     {{~/if~}}

web/templates/copy_code_button.hbs

@@ -1,3 +0,0 @@
-<button class="copy_button_base copy_codeblock" data-tippy-content="{{t 'Copy code' }}" data-tippy-trigger="mouseenter" aria-label="{{t 'Copy code' }}">
-    {{> copy_to_clipboard_svg }}
-</button>