From 584b11af2df17b5bcea4f61ab456597379325780 Mon Sep 17 00:00:00 2001 From: Joelute Date: Thu, 11 May 2023 21:21:25 -0400 Subject: [PATCH] unread_banner: Apply updated design to message feed banners. In #22524, we have updated the compose banner to the new, updated design while the unread banners have remained the same. When comparing them side by side, they look rather old and outdated. We should apply the updated design to the unread banners as well. Fixes: #25551. --- web/styles/dark_theme.css | 78 ++++++++++++--- web/styles/zulip.css | 96 +++++++++++++++++-- .../mark_as_read_disabled_banner.hbs | 4 +- ...mark_as_read_only_in_conversation_view.hbs | 4 +- .../mark_as_read_turned_off_banner.hbs | 4 +- 5 files changed, 158 insertions(+), 28 deletions(-) diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index 52776ba1e5..dece4a5924 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -1205,20 +1205,6 @@ color: hsl(205deg 58% 80%); background-color: hsl(204deg 100% 12%); border-color: hsl(205deg 58% 69% / 40%); - - .banner-action-button { - background-color: hsl(205deg 58% 69% / 10%); - border-color: transparent; - color: hsl(205deg 58% 69%); - - &:hover { - background-color: hsl(205deg 58% 69% / 15%); - } - - &:active { - background-color: hsl(205deg 58% 69% / 20%); - } - } } .alert.alert-error, @@ -1561,6 +1547,70 @@ } } } + + #mark_as_read_turned_off_banner { + &.warning { + background-color: hsl(53deg 100% 11%); + border-color: hsl(38deg 44% 60% / 40%); + color: hsl(50deg 45% 80%); + + #mark_as_read_close { + color: hsl(50deg 45% 61% / 50%); + + &:hover { + color: hsl(50deg 45% 61%); + } + + &:active { + color: hsl(50deg 45% 61% / 75%); + } + } + + .banner-action-button { + background-color: hsl(50deg 45% 61% / 10%); + color: hsl(50deg 45% 61%); + + &:hover { + background-color: hsl(50deg 45% 61% / 15%); + } + + &:active { + background-color: hsl(50deg 45% 61% / 20%); + } + } + } + + &.info { + background-color: hsl(204deg 100% 12%); + border-color: hsl(205deg 58% 69% / 40%); + color: hsl(205deg 58% 80%); + + #mark_as_read_close { + color: hsl(205deg 58% 69% / 50%); + + &:hover { + color: hsl(205deg 58% 69%); + } + + &:active { + color: hsl(205deg 58% 69% / 75%); + } + } + + .banner-action-button { + background-color: hsl(205deg 58% 69% / 10%); + color: hsl(205deg 58% 69%); + + &:hover { + background-color: hsl(205deg 58% 69% / 15%); + } + + &:active { + background-color: hsl(205deg 58% 69% / 20%); + } + } + } + } } @supports (-moz-appearance: none) { diff --git a/web/styles/zulip.css b/web/styles/zulip.css index d3c86e5785..f3fe2f05f1 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -1359,8 +1359,11 @@ td.pointer { display: flex; align-items: center; justify-content: space-between; - padding: 8px 8px 8px 14px; - column-gap: 10px; + border-radius: 5px; + border: 1px solid; + font-size: 15px; + line-height: 18px; + margin-bottom: 20px; #mark_as_read_turned_off_content { margin: 0; @@ -1371,13 +1374,90 @@ td.pointer { display: flex; } + .banner-action-button { + border: none; + border-radius: 4px; + padding: 5px 10px; + font-weight: 600; + margin-left: 10px; + margin-top: 4.5px; + margin-bottom: 4.5px; + height: 32px; + white-space: nowrap; + } + + & p { + margin: 0; /* override bootstrap */ + /* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */ + padding: 8px 5px 8px 15px; + } + #mark_as_read_close { - align-self: flex-start; - margin-top: -5px; - /* override bootstrap */ - top: 0; - right: 0; - position: static; + font-size: 16px; + text-decoration: none; + padding: 9px 8px; + } + + &.warning { + background-color: hsl(50deg 75% 92%); + border-color: hsl(38deg 44% 27% / 40%); + color: hsl(38deg 44% 27%); + + #mark_as_read_close { + color: hsl(38deg 44% 27% / 50%); + + &:hover { + color: hsl(38deg 44% 27%); + } + + &:active { + color: hsl(38deg 44% 27% / 75%); + } + } + + .banner-action-button { + background-color: hsl(38deg 44% 27% / 10%); + color: inherit; + + &:hover { + background-color: hsl(38deg 44% 27% / 12%); + } + + &:active { + background-color: hsl(38deg 44% 27% / 15%); + } + } + } + + &.info { + background-color: hsl(204deg 58% 92%); + border-color: hsl(204deg 49% 29% / 40%); + color: hsl(204deg 49% 29%); + + #mark_as_read_close { + color: hsl(204deg 49% 29% / 50%); + + &:hover { + color: hsl(204deg 49% 29%); + } + + &:active { + color: hsl(204deg 49% 29% / 75%); + } + } + + .banner-action-button { + background-color: hsl(204deg 49% 29% / 10%); + color: inherit; + + &:hover { + background-color: hsl(204deg 49% 29% / 12%); + } + + &:active { + background-color: hsl(204deg 49% 29% / 15%); + } + } } } diff --git a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs index ddfe47fa7e..e398786efd 100644 --- a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs +++ b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs @@ -1,4 +1,4 @@ -
+

{{#tr}} Messages will not be automatically marked as read. Change setting @@ -6,7 +6,7 @@ {{/tr}}

-
diff --git a/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs b/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs index 7f77895195..cacae89ffb 100644 --- a/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs +++ b/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs @@ -1,4 +1,4 @@ -
+

{{#tr}} Messages will not be automatically marked as read because this is not a conversation view. Change setting @@ -6,7 +6,7 @@ {{/tr}}

-
diff --git a/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs b/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs index 1cece6bfba..dae17b3bc2 100644 --- a/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs +++ b/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs @@ -1,9 +1,9 @@ -
+

{{t 'To preserve your reading state, this view does not mark messages as read.' }}

-