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

42 files changed, 242 insertions, 113 deletions

diff --git a/plugins/Annotations/javascripts/annotations.js b/plugins/Annotations/javascripts/annotations.js
index 0556b6027f..988690e9ea 100644
--- a/plugins/Annotations/javascripts/annotations.js
+++ b/plugins/Annotations/javascripts/annotations.js
@@ -459,7 +459,7 @@
                 date = date.split(',')[0];
             }
 
-            $('.evolution-annotations>span', domElem).each(function () {
+            $('.evolution-annotations>span[data-date]', domElem).each(function () {
                 if ($(this).attr('data-date') == date) {
                     // get counts from attributes (and convert them to ints)
                     var starredCount = +$(this).attr('data-starred'),
@@ -467,12 +467,11 @@
 
                     // modify the starred count & make sure the correct image is used
                     var newStarCount = starredCount + starAmt;
+                    var newAnno = 'icon-annotation';
                     if (newStarCount > 0) {
-                        var newImg = 'plugins/Morpheus/images/annotations_starred.png';
-                    } else {
-                        var newImg = 'plugins/Morpheus/images/annotations.png';
+                        newAnno += ' starred';
                     }
-                    $(this).attr('data-starred', newStarCount).find('img').attr('src', newImg);
+                    $(this).attr('data-starred', newStarCount).find('span').attr('class', newAnno);
 
                     // modify the annotation count & hide/show based on new count
                     var newCount = annotationCount + amt;
@@ -575,12 +574,12 @@
 
         // if no graph available, hide all icons
         if (!canvases || canvases.length == 0) {
-            $('span', annotations).hide();
+            $('span[data-date]', annotations).hide();
             return true;
         }
 
         // set position of each individual icon
-        $('span', annotations).each(function (i) {
+        $('span[data-date]', annotations).each(function (i) {
             var canvas = $(canvases[i]),
                 canvasCenterX = canvas.position().left + (canvas.width() / 2);
             $(this).css({
diff --git a/plugins/Annotations/stylesheets/annotations.less b/plugins/Annotations/stylesheets/annotations.less
index 6270ebbe05..74ede38ba3 100644
--- a/plugins/Annotations/stylesheets/annotations.less
+++ b/plugins/Annotations/stylesheets/annotations.less
@@ -3,6 +3,15 @@
     height: 18px;
     width: 100%;
     cursor: pointer;
+
+    .icon-annotation {
+        font-size: 16px;
+        color: #666666;
+    }
+
+    .icon-annotation.starred {
+        color: @theme-color-brand;
+    }
 }
 
 .evolution-annotations > span {
diff --git a/plugins/Annotations/templates/getEvolutionIcons.twig b/plugins/Annotations/templates/getEvolutionIcons.twig
index e024f3bef5..f4a26700c4 100644
--- a/plugins/Annotations/templates/getEvolutionIcons.twig
+++ b/plugins/Annotations/templates/getEvolutionIcons.twig
@@ -8,7 +8,7 @@
                   (counts.note|e('html_attr')))|raw }}
 {{ 'Annotations_ClickToEditOrAdd'|translate }}"
               {% else %}}title="{{ 'Annotations_ViewAndAddAnnotations'|translate(date) }}"{% endif %}>
-            <img src="plugins/Morpheus/images/{% if counts.starred > 0 %}annotations_starred.png{% else %}annotations.png{% endif %}" width="16" height="16"/>
+            <span class="icon-annotation {% if counts.starred > 0 %}starred{% endif %}"/>
         </span>
     {% endfor %}
 </div>
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 %}
diff --git a/plugins/CoreVisualizations/stylesheets/jqplot.css b/plugins/CoreVisualizations/stylesheets/jqplot.css
index 41ffa2f960..2be3bda099 100644
--- a/plugins/CoreVisualizations/stylesheets/jqplot.css
+++ b/plugins/CoreVisualizations/stylesheets/jqplot.css
@@ -178,11 +178,11 @@ a.rowevolution-startmulti {
 }
 
 .rowevolution table.metrics td.text span.good {
-    color: #008000;
+    color: #43a047;
 }
 
 .rowevolution table.metrics td.text span.bad {
-    color: #f00;
+    color: #D4291F;
 }
 
 .rowevolution .metric-selectbox,
diff --git a/plugins/Dashboard/stylesheets/dashboard.less b/plugins/Dashboard/stylesheets/dashboard.less
index 7269aa23ed..80d1583f1a 100644
--- a/plugins/Dashboard/stylesheets/dashboard.less
+++ b/plugins/Dashboard/stylesheets/dashboard.less
@@ -1,5 +1,5 @@
 #dashboard {
-  margin: 0 -6px;
+  margin: 0 -8px;
 }
 
 body#standalone {
@@ -17,11 +17,11 @@ body#standalone {
   #dashboardWidgetsArea > .col {
     min-height: 100px;
     // Customize Bootstrap gutter between columns
-    padding-right: 6px;
-    padding-left: 6px;
+    padding-right: 8px;
+    padding-left: 8px;
 
     >.sortable {
-      padding: 5px 0 8px 0;
+      padding: 5px 0 13px 0;
     }
   }
 }
@@ -425,7 +425,7 @@ div.widgetpreview-preview {
 .ui-button, .ui-dialog-titlebar-close {
   .btn;
   color: @theme-color-brand-contrast !important;
-  background-color: @theme-color-brand !important;
+  background-color: @color-red-piwik !important;
   &:hover {
     background: none;
     background-color: transparent;
diff --git a/plugins/Dashboard/stylesheets/widget.less b/plugins/Dashboard/stylesheets/widget.less
index 7bf51ba107..f4a53bdb00 100644
--- a/plugins/Dashboard/stylesheets/widget.less
+++ b/plugins/Dashboard/stylesheets/widget.less
@@ -1,13 +1,13 @@
 .widget {
     .font-default(13px, 18px);
     background: @theme-color-widget-background;
-    border: 1px solid @theme-color-widget-border;
     border-radius: 2px;
     position: relative;
-    box-shadow: 0 1px 1px 0 rgba(0,0,0,.14),0 1px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.12);
+    box-shadow: @default-box-shade;
+    border: 1px solid @theme-color-widget-background !important;
 
     &:hover, &:focus {
-        box-shadow: 0 1px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+        box-shadow: @default-box-shade;
     }
 
     h2 {
@@ -22,7 +22,7 @@
         margin: 0;
         color: @theme-color-text;
         text-shadow: none;
-        padding: 15px 15px 10px 12px;
+        padding: 22px 15px 16px 12px !important;
     }
     p {
         margin-left: 10px;
@@ -58,6 +58,7 @@
             position: absolute;
             padding-left: 50px;
             display: none;
+            top: 7px;
             color: @theme-color-widget-title-text;
             background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, @theme-color-widget-title-background 45px);
             background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, @theme-color-widget-title-background 45px);
diff --git a/plugins/Installation/stylesheets/installation.css b/plugins/Installation/stylesheets/installation.css
index 74c219cbd0..1c8aa7dc48 100644
--- a/plugins/Installation/stylesheets/installation.css
+++ b/plugins/Installation/stylesheets/installation.css
@@ -22,8 +22,12 @@ body {
     margin-bottom: 20px;
 }
 
+#installation .form-group .dropdown-content li>a, .dropdown-content li>span {
+    color: #43a047;
+}
+
 .header .languageSelection {
-    color: #4183C4;
+    color: #1976D2;
     font-size: 13px;
 }
 
@@ -54,7 +58,7 @@ body {
 }
 .installation-progress h4 small {
     float: right;
-    color: #d4291f;
+    color: #43a047;
 }
 .installation-progress .progress {
     margin-bottom: 0;
@@ -106,7 +110,7 @@ p.next-step:first-child {
 }
 
 .system-check .icon-ok, .system-check-legend .icon-ok {
-    color: #1AA282;
+    color: #43a047;
     margin-right: 10px;
 }
 .system-check .icon-warning, .system-check-legend .icon-warning {
diff --git a/plugins/Installation/stylesheets/systemCheckPage.less b/plugins/Installation/stylesheets/systemCheckPage.less
index 05c97b2cdb..267b67ab49 100644
--- a/plugins/Installation/stylesheets/systemCheckPage.less
+++ b/plugins/Installation/stylesheets/systemCheckPage.less
@@ -19,7 +19,7 @@
 }
 
 .system-check .icon-ok {
-    color: #1AA282;
+    color: @color-green-piwik;
     margin-right: 10px;
 }
 .system-check .icon-warning {
@@ -47,7 +47,7 @@
 }
 
 .system-success {
-    color: #1AA282 !important;
+    color: @color-green-piwik !important;
     font-weight: bold;
 }
 
diff --git a/plugins/Live/stylesheets/visitor_profile.less b/plugins/Live/stylesheets/visitor_profile.less
index 72cc5a7453..770a013070 100644
--- a/plugins/Live/stylesheets/visitor_profile.less
+++ b/plugins/Live/stylesheets/visitor_profile.less
@@ -97,7 +97,7 @@
   &:before {
     padding: 4.5px;
     content: "\e60a";
-    background-color: #d4291f;
+    background-color: @color-red-piwik;
     color: #fff;
     border-radius: 3px;
     font-size: 9px;
diff --git a/plugins/Login/templates/login.twig b/plugins/Login/templates/login.twig
index 3ef83e7afa..abe2e2ae46 100644
--- a/plugins/Login/templates/login.twig
+++ b/plugins/Login/templates/login.twig
@@ -27,7 +27,7 @@
     </div>
     <nav>
         <div class="nav-wrapper">
-            {% include "@CoreHome/_logo.twig" with { 'logoLink': 'https://matomo.org', 'centeredLogo': true, 'useLargeLogo': true } %}
+            {% include "@CoreHome/_logo.twig" with { 'logoLink': 'https://matomo.org', 'centeredLogo': true, 'useLargeLogo': false } %}
         </div>
     </nav>
 
diff --git a/plugins/Marketplace/stylesheets/marketplace.less b/plugins/Marketplace/stylesheets/marketplace.less
index e5302fa270..eedf9e7ec9 100644
--- a/plugins/Marketplace/stylesheets/marketplace.less
+++ b/plugins/Marketplace/stylesheets/marketplace.less
@@ -1,14 +1,14 @@
 .subscriptionOverview {
     .icon-error, .errorMessage {
-        color: #D4291F;
+        color: @color-red-piwik;
     }
 
     .icon-ok {
-        color: #009874;
+        color: @color-green-piwik;
     }
 
     .icon-warning {
-        color: #CA8100;
+        color: #fbf7f1;
     }
     .subscriptionName,
     .subscriptionType,
diff --git a/plugins/Morpheus/icons b/plugins/Morpheus/icons
-Subproject 2f972982f571730178cec0e4f87e9f7b4eed3a8
+Subproject c37c3dfd643d4202897d3bf47d469251e4062eb
diff --git a/plugins/Morpheus/images/logo-header.png b/plugins/Morpheus/images/logo-header.png
index bd6aac3b5c..234d96a75a 100644
--- a/plugins/Morpheus/images/logo-header.png
+++ b/plugins/Morpheus/images/logo-header.png
diff --git a/plugins/Morpheus/images/logo.png b/plugins/Morpheus/images/logo.png
index 86d1a7a412..24e59ee096 100644
--- a/plugins/Morpheus/images/logo.png
+++ b/plugins/Morpheus/images/logo.png
diff --git a/plugins/Morpheus/images/logo.svg b/plugins/Morpheus/images/logo.svg
index 9bcd0531cd..809c79a91a 100644
--- a/plugins/Morpheus/images/logo.svg
+++ b/plugins/Morpheus/images/logo.svg
@@ -1,10 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-	 width="5836" height="1024" viewBox="0 0 5836 1024"
-	 enable-background="new 0 0 5836 1024" xml:space="preserve" version="1.1" id="Layer_1">
-<path d="M1147.636 960h-398.545l-170.182-749.091-170.182 749.091h-408.727v-1003.636h261.818v421.818c0 87.273 0 216.727-2.909 318.545 16-101.818 45.091-231.273 68.364-318.545l112-421.818h269.091l110.545 421.818c23.273 88.727 52.364 216.727 69.818 318.545-2.909-101.818-2.909-231.273-2.909-318.545v-421.818h261.818zM1761.205-43.636h256c-11.636 85.818-14.545 138.182-14.545 196.364v218.182c0 48-1.455 93.091-4.364 132.364-11.636 141.091-96 250.182-341.818 250.182-196.364 0-357.818-103.273-359.273-285.091l247.273 1.455c4.364 66.909 39.273 106.182 100.364 106.182 56.727 0 88.727-34.909 93.091-74.182 2.909-24.727 2.909-40.727 2.909-56.727v-11.636h-49.455c-263.273 0-420.364-101.818-420.364-267.636 0-149.818 120.727-229.818 248.727-229.818 71.273 0 136.727 17.455 192 52.364l32 81.455zM1627.386 113.455c-52.364 0-88.727 26.182-88.727 72.727 0 77.091 84.364 107.636 202.182 98.909v-50.909c0-81.455-61.091-120.727-113.455-120.727zM2475.227 564.364h171.636v162.909h-171.636v200.727h-261.818v-200.727h-123.636v-162.909h123.636v-324.364c0-43.636 0-80 2.909-125.091 8.727-119.273 66.909-178.909 260.364-178.909 55.273 0 103.273 4.364 154.182 13.091v162.909c-123.636-5.818-148.364 11.636-154.182 90.182-1.455 20.364-1.455 49.455-1.455 75.636zM3108.727 753.455c-254.545 0-417.455-158.545-417.455-408.727 0-248.727 162.909-408.727 417.455-408.727s417.455 160 417.455 408.727c0 250.182-162.909 408.727-417.455 408.727zM3108.727 113.455c-93.091 0-149.818 77.091-149.818 231.273 0 155.636 56.727 231.273 149.818 231.273s149.818-75.636 149.818-231.273c0-154.182-56.727-231.273-149.818-231.273zM4887.773 557.091c-17.454 106.182-104.727 196.364-260.364 196.364-71.273 0-119.273-16-167.273-45.091l-81.455-106.182c-33.455 85.818-116.364 151.273-248.727 151.273-71.273 0-119.273-16-167.273-45.091l-62.545-100.364v125.091h-261.818v-776.727h261.818v410.182c0 132.364 33.455 209.455 117.818 209.455 68.364 0 103.273-43.636 112-117.818 4.363-39.273 5.818-81.455 5.818-106.182v-395.636h261.818v410.182c0 132.364 33.455 209.455 117.818 209.455 68.364 0 103.273-43.636 112-117.818 4.363-39.273 5.818-81.455 5.818-106.182v-395.636h261.818v453.818c0 62.545-1.455 107.636-7.273 146.909zM5418.387 753.455c-254.546 0-417.455-158.545-417.455-408.727 0-248.727 162.909-408.727 417.455-408.727s417.454 160 417.454 408.727c0 250.182-162.909 408.727-417.454 408.727zM5418.387 113.455c-93.091 0-149.819 77.091-149.819 231.273 0 155.636 56.728 231.273 149.819 231.273s149.818-75.636 149.818-231.273c0-154.182-56.728-231.273-149.818-231.273z"
-	  horiz-adv-x="5836" transform="scale(1, -1) translate(0, -960)" fill="#fff"></path>
-</svg>
-
-
+	width="590" height="98.995" viewBox="0 0 590 98.995"
+	 enable-background="new 0 0 590 98.995" xml:space="preserve" version="1.1" id="Layer_1">
+<path transform="translate(-250 -73) scale(2.4 2.4)" fill="#fff" d="M349.338 54.142c0 9.062-7.347 16.408-16.408 16.408-9.063 0-16.409-7.347-16.409-16.408 0-9.063 7.347-16.409 16.409-16.409 9.061-.001 16.408 7.346 16.408 16.409m-16.408-8.223a8.223 8.223 0 1 0 0 16.445 8.223 8.223 0 0 0 0-16.445M262.479 54.151c0 9.062-7.346 16.406-16.406 16.406-9.062 0-16.406-7.345-16.406-16.406s7.345-16.407 16.406-16.407c9.061.001 16.406 7.347 16.406 16.407m-16.406-8.22a8.22 8.22 0 1 0 0 16.442 8.221 8.221 0 0 0 0-16.442M184.184 37.733c-1.686 0-3.132.85-3.767 2.413a16.309 16.309 0 0 0-8.535-2.413c-9.066 0-16.416 7.35-16.416 16.416 0 9.067 7.35 16.417 16.416 16.417 3.129 0 6.043-.892 8.532-2.41.633 1.563 2.081 2.41 3.77 2.41 2.272 0 4.114-1.526 4.114-4.281v-24.26c0-2.755-1.842-4.292-4.114-4.292m-12.302 24.642a8.227 8.227 0 0 1 0-16.452c4.29 0 7.81 3.286 8.188 7.478v1.495c-.378 4.193-3.898 7.479-8.188 7.479M226.841 56.421a4.081 4.081 0 0 0-4.084-4.08 4.081 4.081 0 0 0-4.082 4.08 5.981 5.981 0 0 1-5.973 5.973 5.98 5.98 0 0 1-5.972-5.973l-.002-.01V45.933h9.644c2.255 0 4.081-1.851 4.081-4.104 0-2.254-1.826-4.095-4.081-4.095h-9.665v-2.79a4.084 4.084 0 0 0-8.166 0v2.814h-3.307a4.084 4.084 0 0 0-4.083 4.082 4.083 4.083 0 0 0 4.083 4.082h3.307l-.033 10.499c0 7.762 6.562 14.137 14.194 14.137 7.796 0 14.139-6.342 14.139-14.137M313.694 66.45V51.697h-.009c-.095-7.715-6.392-13.963-14.128-13.963a14.084 14.084 0 0 0-10.069 4.23c-2.563-2.602-6.11-4.23-10.047-4.23-7.735 0-14.032 6.248-14.128 13.963h-.009V66.45a4.081 4.081 0 0 0 8.162 0V51.869h.002a5.98 5.98 0 0 1 5.973-5.97c3.295 0 5.976 2.68 5.976 5.97h.003l-.001 14.437c0 2.252 1.871 4.244 4.125 4.244s4.031-1.992 4.031-4.244l.008-14.437h.002a5.98 5.98 0 0 1 5.973-5.97 5.98 5.98 0 0 1 5.972 5.97h.003V66.45a4.08 4.08 0 1 0 8.161 0M152.64 66.438V51.685h-.009c-.095-7.715-6.392-13.963-14.128-13.963-3.94 0-7.505 1.622-10.07 4.23-2.562-2.602-6.11-4.23-10.046-4.23-7.736 0-14.033 6.248-14.128 13.963h-.009v14.753a4.081 4.081 0 0 0 8.162 0V51.856h.002a5.98 5.98 0 0 1 5.973-5.97c3.295 0 5.975 2.68 5.975 5.97h.003l-.001 14.436c0 2.252 1.871 4.245 4.125 4.245s4.031-1.993 4.031-4.245l.008-14.436h.002a5.98 5.98 0 0 1 5.973-5.97 5.98 5.98 0 0 1 5.972 5.97h.002v14.581a4.082 4.082 0 0 0 8.163.001"/></svg>
\ No newline at end of file
diff --git a/plugins/Morpheus/stylesheets/base/colors.less b/plugins/Morpheus/stylesheets/base/colors.less
index 89ec7ff92d..e026fd71d1 100644
--- a/plugins/Morpheus/stylesheets/base/colors.less
+++ b/plugins/Morpheus/stylesheets/base/colors.less
@@ -24,20 +24,23 @@
 @color-black-piwik:               #0d0d0d;
 @color-blue-piwik:                #4183C4;
 @color-red-piwik:                 #d4291f;
+@color-green-piwik:               #43a047;
 @color-green-brandSocial:         #009874;
 @color-blue-brandSocial:          #3b5998;
 @color-blue-brandSocialLight:     #1c87bd;
 @color-blue-brandSocialVeryLight: #00aced;
 @color-orange-brand:              #ff9600;
 
-@graph-colors-data-series1: #d4291f;
-@graph-colors-data-series2: #1f78b4;
+@graph-colors-data-series1: #3450A3;
+@graph-colors-data-series2: #43a047;
 @graph-colors-data-series3: #ff7f00;
-@graph-colors-data-series4: #33a02c;
+@graph-colors-data-series4: #d4291f;
 @graph-colors-data-series5: #6a3d9a;
 @graph-colors-data-series6: #b15928;
 @graph-colors-data-series7: #fdbf6f;
 @graph-colors-data-series8: #cab2d6;
+
+@default-box-shade: 0 2px 3px 0 rgba(0,0,0,0.16), 0 0px 3px 0 rgba(0,0,0,0.12);
 /*
 Qualitative data color series inspired from colorbrewer2.org/
 next ones could be: #cab2d6 #ffff99 # #b2df8a
diff --git a/plugins/Morpheus/stylesheets/base/icons.css b/plugins/Morpheus/stylesheets/base/icons.css
index 93fcff408e..f45b9d185f 100644
--- a/plugins/Morpheus/stylesheets/base/icons.css
+++ b/plugins/Morpheus/stylesheets/base/icons.css
@@ -497,3 +497,7 @@
 .icon-embed:before {
     content: "\ea80";
 }
+
+.icon-delete:hover {
+    color: #d4291f !important;
+}
diff --git a/plugins/Morpheus/stylesheets/general/_forms.less b/plugins/Morpheus/stylesheets/general/_forms.less
index cc56ae93b0..4cf5727b67 100644
--- a/plugins/Morpheus/stylesheets/general/_forms.less
+++ b/plugins/Morpheus/stylesheets/general/_forms.less
@@ -22,8 +22,8 @@
   }
 
   .form-help {
-    color: #838383;
-    background-color: #F5F5F5;
+    background-color: #eff0f1;
+    color: #76838f;
     font-size: 13px;
     padding: 20px 20px 20px 20px;
     border: 1px solid rgba(0, 0, 0, 0);
@@ -33,6 +33,8 @@
   }
 
   label {
+    color: #76838f;
+
     .form-description {
       font-size: 90%;
       font-style: italic;
@@ -64,4 +66,29 @@ input.browser-default {
   box-sizing: border-box;
   margin: 0;
   height: auto;
-}
\ No newline at end of file
+}
+
+.progress .determinate {
+  background-color: @theme-color-brand !important;
+}
+
+[type="checkbox"]:checked+label:before {
+  border-right-color: @theme-color-brand;
+  border-bottom-color: @theme-color-brand;
+}
+nav.blue-grey.darken-3 {
+  background-color: @theme-color-header-background !important;
+}
+[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after {
+  background-color: @theme-color-brand;
+  border-color: @theme-color-brand;
+}
+
+input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
+  border-bottom-color: @theme-color-brand;
+  box-shadow: 0 1px 0 0 @theme-color-brand;
+}
+
+input:not([type]):focus:not([readonly])+label, input[type=text]:focus:not([readonly])+label, input[type=password]:focus:not([readonly])+label, input[type=email]:focus:not([readonly])+label, input[type=url]:focus:not([readonly])+label, input[type=time]:focus:not([readonly])+label, input[type=date]:focus:not([readonly])+label, input[type=datetime]:focus:not([readonly])+label, input[type=datetime-local]:focus:not([readonly])+label, input[type=tel]:focus:not([readonly])+label, input[type=number]:focus:not([readonly])+label, input[type=search]:focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label {
+  color: @theme-color-brand;
+}
diff --git a/plugins/Morpheus/stylesheets/main.less b/plugins/Morpheus/stylesheets/main.less
index 1ac27adbda..db54e58b94 100644
--- a/plugins/Morpheus/stylesheets/main.less
+++ b/plugins/Morpheus/stylesheets/main.less
@@ -273,9 +273,10 @@ table.dataTable {
     thead {
         tr {
             th {
-                background: @theme-color-background-contrast;
+                background: @theme-color-background-base;
+                border-radius: 0;
+                color: @theme-color-text-contrast;
                 text-transform: uppercase;
-                color: @theme-color-text;
                 .font-default(11px, 12px);
                 padding-top: 16px;
                 padding-bottom: 16px;
diff --git a/plugins/Morpheus/stylesheets/simple_structure.css b/plugins/Morpheus/stylesheets/simple_structure.css
index 4e204a4218..0581550123 100644
--- a/plugins/Morpheus/stylesheets/simple_structure.css
+++ b/plugins/Morpheus/stylesheets/simple_structure.css
@@ -1,6 +1,7 @@
 /* Most of the code here can be removed once we switch to Bootstrap */
 body {
 	font-family: Verdana, sans-serif;
+	color: #212121;
 }
 body#simple  {
     background: #fff;
@@ -10,7 +11,7 @@ body#simple  {
     color: #888;
     text-align: center;
     font-size: 12px;
-    background-color: #37474f !important;
+    background-color: #3450A3 !important;
     padding: 15px 0;
 }
 #simple .logo a {
@@ -27,7 +28,7 @@ body#simple  {
 }
 
 #simple .box .header {
-    background-color: #f0f0f0;
+    background-color: #eff0f1;
 	padding: 40px 80px;
     text-align: center;
 }
@@ -83,7 +84,7 @@ body#simple  {
 }
 
 #simple .box .footer {
-    background-color: #f0f0f0;
+    background-color: #eff0f1;
     padding: 15px;
     text-align: center;
 }
@@ -108,6 +109,9 @@ body#simple  {
 	font-size: 45px;
 	font-weight: lighter;
 }
+a {
+	color: #1976D2;
+}
 #subh1 {
 	color: #444444;
     font-size: 17pt;
diff --git a/plugins/Morpheus/stylesheets/ui/_buttons.less b/plugins/Morpheus/stylesheets/ui/_buttons.less
index 6aaccdd9f4..ac608d2ed4 100644
--- a/plugins/Morpheus/stylesheets/ui/_buttons.less
+++ b/plugins/Morpheus/stylesheets/ui/_buttons.less
@@ -7,7 +7,6 @@ button.btn,input[type="submit"].btn, .btn {
     background: none;
     background-color: @theme-color-brand;
     color: @theme-color-brand-contrast !important;
-    #gradient > .vertical(rgba(255,255,255,.15), rgba(255,255,255,0));
     font-size: 12px;
     font-weight: normal;
     text-align: center;
diff --git a/plugins/Morpheus/stylesheets/uibase/_header.less b/plugins/Morpheus/stylesheets/uibase/_header.less
index b65a3284fe..852ee4041e 100644
--- a/plugins/Morpheus/stylesheets/uibase/_header.less
+++ b/plugins/Morpheus/stylesheets/uibase/_header.less
@@ -5,7 +5,7 @@
     padding-top: 4px;
 
     img {
-      max-height: 30px;
+      max-height: 28px;
 
       &.default-piwik-logo {
         width: 144px;
diff --git a/plugins/Morpheus/stylesheets/uibase/_headerMessage.less b/plugins/Morpheus/stylesheets/uibase/_headerMessage.less
index 1a00389f44..9e564d0980 100644
--- a/plugins/Morpheus/stylesheets/uibase/_headerMessage.less
+++ b/plugins/Morpheus/stylesheets/uibase/_headerMessage.less
@@ -9,7 +9,7 @@
   border-radius: 4px;
 
   &.update_available:not(.isPiwikDemo) .title {
-    color: #CA8100;
+    color: #f57c00;
     font-weight: bold;
     cursor: default;
   }
diff --git a/plugins/Morpheus/templates/layout.twig b/plugins/Morpheus/templates/layout.twig
index fde91939f5..8bfe0503b0 100644
--- a/plugins/Morpheus/templates/layout.twig
+++ b/plugins/Morpheus/templates/layout.twig
@@ -21,7 +21,7 @@
 
             {% include "@CoreHome/_favicon.twig" %}
             {% include "@CoreHome/_applePinnedTabIcon.twig" %}
-            <meta name="theme-color" content="#37474f">
+            <meta name="theme-color" content="#3450A3">
             {% include "_jsGlobalVariables.twig" %}
             {% include "_jsCssIncludes.twig" %}
 
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html
index 3fd9780ae2..c479798550 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html
+++ b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html
@@ -10,7 +10,7 @@
         </span>
     </h2>
 
-    <table id="mt" class="dataTable" cellspacing="0">
+    <table id="mt" class="dataTable card-table" cellspacing="0">
         <thead>
         <tr>
             <th id="names" class="label" ng-click="model.sortBy('label')" ng-class="{columnSorted: 'label' == model.sortColumn}">
@@ -125,4 +125,5 @@
 
         </tfoot>
     </table>
+
 </div>
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
index dccbb713ac..8173e4cdc8 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
+++ b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
@@ -9,7 +9,14 @@
   }
 }
 
+#mt {
+  table.dataTable td.label img {
+    margin-top: -8px;
+  }
+}
+
 #multisites {
+
   > .col {
     padding-left: 0;
     padding-right: 0;
@@ -26,6 +33,7 @@
     border: 0 !important;
     font-size: 13px;
     text-align: left;
+    padding-left: 27px;
 
     a {
       color: @theme-color-text;
@@ -103,7 +111,7 @@
 
   th:first-child {
     text-align:left;
-    padding-left: 12px;
+    padding-left: 32px;
   }
 
   th {
@@ -153,6 +161,7 @@
     text-align: left;
     width: 250px;
     max-width: 250px;
+    padding-left: 32px;
 
     a {
       width: auto;
diff --git a/plugins/PrivacyManager/angularjs/manage-gdpr/managegdpr.directive.less b/plugins/PrivacyManager/angularjs/manage-gdpr/managegdpr.directive.less
index c618566735..4495f32c0f 100644
--- a/plugins/PrivacyManager/angularjs/manage-gdpr/managegdpr.directive.less
+++ b/plugins/PrivacyManager/angularjs/manage-gdpr/managegdpr.directive.less
@@ -10,3 +10,7 @@
     width: 180px;
   }
 }
+
+.deleteDataSubjects .btn {
+  background-color: @color-red-piwik;
+}
\ No newline at end of file
diff --git a/plugins/ScheduledReports/templates/unsubscribe.twig b/plugins/ScheduledReports/templates/unsubscribe.twig
index 14684cd010..cde0fa7f83 100644
--- a/plugins/ScheduledReports/templates/unsubscribe.twig
+++ b/plugins/ScheduledReports/templates/unsubscribe.twig
@@ -19,7 +19,7 @@
     </div>
     <nav>
         <div class="nav-wrapper">
-            {% include "@CoreHome/_logo.twig" with { 'logoLink': 'https://matomo.org', 'centeredLogo': true, 'useLargeLogo': true } %}
+            {% include "@CoreHome/_logo.twig" with { 'logoLink': 'https://matomo.org', 'centeredLogo': true, 'useLargeLogo': false } %}
         </div>
     </nav>
 
diff --git a/plugins/SegmentEditor/stylesheets/segmentation.less b/plugins/SegmentEditor/stylesheets/segmentation.less
index a38df86939..8f3d973f93 100644
--- a/plugins/SegmentEditor/stylesheets/segmentation.less
+++ b/plugins/SegmentEditor/stylesheets/segmentation.less
@@ -503,3 +503,11 @@ a.metric_category {
         font-style: normal;
     }
 }
+
+.segment-element .segment-footer a.delete {
+    color: #d4291f !important;
+}
+
+.segment-element .segment-footer a {
+    color: @theme-color-link !important;
+}
diff --git a/plugins/UserCountry/stylesheets/userCountry.less b/plugins/UserCountry/stylesheets/userCountry.less
index 147666fc24..c1b5fc73ee 100644
--- a/plugins/UserCountry/stylesheets/userCountry.less
+++ b/plugins/UserCountry/stylesheets/userCountry.less
@@ -11,11 +11,11 @@ input.location-provider {
 }
 
 span.is-installed {
-    color: #009874;
+    color: @color-green-piwik;
 }
 
 span.is-broken {
-    color: #D4291F;
+    color: @color-red-piwik;
 }
 
 .loc-provider-status {