From f5a21d0e47e531a60cac60c38b9d36494bc7e397 Mon Sep 17 00:00:00 2001 From: Joelute Date: Mon, 15 May 2023 15:58:45 -0400 Subject: [PATCH] compose_banner: Update classnames to main-view-banner-action-button. Previously, we have duplicate stylings in compose banner and unread banner. This is rather messy and creates a lot of styling rules. We should define an abstraction for them. This change will rename compose_banner_action_button to main-view-banner-action-button. --- web/e2e-tests/mention.test.ts | 2 +- web/src/compose.js | 12 +++++++----- web/styles/compose.css | 8 ++++---- web/styles/dark_theme.css | 6 +++--- web/templates/compose_banner/compose_banner.hbs | 2 +- .../success_message_scheduled_banner.hbs | 2 +- 6 files changed, 17 insertions(+), 15 deletions(-) diff --git a/web/e2e-tests/mention.test.ts b/web/e2e-tests/mention.test.ts index 8b58f8709d..1cc2df24d9 100644 --- a/web/e2e-tests/mention.test.ts +++ b/web/e2e-tests/mention.test.ts @@ -30,7 +30,7 @@ async function test_mention(page: Page): Promise { await page.click("#compose-send-button"); await page.waitForSelector("#compose_banners .wildcard_warning", {visible: true}); - await page.click("#compose_banners .wildcard_warning .compose_banner_action_button"); + await page.click("#compose_banners .wildcard_warning .main-view-banner-action-button"); await page.waitForSelector(".wildcard_warning", {hidden: true}); await common.check_messages_sent(page, "zhome", [["Verona > Test mention all", ["@all"]]]); diff --git a/web/src/compose.js b/web/src/compose.js index 4a1f4592c9..1563b31252 100644 --- a/web/src/compose.js +++ b/web/src/compose.js @@ -470,7 +470,9 @@ export function initialize() { $("body").on( "click", - `.${CSS.escape(compose_banner.CLASSNAMES.wildcard_warning)} .compose_banner_action_button`, + `.${CSS.escape( + compose_banner.CLASSNAMES.wildcard_warning, + )} .main-view-banner-action-button`, (event) => { event.preventDefault(); const {$banner_container, is_edit_input} = get_input_info(event); @@ -497,7 +499,7 @@ export function initialize() { )}`; $("body").on( "click", - `${user_not_subscribed_selector} .compose_banner_action_button`, + `${user_not_subscribed_selector} .main-view-banner-action-button`, (event) => { event.preventDefault(); @@ -513,7 +515,7 @@ export function initialize() { $("body").on( "click", - `.${CSS.escape(compose_banner.CLASSNAMES.topic_resolved)} .compose_banner_action_button`, + `.${CSS.escape(compose_banner.CLASSNAMES.topic_resolved)} .main-view-banner-action-button`, (event) => { event.preventDefault(); @@ -532,7 +534,7 @@ export function initialize() { "click", `.${CSS.escape( compose_banner.CLASSNAMES.unmute_topic_notification, - )} .compose_banner_action_button`, + )} .main-view-banner-action-button`, (event) => { event.preventDefault(); @@ -554,7 +556,7 @@ export function initialize() { "click", `.${CSS.escape( compose_banner.CLASSNAMES.recipient_not_subscribed, - )} .compose_banner_action_button`, + )} .main-view-banner-action-button`, (event) => { event.preventDefault(); const {$banner_container} = get_input_info(event); diff --git a/web/styles/compose.css b/web/styles/compose.css index df6a7def9b..3a28f26939 100644 --- a/web/styles/compose.css +++ b/web/styles/compose.css @@ -292,7 +292,7 @@ flex-grow: 1; } - .compose_banner_action_button { + .main-view-banner-action-button { border: none; border-radius: 4px; padding: 5px 10px; @@ -333,7 +333,7 @@ } } - .compose_banner_action_button { + .main-view-banner-action-button { background-color: hsl(147deg 57% 25% / 10%); color: inherit; @@ -368,7 +368,7 @@ } } - .compose_banner_action_button { + .main-view-banner-action-button { background-color: hsl(38deg 44% 27% / 10%); color: inherit; @@ -399,7 +399,7 @@ } } - .compose_banner_action_button { + .main-view-banner-action-button { background-color: hsl(3deg 57% 33% / 10%); color: inherit; diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index 5412053d5b..99cb278926 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -239,7 +239,7 @@ } } - .compose_banner_action_button { + .main-view-banner-action-button { background-color: hsl(147deg 51% 55% / 10%); color: inherit; @@ -271,7 +271,7 @@ } } - .compose_banner_action_button { + .main-view-banner-action-button { background-color: hsl(50deg 45% 61% / 10%); color: hsl(50deg 45% 61%); @@ -302,7 +302,7 @@ } } - .compose_banner_action_button { + .main-view-banner-action-button { background-color: hsl(3deg 73% 74% / 10%); color: hsl(3deg 73% 74%); diff --git a/web/templates/compose_banner/compose_banner.hbs b/web/templates/compose_banner/compose_banner.hbs index acea72bcc9..aa49f537b5 100644 --- a/web/templates/compose_banner/compose_banner.hbs +++ b/web/templates/compose_banner/compose_banner.hbs @@ -9,7 +9,7 @@ {{/if}} {{#if button_text}} - + {{/if}} {{#if hide_close_button}} {{!-- hide_close_button is null by default, and false if explicitly set as false. --}} diff --git a/web/templates/compose_banner/success_message_scheduled_banner.hbs b/web/templates/compose_banner/success_message_scheduled_banner.hbs index 47c571f128..acc58ea4c5 100644 --- a/web/templates/compose_banner/success_message_scheduled_banner.hbs +++ b/web/templates/compose_banner/success_message_scheduled_banner.hbs @@ -4,6 +4,6 @@ - +