* : merge with master

client/src/components/Settings/Clients/ClientsTable.js

@@ -4,7 +4,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import ReactTable from 'react-table';
 
 import { MODAL_TYPE } from '../../../helpers/constants';
-import { splitByNewLine } from '../../../helpers/helpers';
+import { splitByNewLine, countClientsStatistics } from '../../../helpers/helpers';
 import Card from '../../ui/Card';
 import Modal from './Modal';
 import CellWrap from '../../ui/CellWrap';
@@ -204,7 +204,10 @@ class ClientsTable extends Component {
         {
             Header: this.props.t('requests_count'),
             id: 'statistics',
-            accessor: (row) => this.props.normalizedTopClients.configured[row.name] || 0,
+            accessor: (row) => countClientsStatistics(
+                row.ids,
+                this.props.normalizedTopClients.auto,
+            ),
             sortMethod: (a, b) => b - a,
             minWidth: 120,
             Cell: (row) => {

client/src/components/Settings/Clients/whoisCell.js

@@ -14,7 +14,7 @@ const getFormattedWhois = (value, t) => {
                 <div key={key} title={t(key)}>
                     {icon && (
                         <Fragment>
-                            <svg className="logs__whois-icon text-muted-dark icons">
+                            <svg className="logs__whois-icon text-muted-dark icons icon--24">
                                 <use xlinkHref={`#${icon}`} />
                             </svg>
                             &nbsp;

client/src/components/Settings/Dns/Upstream/Examples.js

@@ -63,6 +63,27 @@ const Examples = (props) => (
                     </Trans>
                 </span>
             </li>
+            <li>
+                <code>quic://dns-unfiltered.adguard.com:784</code> –&nbsp;
+                <span>
+                    <Trans
+                        components={[
+                            <a
+                                href="https://tools.ietf.org/html/draft-huitema-quic-dnsoquic-07"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                key="0"
+                            >
+                                DNS-over-QUIC
+                            </a>,
+                        ]}
+                    >
+                        example_upstream_doq
+                    </Trans>
+                    &nbsp;
+                    <span className="text-lowercase">(<Trans>experimental</Trans>)</span>
+                </span>
+            </li>
             <li>
                 <code>tcp://9.9.9.9</code> – <Trans>example_upstream_tcp</Trans>
             </li>

client/src/components/Settings/Dns/Upstream/index.js

@@ -32,7 +32,7 @@ const Upstream = () => {
         dispatch(setDnsConfig(dnsConfig));
     };
 
-    const upstreamDns = upstream_dns_file ? t('configured_in', { path: upstream_dns_file }) : upstream_dns;
+    const upstreamDns = upstream_dns_file ? t('upstream_dns_configured_in_file', { path: upstream_dns_file }) : upstream_dns;
 
     return <Card
         title={t('upstream_dns')}

client/src/components/Settings/Encryption/Form.js

@@ -11,11 +11,15 @@ import {
     renderRadioField,
     toNumber,
 } from '../../../helpers/form';
-import { validateIsSafePort, validatePort, validatePortTLS } from '../../../helpers/validators';
+import {
+    validateIsSafePort, validatePort, validatePortQuic, validatePortTLS,
+} from '../../../helpers/validators';
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
 import CertificateStatus from './CertificateStatus';
-import { DNS_OVER_TLS_PORT, FORM_NAME, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
+import {
+    DNS_OVER_QUIC_PORT, DNS_OVER_TLS_PORT, FORM_NAME, STANDARD_HTTPS_PORT,
+} from '../../../helpers/constants';
 
 const validate = (values) => {
     const errors = {};
@@ -38,6 +42,7 @@ const clearFields = (change, setTlsConfig, t) => {
         certificate_path: '',
         port_https: STANDARD_HTTPS_PORT,
         port_dns_over_tls: DNS_OVER_TLS_PORT,
+        port_dns_over_quic: DNS_OVER_QUIC_PORT,
         server_name: '',
         force_https: false,
         enabled: false,
@@ -189,6 +194,30 @@ let Form = (props) => {
                         </div>
                     </div>
                 </div>
+                <div className="col-lg-6">
+                    <div className="form__group form__group--settings">
+                        <label className="form__label" htmlFor="port_dns_over_quic">
+                            <Trans>encryption_doq</Trans>
+                            &nbsp;
+                            <span className="text-lowercase">(<Trans>experimental</Trans>)</span>
+                        </label>
+                        <Field
+                                id="port_dns_over_quic"
+                                name="port_dns_over_quic"
+                                component={renderInputField}
+                                type="number"
+                                className="form-control"
+                                placeholder={t('encryption_doq')}
+                                validate={[validatePortQuic]}
+                                normalize={toNumber}
+                                onChange={handleChange}
+                                disabled={!isEnabled}
+                        />
+                        <div className="form__desc">
+                            <Trans>encryption_doq_desc</Trans>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div className="row">
                 <div className="col-12">

client/src/components/Settings/Encryption/index.js

@@ -66,6 +66,7 @@ class Encryption extends Component {
             force_https,
             port_https,
             port_dns_over_tls,
+            port_dns_over_quic,
             certificate_chain,
             private_key,
             certificate_path,
@@ -78,6 +79,7 @@ class Encryption extends Component {
             force_https,
             port_https,
             port_dns_over_tls,
+            port_dns_over_quic,
             certificate_chain,
             private_key,
             certificate_path,

client/src/components/Settings/Settings.css

@@ -54,7 +54,7 @@
 }
 
 .form__message--error {
-    color: var(--red);
+    color: #cd201f;
 }
 
 .form__message--left-pad {