Review changes

client/src/__locales/en.json

@@ -551,5 +551,13 @@
     "cache_ttl_min_override_desc": "Override TTL value (minimum) received from upstream server. This value can't larger than 3600 (1 hour)",
     "cache_ttl_max_override_desc": "Override TTL value (maximum) received from upstream server",
     "min_exceeds_max_value": "Minimum value exceeds maximum value",
-    "value_not_larger_than": "Value can't be larger than {{maximum}}"
+    "value_not_larger_than": "Value can't be larger than {{maximum}}",
+    "filter_category_general": "General",
+    "filter_category_security": "Security",
+    "filter_category_regional": "Regional",
+    "filter_category_other": "Other",
+    "filter_category_general_desc": "Lists that block tracking and advertising on most of the devices",
+    "filter_category_security_desc": "Lists that specialize on blocking malware, phishing or scam domains",
+    "filter_category_regional_desc": "Lists that focus on regional ads and tracking servers",
+    "filter_category_other_desc": "Other blocklists"
 }

client/src/components/Filters/DnsBlocklist.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -95,7 +95,7 @@ class DnsBlocklist extends Component {
             || processingRefreshFilters;
 
         return (
-            <Fragment>
+            <>
                 <PageTitle
                     title={t('dns_blocklists')}
                     subtitle={t('dns_blocklists_desc')}
@@ -134,7 +134,7 @@ class DnsBlocklist extends Component {
                     modalType={modalType}
                     currentFilterData={currentFilterData}
                 />
-            </Fragment>
+            </>
         );
     }
 }

client/src/components/Filters/Form.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
+import classNames from 'classnames';
 import { validatePath, validateRequiredValue } from '../../helpers/validators';
 import { renderInputField, renderSelectField } from '../../helpers/form';
 import { MODAL_OPEN_TIMEOUT, MODAL_TYPE, FORM_NAME } from '../../helpers/constants';
@@ -14,19 +15,19 @@ const getIconsData = (homepage, source) => ([
         className: 'ml-1',
     },
     {
-        iconName: 'setup',
+        iconName: 'info',
         href: source,
-        className: '',
     },
 ]);
 
 const renderIcons = (iconsData) => iconsData.map(({
     iconName,
     href,
     className = '',
-}) => <a key={iconName} href={href}
-         className={`${className} d-flex align-items-center`.trim()}>
-    <svg className="nav-icon">
+}) => <a key={iconName} href={href} target="_blank" rel="noopener noreferrer"
+         className={classNames('d-flex align-items-center', className)}
+>
+    <svg className="nav-icon nav-icon--gray">
         <use xlinkHref={`#${iconName}`} />
     </svg>
 </a>);
@@ -45,30 +46,29 @@ const renderFilters = ({ categories, filters }, selectedSources, t) => Object.ke
                 }
             });
 
-        // TODO: add description
-        // TODO: add name and description localization
-
-        return (<div key={category.name} className="modal-body__item">
-            <h6 className="form__label form__label--with-desc form__label--bold pb-2">{category.name}</h6>
+        return <div key={category.name} className="modal-body__item">
+            <h6 className="font-weight-bold mb-1">{t(category.name)}</h6>
+            <p className="mb-3">{t(category.description)}</p>
             {categoryFilters.map((filter) => {
                 const { homepage, source, name } = filter;
 
                 const isSelected = Object.prototype.hasOwnProperty.call(selectedSources, source);
 
                 const iconsData = getIconsData(homepage, source);
 
-                return <div key={name} className="d-flex align-items-center">
+                return <div key={name} className="d-flex align-items-center pb-1">
                     <Field
                         name={`${filter.id}`}
                         type="checkbox"
                         component={renderSelectField}
                         placeholder={t(name)}
                         disabled={isSelected}
+                        checked={isSelected}
                     />
                     {renderIcons(iconsData)}
                 </div>;
             })}
-        </div>);
+        </div>;
     });
 
 const Form = (props) => {

client/src/components/Header/Header.css

@@ -160,6 +160,10 @@
         display: none;
     }
 
+    .nav-icon--gray {
+        color: #9aa0ac;
+    }
+
     .header-brand-img {
         height: 32px;
     }

client/src/helpers/filters/filters.json

@@ -1,20 +1,20 @@
 {
     "categories": {
         "general": {
-            "name": "General",
-            "description": "Lists that block tracking and advertising on most of the devices"
+            "name": "filter_category_general",
+            "description": "filter_category_general_desc"
         },
         "security": {
-            "name": "Security",
-            "description": "Lists that specialize on blocking malware, phishing or scam domains"
+            "name": "filter_category_security",
+            "description": "filter_category_security_desc"
         },
         "regional": {
-            "name": "Regional",
-            "description": "Lists that focus on regional ads and tracking servers"
+            "name": "filter_category_regional",
+            "description": "filter_category_regional_desc"
         },
         "other": {
-            "name": "Other",
-            "description": "Other blocklists"
+            "name": "filter_category_other",
+            "description": "filter_category_other_desc"
         }
     },
     "filters": {
@@ -45,14 +45,14 @@
         "game-console-adblock-list": {
             "name": "Game Console Adblock List",
             "categoryId": "general",
-            "homepage": "https://raw.githubusercontent.com/DandelionSprout/adfilt/master/GameConsoleAdblockList.txt",
-            "source": "https://github.com/DandelionSprout/adfilt"
+            "homepage": "https://github.com/DandelionSprout/adfilt",
+            "source": "https://raw.githubusercontent.com/DandelionSprout/adfilt/master/GameConsoleAdblockList.txt"
         },
         "perflyst-dandelion-sprout-smart-tv-blocklist-for-adguard-home": {
             "name": "Perflyst and Dandelion Sprout's Smart-TV Blocklist",
             "categoryId": "general",
             "homepage": "https://github.com/Perflyst/PiHoleBlocklist",
-            "source": "https://github.com/Perflyst/PiHoleBlocklist/blob/master/SmartTV-AGH.txt"
+            "source": "https://raw.githubusercontent.com/Perflyst/PiHoleBlocklist/master/SmartTV-AGH.txt"
         },
         "malwaredomainlist-com-hosts-list": {
             "name": "MalwareDomainList.com Hosts List",

client/src/helpers/form.js

@@ -158,11 +158,12 @@ export const renderSelectField = ({
     disabled,
     onClick,
     modifier = 'checkbox--form',
+    checked,
     meta: { touched, error },
-}) => <Fragment>
+}) => <>
     <label className={`checkbox ${modifier}`} onClick={onClick}>
         <span className="checkbox__marker" />
-        <input {...input} type="checkbox" className="checkbox__input" disabled={disabled} />
+        <input {...input} type="checkbox" className="checkbox__input" disabled={disabled} checked={input.checked || checked}/>
         <span className="checkbox__label">
                         <span className="checkbox__label-text checkbox__label-text--long">
                             <span className="checkbox__label-title">{placeholder}</span>
@@ -178,7 +179,7 @@ export const renderSelectField = ({
     {!disabled
     && touched
     && error && <span className="form__message form__message--error">{error}</span>}
-</Fragment>;
+</>;
 
 renderSelectField.propTypes = {
     input: PropTypes.object.isRequired,
@@ -187,6 +188,7 @@ renderSelectField.propTypes = {
     disabled: PropTypes.bool,
     onClick: PropTypes.func,
     modifier: PropTypes.string,
+    checked: PropTypes.bool,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
         error: PropTypes.object,