From 11e7af34509e22c261ef57a5ca277c8aac6260bd Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 9 Sep 2015 16:35:09 -0400
Subject: [PATCH] Adopt theming system of Angular Material

The SASS has been simplified so that different themes can be applied by
only using the $mdThemingProvider serivce.

The resulting design is more "Materialized" and less prone to the
future changes of Angular Material.
---
 .../ContactsUI/UIxContactFoldersView.wox      | 19 +++----
 .../MailerUI/UIxMailFolderTemplate.wox        |  4 +-
 UI/Templates/MailerUI/UIxMailMainFrame.wox    |  5 +-
 UI/Templates/PreferencesUI/UIxPreferences.wox | 14 +++--
 UI/Templates/SchedulerUI/UIxCalMainView.wox   |  9 ++--
 UI/WebServerResources/Gruntfile.js            |  2 +-
 UI/WebServerResources/js/Common/Common.app.js | 18 ++++---
 .../scss/components/_palette.scss             |  6 +--
 .../scss/components/button/button.scss        | 11 ----
 .../scss/components/card/card-theme.scss      |  5 ++
 .../scss/components/card/card.scss            |  4 --
 .../components/content/content-theme.scss     |  3 ++
 .../scss/components/list/list-theme.scss      | 15 ++++++
 .../scss/components/list/list.scss            | 20 -------
 .../scss/components/sidenav/sidenav.scss      | 54 ++-----------------
 .../scss/components/subheader/subheader.scss  | 10 ----
 .../components/toolbar/toolbar-theme.scss     | 12 +++++
 .../scss/components/toolbar/toolbar.scss      | 21 --------
 .../scss/core/base_styles/_base_style.scss    |  5 --
 .../scss/core/variables.scss                  |  6 +--
 20 files changed, 83 insertions(+), 160 deletions(-)
 create mode 100644 UI/WebServerResources/scss/components/card/card-theme.scss
 create mode 100644 UI/WebServerResources/scss/components/content/content-theme.scss
 create mode 100644 UI/WebServerResources/scss/components/list/list-theme.scss
 create mode 100644 UI/WebServerResources/scss/components/toolbar/toolbar-theme.scss

diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 3de1c3b58..63028361e 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -23,10 +23,10 @@
     <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <var:component className="UIxSidenavToolbarTemplate" />
       <!-- <div style="position: relative; display: flex;"> -->
-      <md-content md-scroll-y="md-scroll-y">
+      <md-content md-scroll-y="md-scroll-y" class="md-hue-2">
         <!-- User's addressbooks -->
         <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="sg-md-subheader md-hue-2">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Address Books"/></span>
               <md-button class="sg-icon-button"
@@ -41,7 +41,7 @@
                           ng-click="app.select(folder)"
                           ng-dblclick="app.edit(folder)"
                           ui-sref="app.addressbook({addressbookId: folder.id})"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
               <md-icon>contacts</md-icon>
               <p class="sg-item-name"
                  ng-show="app.editMode!=folder.id">{{folder.name}}</p>
@@ -101,7 +101,7 @@
         </section>
         <!-- Subscriptions -->
         <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="sg-md-subheader md-hue-2">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Subscriptions"/></span>
               <md-button class="sg-icon-button"
@@ -117,7 +117,7 @@
                           ng-click="app.select(folder)"
                           ng-dblclick="app.edit(folder)"
                           ui-sref="app.addressbook({addressbookId: folder.id})"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
               <md-icon>contacts</md-icon>
               <p class="sg-item-name"
                  ng-show="editMode!=folder.id">{{folder.name}}</p>
@@ -155,14 +155,14 @@
         </section>
         <!-- Remote/domain addressbooks -->
         <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="sg-md-subheader md-hue-2">
             <var:string label:value="Global Addressbooks"/>
           </md-subheader>
           <md-list>
             <md-list-item ng-repeat="folder in app.service.$remotes track by folder.id"
                           ng-click="app.select(folder)"
                           ui-sref="app.addressbook({addressbookId: folder.id})"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
               <md-icon>public</md-icon>
               <p class="sg-item-name">{{folder.name}}</p>
             </md-list-item>
