From 1f954ab67342a4961f78fcf700bf0ddc6bcdb9f2 Mon Sep 17 00:00:00 2001
From: Artem Baskal <a.baskal@adguard.com>
Date: Wed, 13 May 2020 15:34:56 +0300
Subject: [PATCH] Merge: + client: Use monospace font in coding-like inputs
 Close #1650

Squashed commit of the following:

commit 0956b77d2675bf569ab8413bf1a905167f068fbd
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 12 18:22:55 2020 +0300

    Replace css variable

commit 7c65954e3727c09404999d4d029276f78a8d0ffe
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 12 18:06:31 2020 +0300

    + client: Use monospace font in coding-like inputs
---
 client/src/components/App/index.css           |  8 ++
 client/src/components/Filters/CustomRules.js  |  2 +-
 .../components/Settings/Dns/Access/Form.js    | 93 +++++++++----------
 .../components/Settings/Dns/Upstream/Form.js  |  4 +-
 4 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
index 391ddabd..7d2fa250 100644
--- a/client/src/components/App/index.css
+++ b/client/src/components/App/index.css
@@ -1,3 +1,7 @@
+:root {
+    font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
+}
+
 body {
     margin: 0;
     padding: 0;
@@ -30,3 +34,7 @@ body {
 .hidden {
     display: none;
 }
+
+.font-monospace {
+    font-family: var(--font-family-monospace);
+}
\ No newline at end of file
diff --git a/client/src/components/Filters/CustomRules.js b/client/src/components/Filters/CustomRules.js
index ed10d978..291805ac 100644
--- a/client/src/components/Filters/CustomRules.js
+++ b/client/src/components/Filters/CustomRules.js
@@ -54,7 +54,7 @@ class CustomRules extends Component {
                 >
                     <form onSubmit={this.handleSubmit}>
                         <textarea
-                            className="form-control form-control--textarea-large"
+                            className="form-control form-control--textarea-large font-monospace"
                             value={userRules}
                             onChange={this.handleChange}
                         />
diff --git a/client/src/components/Settings/Dns/Access/Form.js b/client/src/components/Settings/Dns/Access/Form.js
index 380e0ae2..63be1a4b 100644
--- a/client/src/components/Settings/Dns/Access/Form.js
+++ b/client/src/components/Settings/Dns/Access/Form.js
@@ -5,61 +5,58 @@ import { Trans, withNamespaces } from 'react-i18next';
 import flow from 'lodash/flow';
 import { renderTextareaField } from '../../../../helpers/form';
 
+const fields = [
+    {
+        id: 'allowed_clients',
+        title: 'access_allowed_title',
+        subtitle: 'access_allowed_desc',
+    },
+    {
+        id: 'disallowed_clients',
+        title: 'access_disallowed_title',
+        subtitle: 'access_disallowed_desc',
+    },
+    {
+        id: 'blocked_hosts',
+        title: 'access_blocked_title',
+        subtitle: 'access_blocked_desc',
+    },
+];
+
 const Form = (props) => {
     const {
         handleSubmit, submitting, invalid, processingSet,
     } = props;
 
+    const renderField = ({
+        id, title, subtitle, disabled = processingSet,
+    }) => <div key={id} className="form__group mb-5">
+        <label className="form__label form__label--with-desc" htmlFor={id}>
+            <Trans>{title}</Trans>
+        </label>
+        <div className="form__desc form__desc--top">
+            <Trans>{subtitle}</Trans>
+        </div>
+        <Field
+            id={id}
+            name={id}
+            component={renderTextareaField}
+            type="text"
+            className="form-control form-control--textarea font-monospace"
+            disabled={disabled}
+        />
+    </div>;
+
+    renderField.propTypes = {
+        id: PropTypes.string,
+        title: PropTypes.string,
+        subtitle: PropTypes.string,
+        disabled: PropTypes.bool,
+    };
+
     return (
         <form onSubmit={handleSubmit}>
-            <div className="form__group mb-5">
-                <label className="form__label form__label--with-desc" htmlFor="allowed_clients">
-                    <Trans>access_allowed_title</Trans>
-                </label>
-                <div className="form__desc form__desc--top">
-                    <Trans>access_allowed_desc</Trans>
-                </div>
-                <Field
-                    id="allowed_clients"
-                    name="allowed_clients"
-                    component={renderTextareaField}
-                    type="text"
-                    className="form-control form-control--textarea"
-                    disabled={processingSet}
-                />
-            </div>
-            <div className="form__group mb-5">
-                <label className="form__label form__label--with-desc" htmlFor="disallowed_clients">
-                    <Trans>access_disallowed_title</Trans>
-                </label>
-                <div className="form__desc form__desc--top">
-                    <Trans>access_disallowed_desc</Trans>
-                </div>
-                <Field
-                    id="disallowed_clients"
-                    name="disallowed_clients"
-                    component={renderTextareaField}
-                    type="text"
-                    className="form-control form-control--textarea"
-                    disabled={processingSet}
-                />
-            </div>
-            <div className="form__group mb-5">
-                <label className="form__label form__label--with-desc" htmlFor="blocked_hosts">
-                    <Trans>access_blocked_title</Trans>
-                </label>
-                <div className="form__desc form__desc--top">
-                    <Trans>access_blocked_desc</Trans>
-                </div>
-                <Field
-                    id="blocked_hosts"
-                    name="blocked_hosts"
-                    component={renderTextareaField}
-                    type="text"
-                    className="form-control form-control--textarea"
-                    disabled={processingSet}
-                />
-            </div>
+            {fields.map(renderField)}
             <div className="card-actions">
                 <div className="btn-list">
                     <button
diff --git a/client/src/components/Settings/Dns/Upstream/Form.js b/client/src/components/Settings/Dns/Upstream/Form.js
index 961ac252..10235910 100644
--- a/client/src/components/Settings/Dns/Upstream/Form.js
+++ b/client/src/components/Settings/Dns/Upstream/Form.js
@@ -17,7 +17,7 @@ const getInputFields = (parallel_requests_selected, fastest_addr_selected) => [{
     name: 'upstream_dns',
     type: 'text',
     component: 'textarea',
-    className: 'form-control form-control--textarea',
+    className: 'form-control form-control--textarea font-monospace',
     placeholder: 'upstream_dns',
 },
 {
@@ -96,7 +96,7 @@ let Form = (props) => {
                         name="bootstrap_dns"
                         component="textarea"
                         type="text"
-                        className="form-control form-control--textarea form-control--textarea-small"
+                        className="form-control form-control--textarea form-control--textarea-small font-monospace"
                         placeholder={t('bootstrap_dns')}
                         disabled={processingSetConfig}
                     />