- client: Use the same tooltip style everywhere

Close #1866

Squashed commit of the following:

commit 3347832caa33b01a0155b212987f02dc4824ab08
Merge: 7766502d d794b11e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 17 15:12:45 2020 +0300

    Merge branch 'master' into fix/1866

commit 7766502d4a904ad0a4d240481f7eabf0e25cfb62
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 17 12:16:59 2020 +0300

    Fix icon color classes

commit 90191bf74b5eb1855c733c226f7acb4e906c7ad9
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 17 11:46:22 2020 +0300

    Use logs icons, use pointer cursor, fix review markup formatting

commit 0ba50fcd956101f5054ce38c2329df3e8abdfcd2
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 16 18:05:30 2020 +0300

    Use help cursor on tooltips

commit bf4e14afe69f874d29be73d8cd4cfbe240ca0304
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 16 17:41:47 2020 +0300

    Use tooltip in logs, rename tooltip classes

commit 00568fdc8e8484c5bae67c51ee8189a3a558e219
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 16 17:01:49 2020 +0300

    - client: Use the same tooltip style everywhere

client/src/components/Dashboard/Counters.js

@@ -4,10 +4,10 @@ import { Trans, useTranslation } from 'react-i18next';
 import round from 'lodash/round';
 import { shallowEqual, useSelector } from 'react-redux';
 import Card from '../ui/Card';
-import IconTooltip from '../ui/IconTooltip';
 import { formatNumber } from '../../helpers/helpers';
 import LogsSearchLink from '../ui/LogsSearchLink';
 import { RESPONSE_FILTER } from '../../helpers/constants';
+import Tooltip from '../ui/Tooltip';
 
 const Row = ({
     label, count, response_status, tooltipTitle, translationComponents,
@@ -19,7 +19,12 @@ const Row = ({
     return <tr key={label}>
         <td>
             <Trans components={translationComponents}>{label}</Trans>
-            <IconTooltip text={tooltipTitle} type="tooltip-custom--narrow" />
+            <Tooltip content={tooltipTitle} placement="top"
+                     className="tooltip-container tooltip-custom--narrow text-center">
+                <svg className="icons icon--20 icon--lightgray ml-1">
+                    <use xlinkHref="#question" />
+                </svg>
+            </Tooltip>
         </td>
         <td className="text-right"><strong>{content}</strong></td>
     </tr>;

client/src/components/Dashboard/DomainCell.js

@@ -1,18 +1,67 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { getTrackerData } from '../../helpers/trackers/trackers';
-import Popover from '../ui/Popover';
+import { Trans } from 'react-i18next';
+import { getSourceData, getTrackerData } from '../../helpers/trackers/trackers';
+import Tooltip from '../ui/Tooltip';
+import { captitalizeWords } from '../../helpers/helpers';
+
+const renderLabel = (value) => <strong><Trans>{value}</Trans></strong>;
+
+const renderLink = ({ url, name }) => <a
+    className="tooltip-custom__content-link"
+    target="_blank"
+    rel="noopener noreferrer"
+    href={url}
+>
+    <strong>{name}</strong>
+</a>;
+
+
+const getTrackerInfo = (trackerData) => [{
+    key: 'name_table_header',
+    value: trackerData,
+    render: renderLink,
+},
+{
+    key: 'category_label',
+    value: captitalizeWords(trackerData.category),
+    render: renderLabel,
+},
+{
+    key: 'source_label',
+    value: getSourceData(trackerData),
+    render: renderLink,
+}];
 
 const DomainCell = ({ value }) => {
     const trackerData = getTrackerData(value);
 
+    const content = trackerData && <div className="popover__list">
+        <div className="tooltip-custom__content-title mb-1">
+            <Trans>found_in_known_domain_db</Trans>
+        </div>
+        {getTrackerInfo(trackerData)
+            .map(({ key, value, render }) => <div
+                key={key}
+                className="tooltip-custom__content-item"
+            >
+                <Trans>{key}</Trans>: {render(value)}
+            </div>)}
+    </div>;
+
     return (
         <div className="logs__row">
             <div className="logs__text" title={value}>
                 {value}
             </div>
-            {trackerData && <Popover data={trackerData} />}
+            {trackerData
+            && <Tooltip content={content} placement="top"
+                        className="tooltip-container tooltip-custom--wide">
+                <svg className="icons icon--24 icon--green ml-1">
+                    <use xlinkHref="#privacy" />
+                </svg>
+            </Tooltip>}
         </div>
     );
 };
@@ -21,4 +70,9 @@ DomainCell.propTypes = {
     value: PropTypes.string.isRequired,
 };
 
+renderLink.propTypes = {
+    url: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+};
+
 export default DomainCell;