From cbef33859207536e7e8dc5ef872a4aaa61d51709 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Thu, 23 May 2019 12:32:51 +0300
Subject: [PATCH] * client: add icons for table buttons

---
 client/src/__locales/en.json                  |   3 ++-
 client/src/components/App/index.js            |   2 ++
 client/src/components/Filters/Filters.css     |  13 -----------
 client/src/components/Filters/index.js        |  14 ++++++++++--
 .../src/components/Settings/Clients/Form.js   |   4 +++-
 .../src/components/Settings/Clients/Modal.js  |   9 +++++++-
 .../src/components/Settings/Clients/index.js  |  21 +++++++++++++-----
 client/src/components/Settings/Settings.css   |   8 +++++++
 client/src/components/ui/Icons.css            |   5 +++++
 client/src/components/ui/Icons.js             | Bin 7992 -> 8660 bytes
 10 files changed, 55 insertions(+), 24 deletions(-)
 delete mode 100644 client/src/components/Filters/Filters.css
 create mode 100644 client/src/components/ui/Icons.css

diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index 96229d68..6ba40384 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -270,11 +270,12 @@
     "clients_desc": "Configure devices connected to AdGuard Home",
     "settings_global": "Global",
     "settings_custom": "Custom",
-    "add_client": "Add Client",
     "table_client": "Client",
     "table_name": "Name",
     "save_btn": "Save",
+    "client_add": "Add Client",
     "client_new": "New Client",
+    "client_edit": "Edit Client",
     "client_identifier": "Identifier",
     "ip_address": "IP address",
     "client_identifier_desc": "Clients can be identified by the IP address or MAC address. Please note, that using MAC as identifier is possible only if AdGuard Home is also a <0>DHCP server</0>",
diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js
index 157a55e6..6e5ed768 100644
--- a/client/src/components/App/index.js
+++ b/client/src/components/App/index.js
@@ -21,6 +21,7 @@ import Status from '../ui/Status';
 import UpdateTopline from '../ui/UpdateTopline';
 import UpdateOverlay from '../ui/UpdateOverlay';
 import EncryptionTopline from '../ui/EncryptionTopline';
