Merge pull request #628 from bitjson/wip/design

Design Polish

www/views/amount.html

@@ -10,7 +10,7 @@
   <ion-content scroll="false">
 
     <div>
-      <div class="item item-no-bottom-border" translate>Recipient</div>
+      <div class="item item-no-bottom-border recipient-label" translate>Recipient</div>
 
       <div class="item item-text-wrap item-icon-left bitcoin-address" ng-class="{'item-big-icon-left':cardId}">
         <i class="icon big-icon-svg" ng-if="isWallet">
@@ -30,17 +30,21 @@
 
       <div class="amount-bar">
         <div class="title" translate>Amount</div>
-        <a class="postfix" ng-click="toggleAlternative()" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</a>
-        <a class="postfix" ng-click="toggleAlternative()" ng-show="!showAlternativeAmount">{{unitName}}</a>
       </div>
 
       <div class="amount">
-        <div class="text-light text-black m15b" ng-class="{'size-28': smallFont, 'size-36': !smallFont, 'light': !amount}"><span>{{amount || "0.00" }}</div>
-        <div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont, 'light': !amountResult}" ng-show="!showAlternativeAmount">
-          {{globalResult}} <span class="label gray text-white radius">{{amountResult || '0.00'}} {{alternativeIsoCode}}</span>
+        <div class="amount__editable" ng-class="{'amount__editable--minimize': smallFont, 'amount__editable--standard': !smallFont, 'amount__editable--placeholder': !amount}">
+          <span class="amount__number">{{amount || "0.00" }}</span>
+          <a class="amount__currency-toggle" ng-click="toggleAlternative()" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</a>
+          <a class="amount__currency-toggle" ng-click="toggleAlternative()" ng-show="!showAlternativeAmount">{{unitName}}</a>
         </div>
-        <div class="text-light text-black size-17" ng-show="showAlternativeAmount">
-          {{globalResult}} <span class="label gray text-white radius">{{alternativeResult || '0.00'}} {{unitName}}</span>
+        <div ng-class="{'amount__results--minimize': smallFont, 'amount__results--standard': !smallFont, 'amount__results--placeholder': !amountResult}" ng-show="!showAlternativeAmount">
+          <div class="amount__result" ng-show="globalResult">{{globalResult}} {{unitName}}</div>
+          <div class="amount__result-equiv">&asymp; {{amountResult || '0.00'}} {{alternativeIsoCode}}</div>
+        </div>
+        <div ng-class="{'amount__results--minimize': smallFont, 'amount__results--standard': !smallFont, 'amount__results--placeholder': !amountResult}" ng-show="showAlternativeAmount">
+          <div class="amount__result" ng-show="globalResult">{{globalResult}} {{alternativeIsoCode}}</div>
+          <div class="amount__result-equiv">{{alternativeResult || '0.00'}} {{unitName}}</div>
         </div>
       </div>
     </div>
@@ -56,28 +60,28 @@
         <div class="col digit" ng-click="pushDigit('7')">7</div>
         <div class="col digit" ng-click="pushDigit('8')">8</div>
         <div class="col digit" ng-click="pushDigit('9')">9</div>
-        <div class="col operator" ng-click="pushOperator('/')">/</div>
+        <div class="col operator" ng-click="pushOperator('/')">&divide;</div>
       </div>
 
       <div class="row">
         <div class="col digit" ng-click="pushDigit('4')">4</div>
         <div class="col digit" ng-click="pushDigit('5')">5</div>
         <div class="col digit" ng-click="pushDigit('6')">6</div>
-        <div class="col operator" ng-click="pushOperator('x')">x</div>
+        <div class="col operator" ng-click="pushOperator('x')">&times;</div>
       </div>
 
       <div class="row">
         <div class="col digit" ng-click="pushDigit('1')">1</div>
         <div class="col digit" ng-click="pushDigit('2')">2</div>
         <div class="col digit" ng-click="pushDigit('3')">3</div>
