Realign MessageActionBar to Figma designs (#32722)

* Realign MessageActionBar to Figma designs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate style based on review

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Move tooltips to above MAB

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update event bubble tile style

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update apps/web/res/css/views/messages/_MessageActionBar.pcss

Co-authored-by: Florian Duros <florianduros@element.io>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Florian Duros <florianduros@element.io>

apps/web/res/css/views/messages/_MessageActionBar.pcss

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MessageActionBar {
     --MessageActionBar-size-button: 28px;
-    --MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
+    --MessageActionBar-size-margin: 3px;
     --MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
     --MessageActionBar-item-hover-borderRadius: 6px;
     --MessageActionBar-item-hover-zIndex: 1;
@@ -17,12 +17,18 @@ Please see LICENSE files in the repository root for full details.
     visibility: hidden;
     cursor: pointer;
     display: flex;
-    height: var(--MessageActionBar-size-box);
+    gap: var(--cpd-space-0-5x);
     line-height: $font-24px;
     border-radius: 8px;
     background: $background;
     border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
-    top: -32px;
+    top: calc(
+        -1 *
+            (
+                var(--MessageActionBar-size-button) + 2 *
+                    (var(--MessageActionBar-size-margin) + var(--cpd-border-width-1))
+            )
+    );
     right: 8px;
     user-select: none;
     /* Ensure the action bar appears above other things like the read marker */
@@ -74,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
         white-space: nowrap;
         display: inline-block;
         position: relative;
-        margin: 2px;
+        margin: var(--MessageActionBar-size-margin);
 
         &:hover {
             background: var(--MessageActionBar-item-hover-background);
@@ -84,7 +90,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageActionBar_iconButton {
-        --MessageActionBar-icon-size: 18px;
+        --MessageActionBar-icon-size: 20px;
         width: var(--MessageActionBar-size-button);
         height: var(--MessageActionBar-size-button);
         color: var(--cpd-color-icon-secondary);
@@ -108,30 +114,12 @@ Please see LICENSE files in the repository root for full details.
             color: var(--cpd-color-icon-primary);
         }
 
-        &.mx_MessageActionBar_threadButton {
-            --MessageActionBar-icon-size: 20px;
-        }
-
-        &.mx_MessageActionBar_retryButton {
-            --MessageActionBar-icon-size: 16px;
-        }
-
         &.mx_MessageActionBar_downloadButton {
-            --MessageActionBar-icon-size: 20px;
-
             &.mx_MessageActionBar_downloadSpinnerButton {
                 svg {
                     display: none; /* hide the download icon */
                 }
             }
         }
-
-        &.mx_MessageActionBar_expandCollapseMessageButton {
-            --MessageActionBar-icon-size: 12px;
-        }
-    }
-
-    .mx_MessageActionBar_optionsButton {
-        --MessageActionBar-icon-size: 22px;
     }
 }

apps/web/res/css/views/rooms/_EventBubbleTile.pcss

@@ -196,7 +196,9 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_MessageActionBar {
-            inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
+            inset-inline-start: calc(
+                100% - var(--MessageActionBar-size-button) - 2 * var(--MessageActionBar-size-margin)
+            );
             right: initial; /* Reset the default value */
         }
 

apps/web/src/components/views/messages/MessageActionBar.tsx

@@ -130,7 +130,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
                 ref={buttonRefCallback}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
-                placement="left"
+                placement="top"
             >
                 <OverflowHorizontalIcon />
             </ContextMenuTooltipButton>
@@ -188,7 +188,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
                 ref={buttonRefCallback}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
-                placement="left"
+                placement="top"
             >
                 <ReactionAddIcon />
             </ContextMenuTooltipButton>
@@ -241,7 +241,7 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
             title={title}
             onClick={onClick}
             onContextMenu={onClick}
-            placement="left"
+            placement="top"
         >
             <ThreadsIcon />
         </RovingAccessibleButton>
@@ -420,7 +420,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     onClick={this.onEditClick}
                     onContextMenu={this.onEditClick}
                     key="edit"
-                    placement="left"
+                    placement="top"
                 >
                     <EditIcon />
                 </RovingAccessibleButton>,
@@ -439,7 +439,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     onClick={(e: ButtonEvent) => this.onPinClick(e, isPinned)}
                     onContextMenu={(e: ButtonEvent) => this.onPinClick(e, isPinned)}
                     key="pin"
-                    placement="left"
+                    placement="top"
                 >
                     {isPinned ? <UnpinIcon /> : <PinIcon />}
                 </RovingAccessibleButton>,
@@ -453,7 +453,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 onClick={this.onCancelClick}
                 onContextMenu={this.onCancelClick}
                 key="cancel"
-                placement="left"
+                placement="top"
             >
                 <DeleteIcon />
             </RovingAccessibleButton>
@@ -479,7 +479,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     onClick={this.onResendClick}
                     onContextMenu={this.onResendClick}
                     key="resend"
-                    placement="left"
+                    placement="top"
                 >
                     <RestartIcon />
                 </RovingAccessibleButton>,
@@ -506,7 +506,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                             onClick={this.onReplyClick}
                             onContextMenu={this.onReplyClick}
                             key="reply"
-                            placement="left"
+                            placement="top"
                         >
                             <ReplyIcon />
                         </RovingAccessibleButton>,
@@ -570,7 +570,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                         caption={_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
                         onClick={this.props.toggleThreadExpanded}
                         key="expand"
-                        placement="left"
+                        placement="top"
                     >
                         {this.props.isQuoteExpanded ? <CollapseIcon /> : <ExpandIcon />}
                     </RovingAccessibleButton>,