From 95aa29d68bdf5e9c4e7aa59f42d04328b1872115 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Mon, 1 Aug 2022 16:21:23 +0300
Subject: [PATCH] client: fix query log issue on tablet devices

---
 client/src/components/Logs/Cells/index.js | 22 ++++++++++---
 client/src/components/Logs/Logs.css       | 40 +++++++++++++++++++----
 client/src/components/Logs/index.js       |  6 ++--
 client/src/helpers/constants.js           |  2 +-
 4 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Logs/Cells/index.js b/client/src/components/Logs/Cells/index.js
index 273d9495db1..05c8bf03f88 100644
--- a/client/src/components/Logs/Cells/index.js
+++ b/client/src/components/Logs/Cells/index.js
@@ -139,11 +139,23 @@ const Row = memo(({
             }
         };
 
-        const blockButton = <button
-                className={classNames('title--border text-center button-action--arrow-option', { 'bg--danger': !isBlocked })}
-                onClick={onToggleBlock}>
-            {t(buttonType)}
-        </button>;
+        const blockButton = (
+            <>
+                <div className="title--border" />
+                <button
+                    type="button"
+                    className={
+                        classNames(
+                            'button-action--arrow-option',
+                            { 'bg--danger': !isBlocked },
+                            { 'bg--green': isFiltered },
+                        )}
+                    onClick={onToggleBlock}
+                >
+                    {t(buttonType)}
+                </button>
+            </>
+        );
 
         const blockForClientButton = <button
                 className='text-center font-weight-bold py-2 button-action--arrow-option'
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index b641041152e..d39835e0f4b 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -102,10 +102,6 @@
     padding: 0.5rem 0.75rem 0.5rem 2rem !important;
 }
 
-.bg--danger {
-    color: var(--danger) !important;
-}
-
 .form-control--search {
     box-shadow: 0 1px 0 #ddd;
     padding: 0 2.5rem;
@@ -230,6 +226,12 @@
     height: 1.6rem;
 }
 
+@media screen and (max-width: 1024px) {
+    .button-action__container {
+        display: none;
+    }
+}
+
 .button-action__container--detailed {
     bottom: 1.3rem;
 }
@@ -310,16 +312,34 @@
     border: 0;
     display: block;
     width: 100%;
-    text-align: left;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    text-align: center;
+    font-weight: 700;
     color: inherit;
+    cursor: pointer;
+}
+
+.button-action--arrow-option:hover,
+.button-action--arrow-option:focus {
+    outline: none;
+}
+
+.button-action--arrow-option:focus-visible {
+    outline: 2px solid #295a9f;
 }
 
 .button-action--arrow-option:disabled {
     display: none;
 }
 
+.tooltip-custom__container .button-action--arrow-option {
+    padding-bottom: 0;
+    text-align: left;
+    font-weight: 400;
+}
+
 .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
-    cursor: pointer;
     background: var(--gray-f3);
     overflow: hidden;
 }
@@ -457,3 +477,11 @@
     font-weight: normal;
     margin-bottom: 1rem;
 }
+
+.bg--danger {
+    color: var(--danger);
+}
+
+.bg--green {
+    color: var(--green79);
+}
diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
index 3e89c3b1b53..abbc3af7db6 100644
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@@ -7,7 +7,7 @@ import queryString from 'query-string';
 import classNames from 'classnames';
 import {
     BLOCK_ACTIONS,
-    SMALL_SCREEN_SIZE,
+    MEDIUM_SCREEN_SIZE,
 } from '../../helpers/constants';
 import Loading from '../ui/Loading';
 import Filters from './Filters';
@@ -80,7 +80,7 @@ const Logs = () => {
     const search = search_url_param || filter?.search || '';
     const response_status = response_status_url_param || filter?.response_status || '';
 
-    const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < SMALL_SCREEN_SIZE);
+    const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= MEDIUM_SCREEN_SIZE);
     const [detailedDataCurrent, setDetailedDataCurrent] = useState({});
     const [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
     const [isModalOpened, setModalOpened] = useState(false);
@@ -99,7 +99,7 @@ const Logs = () => {
         })();
     }, [response_status, search]);
 
-    const mediaQuery = window.matchMedia(`(max-width: ${SMALL_SCREEN_SIZE}px)`);
+    const mediaQuery = window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`);
     const mediaQueryHandler = (e) => {
         setIsSmallScreen(e.matches);
         if (e.matches) {
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 6598530c36f..5e9e6ce8bfd 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -588,7 +588,7 @@ export const FORM_NAME = {
 };
 
 export const SMALL_SCREEN_SIZE = 767;
-export const MEDIUM_SCREEN_SIZE = 1023;
+export const MEDIUM_SCREEN_SIZE = 1024;
 
 export const SECONDS_IN_DAY = 60 * 60 * 24;