+ client: handle filters configuration

client/src/components/Filters/Modal.js

@@ -33,27 +33,13 @@ class Modal extends Component {
         this.setState({ ...this.state, name });
     };
 
-    handleNext = () => {
-        this.props.addFilter(this.state.url, this.state.name);
-        setTimeout(() => {
-            if (this.props.isFilterAdded) {
-                this.closeModal();
-            }
-        }, 2000);
-    };
-
     closeModal = () => {
         this.props.toggleModal();
         this.setState({ ...this.state, ...initialState });
-    }
+    };
 
     render() {
-        const {
-            isOpen,
-            title,
-            inputDescription,
-            processingAddFilter,
-        } = this.props;
+        const { isOpen, processingAddFilter } = this.props;
         const { isUrlValid, url, name } = this.state;
         const inputUrlClass = classnames({
             'form-control mb-2': true,
@@ -64,28 +50,7 @@ class Modal extends Component {
             'form-control mb-2': true,
             'is-valid': name.length > 0,
         });
-
-        const renderBody = () => {
-            if (!this.props.isFilterAdded) {
-                return (
-                    <React.Fragment>
-                        <input type="text" className={inputNameClass} placeholder={this.props.t('enter_name_hint')} onChange={this.handleNameChange} />
-                        <input type="text" className={inputUrlClass} placeholder={this.props.t('enter_url_hint')} onChange={this.handleUrlChange} />
-                        {inputDescription &&
-                            <div className="description">
-                                {inputDescription}
-                            </div>}
-                    </React.Fragment>
-                );
-            }
-            return (
-                <div className="description">
-                    <Trans>filter_added_successfully</Trans>
-                </div>
-            );
-        };
-
-        const isValidForSubmit = !(url.length > 0 && isUrlValid && name.length > 0);
+        const isValidForSubmit = url.length > 0 && isUrlValid && name.length > 0;
 
         return (
             <ReactModal
@@ -96,35 +61,47 @@ class Modal extends Component {
             >
                 <div className="modal-content">
                     <div className="modal-header">
-                    <h4 className="modal-title">
-                        {title}
-                    </h4>
-                    <button type="button" className="close" onClick={this.closeModal}>
-                        <span className="sr-only">Close</span>
-                    </button>
+                        <h4 className="modal-title">
+                            <Trans>new_filter_btn</Trans>
+                        </h4>
+                        <button type="button" className="close" onClick={this.closeModal}>
+                            <span className="sr-only">Close</span>
+                        </button>
                     </div>
                     <div className="modal-body">
-                        {renderBody()}
-                    </div>
-                    {!this.props.isFilterAdded &&
-                        <div className="modal-footer">
-                            <button
-                                type="button"
-                                className="btn btn-secondary"
-                                onClick={this.closeModal}
-                            >
-                                <Trans>cancel_btn</Trans>
-                            </button>
-                            <button
-                                type="button"
-                                className="btn btn-success"
-                                onClick={this.handleNext}
-                                disabled={isValidForSubmit || processingAddFilter}
-                            >
-                                <Trans>add_filter_btn</Trans>
-                            </button>
+                        <input
+                            type="text"
+                            className={inputNameClass}
+                            placeholder={this.props.t('enter_name_hint')}
+                            onChange={this.handleNameChange}
+                        />
+                        <input
+                            type="text"
+                            className={inputUrlClass}
+                            placeholder={this.props.t('enter_url_hint')}
+                            onChange={this.handleUrlChange}
+                        />
+                        <div className="description">
+                            <Trans>enter_valid_filter_url</Trans>
                         </div>
-                    }
+                    </div>
+                    <div className="modal-footer">
+                        <button
+                            type="button"
+                            className="btn btn-secondary"
+                            onClick={this.closeModal}
+                        >
+                            <Trans>cancel_btn</Trans>
+                        </button>
+                        <button
+                            type="button"
+                            className="btn btn-success"
+                            onClick={() => this.props.addFilter(url, name)}
+                            disabled={!isValidForSubmit || processingAddFilter}
+                        >
+                            <Trans>add_filter_btn</Trans>
+                        </button>
+                    </div>
                 </div>
             </ReactModal>
         );
@@ -134,12 +111,10 @@ class Modal extends Component {
 Modal.propTypes = {
     toggleModal: PropTypes.func.isRequired,
     isOpen: PropTypes.bool.isRequired,
-    title: PropTypes.string.isRequired,
-    inputDescription: PropTypes.string,
     addFilter: PropTypes.func.isRequired,
-    isFilterAdded: PropTypes.bool,
-    processingAddFilter: PropTypes.bool,
-    t: PropTypes.func,
+    isFilterAdded: PropTypes.bool.isRequired,
+    processingAddFilter: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
 };
 
 export default withNamespaces()(Modal);

client/src/components/Filters/UserRules.js

@@ -15,13 +15,13 @@ class UserRules extends Component {
     };
 
     render() {
-        const { t } = this.props;
+        const { t, userRules } = this.props;
         return (
             <Card title={t('custom_filter_rules')} subtitle={t('custom_filter_rules_hint')}>
                 <form onSubmit={this.handleSubmit}>
                     <textarea
                         className="form-control form-control--textarea-large"
-                        value={this.props.userRules}
+                        value={userRules}
                         onChange={this.handleChange}
                     />
                     <div className="card-actions">
@@ -79,10 +79,10 @@ class UserRules extends Component {
 }
 
 UserRules.propTypes = {
-    userRules: PropTypes.string,
-    handleRulesChange: PropTypes.func,
-    handleRulesSubmit: PropTypes.func,
-    t: PropTypes.func,
+    userRules: PropTypes.string.isRequired,
+    handleRulesChange: PropTypes.func.isRequired,
+    handleRulesSubmit: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
 };
 
 export default withNamespaces()(UserRules);

client/src/components/Filters/index.js

@@ -1,11 +1,13 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import { Trans, withNamespaces } from 'react-i18next';
-import Modal from './Modal';
+
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
+import CellWrap from '../ui/CellWrap';
 import UserRules from './UserRules';
+import Modal from './Modal';
 
 class Filters extends Component {
     componentDidMount() {
@@ -20,14 +22,19 @@ class Filters extends Component {
         this.props.setRules(this.props.filtering.userRules);
     };
 
-    renderCheckbox = (row) => {
-        const { url } = row.original;
-        const { filters } = this.props.filtering;
-        const filter = filters.filter(filter => filter.url === url)[0];
+    renderCheckbox = ({ original }) => {
+        const { processingConfigFilter } = this.props.filtering;
+        const { url, enabled } = original;
         return (
             <label className="checkbox">
-                <input type="checkbox" className="checkbox__input" onChange={() => this.props.toggleFilterStatus(filter.url)} checked={filter.enabled}/>
-                <span className="checkbox__label"/>
+                <input
+                    type="checkbox"
+                    className="checkbox__input"
+                    onChange={() => this.props.toggleFilterStatus(url, enabled)}
+                    checked={enabled}
+                    disabled={processingConfigFilter}
+                />
+                <span className="checkbox__label" />
             </label>
         );
     };
@@ -37,92 +44,131 @@ class Filters extends Component {
         if (window.confirm(this.props.t('filter_confirm_delete'))) {
             this.props.removeFilter({ url });
         }
-    }
+    };
 
-    columns = [{
-        Header: <Trans>enabled_table_header</Trans>,
-        accessor: 'enabled',
-        Cell: this.renderCheckbox,
-        width: 90,
-        className: 'text-center',
-    }, {
-        Header: <Trans>name_table_header</Trans>,
-        accessor: 'name',
-        Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><span className="logs__text" title={value}>{value}</span></div>),
-    }, {
-        Header: <Trans>filter_url_table_header</Trans>,
-        accessor: 'url',
-        Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><a href={value} target='_blank' rel='noopener noreferrer' className="link logs__text">{value}</a></div>),
-    }, {
-        Header: <Trans>rules_count_table_header</Trans>,
-        accessor: 'rulesCount',
-        className: 'text-center',
-        Cell: props => props.value.toLocaleString(),
-    }, {
-        Header: <Trans>last_time_updated_table_header</Trans>,
-        accessor: 'lastUpdated',
-        className: 'text-center',
-    }, {
-        Header: <Trans>actions_table_header</Trans>,
-        accessor: 'url',
-        Cell: ({ value }) => (
-            <button
-                type="button"
-                className="btn btn-icon btn-outline-secondary btn-sm"
-                onClick={() => this.handleDelete(value)}
-                title={this.props.t('delete_table_action')}
-            >
-                <svg className="icons">
-                    <use xlinkHref="#delete" />
-                </svg>
-            </button>
-        ),
-        className: 'text-center',
-        width: 80,
-        sortable: false,
-    },
+    columns = [
+        {
+            Header: <Trans>enabled_table_header</Trans>,
+            accessor: 'enabled',
+            Cell: this.renderCheckbox,
+            width: 90,
+            className: 'text-center',
+        },
+        {
+            Header: <Trans>name_table_header</Trans>,
+            accessor: 'name',
+            minWidth: 200,
+            Cell: CellWrap,
+        },
+        {
+            Header: <Trans>filter_url_table_header</Trans>,
+            accessor: 'url',
+            minWidth: 200,
+            Cell: ({ value }) => (
+                <div className="logs__row logs__row--overflow">
+                    <a
+                        href={value}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="link logs__text"
+                    >
+                        {value}
+                    </a>
+                </div>
+            ),
+        },
+        {
+            Header: <Trans>rules_count_table_header</Trans>,
+            accessor: 'rulesCount',
+            className: 'text-center',
+            minWidth: 100,
+            Cell: props => props.value.toLocaleString(),
+        },
+        {
+            Header: <Trans>last_time_updated_table_header</Trans>,
+            accessor: 'lastUpdated',
+            className: 'text-center',
+            minWidth: 150,
+            Cell: CellWrap,
+        },
+        {
+            Header: <Trans>actions_table_header</Trans>,
+            accessor: 'url',
+            Cell: ({ value }) => (
+                <button
+                    type="button"
+                    className="btn btn-icon btn-outline-secondary btn-sm"
+                    onClick={() => this.handleDelete(value)}
+                    title={this.props.t('delete_table_action')}
+                >
+                    <svg className="icons">
+                        <use xlinkHref="#delete" />
+                    </svg>
+                </button>
+            ),
+            className: 'text-center',
+            width: 80,
+            sortable: false,
+        },
     ];
 
     render() {
-        const { t } = this.props;
-        const { filters, userRules, processingRefreshFilters } = this.props.filtering;
+        const {
+            filtering, t, toggleFilteringModal, refreshFilters, addFilter,
+        } = this.props;
+        const {
+            filters,
+            userRules,
+            isModalOpen,
+            isFilterAdded,
+            processingRefreshFilters,
+            processingRemoveFilter,
+            processingAddFilter,
+            processingFilters,
+        } = filtering;
+
         return (
-            <div>
-                <PageTitle title={ t('filters') } />
+            <Fragment>
+                <PageTitle title={t('filters')} />
                 <div className="content">
                     <div className="row">
                         <div className="col-md-12">
                             <Card
-                                title={ t('filters_and_hosts') }
-                                subtitle={ t('filters_and_hosts_hint') }
+                                title={t('filters_and_hosts')}
+                                subtitle={t('filters_and_hosts_hint')}
                             >
                                 <ReactTable
                                     data={filters}
                                     columns={this.columns}
                                     showPagination={true}
                                     defaultPageSize={10}
+                                    loading={
+                                        processingFilters ||
+                                        processingAddFilter ||
+                                        processingRemoveFilter ||
+                                        processingRefreshFilters
+                                    }
                                     minRows={4}
-                                    // Text
-                                    previousText={ t('previous_btn') }
-                                    nextText={ t('next_btn') }
-                                    loadingText={ t('loading_table_status') }
-                                    pageText={ t('page_table_footer_text') }
-                                    ofText={ t('of_table_footer_text') }
-                                    rowsText={ t('rows_table_footer_text') }
-                                    noDataText={ t('no_filters_added') }
+                                    previousText={t('previous_btn')}
+                                    nextText={t('next_btn')}
+                                    loadingText={t('loading_table_status')}
+                                    pageText={t('page_table_footer_text')}
+                                    ofText={t('of_table_footer_text')}
+                                    rowsText={t('rows_table_footer_text')}
+                                    noDataText={t('no_filters_added')}
                                 />
                                 <div className="card-actions">
                                     <button
                                         className="btn btn-success btn-standard mr-2"
                                         type="submit"
-                                        onClick={this.props.toggleFilteringModal}
+                                        onClick={toggleFilteringModal}
                                     >
                                         <Trans>add_filter_btn</Trans>
                                     </button>
                                     <button
                                         className="btn btn-primary btn-standard"
                                         type="submit"
-                                        onClick={this.props.refreshFilters}
+                                        onClick={refreshFilters}
                                         disabled={processingRefreshFilters}
                                     >
                                         <Trans>check_updates_btn</Trans>
@@ -140,15 +186,13 @@ class Filters extends Component {
                     </div>
                 </div>
                 <Modal
-                    isOpen={this.props.filtering.isFilteringModalOpen}
-                    toggleModal={this.props.toggleFilteringModal}
-                    addFilter={this.props.addFilter}
-                    isFilterAdded={this.props.filtering.isFilterAdded}
-                    processingAddFilter={this.props.filtering.processingAddFilter}
-                    title={ t('new_filter_btn') }
-                    inputDescription={ t('enter_valid_filter_url') }
+                    isOpen={isModalOpen}
+                    toggleModal={toggleFilteringModal}
+                    addFilter={addFilter}
+                    isFilterAdded={isFilterAdded}
+                    processingAddFilter={processingAddFilter}
                 />
-            </div>
+            </Fragment>
         );
     }
 }
@@ -157,12 +201,15 @@ Filters.propTypes = {
     setRules: PropTypes.func,
     getFilteringStatus: PropTypes.func.isRequired,
     filtering: PropTypes.shape({
-        userRules: PropTypes.string,
-        filters: PropTypes.array,
-        isFilteringModalOpen: PropTypes.bool.isRequired,
-        isFilterAdded: PropTypes.bool,
-        processingAddFilter: PropTypes.bool,
-        processingRefreshFilters: PropTypes.bool,
+        userRules: PropTypes.string.isRequired,
+        filters: PropTypes.array.isRequired,
+        isModalOpen: PropTypes.bool.isRequired,
+        isFilterAdded: PropTypes.bool.isRequired,
+        processingFilters: PropTypes.bool.isRequired,
+        processingAddFilter: PropTypes.bool.isRequired,
+        processingRefreshFilters: PropTypes.bool.isRequired,
+        processingConfigFilter: PropTypes.bool.isRequired,
+        processingRemoveFilter: PropTypes.bool.isRequired,
     }),
     removeFilter: PropTypes.func.isRequired,
     toggleFilterStatus: PropTypes.func.isRequired,
@@ -170,8 +217,7 @@ Filters.propTypes = {
     toggleFilteringModal: PropTypes.func.isRequired,
     handleRulesChange: PropTypes.func.isRequired,
     refreshFilters: PropTypes.func.isRequired,
-    t: PropTypes.func,
+    t: PropTypes.func.isRequired,
 };
 
-
 export default withNamespaces()(Filters);

client/src/components/Logs/Logs.css

@@ -36,6 +36,10 @@
     overflow: hidden;
 }
 
+.logs__text--full {
+    width: 100%;
+}
+
 .logs__row .tooltip-custom {
     top: 0;
     margin-left: 0;

client/src/components/Logs/index.js

@@ -6,7 +6,7 @@ import endsWith from 'lodash/endsWith';
 import { Trans, withNamespaces } from 'react-i18next';
 import { HashLink as Link } from 'react-router-hash-link';
 
-import { formatTime, getClientName } from '../../helpers/helpers';
+import { formatTime, formatDateTime, getClientName } from '../../helpers/helpers';
 import { SERVICES, FILTERED_STATUS } from '../../helpers/constants';
 import { getTrackerData } from '../../helpers/trackers/trackers';
 import PageTitle from '../ui/PageTitle';
@@ -114,7 +114,7 @@ class Logs extends Component {
 
     getTimeCell = ({ value }) => (
         <div className="logs__row">
-            <span className="logs__text" title={value}>
+            <span className="logs__text" title={formatDateTime(value)}>
                 {formatTime(value)}
             </span>
         </div>
@@ -227,7 +227,7 @@ class Logs extends Component {
             {
                 Header: t('time_table_header'),
                 accessor: 'time',
-                maxWidth: 90,
+                maxWidth: 100,
                 filterable: false,
                 Cell: this.getTimeCell,
             },

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, withNamespaces } from 'react-i18next';
+import flow from 'lodash/flow';
+
+import { renderSelectField, toNumber } from '../../../helpers/form';
+import { FILTERS_INTERVALS_HOURS } from '../../../helpers/constants';
+
+const getTitleForInterval = (interval, t) => {
+    if (interval === 0) {
+        return t('disabled');
+    } else if (interval === 72 || interval === 168) {
+        return t('interval_days', { count: interval / 24 });
+    }
+
+    return t('interval_hours', { count: interval });
+};
+
+const getIntervalSelect = (processing, t, handleChange, toNumber) => (
+    <Field
+        name="interval"
+        className="custom-select"
+        component="select"
+        onChange={handleChange}
+        normalize={toNumber}
+        disabled={processing}
+    >
+        {FILTERS_INTERVALS_HOURS.map(interval => (
+            <option value={interval} key={interval}>
+                {getTitleForInterval(interval, t)}
+            </option>
+        ))}
+    </Field>
+);
+
+const Form = (props) => {
+    const {
+        handleSubmit, handleChange, processing, t,
+    } = props;
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="row">
+                <div className="col-12">
+                    <div className="form__group form__group--settings">
+                        <Field
+                            name="enabled"
+                            type="checkbox"
+                            modifier="checkbox--settings"
+                            component={renderSelectField}
+                            placeholder={t('block_domain_use_filters_and_hosts')}
+                            subtitle={t('filters_block_toggle_hint')}
+                            onChange={handleChange}
+                            disabled={processing}
+                        />
+                    </div>
+                </div>
+                <div className="col-12 col-md-5">
+                    <div className="form__group form__group--inner mb-5">
+                        <label className="form__label">
+                            <Trans>filters_interval</Trans>
+                        </label>
+
+                        {getIntervalSelect(processing, t, handleChange, toNumber)}
+                    </div>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+Form.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    handleChange: PropTypes.func,
+    change: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    invalid: PropTypes.bool.isRequired,
+    processing: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default flow([
+    withNamespaces(),
+    reduxForm({
+        form: 'filterConfigForm',
+    }),
+])(Form);

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

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withNamespaces } from 'react-i18next';
+import debounce from 'lodash/debounce';
+
+import { DEBOUNCE_TIMEOUT } from '../../../helpers/constants';
+import Form from './Form';
+
+class FiltersConfig extends Component {
+    handleFormChange = debounce((values) => {
+        this.props.setFiltersConfig(values);
+    }, DEBOUNCE_TIMEOUT);
+
+    render() {
+        const { interval, enabled, processing } = this.props;
+
+        return (
+            <Form
+                initialValues={{ interval, enabled }}
+                onSubmit={this.handleFormChange}
+                onChange={this.handleFormChange}
+                processing={processing}
+            />
+        );
+    }
+}
+
+FiltersConfig.propTypes = {
+    interval: PropTypes.number.isRequired,
+    enabled: PropTypes.bool.isRequired,
+    processing: PropTypes.bool.isRequired,
+    setFiltersConfig: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default withNamespaces()(FiltersConfig);

client/src/components/Settings/Settings.css

@@ -11,6 +11,17 @@
     margin-bottom: 20px;
 }
 
+.form__group--inner {
+    max-width: 300px;
+    margin-top: -10px;
+    margin-left: 40px;
+    font-size: 14px;
+}
+
+.form__group--checkbox {
+    margin-bottom: 25px;
+}
+
 .form__inline {
     display: flex;
     justify-content: flex-start;
@@ -109,3 +120,11 @@
 .custom-control-label:before {
     transition: 0.3s ease-in-out background-color, 0.3s ease-in-out color;
 }
+
+.custom-select:disabled {
+    background-color: #f9f9f9;
+}
+
+.custom-select {
+    transition: 0.3s ease-in-out background-color, 0.3s ease-in-out color;
+}

client/src/components/Settings/index.js

@@ -5,6 +5,7 @@ import { withNamespaces } from 'react-i18next';
 import Services from './Services';
 import StatsConfig from './StatsConfig';
 import LogsConfig from './LogsConfig';
+import FiltersConfig from './FiltersConfig';
 import Checkbox from '../ui/Checkbox';
 import Loading from '../ui/Loading';
 import PageTitle from '../ui/PageTitle';
@@ -14,11 +15,6 @@ import './Settings.css';
 
 class Settings extends Component {
     settings = {
-        filtering: {
-            enabled: false,
-            title: 'block_domain_use_filters_and_hosts',
-            subtitle: 'filters_block_toggle_hint',
-        },
         safebrowsing: {
             enabled: false,
             title: 'use_adguard_browsing_sec',
@@ -41,17 +37,20 @@ class Settings extends Component {
         this.props.getBlockedServices();
         this.props.getStatsConfig();
         this.props.getLogsConfig();
+        this.props.getFilteringStatus();
     }
 
     renderSettings = (settings) => {
-        if (Object.keys(settings).length > 0) {
-            return Object.keys(settings).map((key) => {
+        const settingsKeys = Object.keys(settings);
+
+        if (settingsKeys.length > 0) {
+            return settingsKeys.map((key) => {
                 const setting = settings[key];
                 const { enabled } = setting;
                 return (
                     <Checkbox
-                        key={key}
                         {...settings[key]}
+                        key={key}
                         handleChange={() => this.props.toggleSetting(key, enabled)}
                     />
                 );
@@ -71,6 +70,8 @@ class Settings extends Component {
             queryLogs,
             setLogsConfig,
             clearLogs,
+            filtering,
+            setFiltersConfig,
             t,
         } = this.props;
 
@@ -90,6 +91,12 @@ class Settings extends Component {
                             <div className="col-md-12">
                                 <Card bodyType="card-body box-body--settings">
                                     <div className="form">
+                                        <FiltersConfig
+                                            interval={filtering.interval}
+                                            enabled={filtering.enabled}
+                                            processing={filtering.processingSetConfig}
+                                            setFiltersConfig={setFiltersConfig}
+                                        />
                                         {this.renderSettings(settings.settingsList)}
                                     </div>
                                 </Card>
@@ -134,6 +141,8 @@ Settings.propTypes = {
     getStatsConfig: PropTypes.func.isRequired,
     setStatsConfig: PropTypes.func.isRequired,
     resetStats: PropTypes.func.isRequired,
+    setFiltersConfig: PropTypes.func.isRequired,
+    getFilteringStatus: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
 };
 

client/src/components/ui/CellWrap.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CellWrap = ({ value }) => (
+    <div className="logs__row logs__row--overflow">
+        <span className="logs__text logs__text--full" title={value}>
+            {value}
+        </span>
+    </div>
+);
+
+CellWrap.propTypes = {
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]),
+};
+
+export default CellWrap;

client/src/components/ui/Checkbox.css

@@ -18,7 +18,7 @@
 }
 
 .checkbox--settings .checkbox__label-title {
-    margin-bottom: 5px;
+    margin-bottom: 2px;
     font-weight: 600;
 }
 
@@ -53,7 +53,7 @@
     background-position: center center;
     background-size: 12px 10px;
     border-radius: 3px;
-    transition: 0.3s ease box-shadow;
+    transition: 0.3s ease-in-out box-shadow, 0.3s ease-in-out opacity;
 }
 
 .checkbox__label .checkbox__label-text {
@@ -82,10 +82,13 @@
 }
 
 .checkbox__input:disabled + .checkbox__label {
-    opacity: 0.6;
     cursor: default;
 }
 
+.checkbox__input:disabled + .checkbox__label:before {
+    opacity: 0.6;
+}
+
 .checkbox__label-text {
     max-width: 515px;
     line-height: 1.5;

client/src/components/ui/Checkbox.js

@@ -14,7 +14,7 @@ class Checkbox extends Component {
             t,
         } = this.props;
         return (
-            <div className="form__group">
+            <div className="form__group form__group--checkbox">
                 <label className="checkbox checkbox--settings">
                 <span className="checkbox__marker"/>
                 <input type="checkbox" className="checkbox__input" onChange={handleChange} checked={enabled}/>