Added components for web setup

client/src/components/App/index.css

@@ -1,7 +1,7 @@
 body {
     margin: 0;
     padding: 0;
-    font-family: sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 }
 
 .status {
@@ -26,3 +26,7 @@ body {
     height: 3px;
     background: linear-gradient(45deg, rgba(99, 125, 120, 1) 0%, rgba(88, 177, 101, 1) 100%);
 }
+
+.hidden {
+    display: none;
+}

client/src/components/Filters/UserRules.js

@@ -25,7 +25,7 @@ class UserRules extends Component {
                     <textarea className="form-control form-control--textarea-large" value={this.props.userRules} onChange={this.handleChange} />
                     <div className="card-actions">
                         <button
-                            className="btn btn-success btn-standart"
+                            className="btn btn-success btn-standard"
                             type="submit"
                             onClick={this.handleSubmit}
                         >

client/src/components/Filters/index.js

@@ -96,14 +96,14 @@ class Filters extends Component {
                                 />
                                 <div className="card-actions">
                                     <button
-                                        className="btn btn-success btn-standart mr-2"
+                                        className="btn btn-success btn-standard mr-2"
                                         type="submit"
                                         onClick={this.props.toggleFilteringModal}
                                     >
                                         <Trans>add_filter_btn</Trans>
                                     </button>
                                     <button
-                                        className="btn btn-primary btn-standart"
+                                        className="btn btn-primary btn-standard"
                                         type="submit"
                                         onClick={this.props.refreshFilters}
                                         disabled={processingRefreshFilters}

client/src/components/Header/index.js

@@ -6,7 +6,7 @@ import { Trans, withNamespaces } from 'react-i18next';
 
 import Menu from './Menu';
 import Version from './Version';
-import logo from './logo.svg';
+import logo from '../ui/svg/logo.svg';
 import './Header.css';
 
 class Header extends Component {

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

@@ -124,7 +124,7 @@ const Form = (props) => {
 
             <button
                 type="submit"
-                className="btn btn-success btn-standart"
+                className="btn btn-success btn-standard"
                 disabled={pristine || submitting}
             >
                 {t('save_config')}

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

@@ -37,7 +37,7 @@ class Dhcp extends Component {
             return (
                 <button
                     type="button"
-                    className="btn btn-standart mr-2 btn-gray"
+                    className="btn btn-standard mr-2 btn-gray"
                     onClick={() => this.props.toggleDhcp(config)}
                     disabled={processingDhcp}
                 >
@@ -49,7 +49,7 @@ class Dhcp extends Component {
         return (
             <button
                 type="button"
-                className="btn btn-standart mr-2 btn-success"
+                className="btn btn-standard mr-2 btn-success"
                 onClick={() => this.handleToggle(config)}
                 disabled={!filledConfig || activeDhcpFound || processingDhcp}
             >
@@ -91,8 +91,8 @@ class Dhcp extends Component {
     render() {
         const { t, dhcp } = this.props;
         const statusButtonClass = classnames({
-            'btn btn-primary btn-standart': true,
-            'btn btn-primary btn-standart btn-loading': dhcp.processingStatus,
+            'btn btn-primary btn-standard': true,
+            'btn btn-primary btn-standard btn-loading': dhcp.processingStatus,
         });
 
         return (

client/src/components/Settings/Settings.css

@@ -11,7 +11,7 @@
     margin-bottom: 15px;
 }
 
-.btn-standart {
+.btn-standard {
     padding-left: 20px;
     padding-right: 20px;
 }

client/src/components/Settings/Upstream.js

@@ -21,8 +21,8 @@ class Upstream extends Component {
 
     render() {
         const testButtonClass = classnames({
-            'btn btn-primary btn-standart mr-2': true,
-            'btn btn-primary btn-standart mr-2 btn-loading': this.props.processingTestUpstream,
+            'btn btn-primary btn-standard mr-2': true,
+            'btn btn-primary btn-standard mr-2 btn-loading': this.props.processingTestUpstream,
         });
         const { t } = this.props;
 
@@ -49,7 +49,7 @@ class Upstream extends Component {
                                     <Trans>test_upstream_btn</Trans>
                                 </button>
                                 <button
-                                    className="btn btn-success btn-standart"
+                                    className="btn btn-success btn-standard"
                                     type="submit"
                                     onClick={this.handleSubmit}
                                 >

client/src/components/ui/Tab.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+class Tab extends Component {
+    handleClick = () => {
+        this.props.onClick(this.props.label);
+    }
+
+    render() {
+        const {
+            activeTab,
+            label,
+        } = this.props;
+
+        const tabClass = classnames({
+            tab__control: true,
+            'tab__control--active': activeTab === label,
+        });
+
+        return (
+            <div
+                className={tabClass}
+                onClick={this.handleClick}
+            >
+                 <svg className="tab__icon">
+                    <use xlinkHref={`#${label.toLowerCase()}`} />
+                </svg>
+                {label}
+            </div>
+        );
+    }
+}
+
+Tab.propTypes = {
+    activeTab: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
+
+export default Tab;

client/src/components/ui/Tabs.css

@@ -0,0 +1,42 @@
+.tabs__controls {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    padding: 15px 0;
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.tab__control {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 70px;
+    font-size: 13px;
+    color: #555555;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.tab__control:hover,
+.tab__control:focus {
+    opacity: 1;
+}
+
+.tab__control--active {
+    font-weight: 700;
+    color: #4a4a4a;
+    opacity: 1;
+}
+
+.tab__title {
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.tab__icon {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 6px;
+    fill: #4a4a4a;
+}

client/src/components/ui/Tabs.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import Tab from './Tab';
+import './Tabs.css';
+
+class Tabs extends Component {
+    state = {
+        activeTab: this.props.children[0].props.label,
+    };
+
+    onClickTabControl = (tab) => {
+        this.setState({ activeTab: tab });
+    }
+
+    render() {
+        const {
+            props: {
+                children,
+            },
+            state: {
+                activeTab,
+            },
+        } = this;
+
+        return (
+            <div className="tabs">
+                <div className="tabs__controls">
+                    {children.map((child) => {
+                        const { label } = child.props;
+
+                        return (
+                            <Tab
+                                activeTab={activeTab}
+                                key={label}
+                                label={label}
+                                onClick={this.onClickTabControl}
+                            />
+                        );
+                    })}
+                </div>
+                <div className="tabs__content">
+                    {children.map((child) => {
+                        if (child.props.label !== activeTab) {
+                            return false;
+                        }
+                        return child.props.children;
+                    })}
+                </div>
+            </div>
+        );
+    }
+}
+
+Tabs.propTypes = {
+    children: PropTypes.array.isRequired,
+};
+
+export default Tabs;