Merge: fix #822 - Whitelist filter rules

Squashed commit of the following:

commit 350c6d5fadd77145b801df8887284bf4d64fbd19
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Wed Feb 26 15:43:29 2020 +0300

    * client: update translations

commit a884dffcd59f2259e2eee2c1e5a3270819bf8962
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Mon Feb 17 17:32:10 2020 +0300

    + client: handle whitelist filters

commit a586ec5bc614ffb0e01584a1fbdc7292b4865e68
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jan 29 18:16:59 2020 +0300

    + client: add whitelist

commit a52c3de62cf2fa34be6394771fb8bb56b4ee81e3
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Thu Feb 20 17:50:44 2020 +0300

    * change /filtering/refresh

commit 7f8f2ecccb9f7fa65318c1717dc6a7bd61afccf4
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Thu Feb 20 16:17:07 2020 +0300

    * fix race-detector issue

commit ac4b64c4a52c5b364a4b154bf18dea0fdf45647f
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Mon Jan 20 20:08:21 2020 +0300

    + whitelist filters

client/src/components/ui/Card.js

@@ -3,28 +3,36 @@ import PropTypes from 'prop-types';
 
 import './Card.css';
 
-const Card = props => (
-    <div className={props.type ? `card ${props.type}` : 'card'} id={props.id ? props.id : ''}>
-        {props.title &&
-        <div className="card-header with-border">
-            <div className="card-inner">
-                <div className="card-title">
-                    {props.title}
+const Card = ({
+    type, id, title, subtitle, refresh, bodyType, children,
+}) => (
+    <div className={type ? `card ${type}` : 'card'} id={id || ''}>
+        {(title || subtitle) && (
+            <div className="card-header with-border">
+                <div className="card-inner">
+                    {title && (
+                        <div className="card-title">
+                            {title}
+                        </div>
+                    )}
+
+                    {subtitle && (
+                        <div
+                            className="card-subtitle"
+                            dangerouslySetInnerHTML={{ __html: subtitle }}
+                        />
+                    )}
                 </div>
 
-                {props.subtitle &&
-                    <div className="card-subtitle" dangerouslySetInnerHTML={{ __html: props.subtitle }} />
-                }
+                {refresh && (
+                    <div className="card-options">
+                        {refresh}
+                    </div>
+                )}
             </div>
-
-            {props.refresh &&
-                <div className="card-options">
-                    {props.refresh}
-                </div>
-            }
-        </div>}
-        <div className={props.bodyType ? props.bodyType : 'card-body'}>
-            {props.children}
+        )}
+        <div className={bodyType || 'card-body'}>
+            {children}
         </div>
     </div>
 );

client/src/components/ui/PageTitle.css

@@ -1,8 +1,17 @@
+.page-header {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
 .page-subtitle {
-    margin-left: 0.7rem;
+    margin-left: 0;
     font-size: 0.9rem;
 }
 
+.page-title {
+    line-height: 2.2rem;
+}
+
 .page-title__actions {
     display: block;
 }

client/src/components/ui/PageTitle.js

@@ -7,9 +7,13 @@ const PageTitle = props => (
     <div className="page-header">
         <h1 className="page-title">
             {props.title}
-            {props.subtitle && <span className="page-subtitle">{props.subtitle}</span>}
             {props.children}
         </h1>
+        {props.subtitle && (
+            <div className="page-subtitle">
+                {props.subtitle}
+            </div>
+        )}
     </div>
 );
 

client/src/components/ui/PopoverFilter.js

@@ -28,7 +28,7 @@ class PopoverFilter extends Component {
                         )}
                         {filter && (
                             <div className="popover__list-item popover__list-item--nowrap">
-                                <Trans>filter_label</Trans>: <strong>{filter}</strong>
+                                <Trans>list_label</Trans>: <strong>{filter}</strong>
                             </div>
                         )}
                         {service && (

client/src/components/ui/Tabler.css

@@ -10143,6 +10143,7 @@ body.fixed-header .page {
     display: flex;
     -ms-flex-align: center;
     align-items: center;
+    flex-direction: column;
     margin: 1.5rem 0 1.5rem;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;