updated add contact view for when user has empty address book

public/img/item-ico-contact.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Contact Avatar</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.100000001">
+        <g id="Card/Item/Contact" transform="translate(-19.000000, -12.000000)" fill="#000000">
+            <g id="Card/List/Contact">
+                <path d="M36.3869177,12 C26.8241129,12 19,19.8024979 19,29.3388843 C19,38.8752706 26.8241129,46.6777685 36.3869177,46.6777685 C45.9497224,46.6777685 53.7738353,38.8752706 53.7738353,29.3388843 C53.7738353,19.8024979 45.9497224,12 36.3869177,12 L36.3869177,12 Z M47.3986322,38.7307799 C46.3843953,36.4189287 44.2110306,35.4074938 42.0376659,34.6850402 C41.023429,34.3960588 40.4438651,33.3846239 40.2989741,32.5176797 C42.1825569,31.3617541 43.6314667,29.0499029 43.6314667,26.4490702 L43.6314667,25.0041632 C43.6314667,20.9584235 40.4438651,17.7796281 36.3869177,17.7796281 C32.3299702,17.7796281 29.1423686,20.9584235 29.1423686,25.0041632 L29.1423686,26.4490702 C29.1423686,29.0499029 30.5912784,31.3617541 32.6197522,32.6621704 C32.3299702,33.5291146 31.8952973,34.3960588 30.8810604,34.8295309 C28.7076957,35.5519845 26.534331,36.5634194 25.5200941,38.8752706 C23.2018384,36.274438 21.8978196,32.9511518 21.8978196,29.3388843 C21.8978196,21.3918956 28.4179137,14.889814 36.3869177,14.889814 C44.3559216,14.889814 50.8760157,21.3918956 50.8760157,29.3388843 C50.8760157,32.9511518 49.5719969,36.274438 47.3986322,38.7307799 L47.3986322,38.7307799 Z" id="Contact-Avatar"></path>
+            </g>
+        </g>
+    </g>
+</svg>

public/views/addressbook.html

@@ -1,4 +1,4 @@
-<ion-view>
+<ion-view id="view-address-book">
   <ion-nav-bar class="bar-royal">
     <ion-nav-back-button>
     </ion-nav-back-button>
@@ -39,12 +39,22 @@
 
       </ion-item>
     </ion-list>
-    <div class="list" ng-show="isEmptyList">
+    <div class="row text-center absolute-center" ng-show="isEmptyList">
+      <div id="add-contact" class="col col-80 center-block">
+        <img class="col" src="img/item-ico-contact.svg">
+        <a class="col col-40 center-block" ui-sref="tabs.addressbook.add">
+          Add Contact
+        </a>
+      </div>
+    </div>
+    <!-- <div class="list" ng-show="isEmptyList">
       <a class="item item-icon-left" ui-sref="tabs.addressbook.add">
-        <i class="icon ion-person-add"></i>
+        <i class="icon big-icon-svg">
+          <img src="img/item-ico-contact.svg" class="bg"/>
+        </i>
         <span translate>Add a new entry</span>
       </a>
-    </div>
+    </div> -->
 
   </ion-content>
 </ion-view>

src/sass/main.scss

@@ -993,6 +993,7 @@ input[type=number] {
 @import "views/tab-settings";
 @import "views/walletDetails";
 @import "views/bitpayCard";
+@import "views/address-book";
 @import "views/wallet-backup-phrase";
 @import 'views/onboarding/onboarding';
 @import "views/includes/walletActivity";

src/sass/mixins/layout.scss

@@ -1,8 +1,19 @@
 @mixin center-block($topBottom: 0) {
-  float:none;
+  float: none;
   margin: $topBottom auto;
 }
 
-.center-block{
+@mixin absolute-center() {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+}
+
+.center-block {
   @include center-block();
+}
+
+.absolute-center{
+  @include absolute-center();
 }

src/sass/views/address-book.scss

@@ -0,0 +1,66 @@
+#view-address-book {
+  .scroll{
+    height:100%;
+  }
+  #add-contact{
+    img{
+      width: 6rem;
+      display: inline-block;
+    }
+    a{
+      text-decoration: none;
+    }
+  }
+  .list {
+    .item {
+      color: #444;
+      border-top: none;
+      padding-top: 1.5rem;
+      padding-bottom: 1.5rem;
+      &:before {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: rgba(221, 221, 221, 0.3);
+        top: 0;
+        right: 0;
+        content: '';
+      }
+      &.item-divider {
+        color: rgba(74, 74, 74, .8);
+      }
+      &.item-heading {
+        &:before {
+          top: 99%
+        }
+      }
+      &.item-icon-left{
+        padding-left:80px;
+      }
+      &:nth-child(2) {
+        &:before {
+          width: 0;
+        }
+      }
+      .item-note {
+        color: rgb(58, 58, 58);
+      }
+      .big-icon-svg {
+        padding: 0 7px;
+        > .bg {
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          box-shadow: none;
+          background-repeat: no-repeat;
+          background-clip: padding-box;
+          background-size: 103%;
+          &.green {
+            background: rgb(1, 209, 162);
+          }
+        }
+      }
+    }
+  }
+}