inline_topic_edit: Improve design of inline topic edit UI.

This commit improves the design of the inline topic edit UI by making
the following changes:
- Increases the dimensions of the text input element.
- Fixes the font scaling inside text input element.
- Replaces the old save and cancel buttons with the new icon buttons.

Fixes #33155.

web/src/message_edit.ts

@@ -366,7 +366,7 @@ export function show_topic_edit_spinner($row: JQuery): void {
 }
 
 export function end_if_focused_on_inline_topic_edit(): void {
-    const $focused_elem = $(".topic_edit_form").find(":focus");
+    const $focused_elem = $(".topic_edit").find(":focus");
     if ($focused_elem.length === 1) {
         $focused_elem.trigger("blur");
         const $recipient_row = $focused_elem.closest(".recipient_row");

web/src/message_list.ts

@@ -538,7 +538,7 @@ export class MessageList {
     }
 
     show_edit_topic_on_recipient_row($recipient_row: JQuery, $form: JQuery): void {
-        $recipient_row.find(".topic_edit_form").append($form);
+        $recipient_row.find(".topic_edit").append($form);
         $recipient_row.find(".stream_topic").hide();
         $recipient_row.find(".topic_edit").show();
         $recipient_row.find(".recipient-bar-control").hide();
@@ -546,7 +546,7 @@ export class MessageList {
 
     hide_edit_topic_on_recipient_row($recipient_row: JQuery): void {
         $recipient_row.find(".stream_topic").show();
-        $recipient_row.find(".topic_edit_form").empty();
+        $recipient_row.find(".topic_edit").empty();
         $recipient_row.find(".topic_edit").hide();
         $recipient_row.find(".recipient-bar-control").show();
     }

web/styles/dark_theme.css

@@ -703,17 +703,6 @@
         }
     }
 
-    .small_square_button {
-        &.small_square_x {
-            background-color: hsl(0deg 0% 95%);
-            color: hsl(0deg 0% 42%);
-
-            &:hover {
-                color: hsl(0deg 0% 18%);
-            }
-        }
-    }
-
     & a:not(:active):focus,
     button:not(.action-button, .icon-button):focus,
     i.fa:focus,

web/styles/zulip.css

@@ -907,8 +907,7 @@ div.focused-message-list.is-conversation-view .recipient_row {
 
 .topic_edit {
     display: none;
-    line-height: 22px;
-    visibility: visible;
+    flex-grow: 1;
 
     .alert {
         display: inline-block;
@@ -918,20 +917,25 @@ div.focused-message-list.is-conversation-view .recipient_row {
     }
 }
 
-.inline_topic_edit {
-    margin-bottom: 5px;
-    width: 206px;
+#topic_edit_form {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    margin: 0;
+    padding-right: 5px;
+}
 
-    &.header-v {
-        height: 18px;
-        display: inline-block;
-        padding: 0 3px;
-        vertical-align: baseline;
-        line-height: 0px;
-        box-shadow: none;
+.inline_topic_edit {
+    flex: 1;
+    /* Set the max width of the inline topic edit input to the realm's
+       max_topic_length (60 chars) + 5 chars extra for some cushion. */
+    max-width: 65ch;
+    line-height: 1.2142em;
+    padding: 0 5px;
     color: hsl(0deg 0% 33%);
     border-radius: 4px;
     border: 1px solid hsl(0deg 0% 80%);
+
     transition:
         border-color linear 0.2s,
         box-shadow linear 0.2s;
@@ -944,11 +948,6 @@ div.focused-message-list.is-conversation-view .recipient_row {
             0 0 8px hsl(206deg 80% 62% / 60%);
     }
 }
-}
-
-.inline_topic_edit:focus {
-    outline: none;
-}
 
 .information-settings .user-profile-picture,
 .user_sidebar_entry.with_avatar .user-profile-picture,
@@ -1202,29 +1201,6 @@ nav {
     text-align: center;
 }
 
-.small_square_button {
-    padding: 0;
-    border: none;
-    font-size: 12px;
-    width: 18px;
-    height: 18px;
-    border-radius: 4px;
-    margin-bottom: 3px;
-
-    &:focus {
-        outline: none;
-    }
-
-    &.small_square_x {
-        background-color: hsl(0deg 0% 100%);
-        color: hsl(0deg 0% 47%);
-
-        &:hover {
-            color: hsl(0deg 0% 18%);
-        }
-    }
-}
-
 div.topic_edit_spinner {
     display: inline-block;
     width: 18px;
@@ -1425,16 +1401,6 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     margin-right: -50%;
 }
 
-#topic_edit_form {
-    display: inline-block;
-    margin: 0;
-    height: 22px;
-    padding-left: 20px;
-    padding-right: 3px;
-    line-height: 22px;
-    margin-left: -15px;
-}
-
 .screen {
     position: absolute;
     left: 0;

web/templates/components/icon_button.hbs

@@ -1,3 +1,3 @@
-<button class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}}" tabindex="0">
+<button class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0">
     <i class="zulip-icon zulip-icon-{{icon}}"></i>
 </button>

web/templates/recipient_row.hbs

@@ -36,9 +36,7 @@
             </a>
         </span>
         <span class="recipient_bar_controls no-select">
-            <span class="topic_edit hidden-for-spectators">
-                <span class="topic_edit_form"></span>
-            </span>
+            <span class="topic_edit hidden-for-spectators"></span>
 
             {{! exterior links (e.g. to a trac ticket) }}
             {{#each topic_links}}

web/templates/tooltip_templates.hbs

@@ -283,3 +283,9 @@
 <template id="color-picker-confirm-button-tooltip-template">
     {{t 'Confirm new color' }}
 </template>
+<template id="save-button-tooltip-template">
+    {{t 'Save' }}
+</template>
+<template id="cancel-button-tooltip-template">
+    {{t 'Cancel' }}
+</template>

web/templates/topic_edit_form.hbs

@@ -4,8 +4,8 @@
     <input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}"
       class="inline_topic_edit header-v {{#unless realm_mandatory_topics}}empty-topic-placeholder-display{{/unless}}"
       {{#unless realm_mandatory_topics}}placeholder="{{empty_string_topic_display_name}}"{{/unless}} />
-    <button type="button" class="topic_edit_save small_square_button animated-purple-button"><i class="fa fa-check" aria-hidden="true"></i></button>
-    <button type="button" class="topic_edit_cancel small_square_button small_square_x"><i class="fa fa-remove" aria-hidden="true"></i></button>
+    {{> components/icon_button squared=true custom_classes="topic_edit_save tippy-zulip-delayed-tooltip" icon="check" intent="brand" data-tooltip-template-id="save-button-tooltip-template" }}
+    {{> components/icon_button squared=true custom_classes="topic_edit_cancel tippy-zulip-delayed-tooltip" icon="circle-x" intent="neutral" data-tooltip-template-id="cancel-button-tooltip-template" }}
     <div class="alert alert-error edit_error" style="display: none"></div>
     <div class="topic_edit_spinner"></div>
 </form>