Merge pull request #381 from bitjson/wip/design

Design Work

app-template/bitpay/appConfig.json

@@ -13,12 +13,12 @@
   "gitHubRepoName": "bitpay-wallet",
   "disclaimerUrl": "",
   "url": "https://bitpay.com",
-  "appDescription": "Secure Bitcoin Storage",
+  "appDescription": "Secure Bitcoin Wallet",
   "winAppName": "BitPayWallet",
   "wpPublisherId": "{}",
   "wpProductId": "{}",
   "pushSenderId": "1036948132229",
-  "description": "Secure Bitcoin Storage",
+  "description": "Secure Bitcoin Wallet",
   "version": "0.14.0",
   "androidVersion": "1",
   "_extraCSS": null,

src/sass/icons.scss

@@ -14,6 +14,19 @@
   padding-left: 74px;
 }
 
+
+.icon-svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > img {
+    background-repeat:no-repeat;
+    background-clip: padding-box;
+    background-size: contain;
+    height: 18px;
+  }
+}
+
 .big-icon-svg {
   padding: 0 7px;
   > .bg {

src/sass/ionic.scss

@@ -27,3 +27,14 @@ ion-tabs.ion-tabs-transparent {
     }
   }
 }
+
+// .placeholder-icon padding cannot be modified by a variable
+$placeholder-icon-padding: 10px;
+.placeholder-icon {
+  &:first-child {
+    padding-right: $placeholder-icon-padding;
+  }
+  &:last-child {
+    padding-left: $placeholder-icon-padding;
+  }
+}

src/sass/views/includes/modals/backup-confirm-modal.scss

@@ -1,3 +0,0 @@
-#backup-confirm-modal{
-  
-}

src/sass/views/includes/modals/backup-needed-modal.scss

@@ -0,0 +1,12 @@
+#backup-needed-modal{
+  .button.button-secondary {
+    font-size: 14px;
+    margin-top: 0;
+  }
+  .button {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 1rem;
+  }
+}

src/sass/views/includes/modals/modals.scss

@@ -73,5 +73,5 @@
   background: rgba(0, 0, 0, .8);
 }
 
-@import "backup-confirm-modal";
+@import "backup-needed-modal";
 @import "screenshot-warning-model";

src/sass/views/tab-receive.scss

@@ -32,9 +32,6 @@
       font-size: .8rem;
       i {
         font-size: 1.3rem;
-        &.ion-social-bitcoin-outline {
-          border-right: 1px solid rgb(228, 228, 228);
-        }
       }
     }
     .bit-address {
@@ -111,6 +108,10 @@
       margin-bottom:1rem;
     }
   }