+import Icons from '../ui/Icons';
 import i18n from '../../i18n';
 
 class App extends Component {
@@ -103,6 +104,7 @@ class App extends Component {
                     </div>
                     <Footer />
                     <Toasts />
+                    <Icons />
                 </Fragment>
             </HashRouter>
         );
diff --git a/client/src/components/Filters/Filters.css b/client/src/components/Filters/Filters.css
deleted file mode 100644
index ac4bae8e..00000000
--- a/client/src/components/Filters/Filters.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.remove-icon {
-    position: relative;
-    top: 2px;
-    display: inline-block;
-    width: 20px;
-    height: 18px;
-    opacity: 0.6;
-}
-
-.remove-icon:hover {
-    cursor: pointer;
-    opacity: 1;
-}
diff --git a/client/src/components/Filters/index.js b/client/src/components/Filters/index.js
index daf5b6e9..624c9f2f 100644
--- a/client/src/components/Filters/index.js
+++ b/client/src/components/Filters/index.js
@@ -6,7 +6,6 @@ import Modal from '../ui/Modal';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
 import UserRules from './UserRules';
-import './Filters.css';
 
 class Filters extends Component {
     componentDidMount() {
@@ -59,7 +58,18 @@ class Filters extends Component {
     }, {
         Header: <Trans>actions_table_header</Trans>,
         accessor: 'url',
-        Cell: ({ value }) => (<span title={ this.props.t('delete_table_action') } className='remove-icon fe fe-trash-2' onClick={() => this.props.removeFilter(value)}/>),
+        Cell: ({ value }) => (
+            <button
+                type="button"
+                className="btn btn-icon btn-outline-secondary btn-sm"
+                onClick={() => this.props.removeFilter(value)}
+                title={this.props.t('delete_table_action')}
+            >
+                <svg className="icons">
+                    <use xlinkHref="#delete" />
+                </svg>
+            </button>
+        ),
         className: 'text-center',
         width: 80,
         sortable: false,
diff --git a/client/src/components/Settings/Clients/Form.js b/client/src/components/Settings/Clients/Form.js
index 1874a746..4a32f9f8 100644
--- a/client/src/components/Settings/Clients/Form.js
+++ b/client/src/components/Settings/Clients/Form.js
@@ -103,7 +103,9 @@ let Form = (props) => {
                 </div>
 
                 <div className="mb-4">
-                    <strong>Settings</strong>
+                    <strong>
+                        <Trans>settings</Trans>
+                    </strong>
                 </div>
 
                 <div className="form__group">
diff --git a/client/src/components/Settings/Clients/Modal.js b/client/src/components/Settings/Clients/Modal.js
index 2c7cf7ce..49e3483e 100644
--- a/client/src/components/Settings/Clients/Modal.js
+++ b/client/src/components/Settings/Clients/Modal.js
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import { Trans, withNamespaces } from 'react-i18next';
 import ReactModal from 'react-modal';
 
+import { MODAL_TYPE } from '../../../helpers/constants';
 import Form from './Form';
 
 const Modal = (props) => {
     const {
         isModalOpen,
+        modalType,
         currentClientData,
         handleSubmit,
         toggleClientModal,
@@ -25,7 +27,11 @@ const Modal = (props) => {
             <div className="modal-content">
                 <div className="modal-header">
                     <h4 className="modal-title">
-                        <Trans>client_new</Trans>
+                        {modalType === MODAL_TYPE.EDIT ? (
+                            <Trans>client_edit</Trans>
+                        ) : (
+                            <Trans>client_new</Trans>
+                        )}
                     </h4>
                     <button type="button" className="close" onClick={() => toggleClientModal()}>
                         <span className="sr-only">Close</span>
@@ -47,6 +53,7 @@ const Modal = (props) => {
 
 Modal.propTypes = {
     isModalOpen: PropTypes.bool.isRequired,
+    modalType: PropTypes.string.isRequired,
     currentClientData: PropTypes.object.isRequired,
     handleSubmit: PropTypes.func.isRequired,
     toggleClientModal: PropTypes.func.isRequired,
diff --git a/client/src/components/Settings/Clients/index.js b/client/src/components/Settings/Clients/index.js
index 9a7ceea0..948252a0 100644
--- a/client/src/components/Settings/Clients/index.js
+++ b/client/src/components/Settings/Clients/index.js
@@ -139,19 +139,21 @@ class Clients extends Component {
         {
             Header: this.props.t('actions_table_header'),
             accessor: 'actions',
+            maxWidth: 150,
             Cell: (row) => {
                 const clientName = row.original.name;
                 const {
                     toggleClientModal,
                     processingDeleting,
                     processingUpdating,
+                    t,
                 } = this.props;
 
                 return (
                     <div className="logs__row logs__row--center">
                         <button
                             type="button"
-                            className="btn btn-outline-primary btn-sm mr-2"
+                            className="btn btn-icon btn-outline-primary btn-sm mr-2"
                             onClick={() =>
                                 toggleClientModal({
                                     type: MODAL_TYPE.EDIT,
@@ -159,16 +161,22 @@ class Clients extends Component {
                                 })
                             }
                             disabled={processingUpdating}
+                            title={t('edit_table_action')}
                         >
-                            <Trans>edit_table_action</Trans>
+                            <svg className="icons">
+                                <use xlinkHref="#edit" />
+                            </svg>
                         </button>
                         <button
                             type="button"
-                            className="btn btn-outline-secondary btn-sm"
+                            className="btn btn-icon btn-outline-secondary btn-sm"
                             onClick={() => this.handleDelete({ name: clientName })}
                             disabled={processingDeleting}
+                            title={t('delete_table_action')}
                         >
-                            <Trans>delete_table_action</Trans>
+                            <svg className="icons">
+                                <use xlinkHref="#delete" />
+                            </svg>
                         </button>
                     </div>
                 );
@@ -181,6 +189,7 @@ class Clients extends Component {
             t,
             clients,
             isModalOpen,
+            modalType,
             modalClientName,
             toggleClientModal,
             processingAdding,
@@ -203,7 +212,6 @@ class Clients extends Component {
                         showPagination={true}
                         defaultPageSize={10}
                         minRows={5}
-                        resizable={false}
                         previousText={t('previous_btn')}
                         nextText={t('next_btn')}
                         loadingText={t('loading_table_status')}
@@ -218,11 +226,12 @@ class Clients extends Component {
                         onClick={() => toggleClientModal(MODAL_TYPE.ADD)}
                         disabled={processingAdding}
                     >
-                        <Trans>add_client</Trans>
+                        <Trans>client_add</Trans>
                     </button>
 
                     <Modal
                         isModalOpen={isModalOpen}
+                        modalType={modalType}
                         toggleClientModal={toggleClientModal}
                         currentClientData={currentClientData}
                         handleSubmit={this.handleSubmit}
diff --git a/client/src/components/Settings/Settings.css b/client/src/components/Settings/Settings.css
index 2da2ce74..281330df 100644
--- a/client/src/components/Settings/Settings.css
+++ b/client/src/components/Settings/Settings.css
@@ -76,3 +76,11 @@
 .encryption__list li {
     list-style: inside;
 }
+
+.btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+}
diff --git a/client/src/components/ui/Icons.css b/client/src/components/ui/Icons.css
new file mode 100644
index 00000000..17d608fd
--- /dev/null
+++ b/client/src/components/ui/Icons.css
@@ -0,0 +1,5 @@
+.icons {
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+}
diff --git a/client/src/components/ui/Icons.js b/client/src/components/ui/Icons.js
index dec6f0cd5a1bfdb2017443e3121cc4ed3ae9b7ae..ef802433c015270612c64fcca99e14752d6e03f2 100644
GIT binary patch
delta 610
zcmc(by-ve05XW~UrV7Lm!O2p^g43Ln6e^JpbOEW%%u!+#Lt<Bn8`$~^NSWaskQjIn
z-iC!sr54i{z#r$+|E&A?eNMk-FWx{^3sYM-^+z|E(T$%q&HK^!arfaJtYoe%gI39>
zEAyPN00IyZ9R`i9&7(|MwybNZ?aY*>W^k{{GGW?ix%n|yT4w1YVYON6+*Kcp(mV2<
z%59M_!KQoAuhrTDTrN^uK%TH$M2N1VRDhsXXmj#fbOZ{B;;+C(%g@<p>SVd_V-S9v
z3LgcM*V{fHLI~j;1z=qA2=)<>o{1lGy4|aHw#sEGElu}NOg2OuCRGUIf;t|%BUU(p
zu?q&FM^$hPw(xqXXM+)?2wE<j2nC8?s)UFz3o0<&LadN*VY^c`T5H{#ci0V1hCf+n
Bsp9|u

delta 14
WcmccOyu)sS%tqtya+B99ssaEr00uh%