@@ -186,7 +186,7 @@
 
         <!-- single-selection toolbar -->
         <md-toolbar ng-show="addressbook.selectedFolder.$selectedCount() == 0">
-          <!-- sort mode -->
+          <!-- sort mode (default) -->
           <div class="md-toolbar-tools" ng-hide="addressbook.mode.search">
             <md-button class="sg-icon-button" label:aria-label="Search"
                        ng-click="addressbook.mode.search = true">
@@ -339,7 +339,8 @@
                 <md-list-item
                     ng-class="{'sg-active': currentCard.id == addressbook.selectedFolder.selectedCard}"
                     ng-click="addressbook.selectCard(currentCard)"
-                    ui-sref="app.addressbook.card.view({addressbookId: addressbook.selectedFolder.id, cardId: currentCard.id})">
+                    ui-sref="app.addressbook.card.view({addressbookId: addressbook.selectedFolder.id, cardId: currentCard.id})"
+                    ui-sref-active="md-default-theme md-background md-bg md-hue-1">
                   <div class="sg-selected-avatar" ng-show="currentCard.selected"
                        ng-click="currentCard.selected = !currentCard.selected">
                     <!-- selected avatar -->
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index a78c9c46d..6edccb294 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -159,8 +159,8 @@
               md-on-demand="md-on-demand"
               ng-class="{'sg-active': currentMessage.uid == mailbox.selectedFolder.selectedMessage, unread: !currentMessage.isread}"
               ng-click="mailbox.selectMessage(currentMessage)"
-              ui-sref="mail.account.mailbox.message({accountId: mailbox.account.id, mailboxId: (mailbox.selectedFolder.path | encodeUri), messageId: currentMessage.uid})">
-            <!-- ui-sref-active="sg-active"> -->
+              ui-sref="mail.account.mailbox.message({accountId: mailbox.account.id, mailboxId: (mailbox.selectedFolder.path | encodeUri), messageId: currentMessage.uid})"
+              ui-sref-active="md-default-theme md-background md-bg md-hue-1">
             <div class="sg-selected-avatar"
                  ng-show="currentMessage.selected"
                  ng-click="mailbox.toggleMessageSelection($event, currentMessage)"><!-- selected avatar --></div>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index e2f3a65bc..b18635a1d 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -223,7 +223,6 @@
 -->
   <main class="view layout-fill" ui-view="mailboxes" layout="row" ng-controller="navController"><!-- mailboxes list --></main>
 
-<!-- TEMPLATE SCRIPT WRAPPER -->
   <script type="text/ng-template" id="UIxMailMainFrame">
 
     <!-- Sidenav -->
@@ -231,7 +230,7 @@
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <section ng-repeat="account in app.accounts track by account.id">
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="md-hue-2">
             <div layout="row" layout-align="space-between center">
               <span>{{account.name}}</span>
               <div>
@@ -254,7 +253,7 @@
                           ng-click="app.selectFolder(account, folder)"
                           ng-dblclick="app.editFolder(folder)"
                           ui-sref="mail.account.mailbox({accountId: account.id, mailboxId: (folder.path | encodeUri)})"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
               <md-icon ng-class="'sg-child-level-' + folder.level">{{app.metadataForFolder(folder).icon}}</md-icon>
               <p class="sg-item-name"
                  ng-show="app.editMode != folder.path">
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 5a3823376..66ecca1c7 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -24,29 +24,33 @@
   <script type="text/ng-template" id="preferences.html">
     <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
       <var:component className="UIxSidenavToolbarTemplate" />
-      <md-content md-scroll-y="md-scroll-y" class="md-flex">
+      <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <md-list>
           <md-list-item ng-click="app.go('general')"
                         ui-sref="preferences.general"
-                        ui-sref-active="sg-active">
+                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+            <md-icon>settings</md-icon>
             <p class="sg-item-name"><var:string label:value="General"/></p>
           </md-list-item>
           <var:if condition="userHasCalendarAccess">
             <md-list-item ng-click="app.go('calendars')"
                           ui-sref="preferences.calendars"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+              <md-icon>event</md-icon>
               <p class="sg-item-name"><var:string label:value="Calendar"/></p>
             </md-list-item>
           </var:if>
           <md-list-item ng-click="app.go('addressbooks')"
                         ui-sref="preferences.addressbooks"
