- 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
2024-11-15 18:08:30 -07:00 · 2020-07-17 15:24:39 +03:00 · 2020-07-17 15:24:39 +03:00 · 7d2c7a61f1
commit 7d2c7a61f1
parent d794b11e7a
30 changed files with 251 additions and 459 deletions
--- a/client/src/components/Dashboard/Counters.js
+++ b/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>;
--- a/client/src/components/Dashboard/DomainCell.js
+++ b/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;
--- a/client/src/components/Filters/Rewrites/Table.js
+++ b/client/src/components/Filters/Rewrites/Table.js
@ -63,11 +63,11 @@ class Table extends Component {
                defaultPageSize={10}
                minRows={5}
                previousText={
-                    <svg className="icons icon--small icon--gray">
+                    <svg className="icons icon--24 icon--gray">
                        <use xlinkHref="#arrow-left" />
                    </svg>}
                nextText={
-                    <svg className="icons icon--small icon--gray">
+                    <svg className="icons icon--24 icon--gray">
                        <use xlinkHref="#arrow-right" />
                    </svg>}
                loadingText={t('loading_table_status')}
--- a/client/src/components/Filters/Table.js
+++ b/client/src/components/Filters/Table.js
@ -139,11 +139,11 @@ class Table extends Component {
                noDataText={whitelist ? t('no_whitelist_added') : t('no_blocklist_added')}
                getPaginationProps={() => ({ className: 'custom-pagination' })}
                previousText={
-                    <svg className="icons icon--small icon--gray w-100 h-100">
+                    <svg className="icons icon--24 icon--gray w-100 h-100">
                        <use xlinkHref="#arrow-left" />
                    </svg>}
                nextText={
-                    <svg className="icons icon--small icon--gray w-100 h-100">
+                    <svg className="icons icon--24 icon--gray w-100 h-100">
                        <use xlinkHref="#arrow-right" />
                    </svg>}
            />
--- a/client/src/components/Header/Header.css
+++ b/client/src/components/Header/Header.css
@ -1,6 +1,6 @@
 .nav-tabs .nav-link.active {
-    border-color: #66b574;
-    color: #66b574;
+    border-color: var(--green-74);
+    color: var(--green-74);
    background: transparent;
 }

@ -18,7 +18,7 @@

 .nav-tabs .nav-link.active .nav-icon,
 .nav-tabs .nav-item.show .nav-icon {
-    stroke: #66b574;
+    stroke: var(--green-74);
 }

 .nav-tabs .nav-link.active:hover .nav-icon,
@ -74,9 +74,9 @@
 }

 .nav-tabs .nav-item.show .nav-link {
-    color: #66b574;
+    color: var(--green-74);
    background-color: #fff;
-    border-bottom-color: #66b574;
+    border-bottom-color: var(--green-74);
 }

 .header__right {
--- a/client/src/components/Logs/Cells/IconTooltip.css
+++ b/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);
--- a/client/src/components/Logs/Cells/getClientCell.js
+++ b/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',
--- a/client/src/components/Logs/Cells/getDomainCell.js
+++ b/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,
--- a/client/src/components/Logs/Cells/getIconTooltip.js
+++ b/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 })}>
+    </>;
+
+    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>}
-  </span>}
-</TooltipTrigger>;
+    </Tooltip>;
+};

