From ccdbdb35b2fdfe0932b2eef168c9981fff90e99b Mon Sep 17 00:00:00 2001
From: Joelute <josephho678@gmail.com>
Date: Fri, 19 May 2023 19:47:08 -0400
Subject: [PATCH] unread_banner: Refactor HTML to use main view banner
 stylings.

Previously, the HTML structure of unread banners continued to utilize the
old stylings. We are currently in the process of simplifing both the
compose banner and unread banner stylings into one. These change will
update the HTML structure to be the same as the compose banner and use
the new stylings.
---
 web/styles/compose.css                        |  13 +++
 web/styles/dark_theme.css                     |  78 +++----------
 web/styles/zulip.css                          | 106 ------------------
 .../mark_as_read_disabled_banner.hbs          |  14 +--
 ...mark_as_read_only_in_conversation_view.hbs |  14 +--
 .../mark_as_read_turned_off_banner.hbs        |  14 +--
 6 files changed, 45 insertions(+), 194 deletions(-)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index c50bb410ef..77a9122186 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -430,6 +430,19 @@
                 color: hsl(204deg 49% 29% / 75%);
             }
         }
+
+        .main-view-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/styles/dark_theme.css b/web/styles/dark_theme.css
index 5bf9bfb552..56499b77c0 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -333,6 +333,20 @@
                     color: hsl(205deg 58% 69% / 75%);
                 }
             }
+
+            .main-view-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%);
+                }
+            }
         }
     }
 
@@ -1528,70 +1542,6 @@
             }
         }
     }
-
-    #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 bf64a2cd47..6296b23b20 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1460,112 +1460,6 @@ td.pointer {
     }
 }
 
-#mark_as_read_turned_off_banner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: 5px;
-    border: 1px solid;
-    font-size: 15px;
-    line-height: 18px;
-    margin-bottom: 20px;
-
-    #mark_as_read_turned_off_content {
-        margin: 0;
-        flex-grow: 1;
-    }
-
-    #mark_as_read_controls {
-        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 {
-        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%);
-            }
-        }
-    }
-}
-
 .copy-paste-text {
     /* Hide the text that we want copy paste to capture */
     position: absolute;
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 e398786efd..0efc00b03e 100644
--- a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
+++ b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
@@ -1,15 +1,13 @@
-<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
-    <p id="mark_as_read_turned_off_content">
+<div id="mark_as_read_turned_off_banner" class="main-view-banner home-error-bar info">
+    <p id="mark_as_read_turned_off_content" class="banner_content">
         {{#tr}}
             Messages will not be automatically marked as read. <z-link>Change setting</z-link>
             {{#*inline "z-link"}}<a href='/#settings/display-settings'>{{> @partial-block}}</a>{{/inline}}
         {{/tr}}
     </p>
-    <div id="mark_as_read_controls">
-        <button id="mark_view_read" class="banner-action-button">
-            {{t 'Mark as read' }}
-        </button>
-    </div>
-    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close"></a>
+    <button id="mark_view_read" class="main-view-banner-action-button">
+        {{t 'Mark as read' }}
+    </button>
+    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
 </div>
 
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 cacae89ffb..4d0fdc98ae 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,15 +1,13 @@
-<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
-    <p id="mark_as_read_turned_off_content">
+<div id="mark_as_read_turned_off_banner" class="main-view-banner home-error-bar info">
+    <p id="mark_as_read_turned_off_content" class="banner_content">
         {{#tr}}
             Messages will not be automatically marked as read because this is not a conversation view. <z-link>Change setting</z-link>
             {{#*inline "z-link"}}<a href='/#settings/display-settings'>{{> @partial-block}}</a>{{/inline}}
         {{/tr}}
     </p>
-    <div id="mark_as_read_controls">
-        <button id="mark_view_read" class="banner-action-button">
-            {{t 'Mark as read' }}
-        </button>
-    </div>
-    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close"></a>
+    <button id="mark_view_read" class="main-view-banner-action-button">
+        {{t 'Mark as read' }}
+    </button>
+    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
 </div>
 
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 dae17b3bc2..6fa58649a1 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,12 +1,10 @@
-<div id="mark_as_read_turned_off_banner" class="home-error-bar warning">
-    <p id="mark_as_read_turned_off_content">
+<div id="mark_as_read_turned_off_banner" class="main-view-banner home-error-bar warning">
+    <p id="mark_as_read_turned_off_content" class="banner_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="banner-action-button">
-            {{t 'Mark as read' }}
-        </button>
-    </div>
-    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close"></a>
+    <button id="mark_view_read" class="main-view-banner-action-button">
+        {{t 'Mark as read' }}
+    </button>
+    <a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
 </div>