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
This commit is contained in:
Artem Baskal 2020-05-13 15:34:56 +03:00
parent 4d66d25fda
commit 1f954ab673
4 changed files with 56 additions and 51 deletions

View File

@ -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);
}

View File

@ -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}
/>

View File

@ -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

View File

@ -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}
/>