From 1e68c0381ca3c11b03e1e70f1745eedbaa1d0c51 Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Tue, 19 Nov 2024 14:44:59 -0800
Subject: [PATCH] buddy_list: Redesign view user links.

As discussed here:
https://chat.zulip.org/#narrow/channel/101-design/topic/.22View.20all.22.20links.20in.20right.20sidebar/near/1976275
---
 web/styles/right_sidebar.css                  | 37 +++++++++++--------
 .../buddy_list/view_all_subscribers.hbs       |  4 +-
 web/templates/buddy_list/view_all_users.hbs   |  4 +-
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index fcbb43485f..b2dc619975 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -52,13 +52,6 @@ $user_status_emoji_width: 24px;
     &.no-display {
         display: none;
     }
-
-    .buddy-list-user-link {
-        margin-left: calc(
-            var(--right-sidebar-toggle-width-offset) +
-                var(--right-sidebar-left-spacing)
-        );
-    }
 }
 
 .buddy-list-section-container.collapsed {
@@ -517,14 +510,9 @@ $user_status_emoji_width: 24px;
     }
 }
 
+.buddy-list-user-link,
 .invite-user-shortcut {
-    /* The margin top is calculated from a legacy 25px height,
-       from a 20px line of text and 5px of margin top. We calculate
-       a scaling margin-top by subtracting the em-unit line height
-       from the legacy value. */
-    margin-top: calc(25px - (var(--legacy-body-line-height-unitless) * 1em));
     margin-right: var(--width-simplebar-scroll-hover);
-    margin-bottom: var(--sidebar-bottom-spacing);
     padding-left: var(--right-sidebar-left-spacing);
     border-radius: 4px;
 
@@ -534,11 +522,11 @@ $user_status_emoji_width: 24px;
         color: var(--color-text-sidebar-action-heading-hover);
     }
 
+    .buddy-list-user-link-text,
     .invite-user-link {
         display: grid;
-        grid-template:
-            "user-icon row-text" var(--line-height-sidebar-row-prominent)
-            / auto 1fr;
+        grid-template-rows: var(--line-height-sidebar-row-prominent);
+        text-decoration: none;
         align-items: center;
         color: var(--color-text-sidebar-action-heading);
 
@@ -546,6 +534,23 @@ $user_status_emoji_width: 24px;
             transition: transform 80ms;
             transform: scale(0.96);
         }
+    }
+}
+
+.buddy-list-user-link {
+    margin-left: var(--right-sidebar-toggle-width-offset);
+}
+
+.invite-user-shortcut {
+    /* The margin top is calculated from a legacy 25px height,
+       from a 20px line of text and 5px of margin top. We calculate
+       a scaling margin-top by subtracting the em-unit line height
+       from the legacy value. */
+    margin-top: calc(25px - (var(--legacy-body-line-height-unitless) * 1em));
+    margin-bottom: var(--sidebar-bottom-spacing);
+
+    .invite-user-link {
+        grid-template-columns: auto minmax(0, 1fr);
 
         .zulip-icon-user-plus {
             padding-right: 5px;
diff --git a/web/templates/buddy_list/view_all_subscribers.hbs b/web/templates/buddy_list/view_all_subscribers.hbs
index c219250d06..1217400570 100644
--- a/web/templates/buddy_list/view_all_subscribers.hbs
+++ b/web/templates/buddy_list/view_all_subscribers.hbs
@@ -1 +1,3 @@
-<a class="buddy-list-user-link view-all-subscribers-link" href="{{stream_edit_hash}}">{{t "View all subscribers" }}</a>
+<div class="buddy-list-user-link view-all-subscribers-link">
+    <a class="buddy-list-user-link-text" href="{{stream_edit_hash}}">{{t "View all subscribers" }}</a>
+</div>
diff --git a/web/templates/buddy_list/view_all_users.hbs b/web/templates/buddy_list/view_all_users.hbs
index 69c6314abe..c9c5d92693 100644
--- a/web/templates/buddy_list/view_all_users.hbs
+++ b/web/templates/buddy_list/view_all_users.hbs
@@ -1 +1,3 @@
-<a class="buddy-list-user-link view-all-users-link" href="#organization/users">{{t "View all users" }}</a>
+<div class="buddy-list-user-link view-all-users-link">
+    <a class="buddy-list-user-link-text" href="#organization/users">{{t "View all users" }}</a>
+</div>