From e3bd63777cd553dab2c55bdee72b6b1f70fbcdbe Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Thu, 22 Sep 2016 11:46:52 -0400
Subject: [PATCH] updated add contact view for when user has empty address book

---
 public/img/item-ico-contact.svg  | 14 +++++++
 public/views/addressbook.html    | 18 +++++++--
 src/sass/main.scss               |  1 +
 src/sass/mixins/layout.scss      | 15 +++++++-
 src/sass/views/address-book.scss | 66 ++++++++++++++++++++++++++++++++
 5 files changed, 108 insertions(+), 6 deletions(-)
 create mode 100644 public/img/item-ico-contact.svg
 create mode 100644 src/sass/views/address-book.scss

diff --git a/public/img/item-ico-contact.svg b/public/img/item-ico-contact.svg
new file mode 100644
index 000000000..4ae7623c0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/views/addressbook.html b/public/views/addressbook.html
index fea7fcf67..9262127bc 100644
--- a/public/views/addressbook.html
+++ b/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>
diff --git a/src/sass/main.scss b/src/sass/main.scss
index f8c178211..4974b6297 100644
--- a/src/sass/main.scss
+++ b/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";
diff --git a/src/sass/mixins/layout.scss b/src/sass/mixins/layout.scss
index c55eb4932..4d1934eae 100644
--- a/src/sass/mixins/layout.scss
+++ b/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();
 }
\ No newline at end of file
diff --git a/src/sass/views/address-book.scss b/src/sass/views/address-book.scss
new file mode 100644
index 000000000..730a5571a
--- /dev/null
+++ b/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);
+          }
+        }
+      }
+    }
+  }
+}