navbar: Add login and signup buttons for spectators.

Remove login buttons from right sidebar and add them to navbar
so that the user instantly notices them.

static/js/click_handlers.js

@@ -541,7 +541,7 @@ export function initialize() {
 
     // SIDEBARS
 
-    $(".right-sidebar .login_button").on("click", (e) => {
+    $("body").on("click", ".login_button", (e) => {
         e.preventDefault();
         e.stopPropagation();
         window.location.href = hash_util.build_login_link();

static/js/tippyjs.js

@@ -226,6 +226,7 @@ export function initialize() {
             "#user_filter_icon",
             "#scroll-to-bottom-button-clickable-area",
             ".code_external_link",
+            ".spectator_narrow_login_button",
         ],
         appendTo: () => document.body,
     });

static/styles/dark_theme.css

@@ -427,6 +427,7 @@ body.dark-theme {
         }
     }
 
+    .spectator_narrow_login_button,
     .top-navbar-border {
         border-color: hsla(0, 0%, 0%, 0.6);
     }
@@ -551,6 +552,18 @@ body.dark-theme {
         color: hsl(0, 0%, 100%);
     }
 
+    .spectator_login_buttons a {
+        color: hsl(236, 33%, 90%);
+
+        &:hover {
+            color: hsl(0, 0%, 100%);
+        }
+    }
+
+    .spectator_narrow_login_button .login_button i {
+        color: hsl(236, 33%, 90%);
+    }
+
     #user_presences li .user-list-sidebar-menu-icon:hover,
     .all-messages-sidebar-menu-icon:hover,
     .starred-messages-sidebar-menu-icon:hover,

static/styles/zulip.css

@@ -450,6 +450,65 @@ p.n-margin {
     position: absolute;
     right: 0;
     top: 0;
+
+    .spectator_login_buttons {
+        display: flex;
+        justify-content: space-evenly;
+        position: absolute;
+        top: 10px;
+        /* width of right column - width of gear icon(250px - 45px) */
+        width: 205px;
+
+        a {
+            font-size: calc(16em / 14);
+            font-weight: 600;
+            color: hsl(0, 0%, 20%);
+
+            &:hover {
+                text-decoration: none;
+                color: hsl(0, 0%, 0%);
+            }
+
+            i {
+                margin-right: 3px;
+            }
+        }
+
+        .divider {
+            color: hsl(0, 0%, 88%);
+            font-size: 20px;
+            line-height: 1;
+        }
+    }
+
+    .spectator_narrow_login_button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        /* Height of navbar in tablet sizes */
+        height: 40px;
+        /* Width of userlist-toggle button. */
+        width: 45px;
+        border-left: 1px solid hsl(0, 0%, 88%);
+
+        .login_button {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            opacity: 0.5;
+
+            &:hover {
+                opacity: 1;
+                text-decoration: none;
+            }
+
+            i {
+                color: hsl(0, 0%, 20%);
+                font-size: 1.6em;
+            }
+        }
+    }
 }
 
 .column-left {
@@ -2955,8 +3014,12 @@ div.topic_edit_spinner .loading_indicator_spinner {
     #searchbox,
     #searchbox_legacy,
     .header {
-        height: 30px;
         line-height: 30px;
+        height: 30px;
+    }
+
+    .spectator_narrow_login_button {
+        height: 30px !important;
     }
 
     #search_query {

static/templates/navbar.hbs

@@ -45,7 +45,23 @@
             </div>
         </div>
         <div class="column-right">
-            <div id="userlist-toggle" title="{{t 'User list' }} (w)">
+            <div class="only-visible-for-spectators">
+                <div class="spectator_login_buttons hide-xl">
+                    <a href="/register"  class="signup_button">
+                        <span>{{t 'Sign up' }}</span>
+                    </a>
+                    <div class="divider">|</div>
+                    <a class="login_button">
+                        <span>{{t 'Log in' }}</span>
+                    </a>
+                </div>
+                <div class="spectator_narrow_login_button hide show-xl" data-tippy-content="{{t 'Log in' }}" data-tippy-placement="bottom">
+                    <a class="login_button">
+                        <i class="fa fa-sign-in"></i>
+                    </a>
+                </div>
+            </div>
+            <div id="userlist-toggle" title="{{t 'User list' }} (w)" class="hidden-for-spectators">
                 <a id="userlist-toggle-button" role="button" tabindex="0"><i class="fa fa-group" aria-hidden="true"></i>
                     <span id="userlist-toggle-unreadcount">0</span>
                 </a>

static/templates/right_sidebar.hbs

@@ -33,15 +33,6 @@
             <div class="only-visible-for-spectators">
                 <div class="realm-description">
                     <div class="rendered_markdown">{{rendered_markdown realm_rendered_description }}</div>
-                    <hr />
-                    <a href="/register"  class="signup_button color_animated_button">
-                        <i class="fa fa-pencil-square-o"></i>
-                        <span>{{t 'Sign up' }}</span>
-                    </a>
-                    <a class="login_button color_animated_button">
-                        <i class="fa fa-sign-in"></i>
-                        <span>{{t 'Log in' }}</span>
-                    </a>
                 </div>
             </div>
         </div>