diff --git a/web/src/message_actions_popover.js b/web/src/message_actions_popover.js index 33fbdbaab5..98fcccf206 100644 --- a/web/src/message_actions_popover.js +++ b/web/src/message_actions_popover.js @@ -24,7 +24,7 @@ import * as unread_ops from "./unread_ops"; let message_actions_popover_keyboard_toggle = false; function get_action_menu_menu_items() { - const $current_actions_popover_elem = $("[data-tippy-root] .actions_popover"); + const $current_actions_popover_elem = $("[data-tippy-root] #message-actions-menu-dropdown"); if (!$current_actions_popover_elem) { blueslip.error("Trying to get menu items when action popover is closed."); return undefined; @@ -71,6 +71,7 @@ export function toggle_message_actions_menu(message) { export function initialize() { popover_menus.register_popover_menu(".actions_hover .message-actions-menu-button", { + theme: "popover-menu", // 320px is our minimum supported width for mobile. We will allow the value to flex // to a max of 350px but we shouldn't make the popover wider than this. maxWidth: "min(max(320px, 100vw), 350px)", diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 5edbc9ca8f..427bc9e84a 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -208,7 +208,7 @@ --color-background-unread-counter-dot: var( --color-background-unread-counter ); - --color-background-unread-counter-popover-menu: hsl(200deg 100% 40%); + --color-background-unread-counter-popover-menu: var(--color-icon-purple); --color-border-unread-counter: var(--color-background-unread-counter); --color-border-unread-counter-popover-menu: inherit; --color-background-tab-picker-container: hsl(0deg 0% 0% / 7%); diff --git a/web/styles/popovers.css b/web/styles/popovers.css index 2bb8567bd3..3fedce159a 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -314,7 +314,6 @@ ul { &.user-card-popover-actions i, - &.actions_popover i, &.streams_popover i, &.topics_popover i { display: inline-block; @@ -351,18 +350,23 @@ ul { } } -.actions_popover { +#message-actions-menu-dropdown { .mark_as_unread { .unread_count { /* The icon for this menu item is in the form of an unread count from the left sidebar. We reuse much of the shared styling, but need to override some of the defaults set in app_components.css. */ - display: inline; + display: inline-block; float: unset; - line-height: 14px; - font-size: 11px; + padding: 0; + width: 16px; + height: 16px; + line-height: 16px; + font-size: 12px; font-weight: 600; - margin-right: 2px; + border-radius: 4px; + color: hsl(0deg 0% 100%); + text-align: center; background-color: var( --color-background-unread-counter-popover-menu ); diff --git a/web/templates/popovers/actions_popover.hbs b/web/templates/popovers/actions_popover.hbs index caded1d92d..d90ab745df 100644 --- a/web/templates/popovers/actions_popover.hbs +++ b/web/templates/popovers/actions_popover.hbs @@ -1,118 +1,132 @@ {{! Contents of the "message actions" popup }} - +