all: sync with master

client/src/components/Filters/Table.js

@@ -41,13 +41,13 @@ class Table extends Component {
         {
             Header: <Trans>name_table_header</Trans>,
             accessor: 'name',
-            minWidth: 200,
+            minWidth: 180,
             Cell: CellWrap,
         },
         {
             Header: <Trans>list_url_table_header</Trans>,
             accessor: 'url',
-            minWidth: 200,
+            minWidth: 180,
             Cell: ({ value }) => (
                 <div className="logs__row">
                     {isValidAbsolutePath(value) ? value
@@ -73,7 +73,7 @@ class Table extends Component {
             Header: <Trans>last_time_updated_table_header</Trans>,
             accessor: 'lastUpdated',
             className: 'text-center',
-            minWidth: 150,
+            minWidth: 180,
             Cell: this.getDateCell,
         },
         {

client/src/components/Logs/AnonymizerNotification.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { HashLink as Link } from 'react-router-hash-link';
+
+const AnonymizerNotification = () => (
+    <div className="alert alert-primary mt-6">
+        <Trans components={[
+            <strong key="0">text</strong>,
+            <Link to="/settings#logs-config" key="1">link</Link>,
+        ]}>
+            anonymizer_notification
+        </Trans>
+    </div>
+);
+
+export default AnonymizerNotification;

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

@@ -62,7 +62,7 @@ const ClientCell = ({
         'white-space--nowrap': isDetailed,
     });
 
-    const hintClass = classNames('icons mr-4 icon--24 icon--lightgray', {
+    const hintClass = classNames('icons mr-4 icon--24 logs__question icon--lightgray', {
         'my-3': isDetailed,
     });
 

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

@@ -34,7 +34,7 @@ const DomainCell = ({
         'my-3': isDetailed,
     });
 
-    const privacyIconClass = classNames('icons mx-2 icon--24 d-none d-sm-block', {
+    const privacyIconClass = classNames('icons mx-2 icon--24 d-none d-sm-block logs__question', {
         'icon--green': hasTracker,
         'icon--disabled': !hasTracker,
         'my-3': isDetailed,

client/src/components/Logs/Cells/IconTooltip.css

@@ -49,6 +49,12 @@
     padding-top: 1rem;
 }
 
+@media (max-width: 1024px) {
+    .grid .key-colon, .grid .title--border {
+        font-weight: 600;
+    }
+}
+
 @media (max-width: 767.98px) {
     .grid {
         grid-template-columns: 35% 55%;
@@ -70,10 +76,6 @@
         grid-column: 2 / span 1;
         margin: 0 !important;
     }
-
-    .grid .key-colon, .grid .title--border {
-        font-weight: 600;
-    }
 }
 
 .grid .key-colon:nth-child(odd)::after {

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

@@ -97,7 +97,7 @@ const ResponseCell = ({
     return (
         <div className="logs__cell logs__cell--response" role="gridcell">
             <IconTooltip
-                className={classNames('icons mr-4 icon--24 icon--lightgray', { 'my-3': isDetailed })}
+                className={classNames('icons mr-4 icon--24 icon--lightgray logs__question', { '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'

client/src/components/Logs/Logs.css

@@ -485,3 +485,13 @@
 .bg--green {
     color: var(--green79);
 }
+
+@media (max-width: 1024px) {
+    .logs__question {
+        display: none;
+    }
+}
+
+.logs__modal {
+    max-width: 720px;
+}

client/src/components/Logs/index.js

@@ -25,6 +25,7 @@ import {
 import InfiniteTable from './InfiniteTable';
 import './Logs.css';
 import { BUTTON_PREFIX } from './Cells/helpers';
+import AnonymizerNotification from './AnonymizerNotification';
 
 const processContent = (data) => Object.entries(data)
     .map(([key, value]) => {
@@ -73,6 +74,7 @@ const Logs = () => {
         processingGetConfig,
         processingAdditionalLogs,
         processingGetLogs,
+        anonymize_client_ip: anonymizeClientIp,
     } = useSelector((state) => state.queryLogs, shallowEqual);
     const filter = useSelector((state) => state.queryLogs.filter, shallowEqual);
     const logs = useSelector((state) => state.queryLogs.logs, shallowEqual);
@@ -104,6 +106,8 @@ const Logs = () => {
         setIsSmallScreen(e.matches);
         if (e.matches) {
             dispatch(toggleDetailedLogs(false));
+        } else {
+            dispatch(toggleDetailedLogs(true));
         }
     };
 
@@ -180,35 +184,49 @@ const Logs = () => {
                 setButtonType={setButtonType}
                 setModalOpened={setModalOpened}
         />
-        <Modal portalClassName='grid' isOpen={isSmallScreen && isModalOpened}
-               onRequestClose={closeModal}
-               style={{
-                   content: {
-                       width: '100%',
-                       height: 'fit-content',
-                       left: 0,
-                       top: 47,
-                       padding: '1rem 1.5rem 1rem',
-                   },
-                   overlay: {
-                       backgroundColor: 'rgba(0,0,0,0.5)',
-                   },
-               }}
+        <Modal
+            portalClassName='grid'
+            isOpen={isSmallScreen && isModalOpened}
+            onRequestClose={closeModal}
+            style={{
+                content: {
+                    width: '100%',
+                    height: 'fit-content',
+                    left: '50%',
+                    top: 47,
+                    padding: '1rem 1.5rem 1rem',
+                    maxWidth: '720px',
+                    transform: 'translateX(-50%)',
+                },
+                overlay: {
+                    backgroundColor: 'rgba(0,0,0,0.5)',
+                },
+            }}
         >
-            <svg
-                    className="icon icon--24 icon-cross d-block d-md-none cursor--pointer"
-                    onClick={closeModal}>
-                <use xlinkHref="#cross" />
-            </svg>
-            {processContent(detailedDataCurrent, buttonType)}
+            <div className="logs__modal-wrap">
+                <svg
+                    className="icon icon--24 icon-cross d-block cursor--pointer"
+                    onClick={closeModal}
+                >
+                    <use xlinkHref="#cross" />
+                </svg>
+                {processContent(detailedDataCurrent, buttonType)}
+            </div>
         </Modal>
     </>;
 
-    return <>
-        {enabled && processingGetConfig && <Loading />}
-        {enabled && !processingGetConfig && renderPage()}
-        {!enabled && !processingGetConfig && <Disabled />}
-    </>;
+    return (
+        <>
+            {enabled && (
+                <>
+                    {processingGetConfig && <Loading />}
+                    {anonymizeClientIp && <AnonymizerNotification />}
+                    {!processingGetConfig && renderPage()}
+                </>
+            )}
+            {!enabled && !processingGetConfig && <Disabled />}
+        </>
+    );
 };
 
 export default Logs;

client/src/components/ui/Tabler.css

@@ -2820,6 +2820,11 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-primary:focus,
+.btn-outline-primary.focus {
+    box-shadow: none;
+}
+
+.btn-outline-primary:focus-visible,
 .btn-outline-primary.focus {
     box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.5);
 }
@@ -2858,6 +2863,11 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-secondary:focus,
+.btn-outline-secondary.focus {
+    box-shadow: none;
+}
+
+.btn-outline-secondary:focus-visible,
 .btn-outline-secondary.focus {
     box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
 }

client/src/components/ui/Tabs.css

@@ -67,6 +67,7 @@
     height: 24px;
     margin-bottom: 6px;
     fill: #4a4a4a;
+    touch-action: initial;
 }
 
 .tab__text {