compose_box: Implement redesigned vdots-button styles.

web/styles/compose.css

@@ -274,6 +274,10 @@
        expands or contracts. */
     display: flex;
     flex-direction: column;
+    /* We add 6px of margin to the grid-gap of
+       6px, for 12px of space between the Send
+       button and the textarea. */
+    margin-left: 6px;
 }
 
 #message-formatting-controls-container {
@@ -843,6 +847,11 @@ textarea.new_message_textarea,
     display: flex;
     align-items: center;
     justify-content: center;
+    /* Flex items respect z-index values;
+       this is needed to keep the send
+       button over top of the vdots
+       background */
+    z-index: 1;
 
     .zulip-icon-send {
         display: block;
@@ -1158,6 +1167,10 @@ textarea.new_message_textarea,
         outline: 0;
     }
 
+    &:focus-visible {
+        outline: 2px solid var(--color-outline-focus);
+    }
+
     &:hover {
         /* We need to use !important here, regrettably, to keep the default
            dark-mode hover colors from showing. */
@@ -1171,32 +1184,55 @@ textarea.new_message_textarea,
     }
 }
 
-/* vdots icon located next to `Send` / `Scheduled` button which shows
+/* vdots icon located next to `Send` button which shows
    options to schedule the message. */
 #send_later {
     display: flex;
     align-items: center;
-    float: right;
+    justify-content: center;
-    color: hsl(0deg 0% 100%);
+    width: 40px;
+    /* Allow to grow but not shrink */
+    flex: 1 0 auto;
+    /* TODO: Set this as a variable shared with
+       the send button. */
+    height: 28px;
+    /* Make the vdots appear to extend from
+       beneath the send button when an
+       interactive background is present. */
+    margin-left: -4px;
+    padding: 0 0 0 4px;
     border-radius: 0 4px 4px 0;
-    padding: 0;
+    /* Flex items respect z-index values;
-    margin: 0;
+       this is needed to keep the vdots
+       background beneath the send button. */
+    z-index: 0;
+
+    &:focus-visible {
+        /* Use a border, not an outline, to preserve the
+           conjoined layout with the Send button. Flexbox
+           will handle the dimension change, so there won't
+           be any movement of the vdots in this state. */
+        outline: 0;
+        border: 2px solid var(--color-outline-focus);
+    }
 
     .zulip-icon {
         padding: 5px 3px;
         font-size: 17px;
     }
+}
 
-    .separator-line {
+#compose-drafts-button {
-        background-color: hsl(0deg 0% 100% / 65%);
+    /* In a columnar flex, we need to
-        height: 70%;
+       use alignment to keep the Drafts
-        width: 1px;
+       button from expanding the full
-    }
+       width of the column. */
-
+    align-self: flex-start;
-    &:hover,
+    /* Keep the Drafts button text
-    &:focus {
+       aligned with the Send button's
-        box-shadow: none;
+       lefthand edge */
-    }
+    padding: 0 8px;
+    margin-left: -8px;
 }
 
 @media (width < $xl_min) {

web/styles/zulip.css

@@ -227,6 +227,15 @@ body {
     --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-message-control-button: hsl(240deg 30% 50% / 80%);
+    --color-compose-message-control-button-background: transparent;
+    --color-compose-message-control-button-interactive: hsl(240deg 30% 50%);
+    --color-compose-message-control-button-background-interactive: hsl(
+        240deg 100% 30% / 5%
+    );
+    --color-compose-message-control-button-focus-shadow: var(
+        --color-compose-send-button-focus-shadow
+    );
     --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
@@ -436,6 +445,17 @@ body {
     --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-message-control-button: hsl(240deg 30% 70%);
+    --color-compose-message-control-button-background: transparent;
+    --color-compose-message-control-button-interactive: var(
+        --color-compose-message-control-button
+    );
+    --color-compose-message-control-button-background-interactive: hsl(
+        235deg 100% 70% / 11%
+    );
+    --color-compose-message-control-button-focus-shadow: var(
+        --color-compose-send-button-focus-shadow
+    );
     --color-compose-collapsed-reply-button-area-background: hsl(
         0deg 0% 0% / 20%
     );

web/templates/compose.hbs

@@ -85,7 +85,7 @@
                             <div class="drag"></div>
 
                             <div id="message-send-controls-container">
-                                <a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template">
+                                <a id="compose-drafts-button" role="button" class="compose_control_button message-control-button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template">
                                     {{t 'Drafts' }}
                                 </a>
                                 <span id="compose-limit-indicator"></span>
@@ -94,8 +94,7 @@
                                         <img class="loader" alt="" src="" />
                                         <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' }}">
+                                    <button class="message-control-button send-related-action-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send later' }}">
-                                        <div class="separator-line"></div>
                                         <i class="zulip-icon zulip-icon-more-vertical"></i>
                                     </button>
                                 </div>