- 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
This commit is contained in:
Artem Baskal
2020-07-17 15:24:39 +03:00
parent d794b11e7a
commit 7d2c7a61f1
30 changed files with 251 additions and 459 deletions

View File

@@ -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,