message_header: Update external link button to use icon button styles.

This commit is part of a series of commits aimed at updating the message
header buttons to use the new icon button component which has consistent
styling across the Web UI and offers a larger clickable area for the
users.

In this particular commit, the code doesn't directly use the
`icon_button` component but instead uses the icon button utility
classes to style the `a` tag`. The reason behind this choice is that we
want to keep the browser support associated with the `a` tag intact,
such as previewing the URL link when hovering over it.

This commit also replaces the legacy font awesome external square link
icon to the newer "external-link" icon from the Zulip font icons.

Fixes part of #34477.

web/styles/components.css

@@ -64,7 +64,8 @@ a.no-style {
 }
 
 a.no-underline,
-a.no-underline:hover {
+a.no-underline:hover,
+a.no-underline:focus {
     text-decoration: none;
 }
 

web/styles/message_header.css

@@ -258,13 +258,6 @@
     flex-grow: 1;
     align-items: center;
 
-    .external-topic-link {
-        /* Vertically center the external link
-           icon inside its containing anchor. */
-        display: flex;
-        align-items: center;
-    }
-
     .change_visibility_policy {
         cursor: pointer;
 

web/templates/recipient_row.hbs

@@ -40,9 +40,13 @@
 
             {{! exterior links (e.g. to a trac ticket) }}
             {{#each topic_links}}
-                <a href="{{this.url}}" target="_blank" rel="noopener noreferrer" class="external-topic-link recipient-bar-control no-underline">
-                    <i class="fa fa-external-link-square recipient_bar_icon" data-tippy-content="Open {{this.text}}" aria-label="{{t 'External link' }}"></i>
-                </a>
+                {{#with this}}
+                    {{!-- TODO: Find a way to use the icon_button component with <a> tags,
+                    instead of copying over the icon button styles via the utility classes. --}}
+                    <a href="{{url}}" target="_blank" rel="noopener noreferrer" class="recipient-bar-control recipient-bar-control-icon no-underline icon-button icon-button-neutral" data-tippy-content="{{t 'Open {text}' }}" aria-label="{{t 'Open {text}' }}" tabindex="0">
+                        <i class="zulip-icon zulip-icon-external-link" aria-hidden="true"></i>
+                    </a>
+                {{/with}}
             {{/each}}
 
             {{! edit topic pencil icon }}