diff --git a/web/shared/icons/calendar-clock.svg b/web/shared/icons/calendar-clock.svg new file mode 100644 index 0000000000..dbb9e4caea Binary files /dev/null and b/web/shared/icons/calendar-clock.svg differ diff --git a/web/shared/icons/calendar-days.svg b/web/shared/icons/calendar-days.svg new file mode 100644 index 0000000000..362616dc6f Binary files /dev/null and b/web/shared/icons/calendar-days.svg differ diff --git a/web/shared/icons/calendar.svg b/web/shared/icons/calendar.svg new file mode 100644 index 0000000000..64d25c9428 Binary files /dev/null and b/web/shared/icons/calendar.svg differ diff --git a/web/shared/icons/file-check.svg b/web/shared/icons/file-check.svg new file mode 100644 index 0000000000..bc5518e441 Binary files /dev/null and b/web/shared/icons/file-check.svg differ diff --git a/web/src/compose_send_menu_popover.js b/web/src/compose_send_menu_popover.js index 03621c3a76..d94466f5e6 100644 --- a/web/src/compose_send_menu_popover.js +++ b/web/src/compose_send_menu_popover.js @@ -7,7 +7,6 @@ import render_send_later_modal_options from "../templates/send_later_modal_optio import * as blueslip from "./blueslip"; import * as channel from "./channel"; -import * as common from "./common"; import * as compose from "./compose"; import * as compose_state from "./compose_state"; import * as compose_validate from "./compose_validate"; @@ -144,6 +143,7 @@ export function toggle() { export function initialize() { tippy.delegate("body", { ...popover_menus.default_popover_props, + theme: "popover-menu", target: "#send_later i", onUntrigger() { // This is only called when the popover is closed by clicking on `target`. @@ -174,7 +174,6 @@ export function initialize() { // Make sure the compose drafts count, which is also displayed in this popover, has a current value. drafts.update_compose_draft_count(); const $popper = $(instance.popper); - common.adjust_mac_kbd_tags(".enter_sends_choices kbd"); $popper.one("click", ".send_later_selected_send_later_time", () => { const send_at_timestamp = scheduled_messages.get_selected_send_later_timestamp(); do_schedule_message(send_at_timestamp); diff --git a/web/styles/compose.css b/web/styles/compose.css index 45467ae7ae..5738fc8a00 100644 --- a/web/styles/compose.css +++ b/web/styles/compose.css @@ -1001,41 +1001,80 @@ textarea.new_message_textarea { } .enter_sends_choices { + display: flex; + flex-direction: column; + color: var(--color-text-popover-menu); + .enter_sends_choice { display: flex; gap: 8px; - padding-top: 4px; + padding: 4px 10px; + align-items: flex-start; - & input[type="radio"] { - position: relative; - top: 5px; + &:hover { + background: var(--color-background-hover-popover-menu); + outline: none; + } + + &:active { + background: var(--color-background-active-popover-menu); + } + + & .enter_sends_choice_radio { width: auto; cursor: pointer; margin: 4px 0 0; + accent-color: hsl(217deg 100% 60%); &:focus { outline: 1px dotted hsl(0deg 0% 20%); outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } - } - &:first-child { - padding: 0 0 4px; - border-bottom: 1px solid hsl(0deg 0% 0% / 20%); + &:checked + + .enter_sends_choice_text_container + .popover-menu-hotkey-hint { + color: hsl(217deg 100% 60%); + border: 1px solid hsl(217deg 100% 60% / 50%); + } } } + .enter_sends_choice_text_container { + display: flex; + flex-direction: column; + flex-shrink: 0; + gap: 3px; + white-space: nowrap; + } + .enter_sends_choice_text { display: flex; - flex-direction: column; + align-items: center; + gap: 3px; } - .enter_sends_minor, - .enter_sends_minor kbd { - opacity: 0.9; - font-size: 11px; - color: hsl(0deg 0% 50%); + .popover-menu-hotkey-hints { + margin: 0; + padding: 0; + + .popover-menu-hotkey-hint { + padding: 2px 5px; + } + } + + .enter_sends_major { + font-size: 15px; + } + + .enter_sends_minor { + font-size: 12px; + + .popover-menu-hotkey-hint { + font-size: 12px; + padding: 1px 4px; + } } } @@ -1046,6 +1085,13 @@ textarea.new_message_textarea { @media (width < $sm_min) { display: block; } + + .unread_count { + margin: 1px 0 0 6px; + border: 0.5px solid var(--color-border-unread-counter); + background-color: unset; + color: inherit; + } } #compose-recipient { diff --git a/web/templates/popovers/send_later_popover.hbs b/web/templates/popovers/send_later_popover.hbs index 161bd020f6..bbb9c0957a 100644 --- a/web/templates/popovers/send_later_popover.hbs +++ b/web/templates/popovers/send_later_popover.hbs @@ -1,62 +1,80 @@ - +