Fix icon align of outlinks in datatables (#16492)

* Fix icon align of outlinks in datatables

* improve styling

* Move datatable icons to matomo font

* replace icon in multisites report

* improve css

* improve css so it looks good on all os/browser

* small adjustments

* Adjust multisites data table

* updates expected screenshots

* move plus/minus icon one pixel down

* move outlink icon one pixel down

* updates expected screenshots

* improve icon css

* increase size of plus/minus icon

* updates expected screenshots

* updates submodules

* fix ui test

5 files changed, 17 insertions, 35 deletions

diff --git a/plugins/CoreHome/stylesheets/dataTable/_comparisonsTable.less b/plugins/CoreHome/stylesheets/dataTable/_comparisonsTable.less
index aa5e3f861b..3350c25880 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_comparisonsTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_comparisonsTable.less
@@ -29,6 +29,8 @@
   td.label .prefix-numeral {
     display: inline-block;
     width: 20px;
+    .font-default(13px, 18px);
+    vertical-align: text-bottom;
   }
 
   .totalsRow,.summaryRow {
@@ -57,10 +59,6 @@ tr.comparePeriod, tr.comparisonRow {
 }
 
 tr.parentComparisonRow {
-  td.label img.plusMinus {
-    margin-right: 8px;
-  }
-
   &.level1 td.label {
     padding-left: 44px !important;
   }
diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index 723eaabee3..a9ed6b920d 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -18,6 +18,8 @@
     text-align: right;
     margin-right: 4px;
     font-weight: normal;
+    .font-default(13px, 18px);
+    vertical-align: text-bottom;
   }
 
   td.highlight > .ratio {
@@ -40,7 +42,7 @@ table.subDataTable td.label {
 
 table.dataTable img,
 table.subDataTable img {
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 
 table.dataTable img {
@@ -49,13 +51,13 @@ table.dataTable img {
   margin-left: 0.5em;
 }
 
-table.dataTable tr:not(.parentComparisonRow) img.link {
-  position: relative;
-  top: 5px;
-}
-
-table.subDataTable img.link {
-  transform: translateY(-50%);
+table.dataTable tr td .icon-outlink {
+  color: #aaa;
+  margin-right: 0.5em;
+  vertical-align: bottom;
+  .font-default(13px, 18px);
+  padding-left: 1px;
+  display: inline-block;
 }
 
 table.dataTable tr.subDataTable {
@@ -123,7 +125,7 @@ table.dataTable th.columnSorted {
 }
 
 table.dataTable td {
-  padding: 5px 0px 5px 12px;
+  padding: 5px 0 5px 12px;
   background: @theme-color-background-base;
   z-index: 99;
 }
@@ -510,24 +512,10 @@ tr.level12 td.label {
   padding-left: 9em !important;
 }
 
-/* less right margins for the link image in the Pa*/
-.dataTableActions table.dataTable img.link {
-  margin-right: 0.5em;
-  margin-left: 1px;
-  margin-bottom: 4px;
-  vertical-align: text-bottom;
-}
-
 table.dataTable td.label img {
   max-height: 16px; 
 }
 
-tr td.label img.plusMinus {
-  margin-left: -3px;
-  margin-right: 6px;
-  margin-top: 0;
-}
-
 .pk-emptyDataTable {
   padding-top: 20px;
   padding-bottom: 10px;
diff --git a/plugins/CoreHome/stylesheets/dataTable/_rowActions.less b/plugins/CoreHome/stylesheets/dataTable/_rowActions.less
index 8353101ef8..e059898521 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_rowActions.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_rowActions.less
@@ -3,7 +3,7 @@ table.dataTable .dataTableRowActions {
   position: absolute;
   display: none;
   overflow: hidden;
-  margin-top: -5px;
+  margin-top: -6px;
   background-color: inherit !important;
   z-index: 1000; /* Work around FF bug to make sure it displays over ellipsis */
 }
diff --git a/plugins/CoreHome/stylesheets/zen-mode.less b/plugins/CoreHome/stylesheets/zen-mode.less
index 42b557da85..9cad06cd87 100644
--- a/plugins/CoreHome/stylesheets/zen-mode.less
+++ b/plugins/CoreHome/stylesheets/zen-mode.less
@@ -27,12 +27,9 @@
     tr.subDataTable {
       font-weight: normal !important;
     }
-    tr.subDataTable td.label .plusMinus + .label .value {
-      font-weight: bold !important;
-    }
     tr td {
-      padding-top: 11px;
-      padding-bottom: 11px;
+      padding-top: 10px;
+      padding-bottom: 9px;
     }
   }
 
diff --git a/plugins/CoreHome/templates/_dataTableCell.twig b/plugins/CoreHome/templates/_dataTableCell.twig
index 2021a75262..8f58c15029 100644
--- a/plugins/CoreHome/templates/_dataTableCell.twig
+++ b/plugins/CoreHome/templates/_dataTableCell.twig
@@ -6,8 +6,7 @@
        target="_blank"
        href='{% if row.getMetadata('url')|slice(0,4) not in ['http','ftp:'] %}http://{% endif %}{{ row.getMetadata('url')|rawSafeDecoded }}'>
     {% if not row.getMetadata('logo') %}
-        <img class="link" width="10" height="9"
-             src="plugins/Morpheus/images/link.png"/>
+        <span class="icon-outlink"></span>
     {% endif %}
 {% endif %}