paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

unread_banner: Apply updated design to message feed banners.

Browse Source 
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.
This commit is contained in:
Joelute
2023-05-11 21:21:25 -04:00
committed by Tim Abbott
parent d556b73084
commit 584b11af2d
5 changed files with 158 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
web/styles/dark_theme.css
View File

@@ -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) {

96
web/styles/zulip.css
View File

@@ -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%);
}
}
}
}

4
web/templates/unread_banner/mark_as_read_disabled_banner.hbs
View File

@@ -1,4 +1,4 @@
<div id="mark_as_read_turned_off_banner" class="alert alert-info home-error-bar">
<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
<p id="mark_as_read_turned_off_content">
{{#tr}}
Messages will not be automatically marked as read. <z-link>Change setting</z-link>
@@ -6,7 +6,7 @@
{{/tr}}
</p>
<div id="mark_as_read_controls">
<button id="mark_view_read" class="btn btn-info banner-action-button">
<button id="mark_view_read" class="banner-action-button">
{{t 'Mark as read' }}
</button>
</div>

4
web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs
View File

@@ -1,4 +1,4 @@
<div id="mark_as_read_turned_off_banner" class="alert alert-info home-error-bar">
<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
<p id="mark_as_read_turned_off_content">
{{#tr}}
Messages will not be automatically marked as read because this is not a conversation view. <z-link>Change setting</z-link>
@@ -6,7 +6,7 @@
{{/tr}}
</p>
<div id="mark_as_read_controls">
<button id="mark_view_read" class="btn btn-info banner-action-button">
<button id="mark_view_read" class="banner-action-button">
{{t 'Mark as read' }}
</button>
</div>

4
web/templates/unread_banner/mark_as_read_turned_off_banner.hbs
View File

@@ -1,9 +1,9 @@
<div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
<div id="mark_as_read_turned_off_banner" class="home-error-bar warning">
<p id="mark_as_read_turned_off_content">
{{t 'To preserve your reading state, this view does not mark messages as read.' }}
</p>
<div id="mark_as_read_controls">
<button id="mark_view_read" class="btn btn-warning">
<button id="mark_view_read" class="banner-action-button">
{{t 'Mark as read' }}
</button>
</div>