compose_box: Implement redesigned send-button styles.

web/shared/icons/send.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.4.1 -->
+<svg width="16" height="15" viewBox="0 0 16 15" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group">
+        <g id="icons24send">
+            <path id="Vector01OOUGRXJCGD" fill="#ffffff" stroke="none" d="M 1.817891 13.813791 L 16.16712 7.662981 C 16.833187 7.375142 16.833187 6.437714 16.16712 6.149903 L 1.817891 -0.000937 C 1.275169 -0.239408 0.67489 0.163528 0.67489 0.747357 L 0.66667 4.538189 C 0.66667 4.949345 0.97092 5.302933 1.382076 5.352271 L 13.001278 6.906427 L 1.382076 8.452394 C 0.97092 8.509923 0.66667 8.863482 0.66667 9.274666 L 0.67489 13.065526 C 0.67489 13.649298 1.275169 14.052292 1.817891 13.813791 L 1.817891 13.813791 Z"/>
+        </g>
+    </g>
+</svg>

web/styles/compose.css

@@ -800,17 +800,58 @@ textarea.new_message_textarea,
     width: 100%;
 }
 
-#compose-send-button {
+.compose-send-or-save-button {
-    padding: 3px 12px;
+    border-radius: 4px;
+    border: 0;
     margin-bottom: 0;
-    font-weight: 600;
+    color: var(--color-compose-send-button-icon-color);
-    font-size: 0.9em;
+    background-color: var(--color-compose-send-button-background);
-    border-radius: 4px 0 0 4px;
+
+    &:active {
+        transition: all 80ms;
+        transform: scale(0.96);
+    }
+
+    &:focus {
+        outline: 0;
+    }
+
+    &:focus-visible {
+        border: 1px solid var(--color-compose-send-button-focus-border);
+        box-shadow: 0 0 5px var(--color-compose-send-button-focus-shadow);
+        background-color: var(
+            --color-compose-send-button-background-interactive
+        );
+    }
+
+    &:hover {
+        background-color: var(
+            --color-compose-send-button-background-interactive
+        );
+    }
+}
+
+#compose-send-button {
+    width: 74px;
+    height: 28px;
+    /* Allow to grow but not shrink */
+    flex: 1 0 auto;
+    /* Override inherited styles
+       so that flexbox can do the
+       job of positioning the icon. */
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .zulip-icon-send {
+        display: block;
+        font-size: 17px;
+        line-height: 16px;
+    }
 
     .loader {
         display: none;
-        position: relative;
-        top: -6px;
     }
 }
 
@@ -988,9 +1029,6 @@ textarea.new_message_textarea,
 
 .message-send-controls {
     display: flex;
-    flex-direction: row;
-    white-space: nowrap;
-    height: 24px;
 
     &.disabled-message-send-controls {
         cursor: not-allowed;
@@ -1099,7 +1137,41 @@ textarea.new_message_textarea,
     margin-right: 4px;
 }
 
-/* `^` icon located next to `Send` / `Scheduled` button which shows
+/* Class for send-area buttons, such as
+   Drafts and the send-adjacent vdots */
+.message-control-button {
+    border: 0;
+    outline: 0;
+    padding: 0;
+    margin: 0;
+    border-radius: 4px;
+    color: var(--color-compose-message-control-button);
+    background-color: var(--color-compose-message-control-button-background);
+    font-weight: 450;
+
+    &:active {
+        transition: all 80ms;
+        transform: scale(0.96);
+    }
+
+    &:focus {
+        outline: 0;
+    }
+
+    &:hover {
+        /* We need to use !important here, regrettably, to keep the default
+           dark-mode hover colors from showing. */
+        color: var(
+            --color-compose-message-control-button-interactive
+        ) !important;
+        background-color: var(
+            --color-compose-message-control-button-background-interactive
+        );
+        text-decoration: none;
+    }
+}
+
+/* vdots icon located next to `Send` / `Scheduled` button which shows
    options to schedule the message. */
 #send_later {
     display: flex;

web/styles/zulip.css

@@ -222,6 +222,11 @@ body {
     --color-background-tab-picker-tab-option-hover: hsl(0deg 0% 100% / 60%);
 
     /* Compose box colors */
+    --color-compose-send-button-icon-color: hsl(0deg 0% 100%);
+    --color-compose-send-button-background: hsl(226deg 99% 66%);
+    --color-compose-send-button-background-interactive: hsl(226deg 99% 60%);
+    --color-compose-send-button-focus-border: hsl(232deg 20% 10%);
+    --color-compose-send-button-focus-shadow: hsl(230deg 100% 20%);
     --color-compose-collapsed-reply-button-area-background: hsl(0deg 0% 100%);
     --color-compose-collapsed-reply-button-area-background-interactive: var(
         --color-compose-collapsed-reply-button-area-background
@@ -428,6 +433,9 @@ body {
     --color-background-tab-picker-tab-option-hover: hsl(0deg 0% 100% / 5%);
 
     /* Compose box colors */
+    --color-compose-send-button-background: hsl(226deg 60% 45%);
+    --color-compose-send-button-background-interactive: hsl(226deg 65% 50%);
+    --color-compose-send-button-focus-shadow: hsl(0deg 0% 100% / 80%);
     --color-compose-collapsed-reply-button-area-background: hsl(
         0deg 0% 0% / 20%
     );

web/templates/compose.hbs

@@ -90,9 +90,9 @@
                                 </a>
                                 <span id="compose-limit-indicator"></span>
                                 <div class="message-send-controls">
-                                    <button type="submit" id="compose-send-button" class="button small send_message compose-submit-button animated-purple-button">
+                                    <button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
                                         <img class="loader" alt="" src="" />
-                                        <span>{{t 'Send' }}</span>
+                                        <i class="zulip-icon zulip-icon-send"></i>
                                     </button>
                                     <button class="animated-purple-button message-control-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send later' }}">
                                         <div class="separator-line"></div>