redesign lobby tabs

app/views/lobby/home.scala.html

@@ -68,7 +68,7 @@ openGraph = Map(
       }
     </div>
     <a class="filter" href="@routes.Setup.filterForm()">
-      <span data-icon="D"> @trans.filterGames()</span>
+      <span class="hint--top" data-hint="@trans.filterGames()"><span data-icon="D"></span></span>
       <span class="number">(0)</span>
     </a>
     <div id="now_playing" class="tab now_playing none" data-href="@routes.Lobby.playing">

app/views/lobby/seeks.scala.html

@@ -4,7 +4,7 @@
   <table>
     <thead>
       <tr>
-        <th class="reload"><span data-icon="P"></span></th>
+        <th></th>
         <th class="player">@trans.player()</th>
         <th class="rating">Rating</th>
         <th>@trans.time()</th>

public/javascripts/big.js

@@ -1515,6 +1515,7 @@ var storage = {
       $(this).siblings().removeClass('active').end().addClass('active');
       $wrap.find('>.tab').hide().filter('.' + tab).show();
       storage.set('lobbytab', tab);
+      reloadSeeksIfVisible();
     });
     var active = storage.get('lobbytab') || 'list';
     $wrap.find('>div.tabs>.' + active).addClass('active');
@@ -1653,13 +1654,7 @@ var storage = {
             });
           }, Math.round(Math.random() * 5000));
         },
-        reload_seeks: function() {
-          $.ajax($seeks.data('reload-url'), {
-            success: function(html) {
-              $seeks.html(html);
-            }
-          });
-        },
+        reload_seeks: reloadSeeksIfVisible,
         nbr: function(e) {
           var $tag = $('#site_baseline span');
           if ($tag.length && e) {
@@ -1725,6 +1720,16 @@ var storage = {
       }
     });
 
+    function reloadSeeksIfVisible() {
+      if ($seeks.is(':visible')) {
+        $.ajax($seeks.data('reload-url'), {
+          success: function(html) {
+            $seeks.html(html);
+          }
+        });
+      }
+    }
+
     function changeFeatured(o) {
       $('#featured_game').html(o.html);
       $('body').trigger('lichess.content_loaded');

public/stylesheets/dark.css

@@ -220,6 +220,10 @@ body.dark #hooks_wrap > div.tabs > a:hover,
 body.dark #hooks_wrap > div.tabs > a.active {
   background-color: #303030;
 }
+body.dark #hooks_wrap > div.tabs > a:hover,
+body.dark #hooks_wrap > div.tabs > a.active {
+  border-top: 2px solid #d85000;
+}
 body.dark div.table_not_started {
   box-shadow: none;
   background: none;

public/stylesheets/home.css

@@ -33,7 +33,7 @@ div.lobby_and_ground {
 }
 #hooks_wrap > div.tabs {
   position: absolute;
-  top: -21px;
+  top: -22px;
   left: 0px;
   height: 20px;
   line-height: 20px;
@@ -49,6 +49,7 @@ div.lobby_and_ground {
 #hooks_wrap > div.tabs > a:hover,
 #hooks_wrap > div.tabs > a.active {
   background: #f0f0f0;
+  border-top: 2px solid #d85000;
 }
 #hooks_wrap > div.tabs > a.active {
   font-weight: bold;
@@ -63,10 +64,11 @@ div.lobby_and_ground {
 #hooks_wrap > a.filter {
   position: absolute;
   top: -20px;
-  right: 281px;
+  left: 487px;
   height: 20px;
   line-height: 20px;
-  padding: 0 10px 0 10px;
+  font-size: 1.1em;
+  padding: 0 5px;
   border-bottom: 0;
   display: block;
   text-decoration: none;