inbox: Improve look of empty inbox view.

docs/THIRDPARTY

@@ -247,6 +247,11 @@ Copyright: 2013-2023 Cole Bemis (https://feathericons.com)
 License: Expat
 Comment: Icon has been modified by Vlad Koborov
 
+Files: web/images/empty-view-illustrations/inbox-done.svg
+Copyright: 2013-2023 Cole Bemis (https://feathericons.com)
+License: Expat
+Comment: Custom made out of feather icons by Vlad Koborov
+
 Files: web/shared/icons/unmute.svg
 Source: https://fonts.google.com/icons?selected=Material+Symbols+Rounded:volume_up
 Copyright: Google, Inc.

web/src/inbox_ui.js

@@ -514,7 +514,8 @@ function show_empty_inbox_text(has_visible_unreads) {
             $("#inbox-empty-without-search").hide();
         } else {
             $("#inbox-empty-with-search").hide();
-            $("#inbox-empty-without-search").show();
+            // Use display value specified in CSS.
+            $("#inbox-empty-without-search").css("display", "");
         }
     } else {
         $(".inbox-empty-text").hide();

web/styles/inbox.css

@@ -496,3 +496,35 @@
         display: none !important;
     }
 }
+
+.inbox-container #inbox-pane #inbox-empty-without-search {
+    margin-top: 70px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.inbox-empty-illustration {
+    width: 54px;
+    height: 54px;
+    margin-bottom: 16px;
+    background-color: var(--color-background-inbox-no-unreads-illustration);
+    mask: url("../images/empty-view-illustrations/inbox-done.svg") no-repeat
+        center;
+}
+
+.inbox-empty-title {
+    /* Matches the font-size used for .empty-list-message */
+    font-size: 1.5em;
+    color: var(--color-background-inbox-no-unreads-illustration);
+}
+
+.inbox-empty-action {
+    font-size: 1.3em;
+    padding-top: 0.5em;
+}
+
+.inbox-container #inbox-pane .inbox-empty-action-link {
+    text-decoration: underline;
+    color: hsl(200deg 100% 40%);
+}

web/styles/zulip.css

@@ -287,6 +287,7 @@ body {
     /* Inbox view constants - Values from Figma design */
     --height-inbox-search: 26px;
     --width-inbox-search: 346px;
+    --color-background-inbox-no-unreads-illustration: hsl(147deg 57% 25%);
     --color-background-inbox: var(--color-background);
     --color-icon-search-inbox: hsl(0deg 0% 0%);
     --color-inbox-search-text: hsl(0deg 0% 0%);
@@ -447,6 +448,7 @@ body {
 
     /* Inbox view */
     --color-background-inbox: var(--color-background);
+    --color-background-inbox-no-unreads-illustration: hsl(147deg 40% 55%);
     --color-icon-search-inbox: hsl(0deg 0% 100%);
     --color-inbox-search-text: hsl(0deg 0% 95%);
     --color-border-inbox-search: hsl(0deg 0% 100% / 20%);

web/templates/inbox_view/inbox_no_unreads.hbs

@@ -0,0 +1,12 @@
+<div id="inbox-empty-without-search"  class="inbox-empty-text">
+    <div class="inbox-empty-illustration"></div>
+    <div class="inbox-empty-title">
+        {{t "There are no unread messages in your inbox."}}
+    </div>
+    <div class="inbox-empty-action">
+        {{#tr}}
+            You might be interested in <z-link>recent conversations</z-link>.
+            {{#*inline "z-link"}}<a class="inbox-empty-action-link" href="#recent">{{> @partial-block}}</a>{{/inline}}
+        {{/tr}}
+    </div>
+</div>

web/templates/inbox_view/inbox_view.hbs

@@ -13,9 +13,7 @@
     <div id="inbox-empty-with-search" class="inbox-empty-text empty-list-message">
         {{t "No conversations match your filters."}}
     </div>
-    <div id="inbox-empty-without-search"  class="inbox-empty-text empty-list-message">
+    {{> inbox_no_unreads}}
-        {{t "There are no unread messages in your inbox."}}
-    </div>
     <div id="inbox-list">
         {{> inbox_list}}
     </div>