From 2ee732b84d348652b2942f346dbf51b76ba474b8 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Wed, 20 Oct 2021 11:19:54 -0400
Subject: [PATCH] Update style of composer format bar to match message action
 bar (#6351)

Signed-off-by: Robin Townsend <robin@robin.town>
---
 .../rooms/_MessageComposerFormatBar.scss      | 38 ++++++++-----------
 .../views/rooms/MessageComposerFormatBar.tsx  |  6 +--
 2 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss
index b305e91db0..cd941e32fd 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@@ -16,12 +16,13 @@ limitations under the License.
 
 .mx_MessageComposerFormatBar {
     display: none;
-    width: calc(26px * 5);
-    height: 24px;
+    width: calc(32px * 5);
+    height: 32px;
     position: absolute;
     cursor: pointer;
-    border-radius: 4px;
-    background-color: $message-action-bar-bg-color;
+    border-radius: 8px;
+    background-color: $primary-bg-color;
+    border: 1px solid $input-border-color;
     user-select: none;
     // equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000)
     // but as it appears after them in the DOM, will appear on top.
@@ -35,32 +36,19 @@ limitations under the License.
         white-space: nowrap;
         display: inline-block;
         position: relative;
-        border: 1px solid $message-action-bar-border-color;
-        margin-left: -1px;
+        margin: 2px;
 
         &:hover {
-            border-color: $message-action-bar-hover-border-color;
+            background: $roomlist-button-bg-color;
+            border-radius: 6px;
             z-index: 1;
         }
-
-        &:first-child {
-            border-radius: 3px 0 0 3px;
-        }
-
-        &:last-child {
-            border-radius: 0 3px 3px 0;
-        }
-
-        &:only-child {
-            border-radius: 3px;
-        }
     }
 
     .mx_MessageComposerFormatBar_button {
-        width: 27px;
-        height: 24px;
+        width: 28px;
+        height: 28px;
         box-sizing: border-box;
-        background: none;
         vertical-align: middle;
     }
 
@@ -73,7 +61,11 @@ limitations under the License.
         width: 100%;
         mask-repeat: no-repeat;
         mask-position: center;
-        background-color: $message-action-bar-fg-color;
+        background-color: $secondary-fg-color;
+    }
+
+    .mx_MessageComposerFormatBar_button:hover::after {
+        background-color: $primary-fg-color;
     }
 
     .mx_MessageComposerFormatBar_buttonIconBold::after {
diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx
index 75bca8aac7..7839b89c79 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.tsx
+++ b/src/components/views/rooms/MessageComposerFormatBar.tsx
@@ -66,8 +66,8 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
         this.setState({ visible: true });
         const parentRect = this.formatBarRef.current.parentElement.getBoundingClientRect();
         this.formatBarRef.current.style.left = `${selectionRect.left - parentRect.left}px`;
-        // 12 is half the height of the bar (e.g. to center it) and 16 is an offset that felt ok.
-        this.formatBarRef.current.style.top = `${selectionRect.top - parentRect.top - 16 - 12}px`;
+        // 16 is half the height of the bar (e.g. to center it) and 18 is an offset that felt ok.
+        this.formatBarRef.current.style.top = `${selectionRect.top - parentRect.top - 16 - 18}px`;
     }
 
     public hide(): void {
@@ -103,8 +103,6 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
 
         return (
             <AccessibleTooltipButton
-                element="button"
-                type="button"
                 onClick={this.props.onClick}
                 title={this.props.label}
                 tooltip={tooltip}