copy: Use redesigned copy button in view original message UI.

This commit also updates the copy icon in the related /help docs.

help/view-the-markdown-source-of-a-message.md

@@ -33,7 +33,7 @@ formatted, or to copy the Markdown source for a reply.
    menu option for editable messages that you have sent.
 
 1. Click the **Copy and close**
-   ( <img src="/static/images/help/copy_to_clipboard.svg" alt="copy" class="help-center-icon"/>)
+   (<i class="zulip-icon zulip-icon-copy"></i>)
    widget in the upper right corner of the message.
 
 !!! keyboard_tip ""

web/src/message_edit.ts

@@ -449,9 +449,10 @@ function create_copy_to_clipboard_handler(
     });
 
     clipboard.on("success", () => {
-        // Hide the Tippy and source box after a 600ms delay
-        const tippy_timeout_in_ms = 600;
+        // Hide the Tippy and source box after a 1000ms delay
+        const tippy_timeout_in_ms = 1000;
         show_copied_confirmation(the($row.find(".copy_message")), {
+            show_check_icon: true,
             timeout_in_ms: tippy_timeout_in_ms,
             on_hide_callback() {
                 end_message_row_edit($row);

web/styles/message_row.css

@@ -656,6 +656,7 @@
 }
 
 .edit-content-container {
+    position: relative;
     border-radius: 4px;
     border: 1px solid var(--color-message-content-container-border);
     transition: border 0.2s ease;

web/styles/zulip.css

@@ -632,18 +632,12 @@ li,
 }
 
 .copy_message {
-    float: right;
-    position: relative;
-    cursor: pointer;
-    top: 30px;
-    /* To make sure the svg doesn't occupy any vertical space. */
-    margin-top: -30px;
-    right: 2px;
-    padding-top: 2px;
-
-    #clipboard_image {
-        margin: 0;
-    }
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 1em;
+    backdrop-filter: blur(20px);
+    outline: 1px solid var(--color-copy-btn-square-bg-active);
 }
 
 #copy_generated_link_container {

web/templates/copy_message_button.hbs

@@ -1,3 +0,0 @@
-<div class="copy_button_base copy_message tippy-zulip-tooltip" data-tippy-content="{{t 'Copy and close' }}" aria-label="{{t 'Copy and close' }}" role="button">
-    {{> copy_to_clipboard_svg }}
-</div>

web/templates/message_edit_form.hbs

@@ -4,7 +4,9 @@
         <form id="edit_form_{{message_id}}">
             <div class="edit_form_banners"></div>
             <div class="edit-controls edit-content-container {{#if is_editable}}surround-formatting-buttons-row{{/if}}">
-                {{> copy_message_button message_id=this.message_id}}
+                <span class="copy_message copy-btn copy-btn-square tippy-zulip-tooltip" data-tippy-content="{{t 'Copy and close' }}" aria-label="{{t 'Copy and close' }}" role="button">
+                    <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+                </span>
                 <textarea class="message_edit_content" maxlength="{{ max_message_length }}">{{content}}</textarea>
                 <div class="scrolling_list preview_message_area" id="preview_message_area_{{message_id}}" style="display:none;">
                     <div class="markdown_preview_spinner"></div>