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

13 files changed, 56 insertions, 22 deletions

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" %}