-getHintElement.propTypes = {
+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;
--- a/client/src/components/Logs/Cells/getResponseCell.js
+++ b/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',
--- a/client/src/components/Logs/Filters/Form.js
+++ b/client/src/components/Logs/Filters/Form.js
@ -12,10 +12,10 @@ import {
    RESPONSE_FILTER,
    RESPONSE_FILTER_QUERIES,
 } from '../../../helpers/constants';
-import IconTooltip from '../../ui/IconTooltip';
 import { setLogsFilter } from '../../../actions/queryLogs';
 import useDebounce from '../../../helpers/useDebounce';
 import { createOnBlurHandler, getLogsUrlParams } from '../../../helpers/helpers';
+import Tooltip from '../../ui/Tooltip';

 const renderFilterField = ({
    input,
@ -35,7 +35,7 @@ const renderFilterField = ({

    return <>
        <div className="input-group-search input-group-search__icon--magnifier">
-            <svg className="icons icon--small icon--gray">
+            <svg className="icons icon--24 icon--gray">
                <use xlinkHref="#magnifier" />
            </svg>
        </div>
@ -53,12 +53,16 @@ const renderFilterField = ({
        />
        <div
            className={classNames('input-group-search input-group-search__icon--cross', { invisible: input.value.length < 1 })}>
-            <svg className="icons icon--smallest icon--gray" onClick={onClearInputClick}>
+            <svg className="icons icon--20 icon--gray" onClick={onClearInputClick}>
                <use xlinkHref="#cross" />
            </svg>
        </div>
        <span className="input-group-search input-group-search__icon--tooltip">
-        <IconTooltip text={tooltip} type='tooltip-custom--logs' />
+            <Tooltip content={tooltip} className="tooltip-container">
+                <svg className="icons icon--20 icon--gray">
+                    <use xlinkHref="#question" />
+                </svg>
+            </Tooltip>
    </span>
        {!disabled
        && touched
--- a/client/src/components/Logs/Filters/index.js
+++ b/client/src/components/Logs/Filters/index.js
@ -12,7 +12,7 @@ const Filters = ({ filter, refreshLogs, setIsLoading }) => (
                    className="btn btn-icon--green ml-3 bg-transparent"
                    onClick={refreshLogs}
                >
-                    <svg className="icons icon--small">
+                    <svg className="icons icon--24">
                        <use xlinkHref="#update" />
                    </svg>
                </button>
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@ -399,10 +399,6 @@
    top: 0.5rem;
 }

-.icon--light-gray {
-    color: var(--gray-8);
-}
-
 .link--green {
    color: var(--green79);
 }
--- a/client/src/components/Logs/Table.js
+++ b/client/src/components/Logs/Table.js
@ -154,27 +154,23 @@ const Table = (props) => {
            headerClassName: 'logs__text',
        },
        {
-            Header: () => {
-                const plainSelected = classNames('cursor--pointer', {
-                    'icon--selected': !isDetailed,
-                });
-
-                const detailedSelected = classNames('cursor--pointer', {
-                    'icon--selected': isDetailed,
-                });
-
+            Header: function Header() {
                return <div className="d-flex justify-content-between">
                    {t('client_table_header')}
                    {<span>
                        <svg
-                            className={`icons icon--small icon--active mr-2 cursor--pointer ${plainSelected}`}
+                            className={classNames('icons icon--24 icon--green mr-2 cursor--pointer', {
+                                'icon--selected': !isDetailed,
+                            })}
                            onClick={() => toggleDetailedLogs(false)}
                        >
                            <title><Trans>compact</Trans></title>
                            <use xlinkHref='#list' />
                        </svg>
                    <svg
-                        className={`icons icon--small icon--active cursor--pointer ${detailedSelected}`}
+                        className={classNames('icons icon--24 icon--green cursor--pointer', {
+                            'icon--selected': isDetailed,
+                        })}
                        onClick={() => toggleDetailedLogs(true)}
                    >
                        <title><Trans>default</Trans></title>
@ -261,12 +257,12 @@ const Table = (props) => {
            getPaginationProps={() => ({ className: 'custom-pagination custom-pagination--padding' })}
            getTbodyProps={() => ({ className: 'd-block' })}
            previousText={
-                <svg className="icons icon--small icon--gray w-100 h-100 cursor--pointer">
+                <svg className="icons icon--24 icon--gray w-100 h-100 cursor--pointer">
                    <title><Trans>previous_btn</Trans></title>
                    <use xlinkHref="#arrow-left" />
                </svg>}
            nextText={
-                <svg className="icons icon--small icon--gray w-100 h-100 cursor--pointer">
+                <svg className="icons icon--24 icon--gray w-100 h-100 cursor--pointer">
                    <title><Trans>next_btn</Trans></title>
                    <use xlinkHref="#arrow-right" />
                </svg>}
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@ -245,7 +245,7 @@ const Logs = (props) => {
                           }}
                    >
                        <svg
-                            className="icon icon--small icon-cross d-block d-md-none cursor--pointer"
+                            className="icon icon--24 icon-cross d-block d-md-none cursor--pointer"
                            onClick={closeModal}>
                            <use xlinkHref="#cross" />
                        </svg>
--- a/client/src/components/Settings/Clients/AutoClients.js
+++ b/client/src/components/Settings/Clients/AutoClients.js
@ -89,11 +89,11 @@ class AutoClients extends Component {
                    showPageJump={false}
                    renderTotalPagesCount={() => false}
                    previousText={
-                        <svg className="icons icon--small icon--gray w-100 h-100">
+                        <svg className="icons icon--24 icon--gray w-100 h-100">
                            <use xlinkHref="#arrow-left" />
                        </svg>}
                    nextText={
-                        <svg className="icons icon--small icon--gray w-100 h-100">
+                        <svg className="icons icon--24 icon--gray w-100 h-100">
                            <use xlinkHref="#arrow-right" />
                        </svg>}
                    loadingText={t('loading_table_status')}
--- a/client/src/components/Settings/Clients/ClientsTable.js
+++ b/client/src/components/Settings/Clients/ClientsTable.js
@ -301,11 +301,11 @@ class ClientsTable extends Component {
                        showPageJump={false}
                        renderTotalPagesCount={() => false}
                        previousText={
-                            <svg className="icons icon--small icon--gray w-100 h-100">
+                            <svg className="icons icon--24 icon--gray w-100 h-100">
                                <use xlinkHref="#arrow-left" />
                            </svg>}
                        nextText={
-                            <svg className="icons icon--small icon--gray w-100 h-100">
+                            <svg className="icons icon--24 icon--gray w-100 h-100">
                                <use xlinkHref="#arrow-right" />
                            </svg>}
                        loadingText={t('loading_table_status')}
--- a/client/src/components/Settings/Clients/Form.js
+++ b/client/src/components/Settings/Clients/Form.js
@ -88,7 +88,7 @@ const renderFieldsWrapper = (placeholder, buttonTitle) => function cell(row) {
                onClick={() => fields.push()}
                title={buttonTitle}
            >
-                <svg className="icon icon--small">
+                <svg className="icon icon--24">
                    <use xlinkHref="#plus" />
                </svg>
            </button>
--- a/client/src/components/ui/Dropdown.css
+++ b/client/src/components/ui/Dropdown.css
@ -1,6 +1,6 @@
 .dropdown-item.active,
 .dropdown-item:active {
-    background-color: #66b574;
+    background-color: var(--green-74);
 }

 .dropdown-menu {
--- a/client/src/components/ui/IconTooltip.css
+++ b/client/src/components/ui/IconTooltip.css
@ -1,73 +0,0 @@
-.tooltip-custom {
-    position: relative;
-    top: -1px;
-    display: inline-block;
-    vertical-align: middle;
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-    background-image: url("./svg/help-circle.svg");
-    background-size: 100%;
-    cursor: pointer;
-}
-
-.tooltip-custom:before {
-    content: attr(data-tooltip);
-    display: block;
-    position: absolute;
-    bottom: calc(100% + 10px);
-    left: 50%;
-    padding: 10px 15px;
-    font-size: 0.85rem;
-    text-align: center;
-    color: #fff;
-    background-color: #585965;
-    border-radius: 3px;
-    transform: translateX(-50%);
-    visibility: hidden;
-    opacity: 0;
-}
-
-.tooltip-custom:after {
-    content: "";
-    position: relative;
-    top: -7px;
-    left: calc(50% - 6px);
-    visibility: hidden;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top: 6px solid #585965;
-}
-
-.tooltip-custom:hover:before,
-.tooltip-custom:hover:after {
-    visibility: visible;
-    opacity: 1;
-}
-
-.tooltip-custom--narrow:before {
-    width: 220px;
-}
-
-.tooltip-custom--logs {
-    border-radius: 50%;
-    background-image: url("./svg/help-circle-gray.svg");
-}
-
-.tooltip-custom--logs:before {
-    bottom: initial;
-    top: calc(100% + 10px);
-    right: -10px;
-    left: initial;
-    width: 255px;
-    transform: none;
-}
-
-.tooltip-custom--logs:after {
-    top: 8px;
-    border-top: none;
-    border-bottom: 6px solid #585965;
-}
--- a/client/src/components/ui/IconTooltip.js
+++ b/client/src/components/ui/IconTooltip.js
@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import './IconTooltip.css';
-import { useTranslation } from 'react-i18next';
-
-const IconTooltip = ({ text, type = '' }) => {
-    const { t } = useTranslation();
-
-    return <div data-tooltip={t(text)}
-                className={`tooltip-custom ml-1 ${type}`} />;
-};
-
-IconTooltip.propTypes = {
-    text: PropTypes.string.isRequired,
-    type: PropTypes.string,
-};
-
-export default IconTooltip;
--- a/client/src/components/ui/Icons.css
+++ b/client/src/components/ui/Icons.css
@ -4,24 +4,36 @@
    height: 100%;
 }

-.icon--small {
-    width: 1.5rem;
-    height: 1.5rem;
+.icon--24 {
+    --size: 1.5rem;
+    width: var(--size);
+    height: var(--size);
 }

-.icon--smallest {
-    width: 1.2rem;
-    height: 1.2rem;
+.icon--20 {
+    --size: 1.25rem;
+    width: var(--size);
+    height: var(--size);
+}
+
+.icon--18 {
+    --size: 1.125rem;
+    width: var(--size);
+    height: var(--size);
 }

 .icon--gray {
    color: var(--gray-a5);
 }

+.icon--green {
+    color: var(--green-74);
+}
+
 .icon--disabled {
    color: var(--gray-d8);
 }

-.icon--active {
-    color: #66b574;
+.icon--lightgray {
+    color: var(--gray-8);
 }
--- a/client/src/components/ui/Popover.css
+++ b/client/src/components/ui/Popover.css
@ -1,151 +0,0 @@
-.popover-wrap {
-    position: relative;
-    top: 1px;
-    display: inline-block;
-    vertical-align: middle;
-    align-self: flex-start;
-}
-
-.popover__trigger {
-    position: relative;
-    top: 3px;
-    margin: 0 8px;
-    cursor: pointer;
-}
-
-.popover__trigger:after {
-    content: "";
-    position: absolute;
-    top: -6px;
-    left: -3px;
-    width: 26px;
-    height: 24px;
-}
-
-.popover__trigger--address {
-    top: 0;
-    margin: 0;
-    line-height: 1.2;
-}
-
-.popover__trigger--address:after {
-    display: none;
-}
-
-.popover__body {
-    content: "";
-    display: flex;
-    position: absolute;
-    bottom: calc(100% + 3px);
-    left: 50%;
-    z-index: 1;
-    min-width: 275px;
-    padding: 10px 15px;
-    font-size: 0.8rem;
-    white-space: normal;
-    color: #fff;
-    background-color: #585965;
-    border-radius: 3px;
-    transition: opacity 0.2s ease-in-out, visibility  0.2s ease-in-out;
-    transform: translateX(-50%);
-    visibility: hidden;
-    opacity: 0;
-}
-
-.popover__body--filter {
-    min-width: 100%;
-}
-
-.popover__body:after {
-    content: "";
-    position: absolute;
-    bottom: -5px;
-    left: calc(50% - 6px);
-    width: 0;
-    height: 0;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top: 6px solid #585965;
-}
-
-.popover__body--address {
-    top: calc(100% + 10px);
-    right: 0;
-    left: initial;
-    bottom: initial;
-    z-index: 1;
-    min-width: 100px;
-    padding: 12px 18px;
-    font-weight: 700;
-    text-align: left;
-    white-space: nowrap;
-    transform: none;
-    cursor: default;
-}
-
-.popover__body--address:after {
-    top: -11px;
-    left: initial;
-    right: 40px;
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid #585965;
-}
-
-.popover__body--address:before {
-    content: "";
-    position: absolute;
-    top: -7px;
-    left: 0;
-    width: 100%;
-    height: 10px;
-}
-
-.popover__trigger:hover + .popover__body,
-.popover__body:hover {
-    visibility: visible;
-    opacity: 1;
-}
-
-.popover__icon {
-    width: 20px;
-    height: 20px;
-    stroke: #9aa0ac;
-    color: #9aa0ac;
-}
-
-.popover__icon--green {
-    color: #66b574;
-    stroke: #66b574;
-}
-
-.popover__list--bold {
-    font-weight: 700;
-}
-
-.popover__list-title {
-    margin-bottom: 3px;
-}
-
-.popover__list-item {
-    margin-bottom: 2px;
-}
-
-.popover__list-item--nowrap {
-    max-width: 300px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.popover__list-item:last-child {
-    margin-bottom: 0;
-}
-
-.popover__link {
-    color: #66b586;
-}
-
-.popover__link:hover,
-.popover__link:focus {
-    color: #66b586;
-}
--- a/client/src/components/ui/Popover.js
+++ b/client/src/components/ui/Popover.js
@ -1,69 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
-import { getSourceData } from '../../helpers/trackers/trackers';
-import { captitalizeWords } from '../../helpers/helpers';
-
-import './Popover.css';
-
-class Popover extends Component {
-    render() {
-        const { data } = this.props;
-
-        const sourceData = getSourceData(data);
-
-        const source = (
-            <div className="popover__list-item">
-                <Trans>source_label</Trans>: <a className="popover__link" target="_blank"
-                                                rel="noopener noreferrer"
-                                                href={sourceData.url}>
-                <strong>{sourceData.name}</strong>
-            </a>
-            </div>
-        );
-
-        const tracker = (
-            <div className="popover__list-item">
-                <Trans>name_table_header</Trans>: <a className="popover__link" target="_blank"
-                                                     rel="noopener noreferrer"
-                                                     href={data.url}>
-                <strong>{data.name}</strong>
-            </a>
-            </div>
-        );
-
-        const categoryName = captitalizeWords(data.category);
-
-        return (
-            <div className="popover-wrap">
-                <div className="popover__trigger">
-                    <svg className="popover__icon" xmlns="http://www.w3.org/2000/svg"
-                         viewBox="0 0 24 24" fill="none" strokeWidth="2" strokeLinecap="round"
-                         strokeLinejoin="round">
-                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
-                        <circle cx="12" cy="12" r="3"></circle>
-                    </svg>
-                </div>
-                <div className="popover__body">
-                    <div className="popover__list">
-                        <div className="popover__list-title">
-                            <Trans>found_in_known_domain_db</Trans>
-                        </div>
-                        {tracker}
-                        <div className="popover__list-item">
-                            <Trans>category_label</Trans>: <strong>
-                            <Trans>{categoryName}</Trans></strong>
-                        </div>
-                        {source}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-Popover.propTypes = {
-    data: PropTypes.object.isRequired,
-};
-
-export default withTranslation()(Popover);
--- a/client/src/components/ui/PopoverFilter.js
+++ b/client/src/components/ui/PopoverFilter.js
@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
-
-import './Popover.css';
-
-class PopoverFilter extends Component {
-    render() {
-        const { rule, filter, service } = this.props;
-
-        if (!rule && !service) {
-            return '';
-        }
-
-        return (
-            <div className="popover-wrap">
-                <div className="popover__trigger popover__trigger--filter">
-                    <svg className="popover__icon popover__icon--green">
-                        <use xlinkHref="#question" />
-                    </svg>
-                </div>
-                <div className="popover__body popover__body--filter">
-                    <div className="popover__list">
-                        {rule && (
-                            <div className="popover__list-item popover__list-item--nowrap">
-                                <Trans>rule_label</Trans>: <strong>{rule}</strong>
-                            </div>
-                        )}
-                        {filter && (
-                            <div className="popover__list-item popover__list-item--nowrap">
-                                <Trans>list_label</Trans>: <strong>{filter}</strong>
-                            </div>
-                        )}
-                        {service && (
-                            <div className="popover__list-item popover__list-item--nowrap">
-                                <Trans>blocked_service</Trans>: <strong>{service}</strong>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-PopoverFilter.propTypes = {
-    rule: PropTypes.string,
-    filter: PropTypes.string,
-    service: PropTypes.string,
-};
-
-export default withTranslation()(PopoverFilter);
--- a/client/src/components/ui/Tabler.css
+++ b/client/src/components/ui/Tabler.css
@ -19,10 +19,13 @@ Dashboard UI
    --orange: #fd9644;
    --yellow: #f1c40f;
    --green: #5eba00;
+    --green-74: #66b574;
+    --green-86: #66b586;
    --teal: #2bcbba;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #868e96;
+    --gray-ac: #9aa0ac;
    --gray-dark: #343a40;
    --azure: #45aaf2;
    --lime: #7bd235;
--- a/client/src/components/ui/Tooltip.css
+++ b/client/src/components/ui/Tooltip.css
@ -0,0 +1,27 @@
+.tooltip-custom--narrow {
+    max-width: 13.75rem;
+}
+
+.tooltip-custom--wide {
+    max-width: 18rem;
+}
+
+.tooltip-custom__trigger {
+    cursor: pointer;
+}
+
+.tooltip-custom__content-title {
+    margin-bottom: 0.1875rem;
+}
+
+.tooltip-custom__content-item {
+    margin-bottom: 0.125rem;
+}
+
+.tooltip-custom__content-item:last-child {
+    margin-bottom: 0;
+}
+
+.tooltip-custom__content-link {
+    color: var(--green-86);
+}
--- a/client/src/components/ui/Tooltip.js
+++ b/client/src/components/ui/Tooltip.js
@ -0,0 +1,58 @@
+import React from 'react';
+import TooltipTrigger from 'react-popper-tooltip';
+import propTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { HIDE_TOOLTIP_DELAY } from '../../helpers/constants';
+import 'react-popper-tooltip/dist/styles.css';
+import './Tooltip.css';
+
+const Tooltip = ({
+    children,
+    content,
+    triggerClass = 'tooltip-custom__trigger',
+    className = 'tooltip-container',
+    placement = 'bottom',
+    trigger = 'hover',
+    delayHide = HIDE_TOOLTIP_DELAY,
+}) => {
+    const { t } = useTranslation();
+
+    return <TooltipTrigger
+        placement={placement}
+        trigger={trigger}
+        delayHide={delayHide}
+        tooltip={({
+            tooltipRef,
+            getTooltipProps,
+        }) => <div {...getTooltipProps({
+            ref: tooltipRef,
+            className,
+        })}>
+            {typeof content === 'string' ? t(content) : content}
+        </div>
+        }>{({ getTriggerProps, triggerRef }) => <span
+        {...getTriggerProps({
+            ref: triggerRef,
+            className: triggerClass,
+        })}
+    >{children}</span>}
+    </TooltipTrigger>;
+};
+
+Tooltip.propTypes = {
+    children: propTypes.element.isRequired,
+    content: propTypes.oneOfType(
+        [
+            propTypes.string,
+            propTypes.element,
+            propTypes.arrayOf(propTypes.element),
+        ],
+    ).isRequired,
+    placement: propTypes.string,
+    trigger: propTypes.string,
+    delayHide: propTypes.string,
+    className: propTypes.string,
+    triggerClass: propTypes.string,
+};
+
+export default Tooltip;
--- a/client/src/components/ui/svg/help-circle.svg
+++ b/client/src/components/ui/svg/help-circle.svg
@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#66b574" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#66b574"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
+    <circle cx="12" cy="12" r="10"></circle>
+    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+    <line x1="12" y1="17" x2="12" y2="17"></line>
+</svg>
--- a/client/src/helpers/form.js
+++ b/client/src/helpers/form.js
@ -90,7 +90,7 @@ export const renderGroupField = ({
                            className="btn btn-secondary btn-icon btn-icon--green"
                            onClick={removeField}
                        >
-                            <svg className="icon icon--small">
+                            <svg className="icon icon--24">
                                <use xlinkHref="#cross" />
                            </svg>
                        </button>