copy: Use redesigned copy button in copy invite link alert.

web/src/invite.ts

@@ -229,6 +229,7 @@ function generate_multiuse_invite(): void {
             clipboard.on("success", () => {
                 const tippy_timeout_in_ms = 800;
                 show_copied_confirmation(util.the($("#copy_generated_invite_link")), {
+                    show_check_icon: true,
                     timeout_in_ms: tippy_timeout_in_ms,
                 });
             });

web/styles/zulip.css

@@ -642,36 +642,13 @@ li,
 
 #copy_generated_link_container {
     display: flex;
-    width: 100%;
-    margin-right: -32px;
     gap: 4px;
     align-items: center;
 }
 
 #copy_generated_invite_link {
     position: relative;
-    margin-right: -32px;
-    margin-top: -1px;
-    padding: 6px 3px 6px 13px;
-    float: right;
-
-    /* This property nullifies the box-shadow rendered by .btn class */
-    &:active {
-        box-shadow: none;
-    }
-
-    & path {
-        fill: var(--color-fill-user-invite-copy-icon);
-    }
-
-    &:hover svg path {
-        fill: var(--color-fill-hover-copy-icon);
-    }
-}
-
-#clipboard_image {
-    margin-top: -5px;
-    margin-left: -8px;
+    right: -30px;
 }
 
 /* Classes for hiding and showing controls */

web/templates/copy_invite_link.hbs

@@ -1,9 +1,8 @@
-<a class="btn copy_button_base" data-tippy-content="{{t 'Copy link' }}" data-tippy-placement="top" aria-label="{{t 'Copy link' }}"
-  id='copy_generated_invite_link' data-clipboard-text="{{ invite_link }}">
-    {{> copy_to_clipboard_svg }}
-</a>
-
 <div id="copy_generated_link_container">
     <span>{{t "Link:" }}</span>
     <a href="{{ invite_link }}" id="multiuse_invite_link">{{ invite_link }}</a>
+
+    <span id="copy_generated_invite_link" class="copy-btn" data-tippy-content="{{t 'Copy link' }}" data-tippy-placement="top" aria-label="{{t 'Copy link' }}" data-clipboard-text="{{ invite_link }}" role="button">
+        <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+    </span>
 </div>