message: Update _MessageActionBar.scss
  Refine UI of message action bar to increase usability and focus on bar content.
diff: @@ -20,11 +20,12 @@ limitations under the License.
  visibility: hidden;
  cursor: pointer;
  display: flex;
  - height: 24px;
  + height: 28px;
  line-height: $font-24px;
  - border-radius: 4px;
  - background: $message-action-bar-bg-color;
  - top: -26px;
  + border-radius: 8px;
  + background: $primary-bg-color;
  + border: 1px solid $input-border-color;
  + top: -28px;
  right: 8px;
  user-select: none;
  // Ensure the action bar appears above over things, like the read marker.
  @@ -51,31 +52,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_MessageActionBar_maskButton {
  - width: 27px;
  + width: 24px;
  + height: 24px;
  }
  .mx_MessageActionBar_maskButton::after {
  @@ -88,7 +77,11 @@ limitations under the License.
  mask-size: 18px;
  mask-repeat: no-repeat;
  mask-position: center;
  - background-color: $message-action-bar-fg-color;
  + background-color: $secondary-fg-color;
  +}
  +
  +.mx_MessageActionBar_maskButton:hover:after {
  + background-color: $primary-fg-color;
  }
  .mx_MessageActionBar_reactButton::after {
  