+  .receive-tab-bitcoin-icon {
+    border-right: 1px solid rgb(228, 228, 228);
+    padding-right: 10px;
+  }
 }
 
 @keyframes fadeIn {

www/img/icon-bitcoin-symbol.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Bitcoin_Symbol" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 12 16" style="enable-background:new 0 0 12 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#5D5D5D;}
+</style>
+<path class="st0" d="M7.4,2.5l0-2.4L6,0.2l0,2.3c-0.4,0-0.8,0-1.2,0l0-2.3l-1.5,0l0,2.4c-0.3,0-0.6,0-0.9,0l-2,0l0,1.5
+	c0,0,1.1,0,1,0c0.6,0,0.8,0.3,0.8,0.6l0,6.5c0,0.2-0.2,0.5-0.6,0.5c0,0-1.1,0-1.1,0l-0.3,1.7l1.9,0c0.4,0,0.7,0,1,0l0,2.4l1.5,0
+	l0-2.4c0.4,0,0.8,0,1.2,0l0,2.3l1.5,0l0-2.4c2.5-0.1,4.2-0.7,4.4-3c0.2-1.8-0.7-2.6-2.1-3C10.5,7,11,6.2,10.9,5
+	C10.7,3.3,9.3,2.7,7.4,2.5z M8.8,10.1c0,1.8-3.1,1.6-4.1,1.6l0-3.2C5.7,8.5,8.8,8.2,8.8,10.1L8.8,10.1z M8.2,5.6
+	c0,1.6-2.6,1.4-3.4,1.4l0-2.9C5.6,4.2,8.2,3.9,8.2,5.6L8.2,5.6z"/>
+</svg>

www/views/includes/backupNeededPopup.html

@@ -3,25 +3,11 @@
     <div class="popup-modal-header-img-warning popup-modal-header-img"></div>
   </div>
   <div class="popup-modal-content popup-modal-content-warning">
-    <div class="text-center">
-      <h5 translate>Backup Needed</h5>
-      <p translate>Now is a good time to backup your wallet. If this device is lost, it is impossible to access your funds without a backup.</p>
-      <div class="row">
-        <div class="col">
-          <button
-            class="button button-clear expand"
-            ng-click="close()"
-            translate>Not now
-          </button>
-        </div>
-        <div class="col">
-          <button
-            class="button button-clear expand"
-            ng-click="doBackup()"
-            translate>OK
-          </button>
-        </div>
-      </div>
+    <div>
+      <div class="popup-modal-heading" translate>Backup Needed</div>
+      <div class="popup-modal-message" translate>Now is a good time to backup your wallet. If this device is lost, it is impossible to access your funds without a backup.</div>
+      <button class="button button-clear" ng-click="doBackup()" translate>Backup now</button>
+      <button class="button button-secondary button-clear" ng-click="close()" translate>Remind me later</button>
     </div>
   </div>
 </div>

www/views/modals/tx-details.html

@@ -56,7 +56,7 @@
 
     <div class="list">
       <div class="item item-icon-left" ng-show="btx.action == 'sent'">
-        <i class="icon ion-social-bitcoin-outline"></i>
+        <i class="icon icon-svg"><img src="img/icon-bitcoin-symbol.svg"></i>
         <div ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" copy-to-clipboard="btx.addressTo">
           <span ng-if="btx.merchant">
             <span ng-show="btx.merchant.pr.ca"><i class="fi-lock color-greeni"></i> {{btx.merchant.domain}}</span>

www/views/modals/txp-details.html

@@ -52,7 +52,7 @@
         <div class="item">
           <span translate>To</span>
           <span class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
-            <i class="icon ion-social-bitcoin"></i>
+            <i class="icon icon-svg"><img src="img/icon-bitcoin-symbol.svg"></i>
             <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{tx.toAddress}}"></contact>
             <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>
           </span>

www/views/preferencesLogs.html

@@ -5,11 +5,11 @@
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
-    <button class="button button-block button-positive" copy-to-clipboard="prepare()">
+    <button class="button button-standard button-primary" style="margin-top: 1rem" copy-to-clipboard="prepare()">
       <i class="icon ion-clipboard"></i>
       <span translate>Copy to clipboard</span>
     </button>
-    <button class="button button-block button-positive" ng-show="isCordova" ng-click="sendLogs()">
+    <button class="button button-standard button-secondary" ng-show="isCordova" ng-click="sendLogs()">
       <i class="icon ion-ios-email-outline"></i>
       <span translate>Send by email</span>
     </button>

www/views/tab-receive.html

@@ -18,7 +18,7 @@
         <div class="row border-top">
           <div class="col col-90 center-block bit-address text-center">
             <div class="item item-icon-left">
-              <i class="icon ion-social-bitcoin-outline"></i>
+              <i class="icon icon-svg receive-tab-bitcoin-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
               <span class="bit-address-gen-address">...</span>
             </div>
           </div>
@@ -39,7 +39,7 @@
         <div class="row border-top">
           <div class="col col-90 center-block bit-address text-center">
             <div class="item item-icon-left">
-              <i class="icon ion-social-bitcoin-outline"></i>
+              <i class="icon icon-svg receive-tab-bitcoin-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
               <span class="bit-address-gen-address" ng-if="!generatingAddress" translate>address not yet available</span>
             </div>
           </div>
@@ -76,7 +76,7 @@
         <div class="row border-top">
           <div class="col col-90 center-block bit-address text-center">
             <div class="item item-icon-left">
-              <i class="icon ion-social-bitcoin-outline"></i>
+              <i class="icon icon-svg receive-tab-bitcoin-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
               <span class="bit-address-gen-address" ng-if="generatingAddress">...</span>
               <span class="bit-address-gen-address" ng-if="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
             </div>

www/views/tab-send.html

@@ -6,7 +6,7 @@
   <ion-content>
     <div class="item item-heading" translate>Recipient</div>
     <label class="item item-input bitcoin-address">
-      <i class="icon ion-social-bitcoin placeholder-icon"></i>
+      <i class="icon icon-svg placeholder-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
       <div class="qr-scan-icon" ng-style="{'width': '100%'}">
         <a ui-sref="tabs.scan" ng-style="{'top': '6px'}"><i class="icon ion-qr-scanner"></i></a>
         <input type="text"