feat(TabBar): replace react-icons with antD icons in TabBar

maidsafe · Dec 12, 2018 · af2bf94 · af2bf94
1 parent f216e08
commit af2bf94
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 34 deletions.
diff --git a/__tests__/components/TabBar.spec.js b/__tests__/components/TabBar.spec.js
@@ -2,10 +2,11 @@ import React from 'react';
 import { mount, render, shallow } from 'enzyme';
 
 import TabBar from 'components/TabBar';
-import MdClose from 'react-icons/lib/md/close';
-import MdAdd from 'react-icons/lib/md/add';
+// import MdClose from 'react-icons/lib/md/close';
+// import MdAdd from 'react-icons/lib/md/add';
 import { CLASSES } from 'appConstants';
 import { Spinner } from 'nessie-ui';
+import { Button } from 'antd';
 
 describe( 'TabBar', () =>
 {
@@ -53,14 +54,19 @@ describe( 'TabBar', () =>
             expect( wrapper.find( '#favicon-img' ).length ).toBe( 1 );
         } );
 
-        it( 'should have exactly 1 MdAdd component', () =>
+        it( 'should have exactly 2 button components', () =>
         {
-            expect( wrapper.find( MdAdd ).length ).toBe( 1 );
+            expect( wrapper.find( Button ).length ).toBe( 2 );
         } );
 
-        it( 'should have exactly 1 MdClose component', () =>
+        it( 'should have exactly 1 add tab component', () =>
         {
-            expect( wrapper.find( MdClose ).length ).toBe( 1 );
+            expect( wrapper.find( `.${CLASSES.ADD_TAB}` ).length ).toBe( 1 );
+        } );
+
+        it( 'should have exactly 1 close tab component', () =>
+        {
+            expect( wrapper.find( `.${CLASSES.CLOSE_TAB}` ).length ).toBe( 1 );
         } );
     } );
 

diff --git a/app/components/TabBar/TabBar.jsx b/app/components/TabBar/TabBar.jsx
@@ -5,12 +5,14 @@ import url from 'url';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from './tabBar.css';
-import MdClose from 'react-icons/lib/md/close';
-import MdAdd from 'react-icons/lib/md/add';
 import logger from 'logger';
 import { isInternalPage } from 'utils/urlHelpers';
 import { CLASSES, INTERNAL_PAGES } from 'appConstants';
 import { Column, Spinner, Row } from 'nessie-ui';
+import { Col, Button,Icon } from 'antd';
+import 'antd/lib/row/style';
+import 'antd/lib/col/style';
+import 'antd/lib/button/style';
 
 export default class TabBar extends Component
 {
@@ -136,10 +138,13 @@ export default class TabBar extends Component
                         { title || 'New Tab' }
                     </Column>
                     <Column align="right" className={ styles.favicon }>
-                        <MdClose
-                            className={ `${styles.tabCloseButton} ${CLASSES.CLOSE_TAB}` }
+                        <Button
+                            className={ `${styles.favicon} ${CLASSES.CLOSE_TAB}` }
                             onClick={ this.handleTabClose.bind( this, tabData ) }
-                            title="Close"
+                            icon="close"
+                            shape="circle"
+                            block="true"
+                            size="small"
                         />
                     </Column>
                 </Row>
@@ -155,10 +160,15 @@ export default class TabBar extends Component
                     {
                         this.getTabs()
                     }
-                    <div className={ `${styles.addTab} ${CLASSES.ADD_TAB}` } onClick={ this.handleAddTabClick.bind( this ) }>
-                        <MdAdd
+                    <div className={ `${styles.favicon} ${CLASSES.ADD_TAB}` }>
+                        <Button
+                            onClick={ this.handleAddTabClick.bind( this ) }
                             className={ styles.tabAddButton }
                             title="New Tab"
+                            icon="plus"
+                            size="small"
+                            shape="circle"
+                            block="true"
                         />
                     </div>
                 </div>

diff --git a/app/components/TabBar/tabBar.css b/app/components/TabBar/tabBar.css
@@ -101,8 +101,9 @@
 
 .favicon
 {
-  min-width: 20px;
-  max-width: 20px;
+  min-width: 24px;
+  max-width: 24px;
+  margin-left: 10px;
 }
 
 .favicon img

diff --git a/app/extensions/safe/test/e2e/safe-bookmark-login-out.network.spec.js b/app/extensions/safe/test/e2e/safe-bookmark-login-out.network.spec.js
@@ -24,9 +24,9 @@ import {
     , windowLoaded
 } from 'spectron-lib/setupSpectronApp';
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = DEFAULT_TIMEOUT_INTERVAL + 320000;
+jasmine.DEFAULT_TIMEOUT_INTERVAL = DEFAULT_TIMEOUT_INTERVAL + 420000;
 
-const NOTIFICATION_WAIT = WAIT_FOR_EXIST_TIMEOUT + 20000;
+const NOTIFICATION_WAIT = WAIT_FOR_EXIST_TIMEOUT + 40000;
 
 console.warn( 'This test runs against a packaged version of the DEV browser. If not built, this will FAIL')
 describe( 'SAFE network log in and out', async () =>
@@ -67,6 +67,7 @@ describe( 'SAFE network log in and out', async () =>
     describe( 'account data access', async ( ) =>
     {
         const { secret, password } = createAccountDetails();
+        await delay( 10000 );
         console.log( 'Creating authed app with deets: ', secret, password );
         it( 'can save and reaccess browser bookmark data.', async ( ) =>
         {
@@ -93,7 +94,7 @@ describe( 'SAFE network log in and out', async () =>
 
             // login
             await createAccount( app, secret, password, authTab );
-            await delay( 1500 );
+            await delay( 9500 );
 
 
             await setClientToMainBrowserWindow( app );
@@ -142,9 +143,9 @@ describe( 'SAFE network log in and out', async () =>
 
             await createAccount( app );
 
-            await delay( 1500 );
+            await delay( 9500 );
             await setClientToMainBrowserWindow( app );
-
+            await delay( 2500 );
             await client.waitForExist( BROWSER_UI.NOTIFICATION__ACCEPT, NOTIFICATION_WAIT );
             await client.click( BROWSER_UI.NOTIFICATION__ACCEPT );
             await delay( 1500 );
@@ -175,7 +176,7 @@ describe( 'SAFE network log in and out', async () =>
             await delay( 1500 );
 
             await login( app, secret, password );
-            await delay( 1500 );
+            await delay( 8500 );
 
             await setClientToMainBrowserWindow( app );
 

diff --git a/app/package.json b/app/package.json
@@ -21,7 +21,6 @@
     "cross-env": "5.1.3",
     "enum": "2.5.0",
     "ffi": "2.2.0",
-    "react-icons": "2.2.7",
     "ref": "1.3.5",
     "ref-array": "1.2.0",
     "ref-struct": "1.1.0",

diff --git a/app/yarn.lock b/app/yarn.lock
@@ -1167,18 +1167,6 @@ rdflib@^0.19.1:
     solid-auth-client "^2.2.3"
     xmldom "^0.1.22"
 
-[email protected]:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"
-  integrity sha1-oZbjP98eeqof2jrvu2i9rZ6Cp50=
-
-[email protected]:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.7.tgz#d7860826b258557510dac10680abea5ca23cf650"
-  integrity sha512-0n4lcGqzJFcIQLoQytLdJCE0DKSA9dkwEZRYoGrIDJZFvIT6Hbajx5mv9geqhqFiNjUgtxg8kPyDfjlhymbGFg==
-  dependencies:
-    react-icon-base "2.1.0"
-
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"