From f8cbff51e08812cfb036fda4b324d601fe66613f Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Mon, 16 Dec 2024 12:16:50 -0600
Subject: [PATCH] compose: Control formatting dividers with CSS.

---
 web/styles/app_variables.css                        |  2 ++
 web/styles/compose.css                              | 13 +++++++------
 web/styles/dark_theme.css                           |  4 ----
 web/templates/compose_control_buttons.hbs           |  6 +++---
 .../compose_control_buttons_in_popover.hbs          |  4 ++--
 .../compose_control_buttons_in_popover_2.hbs        |  2 +-
 6 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 56dacc081b..c044ffd5a1 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -778,6 +778,7 @@
     --color-message-content-container-border: hsl(0deg 0% 0% / 10%);
     --color-message-content-container-border-focus: hsl(0deg 0% 57%);
     --color-compose-control-button-background-hover: hsl(0deg 0% 0% / 5%);
+    --color-compose-formatting-button-divider: hsl(0deg 0% 75%);
     --color-compose-focus-ring: var(--color-outline-focus);
 
     /* Text colors */
@@ -1540,6 +1541,7 @@
     --color-message-content-container-border-focus: hsl(0deg 0% 100% / 27%);
     --color-message-content-container-border-over-limit: hsl(0deg 76% 65%);
     --color-compose-control-button-background-hover: hsl(0deg 0% 100% / 5%);
+    --color-compose-formatting-button-divider: hsl(236deg 33% 90% / 25%);
     --color-compose-focus-ring: hsl(0deg 0% 67%);
 
     /* Text colors */
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 0092e3db52..05ba33867b 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -1267,14 +1267,15 @@ textarea.new_message_textarea {
     }
 
     .divider {
-        color: hsl(0deg 0% 75%);
-        /* 20px at 14px/1em */
-        font-size: 1.4286em;
-        margin: 0 3px;
+        margin: 0 5px;
         /* Coordinate with the value of
            --compose-formatting-buttons-row-height */
-        /* 28px at 20px/1em */
-        height: 1.4em;
+        /* 22px at 14px/1em */
+        height: 1.5714em;
+        width: 1.5px;
+        /* Prevent dividers from growing or shrinking. */
+        flex: 0 0 auto;
+        background-color: var(--color-compose-formatting-button-divider);
 
         @media (width < 400px) {
             /* Remove at mobile widths to make more space
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index a4ecae9e09..905354db62 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -399,10 +399,6 @@
         border-color: hsl(0deg 0% 0% / 90%);
     }
 
-    .compose-control-buttons-container .divider {
-        color: hsl(236deg 33% 90% / 25%);
-    }
-
     .compose_control_button:hover {
         color: inherit;
     }
diff --git a/web/templates/compose_control_buttons.hbs b/web/templates/compose_control_buttons.hbs
index 2084739e7a..e5bd47a5ae 100644
--- a/web/templates/compose_control_buttons.hbs
+++ b/web/templates/compose_control_buttons.hbs
@@ -17,7 +17,7 @@
     <div class="compose_control_button_container preview_mode_disabled" data-tippy-content="{{t 'Add voice call' }}">
         <a role="button" class="compose_control_button zulip-icon zulip-icon-voice-call audio_link" aria-label="{{t 'Add voice call' }}" tabindex=0></a>
     </div>
-    <div class="divider">|</div>
+    <div class="divider"></div>
     <div class="compose_control_button_container preview_mode_disabled" data-tippy-content="{{t 'Add emoji' }}">
         <a role="button" class="compose_control_button zulip-icon zulip-icon-smile-bigger emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0></a>
     </div>
@@ -33,11 +33,11 @@
         <a role="button" class="compose_control_button compose_gif_icon zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0></a>
     </div>
     <div class="show_popover_buttons_2">
-        <div class="divider">|</div>
+        <div class="divider"></div>
         {{> popovers/compose_control_buttons/compose_control_buttons_in_popover_2 .}}
     </div>
     <div class="show_popover_buttons">
-        <div class="divider">|</div>
+        <div class="divider"></div>
         {{> popovers/compose_control_buttons/compose_control_buttons_in_popover .}}
     </div>
     <div class="compose_control_menu_wrapper" role="button" tabindex=0>
diff --git a/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs b/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs
index 3df3a501ed..08ebd7f702 100644
--- a/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs
+++ b/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs
@@ -1,11 +1,11 @@
 <div class="compose-control-buttons-container preview_mode_disabled">
     <a role="button" data-format-type="numbered" class="compose_control_button zulip-icon zulip-icon-ordered-list formatting_button" aria-label="{{t 'Numbered list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Numbered list' }}"></a>
     <a role="button" data-format-type="bulleted" class="compose_control_button zulip-icon zulip-icon-unordered-list formatting_button" aria-label="{{t 'Bulleted list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bulleted list' }}"></a>
-    <div class="divider">|</div>
+    <div class="divider"></div>
     <a role="button" data-format-type="quote" class="compose_control_button zulip-icon zulip-icon-quote formatting_button" aria-label="{{t 'Quote' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Quote' }}"></a>
     <a role="button" data-format-type="spoiler" class="compose_control_button zulip-icon zulip-icon-spoiler formatting_button" aria-label="{{t 'Spoiler' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Spoiler' }}"></a>
     <a role="button" data-format-type="code" class="compose_control_button zulip-icon zulip-icon-code formatting_button" aria-label="{{t 'Code' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Code' }}"></a>
     <a role="button" data-format-type="latex" class="compose_control_button zulip-icon zulip-icon-math formatting_button" aria-label="{{t 'Math (LaTeX)' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Math (LaTeX)' }}"></a>
-    <div class="divider">|</div>
+    <div class="divider"></div>
 </div>
 <a role="button" class="compose_control_button compose_help_button zulip-icon zulip-icon-question" tabindex=0 data-tippy-content="{{t 'Message formatting' }}" data-overlay-trigger="message-formatting"></a>
diff --git a/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs b/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs
index b3bbabf8f2..02c66483e9 100644
--- a/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs
+++ b/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs
@@ -4,6 +4,6 @@
     <a role="button" data-format-type="italic" class="compose_control_button zulip-icon zulip-icon-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="italic-tooltip" data-tippy-maxWidth="none"></a>
     <a role="button" data-format-type="strikethrough" class="compose_control_button zulip-icon zulip-icon-strikethrough formatting_button" aria-label="{{t 'Strikethrough' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Strikethrough' }}"></a>
     {{#if inside_popover}}
-        <div class="divider">|</div>
+        <div class="divider"></div>
     {{/if}}
 </div>