- 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/IconTooltip.css

@@ -1,4 +1,4 @@
-.tooltip__container {
+.tooltip-custom__container {
     padding: 1rem 1.5rem 1.25rem 1.5rem;
     font-size: 16px !important;
     box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);

client/src/components/Logs/Cells/getClientCell.js

@@ -3,7 +3,7 @@ import { nanoid } from 'nanoid';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { formatClientCell } from '../../../helpers/formatClientCell';
-import getHintElement from './getHintElement';
+import getIconTooltip from './getIconTooltip';
 import { checkFiltered } from '../../../helpers/helpers';
 import { BLOCK_ACTIONS } from '../../../helpers/constants';
 
@@ -37,7 +37,7 @@ const getClientCell = ({
         'white-space--nowrap': isDetailed,
     });
 
-    const hintClass = classNames('icons mr-4 icon--small cursor--pointer icon--light-gray', {
+    const hintClass = classNames('icons mr-4 icon--24 icon--lightgray', {
         'my-3': isDetailed,
     });
 
@@ -68,7 +68,7 @@ const getClientCell = ({
 
     return (
         <div className="logs__row o-hidden h-100">
-            {getHintElement({
+            {getIconTooltip({
                 className: hintClass,
                 columnClass: 'grid grid--limited',
                 tooltipClass: 'px-5 pb-5 pt-4 mw-75',

client/src/components/Logs/Cells/getDomainCell.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import getHintElement from './getHintElement';
+import getIconTooltip from './getIconTooltip';
 import {
     DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
     LONG_TIME_FORMAT,
@@ -21,14 +21,14 @@ const getDomainCell = (props) => {
 
     const hasTracker = !!tracker;
 
-    const lockIconClass = classNames('icons icon--small d-none d-sm-block cursor--pointer', {
-        'icon--active': answer_dnssec,
+    const lockIconClass = classNames('icons icon--24 d-none d-sm-block', {
+        'icon--green': answer_dnssec,
         'icon--disabled': !answer_dnssec,
         'my-3': isDetailed,
     });
 
-    const privacyIconClass = classNames('icons mx-2 icon--small d-none d-sm-block cursor--pointer', {
-        'icon--active': hasTracker,
+    const privacyIconClass = classNames('icons mx-2 icon--24 d-none d-sm-block', {
+        'icon--green': hasTracker,
         'icon--disabled': !hasTracker,
         'my-3': isDetailed,
     });
@@ -72,7 +72,7 @@ const getDomainCell = (props) => {
 
     const renderContent = hasTracker ? requestDetails.concat(getGrid(knownTrackerDataObj, 'known_tracker', 'pt-4')) : requestDetails;
 
-    const trackerHint = getHintElement({
+    const trackerHint = getIconTooltip({
         className: privacyIconClass,
         tooltipClass: 'pt-4 pb-5 px-5 mw-75',
         xlinkHref: 'privacy',
@@ -90,7 +90,7 @@ const getDomainCell = (props) => {
 
     return (
         <div className="logs__row o-hidden">
-            {dnssec_enabled && getHintElement({
+            {dnssec_enabled && getIconTooltip({
                 className: lockIconClass,
                 tooltipClass: 'py-4 px-5 pb-45',
                 canShowTooltip: answer_dnssec,

client/src/components/Logs/Cells/getIconTooltip.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import TooltipTrigger from 'react-popper-tooltip';
 import { Trans } from 'react-i18next';
 import classNames from 'classnames';
-import './Tooltip.css';
-import 'react-popper-tooltip/dist/styles.css';
-import { HIDE_TOOLTIP_DELAY } from '../../../helpers/constants';
 import { processContent } from '../../../helpers/helpers';
+import Tooltip from '../../ui/Tooltip';
+import 'react-popper-tooltip/dist/styles.css';
+import './IconTooltip.css';
 
-const getHintElement = ({
+const getIconTooltip = ({
     className,
     contentItemClass,
     columnClass,
@@ -24,30 +23,27 @@ const getHintElement = ({
             <Trans>{item || '—'}</Trans>
         </div>,
     ) : null,
-}) => <TooltipTrigger placement={placement} trigger="hover" delayHide={HIDE_TOOLTIP_DELAY} tooltip={
-    ({
-        tooltipRef,
-        getTooltipProps,
-    }) => <div {...getTooltipProps({
-        ref: tooltipRef,
-        className: classNames('tooltip__container', tooltipClass, { 'd-none': !canShowTooltip }),
-    })}
-    >
-        {title && <div className="pb-4 h-25 grid-content font-weight-bold">
-            <Trans>{title}</Trans>
-        </div>}
+}) => {
+    const tooltipContent = <>
+        {title
+        && <div className="pb-4 h-25 grid-content font-weight-bold"><Trans>{title}</Trans></div>}
         <div className={classNames(columnClass)}>{renderContent}</div>
-    </div>
-}>{({
-    getTriggerProps, triggerRef,
-}) => <span {...getTriggerProps({ ref: triggerRef })}>
-            {xlinkHref && <svg className={className}>
-                <use xlinkHref={`#${xlinkHref}`} />
-            </svg>}
-  </span>}
-</TooltipTrigger>;
+    </>;
 
-getHintElement.propTypes = {
+    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,
@@ -63,4 +59,4 @@ getHintElement.propTypes = {
     renderContent: PropTypes.arrayOf(PropTypes.element),
 };
 
-export default getHintElement;
+export default getIconTooltip;

client/src/components/Logs/Cells/getResponseCell.js

@@ -5,7 +5,7 @@ import {
     FILTERED_STATUS,
     FILTERED_STATUS_TO_META_MAP,
 } from '../../../helpers/constants';
-import getHintElement from './getHintElement';
+import getIconTooltip from './getIconTooltip';
 
 const getResponseCell = (row, filtering, t, isDetailed, getFilterName) => {
     const {
@@ -95,8 +95,8 @@ const getResponseCell = (row, filtering, t, isDetailed, getFilterName) => {
 
     return (
         <div className="logs__row">
-            {getHintElement({
-                className: classNames('icons mr-4 icon--small cursor--pointer icon--light-gray', { 'my-3': isDetailed }),
+            {getIconTooltip({
+                className: classNames('icons mr-4 icon--24 icon--lightgray', { 'my-3': isDetailed }),
                 columnClass: 'grid grid--limited',
                 tooltipClass: 'px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details',
                 contentItemClass: 'text-truncate key-colon o-hidden',