- 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/Logs/Cells/getIconTooltip.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Trans } from 'react-i18next';
+import classNames from 'classnames';
+import { processContent } from '../../../helpers/helpers';
+import Tooltip from '../../ui/Tooltip';
+import 'react-popper-tooltip/dist/styles.css';
+import './IconTooltip.css';
+
+const getIconTooltip = ({
+    className,
+    contentItemClass,
+    columnClass,
+    canShowTooltip = true,
+    xlinkHref,
+    title,
+    placement,
+    tooltipClass,
+    content,
+    renderContent = content ? React.Children.map(
+        processContent(content),
+        (item, idx) => <div key={idx} className={contentItemClass}>
+            <Trans>{item || '—'}</Trans>
+        </div>,
+    ) : null,
+}) => {
+    const tooltipContent = <>
+        {title
+        && <div className="pb-4 h-25 grid-content font-weight-bold"><Trans>{title}</Trans></div>}
+        <div className={classNames(columnClass)}>{renderContent}</div>
+    </>;
+
+    const tooltipClassName = classNames('tooltip-custom__container', tooltipClass, { 'd-none': !canShowTooltip });
+
+    return <Tooltip
+        className={tooltipClassName}
+        content={tooltipContent}
+        placement={placement}
+    >
+        {xlinkHref && <svg className={className}>
+            <use xlinkHref={`#${xlinkHref}`} />
+        </svg>}
+    </Tooltip>;
+};
+
+getIconTooltip.propTypes = {
+    className: PropTypes.string,
+    contentItemClass: PropTypes.string,
+    columnClass: PropTypes.string,
+    tooltipClass: PropTypes.string,
+    title: PropTypes.string,
+    placement: PropTypes.string,
+    canShowTooltip: PropTypes.string,
+    xlinkHref: PropTypes.string,
+    content: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.array,
+    ]),
+    renderContent: PropTypes.arrayOf(PropTypes.element),
+};
+
+export default getIconTooltip;