-                        ui-sref-active="sg-active">
+                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+            <md-icon>contacts</md-icon>
             <p class="sg-item-name"><var:string label:value="Contacts"/></p>
           </md-list-item>
           <var:if condition="userHasMailAccess">
             <md-list-item ng-click="app.go('mailer')"
                           ui-sref="preferences.mailer"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+              <md-icon>email</md-icon>
               <p class="sg-item-name"><var:string label:value="Mail"/></p>
             </md-list-item>
           </var:if>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 2351d80bd..5078d65d1 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -148,10 +148,10 @@
     <!-- Sidenav -->
     <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <var:component className="UIxSidenavToolbarTemplate" />
-      <md-content md-scroll-y="md-scroll-y" class="md-flex">
+      <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <!-- User's calendars -->
         <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="md-hue-2">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Calendars"/></span>
               <md-button class="sg-icon-button"
@@ -208,7 +208,7 @@
         </section>
         <!-- Subscriptions -->
         <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="md-hue-2">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Subscriptions"/></span>
               <md-button class="sg-icon-button"
@@ -256,7 +256,7 @@
         </section>
         <!-- Web Calendars -->
         <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="md-hue-2">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Web Calendars"/></span>
               <md-button class="sg-icon-button"
@@ -530,6 +530,7 @@
             </md-button>
           </div>
         </md-toolbar>
+
         <!-- day/week/month views -->
         <md-toolbar class="view-detail">
           <div class="md-toolbar-tools" layout-align="end center">
diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js
index 3cf6af608..bdfea0d52 100644
--- a/UI/WebServerResources/Gruntfile.js
+++ b/UI/WebServerResources/Gruntfile.js
@@ -1,6 +1,6 @@
 module.exports = function(grunt) {
   var js_files = {
-    'js/Common.js': ['js/Common/Common.app.js', 'js/Common/*.filter.js', 'js/Common/*Controller.js', 'js/Common/*.service.js', 'js/Common/*.directive.js', 'js/Common/utils.js'],
+    'js/Common.js': ['js/Common/*.app.js', 'js/Common/*.filter.js', 'js/Common/*Controller.js', 'js/Common/*.service.js', 'js/Common/*.directive.js', 'js/Common/utils.js'],
     'js/Main.js': ['js/Main/Main.app.js'],
     'js/Scheduler.services.js': ['js/Scheduler/*.service.js'],
     'js/Scheduler.js': ['js/Scheduler/Scheduler.app.js', 'js/Scheduler/*Controller.js', 'js/Scheduler/*.directive.js'],
diff --git a/UI/WebServerResources/js/Common/Common.app.js b/UI/WebServerResources/js/Common/Common.app.js
index 4b344c392..17d0be7e9 100644
--- a/UI/WebServerResources/js/Common/Common.app.js
+++ b/UI/WebServerResources/js/Common/Common.app.js
@@ -3,7 +3,7 @@
 (function() {
   'use strict';
 
-  angular.module('SOGo.Common', ['ngAnimate', 'ngMaterial'])
+  angular.module('SOGo.Common', ['ngAnimate', 'ngMaterial', 'mdColors'])
     .value('sgSettings', {
       isPopup: document.body.classList.contains('popup'),
       baseURL: function() {
@@ -123,6 +123,9 @@
 
     .config(configure);
 
+  /**
+   * @ngInject
+   */
   configure.$inject = ['$mdThemingProvider'];
   function configure($mdThemingProvider) {
     $mdThemingProvider.definePalette('sogo-green', {
@@ -141,8 +144,8 @@
       'A400': '00e676',
       'A700': '00c853',
       'contrastDefaultColor': 'dark',
-      'contrastDarkColors': '50 100 200',
-      'contrastLightColors': '300 400 500 600 700 800 900'
+      'contrastDarkColors': ['50', '100', '200'],
+      'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900']
     });
     $mdThemingProvider.definePalette('sogo-blue', {
       '50': 'f0faf9',
@@ -180,10 +183,9 @@
       'A400': 'bdbdbd',
       'A700': '616161',
       'contrastDefaultColor': 'dark',
-      'contrastLightColors': '800 900'
+      'contrastLightColors': ['800', '900']
     });
     // Default theme definition
-    // .primaryColor will soon be deprecated in favor of primaryPalette (already on dev builds https://groups.google.com/forum/m/#!topic/ngmaterial/-sXR8CYBMPg)
     $mdThemingProvider.theme('default')
       .primaryPalette('sogo-blue', {
         'default': '300',
@@ -197,10 +199,10 @@
         'hue-2': '300',
         'hue-3': 'A700'
       })
-      .backgroundPalette('sogo-paper', {
-        'default': '100',
+      .backgroundPalette('grey', {
+        'default': 'A100',
         'hue-1': '200',
-        'hue-2': '50',
+        'hue-2': '300',
         'hue-3': '500'
       });
   }
diff --git a/UI/WebServerResources/scss/components/_palette.scss b/UI/WebServerResources/scss/components/_palette.scss
index 6f2f6248f..81b74b6cb 100755
--- a/UI/WebServerResources/scss/components/_palette.scss
+++ b/UI/WebServerResources/scss/components/_palette.scss
@@ -403,7 +403,7 @@ $colorBlueGrey900:  nth($paletteBlueGrey, 10);
     };
   };
 }
-@include colors($sogoBlue, 'sogoBlue');
-@include colors($sogoGreen, 'sogoGreen');
-@include colors($sogoPaper, 'sogoPaper');
+// @include colors($sogoBlue, 'sogoBlue');
+// @include colors($sogoGreen, 'sogoGreen');
+// @include colors($sogoPaper, 'sogoPaper');
 
diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss
index 0be2e6558..e7af82337 100644
--- a/UI/WebServerResources/scss/components/button/button.scss
+++ b/UI/WebServerResources/scss/components/button/button.scss
@@ -10,12 +10,6 @@
 
 // Buttons for the sidenav folder tree
 // ------------------------------------
-md-sidenav md-list .md-button,
-.view-list md-list .md-button {
-  // dirty fix to squash the theme style
-  background-color: transparent !important;
-}
-
 .view-list md-list .md-button {
   // Gain some space in lists
   padding: 0;
@@ -61,11 +55,6 @@ md-list md-list-item button.md-button.sg-icon-button {
   border-radius: 50%;
   min-width: $iconButton-size;
   transition: $iconButton-transition;
-  &:hover,
-  &:active {
-    background-color: transparent;
-    transform: scale($iconButton-hover-scale);
-  }
   .md-ripple-container {
     border-radius: 50%;
   }
diff --git a/UI/WebServerResources/scss/components/card/card-theme.scss b/UI/WebServerResources/scss/components/card/card-theme.scss
new file mode 100644
index 000000000..73387e785
--- /dev/null
+++ b/UI/WebServerResources/scss/components/card/card-theme.scss
@@ -0,0 +1,5 @@
+md-card {
+  &.md-default-theme {
+    background-color: sg-color($sogoPaper, 50);
+  }
+}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/card/card.scss b/UI/WebServerResources/scss/components/card/card.scss
index ce2a6d00a..f1dcc638e 100644
--- a/UI/WebServerResources/scss/components/card/card.scss
+++ b/UI/WebServerResources/scss/components/card/card.scss
@@ -8,10 +8,6 @@ md-card {
     transition: $swift-ease-in-out;
   }
 
-  &.md-default-theme {
-    background-color: sg-color($sogoPaper, 50);
-  }
-
   // Collapsed/expanded states for cards in ACL editor
   &.sg-collapsed, &.sg-expanded {
     transition: $swift-ease-in-out;
diff --git a/UI/WebServerResources/scss/components/content/content-theme.scss b/UI/WebServerResources/scss/components/content/content-theme.scss
new file mode 100644
index 000000000..bc7664b2c
--- /dev/null
+++ b/UI/WebServerResources/scss/components/content/content-theme.scss
@@ -0,0 +1,3 @@
+.sg-subcontent {
+  border-left: $baseline-grid solid sg-color($sogoGreen, 100);
+}
diff --git a/UI/WebServerResources/scss/components/list/list-theme.scss b/UI/WebServerResources/scss/components/list/list-theme.scss
new file mode 100644
index 000000000..6023a79ce
--- /dev/null
+++ b/UI/WebServerResources/scss/components/list/list-theme.scss
@@ -0,0 +1,15 @@
+.sg-section-list {
+  md-list-item {
+    &:hover:not([disabled]) {
+      background-color: sg-color($sogoPaper, 300);
+      color: sg-color($sogoBlue, 800);
+    }
+    &:active {
+      color: sg-color($sogoBlue, 800);
+    }
+    &:focus,
+    &.sg-active {
+      background-color: sg-color($sogoBlue, 100);
+    }
+  }
+}
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index 7e29d0606..c1630f61a 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -61,28 +61,8 @@ div.md-tile-left {
   min-width: $sg-md-grid-pitch + $baseline-grid;
 }
 
-// Specific lists with a single subheader (sg-md-subheader--fixed) at the top
-[id='messagesList'],
-[id='contactsList'] {
-  border-top: 44px solid transparent;   // padding for the header.subheader until md-subheader is fixed
-}
-
 .sg-section-list {
   md-list-item {
-    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
-                color 0.12s linear;
-    &:hover:not([disabled]) {
-      background-color: sg-color($sogoPaper, 300);
-      color: sg-color($sogoBlue, 800);
-      cursor: pointer;
-    }
-    &:active {
-      color: sg-color($sogoBlue, 800);
-    }
-    &:focus,
-    &.sg-active {
-      background-color: sg-color($sogoBlue, 100);
-    }
     .md-list-item-inner {
       .md-secondary {
         // Expect the container to include a sg-tile-icons
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index 64164620d..1190bcc0e 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -2,11 +2,9 @@
 @import "extends";
 $sidenav-default-width: (4 * $pitch);
 $sidenav-min-space: $pitch;
-
-$sidenav-right-width: (8 * $pitch);
+//$sidenav-right-width: (8 * $pitch);
 
 md-sidenav {
-  background-color: sg-color($sogoPaper, 400);
   &.md-locked-open {
     @include from(lg) {
       @include flex-col(lg, 4, 1, 0)
@@ -15,36 +13,8 @@ md-sidenav {
   }
 }
 
-.md-sidenav-left {
-  &.md-whiteframe-z2 {
-    box-shadow: $sidenav-shadow-z2;
-  }
-}
-
 // MAIN SIDENAV, actually to the left
 // ----------------------------------------------------------------------------
-.md-sidenav-left {
-  & md-content,
-  & md-toolbar {
-    background-color: inherit;
-    background-image: url("../img/cardboard-transp.png");
-    background-blend-mode: multiply;
-  }
-}
-
-.md-sidenav-left md-toolbar {
-  box-shadow: none;
-}
-
-.md-sidenav-right {
-  width: $sidenav-right-width;
-  max-width: $sidenav-right-width;
-  & md-content,
-  & md-toolbar {
-    background-color: inherit;
-    background-image: none;
-  }
-}
 
 // Mailboxes tree
 $i: 1;
@@ -69,27 +39,9 @@ $i: 1;
 }
 
 .md-sidenav-left {
-  &.md-whiteframe-z1 {
-    box-shadow: $sidenav-shadow-z1;
-  }
   md-list-item {
-    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
-                color 0.12s linear;
-    &:hover {
-      background-color: sg-color($sogoBlue, 500);
-    }
-    &.sg-active {
-      background-color: sg-color($sogoBlue, 400);
-    }
-    &.sg-loading {
-      color: sg-color($sogoBlue, 200);
-    }
-  }
-}
-.md-sidenav-left {
-  md-bottom-sheet {
-    md-list-item:hover {
-      background-color: transparent;
+    .md-button {
+      transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
     }
   }
 }
diff --git a/UI/WebServerResources/scss/components/subheader/subheader.scss b/UI/WebServerResources/scss/components/subheader/subheader.scss
index 415221974..a70544895 100644
--- a/UI/WebServerResources/scss/components/subheader/subheader.scss
+++ b/UI/WebServerResources/scss/components/subheader/subheader.scss
@@ -28,13 +28,3 @@
     font-weight: $sg-font-medium;
   }
 }
-
-md-list .md-subheader.sg-md-subheader {
-  font-weight: $sg-font-medium;
-  font-size: $sg-font-size-2;
-}
-
-.sg-md-subheader > * {
-  font-weight: inherit;
-  font-size: inherit;
-}
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar-theme.scss b/UI/WebServerResources/scss/components/toolbar/toolbar-theme.scss
new file mode 100644
index 000000000..c88556215
--- /dev/null
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar-theme.scss
@@ -0,0 +1,12 @@
+md-toolbar {
+  background-image: url("../img/felt-transp.png");
+  background-blend-mode: luminosity;
+}
+
+.sg-toolbar-search {
+  background-color: sg-color($sogoPaper, 100);
+  color: rgba(0,0,0,0.54);
+  md-icon {
+    color: rgba(0,0,0,0.54);
+  }
+}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 31461e046..582e465f3 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -16,9 +16,6 @@ md-toolbar {
   z-index: $z-index-toolbar;
   // dirty fix to override angular-material botchy typography
   font-size: 1em !important;
-  background-image: url("../img/felt-transp.png");
-  background-blend-mode: luminosity;
-  //box-shadow: $whiteframe-shadow-z1;
 }
 
 .md-toolbar-tools {
@@ -43,11 +40,6 @@ md-toolbar,
   }
 }
 
-// angular-material is overspecifying so we are
-.md-toolbar-tools[layout-align="start start"] {
-  //align-items: flex-start;
-}
-
 .md-toolbar-tools.md-toolbar-tools-top {
   align-items: flex-start;
 }
@@ -66,24 +58,16 @@ header {
 }
 hgroup {
   align-items: center;
-  //flex: 1 1 auto;
   &h3 {
     margin-bottom: 0;
   }
 }
-.toolbar-main .md-button {
-//  color: inherit;
-//  font-size: sg-size(headline);
-}
 
 .sg-toolbar-group {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-//  & > .sg-icon-button:first-child {
-//    padding-left: 0;
-//  }
   &-1 {
     order: 1;
     max-width: $listView-width;
@@ -98,10 +82,5 @@ hgroup {
 }
 
 .sg-toolbar-search {
-  background-color: sg-color($sogoPaper, 100);
-  color: rgba(0,0,0,0.54);
   padding: $toolbar-padding 0;
-  md-icon {
-    color: rgba(0,0,0,0.54);
-  }
 }
diff --git a/UI/WebServerResources/scss/core/base_styles/_base_style.scss b/UI/WebServerResources/scss/core/base_styles/_base_style.scss
index 93807f1f7..348ee50fe 100644
--- a/UI/WebServerResources/scss/core/base_styles/_base_style.scss
+++ b/UI/WebServerResources/scss/core/base_styles/_base_style.scss
@@ -1,10 +1,5 @@
 /// _base_style.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
-
-main {
-  background-color: $background-base-color;
-}
-
 // Utility class to add padding on containers
 // Because of the border-box sizing model, padding can affect width specialy
 // in nested containers
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index c3e42b569..8129a4fe4 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -18,10 +18,10 @@ $version: '3.0.0';
 //@import '../themes/color-palette'; // fixme : clarify if it is needed or assure by javascript
 @import 'components/palette';        // fixme : The maps in color-palettes are more js then scss
 
-$primary-color:            sg-color($sogoBlue, 300) !default;
+//$primary-color:            sg-color($sogoBlue, 300) !default;
 //$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
-$foreground-primary-color: rgba($primary-color, 0.87);//override
-$background-base-color:    sg-color($sogoPaper, 200);
+//$foreground-primary-color: rgba($primary-color, 0.87);//override
+//$background-base-color:    sg-color($sogoPaper, 200);
 
 // Typography
 // ------------------------------