diff --git a/web/styles/compose.css b/web/styles/compose.css
index 779065d565..55e0c47936 100644
--- a/web/styles/compose.css
+++ b/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;
- color: hsl(0deg 0% 100%);
+ justify-content: center;
+ 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;
- margin: 0;
+ /* Flex items respect z-index values;
+ 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 {
- background-color: hsl(0deg 0% 100% / 65%);
- height: 70%;
- width: 1px;
- }
-
- &:hover,
- &:focus {
- box-shadow: none;
- }
+#compose-drafts-button {
+ /* In a columnar flex, we need to
+ use alignment to keep the Drafts
+ button from expanding the full
+ width of the column. */
+ align-self: flex-start;
+ /* Keep the Drafts button text
+ aligned with the Send button's
+ lefthand edge */
+ padding: 0 8px;
+ margin-left: -8px;
}
@media (width < $xl_min) {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 82f31d5d63..9b601c67a2 100644
--- a/web/styles/zulip.css
+++ b/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%
);
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index 73f8013898..49b86af1ec 100644
--- a/web/templates/compose.hbs
+++ b/web/templates/compose.hbs
@@ -85,7 +85,7 @@