gear_menu_popover: Move *-theme class to the li element.

It will help us hide the whole `li` element instead of just
`a` tag for spectators.

web/styles/dark_theme.css

@@ -698,7 +698,7 @@
         }
     }
 
-    #gear-menu {
+    .spectator-view #gear-menu-dropdown {
         .dark-theme {
             display: none;
         }
@@ -707,6 +707,7 @@
             display: block;
         }
 
+    #gear-menu {
         .dropdown-menu a:hover {
             color: hsl(0deg 0% 100%);
         }

web/styles/popovers.css

@@ -1213,3 +1213,16 @@ ul.navbar-dropdown-menu-outer-list {
         }
     }
 }
+
+#gear-menu-dropdown {
+    .light-theme,
+    .dark-theme {
+        display: none;
+    }
+}
+
+.spectator-view {
+    #gear-menu-dropdown .dark-theme {
+        display: block;
+    }
+}

web/templates/gear_menu_popover.hbs

@@ -67,13 +67,13 @@
             <i class="zulip-icon zulip-icon-f-globe" aria-hidden="true"></i> {{t 'Select language' }}
         </a>
     </li>
-    <li role="presentation" class="link-item only-visible-for-spectators">
-        <a class="dark-theme" role="menuitem">
+    <li role="presentation" class="link-item dark-theme only-visible-for-spectators">
+        <a role="menuitem">
             <i class="zulip-icon zulip-icon-moon" aria-hidden="true"></i> {{t 'Switch to dark theme' }}
         </a>
     </li>
-    <li role="presentation" class="link-item only-visible-for-spectators">
-        <a class="light-theme" role="menuitem">
+    <li role="presentation" class="link-item light-theme only-visible-for-spectators">
+        <a role="menuitem">
             <i class="zulip-icon zulip-icon-sun" aria-hidden="true"></i> {{t 'Switch to light theme' }}
         </a>
     </li>