Update theme to reflect the new logo and brand color changes (#13629)

* update theme

* fix alert box has no spacing

* fix couple issues with new theme

* improve contrast and make sure to use correct theme color

* fix notification colour

* fix wrong logo used

* fix theme color

* fix update title not readable

12 files changed, 117 insertions, 57 deletions

diff --git a/plugins/CoreHome/angularjs/alert/alert.directive.less b/plugins/CoreHome/angularjs/alert/alert.directive.less
index 45d9f84fa4..6d1dc174cb 100644
--- a/plugins/CoreHome/angularjs/alert/alert.directive.less
+++ b/plugins/CoreHome/angularjs/alert/alert.directive.less
@@ -29,21 +29,21 @@
 }
 
 body #content .alert-success p {
-  color: #009874;
+  color: @color-green-piwik;
 }
 
 .alert-success {
-  color: #009874;
-  border-color: #1AA282;
+  color: @color-green-piwik;
+  border-color: @color-green-piwik;
   &:before {
     content: "\e63d";
-    color: #1AA282;
+    color: @color-green-piwik;
   }
   p {
-    color: #009874;
+    color: @color-green-piwik;
   }
   a {
-    color: #009874;
+    color: @color-green-piwik;
     text-decoration: underline;
     &:hover {
       text-decoration: underline;
@@ -78,21 +78,21 @@ body #content .alert-info p {
 }
 
 body #content .alert-warning p {
-  color: #CA8100;
+  color: #fbf7f1;
 }
 
 .alert-warning {
-  color: #CA8100;
-  border-color: #DF9D27;
+  color: #f57c00;
+  border-color: #f57c00;
   &:before {
     content: "\e621";
-    color: #DF9D27;
+    color: #f57c00;
   }
   p {
-    color: #CA8100;
+    color: #f57c00;
   }
   a {
-    color: #CA8100;
+    color: #f57c00;
     text-decoration: underline;
     &:hover {
       text-decoration: underline;
@@ -101,21 +101,21 @@ body #content .alert-warning p {
 }
 
 body #content .alert-danger p {
-  color: #D4291F;
+  color: @color-red-piwik;
 }
 
 .alert-danger {
-  color: #D4291F;
-  border-color: #D73F36;
+  color: @color-red-piwik;
+  border-color: @color-red-piwik;
   &:before {
     content: "\e616";
-    color: #D73F36;
+    color: @color-red-piwik;
   }
   p {
-    color: #D4291F;
+    color: @color-red-piwik;
   }
   a {
-    color: #D4291F;
+    color: @color-red-piwik;
     text-decoration: underline;
     &:hover {
       text-decoration: underline;
diff --git a/plugins/CoreHome/angularjs/notification/notification.directive.less b/plugins/CoreHome/angularjs/notification/notification.directive.less
index cb47f28c10..4b27802a5a 100644
--- a/plugins/CoreHome/angularjs/notification/notification.directive.less
+++ b/plugins/CoreHome/angularjs/notification/notification.directive.less
@@ -23,19 +23,35 @@
 
   &.notification-success {
     .alert-success;
-    background-color: #e8f5e9;
+    color: #eef6ef !important;
+    background-color: @color-green-piwik !important;
+    &:before, p, a {
+      color: #eef6ef;
+    }
   }
   &.notification-warning {
     .alert-warning;
-    background-color: #fff3e0;
+    background-color: #f57c00;
+    color: #fbf7f1 !important;
+    &:before, p, a {
+      color: #fbf7f1;
+    }
   }
   &.notification-danger,
   &.notification-error {
     .alert-danger;
-    background-color: #ffebee;
+    color: #fdf0f2 !important;
+    background-color: #e53935;
+    &:before, p, a {
+      color: #fdf0f2;
+    }
   }
   &.notification-info {
     .alert-info;
-    background-color: #e3f2fd;
+    color: #f3feff !important;
+    background-color: #00bcd4;
+    &:before, p, a {
+      color: #f3feff;
+    }
   }
 }
\ No newline at end of file
diff --git a/plugins/CoreHome/images/favicon.png b/plugins/CoreHome/images/favicon.png
index e47d348e82..7e21902777 100644
--- a/plugins/CoreHome/images/favicon.png
+++ b/plugins/CoreHome/images/favicon.png
diff --git a/plugins/CoreHome/javascripts/color_manager.js b/plugins/CoreHome/javascripts/color_manager.js
index cffff2c7be..deaa506aa7 100644
--- a/plugins/CoreHome/javascripts/color_manager.js
+++ b/plugins/CoreHome/javascripts/color_manager.js
@@ -13,7 +13,7 @@
         "darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
         "darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
         "darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
-        "firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff","gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
+        "firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff","gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#43a047","greenyellow":"#adff2f",
         "honeydew":"#f0fff0","hotpink":"#ff69b4","indianred ":"#cd5c5c","indigo ":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
         "lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2",
         "lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de",
diff --git a/plugins/CoreHome/javascripts/manifest.json b/plugins/CoreHome/javascripts/manifest.json
index 1723675206..7314adde61 100644
--- a/plugins/CoreHome/javascripts/manifest.json
+++ b/plugins/CoreHome/javascripts/manifest.json
@@ -37,7 +37,7 @@
   "display": "standalone",
   "orientation": "portrait",
   "background_color": "#edecec",
-  "theme_color": "#37474f",
+  "theme_color": "#3450A3",
   "prefer_related_applications": true,
   "related_applications": [
     {
diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index 0659b508c6..a74d62b875 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -66,7 +66,7 @@ table.dataTable th {
 // for dataTables in exported widgets ( we do not want to apply this for widgets in dashboard )
 body>.widget table.dataTable {
   th {
-    background: @theme-color-background-tinyContrast;
+    background: @theme-color-background-base;
   }
 }
 
@@ -76,7 +76,9 @@ body>.widget table.dataTable {
   width: ~"calc(100% + 40px)";
 
   th {
-    background: @theme-color-background-tinyContrast;
+    background: @theme-color-background-base !important;
+    border-radius: 0;
+    color: @theme-color-text-contrast;
 
     &:first-child {
       padding-left: 20px;
@@ -492,7 +494,7 @@ table.dataTable td.label img {
 tr td.label img.plusMinus {
   margin-left: -3px;
   margin-right: 3px;
-  margin-top: -3px;
+  margin-top: 0;
 }
 
 .pk-emptyDataTable {
@@ -576,10 +578,12 @@ td.cellSubDataTable .loadingPiwik {
     vertical-align: middle;
     text-decoration: none !important;
     text-align: center;
-    color: #adadad;
     font-size: 16px;
+    color: @theme-color-brand !important;
+    opacity: 0.7;
     &:hover {
-      color: #333;
+      color: @theme-color-brand !important;
+      opacity: 1;
       background-color: @theme-color-background-base;
       text-decoration: none !important;
     }
diff --git a/plugins/CoreHome/stylesheets/dataTable/_entityTable.less b/plugins/CoreHome/stylesheets/dataTable/_entityTable.less
index 4326119505..79cb150078 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_entityTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_entityTable.less
@@ -9,7 +9,7 @@ table.entityTable {
         }
 
         text-transform: none;
-        background-color: @theme-color-background-tinyContrast;
+        background: @theme-color-background-base;
         vertical-align: middle !important;
         text-align: left !important;
         font-size: 15px;
@@ -19,7 +19,7 @@ table.entityTable {
         margin: 0;
         font-weight: normal;
         border-radius: 0;
-        color: @theme-color-text;
+        color: @theme-color-text-contrast;
       }
     }
   }
@@ -100,11 +100,13 @@ table.entityTable {
 .tableActionBar {
   a,
   button {
-    height: 54px;
-    line-height: 54px;
-    box-shadow: none;
-    background-color: rgba(0, 0, 0, 0);
-    color: @theme-color-text !important;
+    height: 36px;
+    line-height: 36px;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12) !important;
+    background-color: @color-silver-l60;
+    color: @theme-color-brand-contrast;
+    background-image: none !important;
+    font-size: 12px;
     cursor: pointer;
     text-decoration: none;
     background-color: inherit;
@@ -112,9 +114,10 @@ table.entityTable {
     letter-spacing: .5px;
     transition: .2s ease-out;
     border: none;
-    border-radius: 2px;
+    border-radius: 3px;
     display: inline-block;
     padding: 0 2rem;
+    margin-left: 16px;
     text-transform: uppercase;
     vertical-align: middle;
     -webkit-tap-highlight-color: transparent;
@@ -122,4 +125,8 @@ table.entityTable {
       text-decoration: underline;
     }
   }
+
+  button:first-child, a:first-child {
+    background-color: @theme-color-brand !important;
+  }
 }
diff --git a/plugins/CoreHome/stylesheets/dataTable/_limitSelection.less b/plugins/CoreHome/stylesheets/dataTable/_limitSelection.less
index ab678b427a..9486e875cf 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_limitSelection.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_limitSelection.less
@@ -17,14 +17,23 @@
   .select-wrapper:hover {
     background-color: #edecec;
     border-radius: 2px;
-    color: #333;
+    color: @theme-color-brand !important;
     cursor: pointer;
 
-    input.select-dropdown {
-      color: #333;
-    }
+    input.select-dropdown,
     span.caret {
-        color: #333 !important;
+      color: @theme-color-brand !important;
+      opacity: 1;
+       &:hover {
+         color: @theme-color-brand !important;
+         opacity: 1;
+       }
+    }
+
+    input.select-dropdown {
+      &:hover {
+        border-color: @theme-color-brand !important;
+      }
     }
   }
 
@@ -39,16 +48,23 @@
       overflow: hidden;
       border: 0;
       transition: all 0s;
-      color: #adadad;
+      color: @theme-color-brand !important;
+      opacity: 0.7;
       &:hover {
-        color: #333;
-        border-color: #333;
+        color: @theme-color-brand !important;
+        opacity: 1;
+        border-color: @theme-color-brand !important;
       }
     }
     span.caret {
       top: 11px;
       right: 4px;
-      color: #adadad;
+      color: @theme-color-brand !important;
+      opacity: 0.7;
+      &:hover {
+        color: @theme-color-brand !important;
+        opacity: 1;
+      }
     }
   }
 
diff --git a/plugins/CoreHome/stylesheets/dataTable/_rowActions.less b/plugins/CoreHome/stylesheets/dataTable/_rowActions.less
index d6c445883e..8353101ef8 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_rowActions.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_rowActions.less
@@ -16,9 +16,10 @@ table.dataTable .dataTableRowActions a {
 
   .rowActionIcon {
     font-size: 19px;
-    color: @color-gray;
+    color: @theme-color-brand !important;
+    opacity: 0.6;
     &:hover {
-      color: @theme-color-text;
+      opacity: 1;
     }
   }
   @media print{
diff --git a/plugins/CoreHome/stylesheets/layout.less b/plugins/CoreHome/stylesheets/layout.less
index 20bbc07f4b..cb125bc50f 100644
--- a/plugins/CoreHome/stylesheets/layout.less
+++ b/plugins/CoreHome/stylesheets/layout.less
@@ -40,6 +40,10 @@ nav {
     }
   }
 
+  ul.right.hide-on-med-and-down {
+    margin-right: 4px;
+  }
+
   .languageSelection {
     &:hover {
       background-color: rgba(0,0,0,0.1);
@@ -93,8 +97,12 @@ nav {
 #root {
 
   .pageWrap {
-    padding-left: 16px;
-    padding-right: 16px;
+    padding-left: 18px;
+    padding-right: 18px;
+  }
+
+  #secondNavBar {
+    box-shadow: none !important;
   }
 
   #secondNavBar + .pageWrap {
@@ -213,6 +221,7 @@ nav {
               &:hover, &:focus {
                 text-decoration: none;
                 color: @theme-color-menu-contrast-textActive;
+                background-color: @theme-color-background-base;
               }
             }
 
@@ -282,7 +291,7 @@ nav {
       > .item {
         cursor: pointer;
         &:hover, &:focus {
-          color: @theme-color-menu-contrast-textActive;
+          color: @theme-color-header-background;
         }
       }
 
@@ -353,8 +362,8 @@ nav {
     }
 
     .piwikTopControl {
-      margin-top: 8px;
-      margin-bottom: 8px;
+      margin-top: 10px;
+      margin-bottom: 10px;
     }
   }
 }
@@ -372,7 +381,7 @@ nav {
       display: inline-block;
       float: none;
       position: relative;
-      margin-right: 12px;
+      margin-right: 14px;
       vertical-align: top;
       font-size: 11px;
     }
@@ -446,3 +455,10 @@ nav {
     margin-bottom: -20px !important;
   }
 }
+
+.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
+  box-shadow: @default-box-shade;
+}
+#root .borderedControl, #standalone .borderedControl, .ui-dialog .borderedControl, .ngdialog .borderedControl {
+  box-shadow: @default-box-shade;
+}
\ No newline at end of file
diff --git a/plugins/CoreHome/stylesheets/zen-mode.less b/plugins/CoreHome/stylesheets/zen-mode.less
index e80b9fc12e..944e0260a7 100644
--- a/plugins/CoreHome/stylesheets/zen-mode.less
+++ b/plugins/CoreHome/stylesheets/zen-mode.less
@@ -31,8 +31,8 @@
       font-weight: bold !important;
     }
     tr td {
-      padding-top: 10px;
-      padding-bottom: 10px;
+      padding-top: 11px;
+      padding-bottom: 11px;
     }
   }
 
diff --git a/plugins/CoreHome/templates/_applePinnedTabIcon.twig b/plugins/CoreHome/templates/_applePinnedTabIcon.twig
index 55a72c7ef1..5ca38d9322 100644
--- a/plugins/CoreHome/templates/_applePinnedTabIcon.twig
+++ b/plugins/CoreHome/templates/_applePinnedTabIcon.twig
@@ -1,4 +1,4 @@
 {% if isCustomLogo and customFavicon is defined and customFavicon %}
 {% else %}
-	<link rel="mask-icon" href="plugins/CoreHome/images/applePinnedTab.svg" color="#d4291f">
+	<link rel="mask-icon" href="plugins/CoreHome/images/applePinnedTab.svg" color="#3450A3">
 {% endif %}