From d73044ee57d5afd48dcaf648614646066b80222c Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Tue, 17 Sep 2024 14:55:34 -0500
Subject: [PATCH] compose: Decouple compose buttons from button classes.

In the 2024 redesigned button configurations, the compose buttons
become outliers. This retains their previous style inherited from
.button, allowing that base component class to move forward.
---
 web/styles/app_variables.css | 12 +++++
 web/styles/compose.css       | 87 +++++++++++++++++++++++++++---------
 web/styles/dark_theme.css    |  2 +-
 web/templates/compose.hbs    | 16 +++----
 4 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index dcd00b7062..965d927273 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -643,6 +643,12 @@
     --color-compose-embedded-button-background-interactive: hsl(
         231deg 100% 90% / 90%
     );
+    --color-background-compose-new-message-button: hsl(0deg 0% 100%);
+    --color-background-compose-new-message-button-hover: hsl(0deg 0% 100%);
+    --color-background-compose-new-message-button-active: hsl(0deg 0% 95%);
+    --color-border-compose-new-message-button: hsl(0deg 0% 80%);
+    --color-border-compose-new-message-button-hover: hsl(0deg 0% 60%);
+    --color-border-compose-new-message-button-active: hsl(0deg 0% 60%);
     --color-compose-chevron-arrow: hsl(0deg 0% 58%);
     --color-limit-indicator: hsl(38deg 100% 36%);
     --color-limit-indicator-over-limit: hsl(3deg 80% 40%);
@@ -1086,6 +1092,12 @@
     --color-compose-embedded-button-background-interactive: hsl(
         235deg 100% 70% / 20%
     );
+    --color-background-compose-new-message-button: hsl(0deg 0% 0% / 20%);
+    --color-background-compose-new-message-button-hover: hsl(0deg 0% 0% / 15%);
+    --color-background-compose-new-message-button-active: hsl(0deg 0% 0% / 20%);
+    --color-border-compose-new-message-button: hsl(0deg 0% 0% / 60%);
+    --color-border-compose-new-message-button-hover: hsl(0deg 0% 0% / 60%);
+    --color-border-compose-new-message-button-active: hsl(0deg 0% 0% / 60%);
     --color-background-popover: hsl(212deg 32% 14%);
     --color-limit-indicator: hsl(38deg 100% 70%);
     --color-limit-indicator-over-limit: hsl(3deg 80% 60%);
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 2f6980e050..837b067594 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -9,27 +9,39 @@
        reply button and the new-message button. */
     align-items: stretch;
 