-        <div class="col operator" ng-click="pushOperator('+')">+</div>
+        <div class="col operator" ng-click="pushOperator('+')">&plus;</div>
       </div>
 
       <div class="row">
         <div class="col digit" ng-click="pushDigit('.')">.</div>
         <div class="col digit" ng-click="pushDigit('0')">0</div>
         <div class="col digit icon ion-backspace-outline" ng-click="removeDigit()"></div>
-        <div class="col operator" ng-click="pushOperator('-')">-</div>
+        <div class="col operator" ng-click="pushOperator('-')">&minus;</div>
       </div>
     </div>
   </ion-content>

www/views/bitpayCard.html

@@ -2,7 +2,7 @@
   <ion-nav-bar class="bar-royal">
     <ion-nav-back-button>
     </ion-nav-back-button>
-    <ion-nav-title>BitPay Visa&reg; Card</ion-nav-title>
+    <ion-nav-title>BitPay Visa<sup>&reg;</sup> Card</ion-nav-title>
     <ion-nav-buttons side="secondary">
       <button class="button back-button" ng-show="!error" ui-sref="tabs.bitpayCard.preferences">
         <i class="icon ion-ios-gear-outline"></i>
@@ -20,8 +20,9 @@
       <div class="amount">
         <div ng-if="bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
           <div class="size-36 m20b">${{bitpayCard.bitpayCardCurrentBalance}}</div>
-          <a class="button button-positive button-small"
-             ui-sref="tabs.bitpayCard.amount({'cardId': cardId, 'toName': 'BitPay Card'})" translate>
+          <a class="button button-primary button-small"
+            style="padding-left: 1em; padding-right: 1em;"
+            ui-sref="tabs.bitpayCard.amount({'cardId': cardId, 'toName': 'BitPay Card'})" translate>
             Add Funds
           </a>
         </div>

www/views/buyAmazon.html

@@ -104,7 +104,7 @@
             Claim code: <span class="text-bold" copy-to-clipboard="buy.giftCard.claimCode">{{buy.giftCard.claimCode}}</span>
           </div>
           <div class="m10t">
-            <button class="button button-positive"
+            <button class="button button-primary"
                     ng-click="openExternalLink('https://www.amazon.com/gc/redeem?claimCode=' + buy.giftCard.claimCode)">
               Redeem Now
             </button>

www/views/glidera.html

@@ -28,31 +28,26 @@
         </div>
         <div class="text-center small-10 small-centered columns" ng-show="!showOauthForm">
           <p class="glidera-lead">You can buy and sell Bitcoin with a US bank account directly in this app.</p>
+          
+          <p class="glidera-text">Connect your Glidera account to get started.</p>
 
