Ensure method of adding contact when contacts exist (#10963)

Author: darkwing

ui/pages/settings/contact-list-tab/contact-list-tab.component.js

@@ -5,6 +5,7 @@ import {
   CONTACT_ADD_ROUTE,
   CONTACT_VIEW_ROUTE,
 } from '../../../helpers/constants/routes';
+import Button from '../../../components/ui/button';
 import EditContact from './edit-contact';
 import AddContact from './add-contact';
 import ViewContact from './view-contact';
@@ -66,6 +67,25 @@ export default class ContactListTab extends Component {
     );
   }
 
+  renderAddButton() {
+    const { history } = this.props;
+
+    return (
+      <div className="address-book-add-button">
+        <Button
+          className="address-book-add-button__button"
+          type="secondary"
+          rounded
+          onClick={() => {
+            history.push(CONTACT_ADD_ROUTE);
+          }}
+        >
+          {this.context.t('addContact')}
+        </Button>
+      </div>
+    );
+  }
+
   renderContactContent() {
     const {
       viewingContact,
@@ -106,10 +126,13 @@ export default class ContactListTab extends Component {
   }
 
   render() {
+    const { addingContact, addressBook } = this.props;
+
     return (
       <div className="address-book-wrapper">
         {this.renderAddressBookContent()}
         {this.renderContactContent()}
+        {!addingContact && addressBook.length > 0 && this.renderAddButton()}
       </div>
     );
   }

ui/pages/settings/contact-list-tab/index.scss

@@ -250,23 +250,14 @@
 .address-book-add-button {
   &__button {
     position: absolute;
-    top: 80px;
+    top: 85px;
     right: 16px;
-    height: 56px;
-    width: 56px;
-    border-radius: 18px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    border-width: 1px;
-    background: $primary-blue;
-    margin-right: 5px;
-    cursor: pointer;
-    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
+    width: auto;
+    border-radius: 100px;
 
     @media screen and (max-width: 576px) {
-      top: 10px;
+      top: 16px;
+      right: 60px;
     }
   }
 }