-    .new_message_button {
-        .button {
-            /* Keep the new message button sized to match
-               adjacent buttons. */
-            font-size: inherit;
-            min-width: inherit;
-            line-height: var(--line-height-compose-buttons);
-            padding: 3px 10px;
+    .compose_mobile_button {
+        /* Keep the new message button sized to match
+           adjacent buttons. */
+        min-width: inherit;
+        padding: 3px 10px;
+        border-radius: 4px;
+        outline: none;
+        /* This is ugly, but necessary to use the
+           text + for the compose button. An icon
+           would likely be a better choice here.
+           1.2em is 16.8px at 14px em. */
+        font-size: 1.2em;
+        /* 1.2em is 16.8px at 14px em; this
+           maintains the 20px em-equivalent compose
+           line height, but at a 16.8px em. */
+        line-height: 1.19em;
+        font-weight: 400;
+        color: var(--color-text-default);
+        background-color: var(--color-background-compose-new-message-button);
+        border: 1px solid var(--color-border-compose-new-message-button);
+
+        &:hover {
+            background-color: var(
+                --color-background-compose-new-message-button-hover
+            );
+            border-color: var(--color-border-compose-new-message-button-hover);
         }
 
-        .compose_mobile_button {
-            /* This is ugly, but necessary to use the
-               text + for the compose button. An icon
-               would likely be a better choice here.
-               1.2em is 16.8px at 14px em. */
-            font-size: 1.2em !important;
-            /* 1.2em is 16.8px at 14px em; this
-               maintains the 20px em-equivalent compose
-               line height, but at a 16.8px em. */
-            line-height: 1.19em !important;
-            font-weight: 400;
+        &:active {
+            background-color: var(
+                --color-background-compose-new-message-button-active
+            );
+            border-color: var(--color-border-compose-new-message-button-hover);
         }
     }
 
@@ -60,8 +72,14 @@
 
         #left_bar_compose_reply_button_big,
         #new_conversation_button {
-            /* Remove the border inherited from `.button` styles. */
+            /* Keep the new message button sized to match
+               adjacent buttons. */
+            font-size: inherit;
+            min-width: inherit;
+            padding: 3px 10px;
+            outline: none;
             border: none;
+            color: var(--color-text-default);
             background: var(--color-compose-embedded-button-background);
             border-radius: 3px;
             line-height: var(--line-height-compose-buttons);
@@ -83,7 +101,6 @@
         #new_conversation_button {
             /* Remove the  `padding` to prevent margin from affecting parent height. */
             padding: 0 10px;
-            /* Removing the `min-width` inherited from the `.button` styles. */
             min-width: inherit;
             margin: 1px;
             flex-shrink: 0;
@@ -115,6 +132,34 @@
             display: none !important;
         }
     }
+
+    #new_direct_message_button {
+        /* Keep the new message button sized to match
+           adjacent buttons. */
+        font-size: inherit;
+        min-width: inherit;
+        line-height: var(--line-height-compose-buttons);
+        padding: 3px 10px;
+        border-radius: 4px;
+        outline: none;
+        color: var(--color-text-default);
+        background-color: var(--color-background-compose-new-message-button);
+        border: 1px solid var(--color-border-compose-new-message-button);
+
+        &:hover {
+            background-color: var(
+                --color-background-compose-new-message-button-hover
+            );
+            border-color: var(--color-border-compose-new-message-button-hover);
+        }
+
+        &:active {
+            background-color: var(
+                --color-background-compose-new-message-button-active
+            );
+            border-color: var(--color-border-compose-new-message-button-hover);
+        }
+    }
 }
 
 /* Main geometry for this element is in zulip.css */
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index b303b2194a..048ca5ca75 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -26,7 +26,7 @@
         }
     }
 
-    & a:hover {
+    & a:not(.button, .compose_control_button):hover {
         color: hsl(200deg 79% 66%);
 
         & code {
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index f64a890809..7784e369f9 100644
--- a/web/templates/compose.hbs
+++ b/web/templates/compose.hbs
@@ -12,29 +12,29 @@
     </div>
     <div id="compose_controls">
         <div id="compose_buttons">
-            <div class="new_message_button reply_button_container">
+            <div class="reply_button_container">
                 <div class="compose-reply-button-wrapper" data-reply-button-type="selected_message">
-                    <button type="button" class="button compose_reply_button"
+                    <button type="button" class="compose_reply_button"
                       id="left_bar_compose_reply_button_big">
                         {{t 'Compose message' }}
                     </button>
                 </div>
-                <button type="button" class="button compose_new_conversation_button"
+                <button type="button" class="compose_new_conversation_button"
                   id="new_conversation_button"
                   data-tooltip-template-id="new_stream_message_button_tooltip_template">
                     {{t 'Start new conversation' }}
                 </button>
             </div>
-            <span class="new_message_button mobile_button_container">
-                <button type="button" class="button rounded compose_mobile_button"
+            <span class="mobile_button_container">
+                <button type="button" class="compose_mobile_button"
                   id="left_bar_compose_mobile_button_big"
                   data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template">
                     +
                 </button>
             </span>
             {{#unless embedded }}
-            <span class="new_message_button new_direct_message_button_container">
-                <button type="button" class="button rounded compose_new_direct_message_button"
+            <span class="new_direct_message_button_container">
+                <button type="button" class="compose_new_direct_message_button"
                   id="new_direct_message_button"
                   data-tooltip-template-id="new_direct_message_button_tooltip_template">
                     {{t 'New direct message' }}
@@ -57,7 +57,7 @@
                             </div>
                             <div id="compose_recipient_box">
                                 <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
-                                <button type="button" id="recipient_box_clear_topic_button" class="button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
+                                <button type="button" id="recipient_box_clear_topic_button" class="tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
                                     <i class="zulip-icon zulip-icon-close"></i>
                                 </button>
                             </div>