-          <p class="disclosure">
-            DISCLOSURE.<br>
-            Glidera Inc. (Glidera) is providing the service of buying or selling bitcoin to BitPay users.  To enable this
-            service, Glidera has registered with US Treasury Department’s FinCEN as a Money Service Business
-            (#31000042625755).  Users of BitPay must agree to the service agreement presented by Glidera prior to obtaining
-            Glidera’s service of buying or selling bitcoins. Service available in U.S. and Canada only. In U.S. (buy & sell) CA, GA, IL, KS,
-            MA, MD, MO, MT, MN, SC, TX, AZ, CO, DE, ME, NJ, PA, TN, UT, NV, WI. In Canada (buy & sell) AB, BC, MB, NB, NL, NS, NT, NU,
-            ON, PE, SK, YT.
-          </p>
-
-          <p class="m20t text-gray size-12">Connect your Glidera account to get started</p>
           <button class="button button-standard button-primary"
             ng-click="openExternalLink(glidera.getAuthenticateUrl()); showOauthForm = true">
             Connect to Glidera
           </button>
           <div class="m10t">
-            <a href ng-click="showOauthForm = true" class="text-gray size-12">
-              Do you already have the Oauth Code?
+            <a href ng-click="showOauthForm = true" class="button button-standard button-secondary buttion-clear" translate>
+              Have the OAuth Code?
             </a>
           </div>
+          <div class="disclosure">
+            <p translate>Glidera Inc. (Glidera) is providing the service of buying or selling bitcoin to BitPay users. To enable this service, Glidera has registered with US Treasury Department’s FinCEN as a Money Service Business (#31000042625755). Users of BitPay must agree to the service agreement presented by Glidera prior to obtaining Glidera’s service of buying or selling bitcoin.</p>
+            <p>Service is available in the U.S. and Canada. In the U.S. – AZ, CA, CO, DE, GA, IL, KS, MA, MD, ME, MN, MO, MT, NJ, NV, PA, SC, TN, TX, UT, WI. In Canada – AB, BC, MB, NB, NL, NS, NT, NU, ON, PE, SK, YT.</p>
+          </div>
         </div>
         <div ng-show="showOauthForm">
-          <form name="oauthCodeForm" ng-submit="glidera.submitOauthCode(code)" novalidate>
-            <div class="list">
+          <form class="settings" name="oauthCodeForm" ng-submit="glidera.submitOauthCode(code)" novalidate>
+            <div class="list settings-input-group">
               <label class="item item-input item-stacked-label">
                 <span class="input-label">OAuth Code</span>
                 <input type="text"
@@ -60,21 +55,7 @@
                        ng-attr-placeholder="{{'Paste the authorization code here'}}" required>
               </label>
             </div>
-            <div class="row">
-              <div class="col">
-                <input type="button"
-                       value="Cancel"
-                       class="button button-standard button-light"
-                       ng-click="showOauthForm = false">
-              </div>
-              <div class="col">
-                <input
-                   class="button button-standard button-primary"
-                   type="submit"
-                   value="Get started"
-                   ng-disabled="oauthCodeForm.$invalid">
-              </div>
-            </div>
+            <input class="button button-standard button-primary" type="submit" value="Connect Glidera Account" ng-disabled="oauthCodeForm.$invalid">
           </form>
         </div>
       </div>

www/views/modals/terms.html

@@ -23,7 +23,7 @@
       </div>
     </div>
     <div class="text-center">
-      <button ng-disabled="!terms.accept3" class="button utton-block button-positive" ng-click="termsModal.hide(); confirm()" translate>Confirm & Finish</button>
+      <button ng-disabled="!terms.accept3" class="button button-block button-primary" ng-click="termsModal.hide(); confirm()" translate>Confirm &amp; Finish</button>
     </div>
   </div>
 </ion-modal-view>

www/views/preferences.html

@@ -29,7 +29,7 @@
         </span>
         <i class="icon bp-arrow-right"></i>
       </a>
-      <a class="item item-icon-right" ui-sref="tabs.preferences.preferencesEmail">
+      <a class="item has-setting-value item-icon-right" ui-sref="tabs.preferences.preferencesEmail">
         <span class="setting-title" translate>Email Notifications</span>
         <span class="setting-value">
           <span ng-if="!wallet.email" translate>Disabled</span>

www/views/tab-home.html

@@ -1,9 +1,9 @@
 <ion-view id="tab-home">
   <ion-nav-bar class="bar-royal">
-    <ion-nav-title>{{'Home' | translate}}</ion-nav-title>
+    <ion-nav-title><img class="tab-home__logo" src="img/app/logo-negative.svg"></ion-nav-title>
   </ion-nav-bar>
 
-  <ion-content class="padding">
+  <ion-content>
     <ion-refresher
      ng-if="isAndroid"
      pulling-icon="ion-ios-refresh"
@@ -74,9 +74,6 @@
           </i>
           <span>
             {{wallet.name || wallet.id}}
-            <span class="size-12 text-light" ng-if="wallet.n > 1">
-              {{wallet.m}}-of-{{wallet.n}}
-            </span>
           </span>
           <p>
           <span ng-if="!wallet.isComplete()" class="assertive" translate>
@@ -85,6 +82,9 @@
           <span ng-if="wallet.isComplete()">
             <span ng-if="!wallet.balanceHidden">{{wallet.status.availableBalanceStr}}</span>
             <span ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
+            <span class="tab-home__wallet__multisig-number" ng-if="wallet.n > 1">
+              {{wallet.m}}-of-{{wallet.n}}
+            </span>
           </span>
           &nbsp;
           </p>
@@ -94,21 +94,21 @@
         <a ng-repeat="card in bitpayCards"
            ui-sref="tabs.bitpayCard({id:card.id})"
            ng-if="bitpayCardEnabled && bitpayCards[0]"
-           class="item item-icon-left item-big-icon-left item-icon-right">
+           class="item item-sub item-icon-left item-big-icon-left item-icon-right">
           <i class="icon big-icon-svg">
             <div class="bg icon-bitpay-card"></div>
           </i>
-          <h2>BitPay Visa&reg; Card</h2>
+          <span>BitPay Visa&reg; Card</span>
           <p>{{cardsHistory[card.id].balance ? '$' + cardsHistory[card.id].balance : 'Add funds to get started'|translate}}</p>
           <i class="icon bp-arrow-right"></i>
         </a>
         <a ui-sref="tabs.bitpayCardIntro"
            ng-if="bitpayCardEnabled && !bitpayCards[0] && externalServices.BitpayCard"
-           class="item item-icon-left item-big-icon-left item-icon-right">
+           class="item item-sub item-icon-left item-big-icon-left item-icon-right">
           <i class="icon big-icon-svg">
             <div class="bg icon-bitpay-card"></div>
           </i>
-          <h2>BitPay Visa&reg; Card</h2>
+          <span>BitPay Visa&reg; Card</span>
           <p translate>Add your card</p>
           <i class="icon bp-arrow-right"></i>
         </a>
@@ -120,14 +120,16 @@
         Buy &amp; Sell Bitcoin
         <a ui-sref="tabs.buyandsell"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
       </div>
-      <a ng-if="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-sub item-icon-right">
-        <img src="img/glidera-logo.png" width="90"/>
-        <i class="icon bp-arrow-right"></i>
-      </a>
-      <!-- disable coinbase for this release -->
-      <!-- <a ng-if="coinbaseEnabled" ui-sref="exchange.coinbase" class="item">
-        <img src="img/coinbase-logo.png" width="90"> TODO
-      </a> -->
+      <div>
+        <a ng-if="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-extra-padding item-sub item-icon-right">
+          <img src="img/glidera-logo.png" width="90"/>
+          <i class="icon bp-arrow-right"></i>
+        </a>
+        <!-- disable coinbase for this release -->
+        <!-- <a ng-if="coinbaseEnabled" ui-sref="exchange.coinbase" class="item">
+          <img src="img/coinbase-logo.png" width="90"> TODO
+        </a> -->
+      </div>
     </div>
 
     <div class="list card" ng-if="wallets[0] && externalServices.AmazonGiftCards && amazonEnabled">
@@ -148,7 +150,7 @@
         <i class="icon bp-arrow-down" ng-show="hideNextSteps"></i>
       </div>
       <div ng-show="!hideNextSteps">
-        <a ui-sref="tabs.bitpayCardIntro" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
+        <a ui-sref="tabs.bitpayCardIntro" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
          <i class="icon big-icon-svg">
            <div class="bg icon-bitpay-card"></div>
          </i>

www/views/tab-settings.html

@@ -58,7 +58,7 @@
       <!--   <i class="icon bp&#45;arrow&#45;right"></i> -->
       <!-- </a> -->
       <!--  -->
-      <a class="item item-icon-left item-icon-right" ui-sref="tabs.unit">
+      <a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.unit">
         <i class="icon big-icon-svg">
           <img src="img/icon-unit.svg" class="bg"/>
         </i>
@@ -69,7 +69,7 @@
         <i class="icon bp-arrow-right"></i>
       </a>
 
-      <a class="item item-icon-left item-icon-right" ui-sref="tabs.altCurrency">
+      <a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.altCurrency">
         <i class="icon big-icon-svg">
           <img src="img/icon-alternative-currency.svg" class="bg"/>
         </i>
@@ -80,7 +80,7 @@
         <i class="icon bp-arrow-right"></i>
       </a>
 
-      <a class="item item-icon-left item-icon-right" ui-sref="tabs.fee">
+      <a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.fee">
         <i class="icon big-icon-svg">
           <img src="img/icon-network.svg" class="bg"/>
         </i>