homepage UI

ui/common/css/abstract/_extends.scss

@@ -14,7 +14,7 @@
 %active {
   background: $c-accent;
   color: #fff;
-  text-shadow: 0 1px 0 black;
+  text-shadow: 0 1px 0 black!important;
   box-shadow: 0 3px 4px hsla(0, 0, 0, 0.15) inset;
 }
 %active-hover {

ui/common/css/component/_button.scss

@@ -11,6 +11,7 @@
   padding: .7em 1em;
   border: none;
   cursor: pointer;
+  text-align: center;
   @include transition();
   white-space: nowrap;
   &,

ui/common/css/theme/_default.scss

@@ -87,7 +87,7 @@ $c-bg-header-dropdown: $c-bg-popup;
 $c-header-dropdown: $c-popup;
 
 $c-font-shadow: white;
-$text-shadow: 0 1px 1px $c-font-shadow;
+$text-shadow: 0 1px 0 $c-font-shadow;
 
 $c-bot: $c-fancy;
 

ui/common/css/theme/_light.scss

@@ -6,11 +6,11 @@ $theme-dark: false;
 
 @mixin metal {
   background: linear-gradient(to bottom, hsl(0, 0, 96) 0%, hsl(0, 0, 93) 100%);
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: $text-shadow;
 }
 @mixin metal-hover {
   background: linear-gradient(to bottom, hsl(0, 0, 98) 0%, hsl(0, 0, 95) 100%);
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: $text-shadow;
 }
 
 @mixin scroll-shadows {

ui/lobby/css/_layout.scss

@@ -13,8 +13,6 @@ $mq-col4: $mq-x-large;
   }
 }
 
-$app-tabs-height: 30px;
-
 .lobby {
   grid-area: main;
   display: grid;

ui/lobby/css/_lobby.scss

@@ -18,7 +18,7 @@
 }
 .lobby__about {
   display: flex;
-  align-content: start;
+  align-content: flex-start;
   flex-flow: row wrap;
   font-size: .85em;
   margin: $block-gap 0 0 $block-gap;
@@ -49,3 +49,6 @@
     font-size: 1.1em;
   }
 }
+.game-setup {
+  display: none;
+}

ui/lobby/css/_setup.scss

@@ -2,6 +2,7 @@ $c-setup: $c-secondary;
 $c-slider: $c-setup;
 
 .game-setup {
+  display: block;
   #modal-wrap {
     width: 30em;
     padding: 0;

ui/lobby/css/_table.scss

@@ -15,10 +15,6 @@
       &.disabled {
         opacity: 0.2;
       }
-      &.active-g {
-        @extend %active;
-        background: $c-secondary;
-      }
     }
     @include breakpoint($mq-col4) {
       justify-content: center;

ui/lobby/css/app/_tab.scss

@@ -1,22 +1,19 @@
 .lobby__app__tabs {
   @extend %flex-center-nowrap;
-  flex: 0 0 $app-tabs-height;
   justify-content: center;
-  align-items: flex-start;
+  align-items: flex-end;
   border-bottom: 2px solid $c-border;
   span {
-    @extend %roboto, %box-radius-bottom;
+    @extend %roboto;
     flex: 1 1 auto;
     text-align: center;
-    // font-size: .9em;
-    line-height: #{$app-tabs-height - 2px};
-    padding: 0 .1em;
+    padding: .5em .2em;
     cursor: pointer;
     position: relative;
     color: $c-font-page;
     @include transition(color, .25s);
     &::after {
-      content: "";
+      content: '';
       background: fade-out($c-accent, .4);
       height: 2px;
       position: absolute;

ui/lobby/css/build/_lobby.scss

@@ -3,5 +3,6 @@
 @import '../../../common/css/component/now-playing';
 @import '../../../common/css/component/vs';
 @import '../../../common/css/component/color-icon';
+@import '../../../common/css/component/glowing';
 @import '../../../common/css/base/scrollbar';
 @import '../lobby';

ui/lobby/src/boot.js

@@ -416,13 +416,14 @@ module.exports = function(cfg, element) {
   var clickEvent = blindMode ? 'click' : 'mousedown';
 
   $startButtons.find('a:not(.disabled)').on(clickEvent, function() {
+    $(this).addClass('active').siblings().removeClass('active');
     lichess.loadCssPath('lobby.setup');
     lobby.leavePool();
     $.ajax({
       url: $(this).attr('href'),
       success: function(html) {
         prepareForm($.modal(html, 'game-setup', () => {
-          $startButtons.find('.active-g').removeClass('active-g');
+          $startButtons.find('.active').removeClass('active');
         }));
         lichess.pubsub.emit('content_loaded')();
       },
@@ -431,7 +432,6 @@ module.exports = function(cfg, element) {
         lichess.reload();
       }
     });
-    $(this).addClass('active-g').siblings().removeClass('active-g');
     return false;
   }).on('click', function() {
     return false;

ui/lobby/src/view/tabs.ts

@@ -7,7 +7,7 @@ function tab(ctrl: LobbyController, key: Tab, active: Tab, content: MaybeVNodes)
   return h('span', {
     class: {
       active: key === active,
-      glow: key !== active && key === 'pools' && !!ctrl.poolMember
+      glowing: key !== active && key === 'pools' && !!ctrl.poolMember
     },
     hook: bind('mousedown', _ => ctrl.setTab(key), ctrl.redraw)
   }, content);