diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.scss index 9dfda3b013a..01ca8a419d8 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.scss +++ b/res/css/views/context_menus/_IconizedContextMenu.scss @@ -50,21 +50,21 @@ limitations under the License. } // round the top corners of the top button for the hover effect to be bounded - &:first-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child { + &:first-child .mx_IconizedContextMenu_item:first-child { border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu } // round the bottom corners of the bottom button for the hover effect to be bounded - &:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):last-child { + &:last-child .mx_IconizedContextMenu_item:last-child { border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu } // round all corners of the only button for the hover effect to be bounded - &:first-child:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child:last-child { + &:first-child:last-child .mx_IconizedContextMenu_item:first-child:last-child { border-radius: 8px; // radius matches .mx_ContextualMenu } - .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) { + .mx_IconizedContextMenu_item { // pad the inside of the button so that the hover background is padded too padding-top: 12px; padding-bottom: 12px; @@ -130,7 +130,7 @@ limitations under the License. } .mx_IconizedContextMenu_optionList_red { - .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) { + .mx_IconizedContextMenu_item { color: $alert !important; } @@ -148,7 +148,7 @@ limitations under the License. } .mx_IconizedContextMenu_active { - &.mx_AccessibleButton:not(.mx_AccessibleButton_hasKind), .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) { + &.mx_IconizedContextMenu_item, .mx_IconizedContextMenu_item { color: $accent !important; } diff --git a/res/css/views/messages/_JumpToDatePicker.scss b/res/css/views/messages/_JumpToDatePicker.scss index 5722ed1306e..d9b6fb9e91f 100644 --- a/res/css/views/messages/_JumpToDatePicker.scss +++ b/res/css/views/messages/_JumpToDatePicker.scss @@ -16,6 +16,10 @@ limitations under the License. .mx_JumpToDatePicker_form { display: flex; + // This matches the default padding of IconizedContextMenuOption + // (see context_menus/_IconizedContextMenu.scss) + padding-top: 12px; + padding-bottom: 12px; } .mx_JumpToDatePicker_label { diff --git a/src/components/views/context_menus/IconizedContextMenu.tsx b/src/components/views/context_menus/IconizedContextMenu.tsx index cbe9d5fcc9b..2c6bdb3776b 100644 --- a/src/components/views/context_menus/IconizedContextMenu.tsx +++ b/src/components/views/context_menus/IconizedContextMenu.tsx @@ -59,6 +59,7 @@ export const IconizedContextMenuRadio: React.FC = ({ return = ({ return = ({ ; }; -export const IconizedContextMenuOption: React.FC = ({ label, iconClassName, children, ...props }) => { - return +export const IconizedContextMenuOption: React.FC = ({ + label, + className, + iconClassName, + children, + ...props +}) => { + return { iconClassName && } { label } { children } diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx index 76040c1ad75..d0809c63d85 100644 --- a/src/components/views/messages/DateSeparator.tsx +++ b/src/components/views/messages/DateSeparator.tsx @@ -193,7 +193,6 @@ export default class DateSeparator extends React.Component { if (this.state.contextMenuPosition) { contextMenu =