Update style of composer format bar to match message action bar (#6351)

Signed-off-by: Robin Townsend <[email protected]>
matrix-org · Oct 20, 2021 · 2ee732b · 2ee732b
1 parent 4b903b9
commit 2ee732b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 27 deletions.
diff --git 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
@@ -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}