Improve site without data page (#18462)

* Improve site without data page

* updates expected screenshots

* use less mixin for matomo font css

* fix typo

* updates expected test files

* Wording tweaks

* Updated UI test screenshots

Co-authored-by: Justin Velluppillai <justin@innocraft.com>

10 files changed, 34 insertions, 35 deletions

diff --git a/plugins/Live/stylesheets/live.less b/plugins/Live/stylesheets/live.less
index 5f121dce8c..7d4d87ea37 100644
--- a/plugins/Live/stylesheets/live.less
+++ b/plugins/Live/stylesheets/live.less
@@ -223,17 +223,7 @@ ol.actionList > li:not(.pageviewActions) {
       margin-top: 2px;
       float: left;
       margin-right: 5px;
-
-      // copied frim [class^=icon-] style
-      font-family: 'matomo' !important;
-      speak: none;
-      font-style: normal;
-      font-weight: normal;
-      font-variant: normal;
-      text-transform: none;
-      line-height: 1;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
+      .matomo-icon();
     }
   }
 }
diff --git a/plugins/Live/stylesheets/visitor_profile.less b/plugins/Live/stylesheets/visitor_profile.less
index 0fd91fb8fd..aa199cdfd5 100644
--- a/plugins/Live/stylesheets/visitor_profile.less
+++ b/plugins/Live/stylesheets/visitor_profile.less
@@ -78,12 +78,12 @@
   margin-right: 5px;
 
   &:before {
+    .matomo-icon();
     color: #000;
     background-color: #fff;
     font-size: 16px;
     line-height: 16px;
     font-weight: 400;
-    font-family: matomo;
     padding: 1px;
     height: 18px;
     display: block;
diff --git a/plugins/Morpheus/stylesheets/base/mixins.less b/plugins/Morpheus/stylesheets/base/mixins.less
index 5028d33592..ddb5502633 100644
--- a/plugins/Morpheus/stylesheets/base/mixins.less
+++ b/plugins/Morpheus/stylesheets/base/mixins.less
@@ -20,6 +20,19 @@ strong {
   line-height: @line;
 }
 
+.matomo-icon() {
+  /* copied from icons.css */
+  font-family: 'matomo' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .border-radius (@radius: 6px) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
diff --git a/plugins/Morpheus/stylesheets/general/_jqueryUI.less b/plugins/Morpheus/stylesheets/general/_jqueryUI.less
index 744605f6bf..ac3db8f80b 100644
--- a/plugins/Morpheus/stylesheets/general/_jqueryUI.less
+++ b/plugins/Morpheus/stylesheets/general/_jqueryUI.less
@@ -294,12 +294,9 @@ body .ui-tooltip.small {
 }
 
 .ui-dialog-titlebar .ui-icon-closethick {
-  font-family: 'matomo';
+  .matomo-icon();
+  line-height: inherit;
   font-weight: bold;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   font-size: 8px;
   background-image: none !important;
   text-indent: 0 !important;
diff --git a/plugins/Morpheus/stylesheets/main.less b/plugins/Morpheus/stylesheets/main.less
index 647c27c28f..af452f5fb4 100644
--- a/plugins/Morpheus/stylesheets/main.less
+++ b/plugins/Morpheus/stylesheets/main.less
@@ -499,14 +499,7 @@ div.dataTableVizHtmlTable,
  div.dataTableVizAllColumns,
  div.dataTableVizGoals {
   tr.subDataTable > td > span.label::before {
-    font-family: 'matomo' !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    .matomo-icon();
     .font-default(16px, 18px);
     color: #aaa;
     margin-right: 8px;
diff --git a/plugins/SitesManager/lang/en.json b/plugins/SitesManager/lang/en.json
index 191e280211..51b1ada059 100644
--- a/plugins/SitesManager/lang/en.json
+++ b/plugins/SitesManager/lang/en.json
@@ -75,10 +75,10 @@
         "ShowTrackingTag": "View Tracking code",
         "Sites": "Websites",
         "SiteSearchUse": "You can use Matomo to track and report what visitors are searching in your website's internal search engine.",
-        "SiteWithoutDataTitle": "No data has been recorded yet, get set up below",
-        "SiteWithoutDataDescription": "Only one last step to track your web traffic with Matomo and gain valuable insights. You need to add some extra code to your website or mobile app if you haven't done already. Check your option below or %1$ssend all the instructions to a team mate%2$s.",
-        "SiteWithoutDataSetupTracking": "Please set up the %1$stracking code%2$s below into your website or mobile app if you haven't done already.",
-        "SiteWithoutDataMessageDisappears": "This message will disappear as soon as some data was tracked for this website.",
+        "SiteWithoutDataTitle": "Only one last step to track your traffic with Matomo and gain valuable insights",
+        "SiteWithoutDataDescription": "You need to add some extra code to your website or mobile app if you haven't already. Check your option below or %1$ssend all the instructions to a team mate%2$s.",
+        "SiteWithoutDataSetupTracking": "Please set up the %1$stracking code%2$s below into your website or mobile app if you haven't already.",
+        "SiteWithoutDataMessageDisappears": "This message will disappear as soon as some data is tracked for this website.",
         "SiteWithoutDataIgnoreMessage": "Don't show this message for the next hour",
         "SiteWithoutDataChoosePreferredWay": "Choose your preferred way of getting set up",
         "SiteWithoutDataOtherWays": "Other ways",
@@ -87,7 +87,7 @@
         "SiteWithoutDataMatomoTagManager": "Matomo Tag Manager",
         "SiteWithoutDataMatomoTagManagerNotActive": "Don't know what a Tag Manager is? Check out our %1$sTag Manager guide%2$s. If you are embedding multiple resources from 3rd party websites into your website, then tracking your website using the Tag Manager may be a better choice for you compared to using the regular JavaScript tracking.",
         "SiteWithoutDataGoogleTagManagerDescription": "You can use Matomo with Google Tag Manager. To setup Matomo Tracking in Google Tag Manager, follow the instructions from this %1$sguide%2$s.",
-        "SiteWithoutDataDetectedSite": "We've detected you're using a %1$s site. Simple follow the instructions from this %2$sguide%3$s.",
+        "SiteWithoutDataDetectedSite": "We've detected you're using a %1$s site. Simply follow the instructions from this %2$sguide%3$s.",
         "SiteWithoutDataDetectedGtm": "We've also detected you're using a Google Tag Manager. If you prefer to set up Matomo using GTM please follow this %2$sguide%3$s.",
         "SuperUserAccessCan": "A user with Super User access can also %1$s specify global settings%2$s for new websites.",
         "Timezone": "Time zone",
@@ -117,4 +117,4 @@
         "EmailInstructionsYourTrackingUrl": "Your tracking URL: %1$s",
         "DetectingYourSite": "Detecting your site"
     }
-}
\ No newline at end of file
+}
diff --git a/plugins/SitesManager/stylesheets/SitesManager.less b/plugins/SitesManager/stylesheets/SitesManager.less
index 3fcff25546..0651e40ef4 100644
--- a/plugins/SitesManager/stylesheets/SitesManager.less
+++ b/plugins/SitesManager/stylesheets/SitesManager.less
@@ -118,6 +118,11 @@ td.editable-site-field:hover {
 }
 
 .site-without-data {
+    .card-title:after {
+        content: " \e9a5"; // icon-rocket
+        .matomo-icon();
+    }
+
     h3 {
         font-weight: bold;
     }
diff --git a/plugins/SitesManager/templates/siteWithoutData.twig b/plugins/SitesManager/templates/siteWithoutData.twig
index f5da6d405f..21665cc52c 100644
--- a/plugins/SitesManager/templates/siteWithoutData.twig
+++ b/plugins/SitesManager/templates/siteWithoutData.twig
@@ -27,6 +27,7 @@
     <div class="site-without-data">
         <div piwik-content-block content-title="{{ 'SitesManager_SiteWithoutDataTitle'|translate|e('html_attr') }}">
 
+            <p>&nbsp;</p>
             <p>{{ 'SitesManager_SiteWithoutDataDescription'|translate('<a href="mailto:?subject=' ~ 'SitesManager_EmailInstructionsSubject'|translate|url_encode|e('html_attr') ~ '&body=' ~ emailBody|url_encode|e('html_attr') ~ '">', '</a>')|raw }}</p>
             <p>{{ 'SitesManager_SiteWithoutDataMessageDisappears'|translate }}</p>
 
diff --git a/tests/UI/expected-screenshots/EmptySite_emptySiteDashboard.png b/tests/UI/expected-screenshots/EmptySite_emptySiteDashboard.png
index 77b41a9fe2..9d15448e76 100644
--- a/tests/UI/expected-screenshots/EmptySite_emptySiteDashboard.png
+++ b/tests/UI/expected-screenshots/EmptySite_emptySiteDashboard.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:accb79f60be4d13cdc2756410380a0e19c9b15a868a204c0857a91a595785268
-size 151171
+oid sha256:c5b7d1edfbde377ba4d1b516540f310a6766e4d0ab521ebe90c668aa0b5d2f95
+size 148409
diff --git a/tests/UI/expected-screenshots/OneClickUpdate_login.png b/tests/UI/expected-screenshots/OneClickUpdate_login.png
index 58f72315e7..474d7e6aa0 100644
--- a/tests/UI/expected-screenshots/OneClickUpdate_login.png
+++ b/tests/UI/expected-screenshots/OneClickUpdate_login.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6d116ad0e8509086043d3166a891b7c92b79ed03ffcab362531e8460856e5998
-size 87530
+oid sha256:9adfdf87aee9bbe915e648506599d392ca750d7d503c522fd15d47c775e6b208
+size 85079