Merge pull request #628 from bitjson/wip/design

Design Polish
2016-10-21 09:30:48 -03:00 · 2016-10-21 09:30:48 -03:00 · 6df132216a
commit 6df132216a
parent caa62ccde3 fb154b2ac3
52 changed files with 195 additions and 209 deletions
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@ -7,7 +7,7 @@ angular.module('copayApp.controllers').controller('amountController', function($
  var unitDecimals;
  var satToBtc;
  var self = $scope.self;
-  var SMALL_FONT_SIZE_LIMIT = 13;
+  var SMALL_FONT_SIZE_LIMIT = 10;
  var LENGTH_EXPRESSION_LIMIT = 19;

  $scope.$on('$ionicView.leave', function() {
@ -197,18 +197,18 @@ angular.module('copayApp.controllers').controller('amountController', function($
        amount: amountUSD,
        currency: 'USD'
      };
-      ongoingProcess.set('Processing Transaction...', true);
+      ongoingProcess.set('Preparing transaction...', true);
      $timeout(function() {

        bitpayCardService.topUp($scope.cardId, dataSrc, function(err, invoiceId) {
          if (err) {
-            ongoingProcess.set('Processing Transaction...', false);
+            ongoingProcess.set('Preparing transaction...', false);
            popupService.showAlert(gettextCatalog.getString('Error'), bwcError.msg(err));
            return;
          }

          bitpayCardService.getInvoice(invoiceId, function(err, data) {
-            ongoingProcess.set('Processing Transaction...', false);
+            ongoingProcess.set('Preparing transaction...', false);
            if (err) {
              popupService.showAlert(gettextCatalog.getString('Error'), bwcError.msg(err));
              return;
--- a/src/sass/ionic.scss
+++ b/src/sass/ionic.scss
@ -35,3 +35,8 @@ $placeholder-icon-padding: 10px;
 .item p {
  color: $mid-gray;
 }
+
+// we'd like to diverge from the standard ionic formula for left-right card margins
+.card {
+  margin: ($content-padding * 2) 14px;
+}
--- a/src/sass/shame.scss
+++ b/src/sass/shame.scss
@ -132,8 +132,8 @@ input[type=number] {
 .postfix {
  position: absolute;
  right: 10px;
-  background-color: #f8f8f8;
-  color: #444;
+  background-color: $subtle-gray;
+  color: $dark-gray;
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
--- a/src/sass/views/amount.scss
+++ b/src/sass/views/amount.scss
@ -1,4 +1,9 @@
 #view-amount {
+  .recipient-label {
+    font-size: 14px;
+    padding-bottom: 0;
+    color: $mid-gray;
+  }
  .item-no-bottom-border + .item {
      border-top: 0;
  }
@ -19,7 +24,7 @@
          box-shadow: none;
        }
      }
-      font-size: 11px;
+      font-size: 13px;
      padding-left: 48px;
    }
  }
@ -30,7 +35,7 @@
  }
  .amount-pane {
    position: absolute;
-    top: 125px;
+    top: 95px;
    bottom: 0;
    width: 100%;
    background-color: #fff;
@ -42,6 +47,8 @@
      .title {
        float: left;
        padding-top: 10px;
+        color: $dark-gray;
+        font-weight: bold;
      }
    }
    .amount {
@ -53,11 +60,60 @@
      bottom: 254px;
      top: 66px;
      .light {
-        color: #A4A4A4;
+        color: $light-gray;
      }
    }
  }
-
+  .amount {
+    &__editable {
+      margin-bottom: 1rem;
+      &--minimize {
+        font-size: 22px;
+      }
+      &--standard {
+        font-size: 42px;
+      }
+      &--placeholder {
+        color: $light-gray;
+      }
+    }
+    &__number {
+      color: $dark-gray;
+    }
+    &__currency-toggle {
+      border: 1px solid $subtle-gray;
+      color: $dark-gray;
+      border-radius: 3px;
+      padding: 0 10px;
+      cursor: pointer;
+      font-size: .6em;
+      position: relative;
+      top: -3px;
+      line-height: 1;
+    }
+    &__results {
+      &--minimize {
+        font-size: 12px;
+      }
+      &--standard {
+        font-size: 18px;
+      }
+      &--placeholder {
+        color: $light-gray;
+      }
+    }
+    &__result {
+      color: $light-gray;
+      font-size: .9em;
+      margin-bottom: -.9em;
+      line-height: 1;
+    }
+    &__result-equiv {
+      color: $mid-gray;
+      font-size: 1.2em;
+      margin-top: 2rem;
+    }
+  }
  .keypad {
    text-align: center;
    font-size: 24px;
@ -65,6 +121,7 @@
    position: absolute;
    bottom: 0;
    width: 100%;
+    color: $mid-gray;

    .row {
      padding: 0 !important;
@ -72,23 +129,23 @@
    }

    .col {
-      line-height: 40px;
+      line-height: 45px;
    }

    .operator {
-      background-color: #eaeaea;
+      background-color: $subtle-gray;
      font-weight: normal;
      cursor: pointer;

      &:active {
-        background-color: #f8f8f8;
+        background-color: $light-gray;
      }
    }

    .operator-send {
      font-weight: bolder;
-      color: #f8f8f8;
-      background-color: #1e3186;
+      color: #fff;
+      background-color: $positive;
      font-size: 36px;
      cursor: pointer;

@ -99,10 +156,10 @@

    .digit{
      cursor: pointer;
-      border-top: 1px solid #eaeaea;
-      border-left: 1px solid #eaeaea;
+      border-top: 1px solid $subtle-gray;
+      border-left: 1px solid $subtle-gray;
      &:active {
-        background-color: #eaeaea;
+        background-color: $subtle-gray;
      }
    }

--- a/src/sass/views/integrations/glidera.scss
+++ b/src/sass/views/integrations/glidera.scss
@ -1,12 +1,20 @@
 #glidera {
  .glidera-lead {
-    margin: 1rem;
+    margin: 2rem 1rem;
+    color: $dark-gray;
+    font-size: 20px;
+    line-height: 1.4;
+    text-align: center;
+  }
+  .glidera-text {
+    margin: 2rem 1rem;
    color: $mid-gray;
-    font-size: 18px;
+    font-size: 16px;
+    line-height: 1.4;
    text-align: center;
  }
  .disclosure {
-    color: $mid-gray;
+    color: $light-gray;
    font-size: 12px;
    text-align: left;
    margin: 1rem;
--- a/src/sass/views/tab-home.scss
+++ b/src/sass/views/tab-home.scss
@ -16,16 +16,20 @@
    background-image: url("../img/icon-amazon.svg");
  }
  .bg {
-    &.wallet{
+    &.wallet {
      padding: .25rem
    }
  }
-  .card{
+  .card {
    .item {
      color: #444;
      border-top:none;
-      padding-bottom: 1.5rem;
-      padding-top:1.5rem;
+      padding-bottom: 1rem;
+      padding-top:1rem;
+      &.item-extra-padding {
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
+      }
    }
    .item-sub {
      &:first-child:before {
@ -85,4 +89,18 @@
    color: #666;
    font-size: 38px;
  }
+  .tab-home {
+    &__logo {
+      height: 18px;
+      position: relative;
+      top: 3px;
+    }
+    &__wallet {
+      &__multisig-number {
+        font-size: .8rem;
+        font-weight: 300;
+        color: $light-gray;
+      }
+    }
+  }
 }
--- a/src/sass/views/tab-send.scss
+++ b/src/sass/views/tab-send.scss
@ -12,7 +12,7 @@
    padding-bottom: .5rem;
    @media(max-width: 480px) {
      input {
-        font-size: 12px;
+        font-size: 14px;
      }
    }
    .icon {
--- a/src/sass/views/tab-settings.scss
+++ b/src/sass/views/tab-settings.scss
@ -47,11 +47,21 @@
      color: $dark-gray;
      padding-top: 1.3rem;
      padding-bottom: 1.3rem;
+      &.has-setting-value {
+        padding-top: .65rem;
+        padding-bottom: .65rem;
+      }
      &.item-divider {
        color: $mid-gray;
        padding-bottom: .5rem;
        font-size: .9rem;
      }
+      .icon {
+        color: $light-gray;
+      }
+    }
+    .item-note {
+      color: $light-gray;
    }
 }
 }
--- a/www/img/avatar.jpg
+++ b/www/img/avatar.jpg
--- a/www/img/clipo-pin-enter.png
+++ b/www/img/clipo-pin-enter.png
--- a/www/img/clipo-pin.png
+++ b/www/img/clipo-pin.png
--- a/www/img/clipo-signin.png
+++ b/www/img/clipo-signin.png
--- a/www/img/clipo-signup1.png
+++ b/www/img/clipo-signup1.png
--- a/www/img/clipo-signup2-1.png
+++ b/www/img/clipo-signup2-1.png
--- a/www/img/clipo-signup2.png
+++ b/www/img/clipo-signup2.png
--- a/www/img/clipo-signup3.png
+++ b/www/img/clipo-signup3.png
--- a/www/img/copay_crowdin.png
+++ b/www/img/copay_crowdin.png
--- a/www/img/icon-about.svg
+++ b/www/img/icon-about.svg
@ -5,7 +5,7 @@
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Icons" transform="translate(-369.000000, -769.000000)" stroke="#8F8F90">
+        <g id="Icons" transform="translate(-369.000000, -769.000000)" stroke="#9b9bab">
            <g id="icons/list-items/sync" transform="translate(370.000000, 770.000000)">
                <g id="icon/info">
                    <g>
@ -18,4 +18,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/www/img/icon-address-book.svg
+++ b/www/img/icon-address-book.svg
@ -5,7 +5,7 @@
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Icons" transform="translate(-185.000000, -769.000000)" stroke="#8F8F90">
+        <g id="Icons" transform="translate(-185.000000, -769.000000)" stroke="#9b9bab">
            <g id="icons/list-items/sync" transform="translate(186.000000, 770.000000)">
                <g id="Group" transform="translate(0.386364, 0.370709)">
                    <path d="M0,16.3112128 L0,-1.77635684e-15 L12.3636364,-1.77635684e-15 C13.2136364,-1.77635684e-15 13.9090909,0.667276888 13.9090909,1.48283753 L13.9090909,14.8283753 C13.9090909,15.6439359 13.2136364,16.3112128 12.3636364,16.3112128 L0,16.3112128 L0,16.3112128 Z" id="Shape"></path>
@ -17,4 +17,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/www/img/icon-advanced.svg
+++ b/www/img/icon-advanced.svg
@ -5,7 +5,7 @@
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Icons" transform="translate(-802.000000, -769.000000)" stroke="#8F8F90">
+        <g id="Icons" transform="translate(-802.000000, -769.000000)" stroke="#9b9bab">
            <g id="media-24px-outline-1_flash-21" transform="translate(802.723270, 769.877358)">
                <g id="Group">
                    <polygon id="Shape" points="10 0 0 11 9 11 8 18 18 7 9 7"></polygon>
@ -13,4 +13,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/www/img/icon-alternative-currency.svg
+++ b/www/img/icon-alternative-currency.svg
@ -5,7 +5,7 @@
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Icons" transform="translate(-324.000000, -770.000000)" stroke="#8F8F90" stroke-width="0.7">
+        <g id="Icons" transform="translate(-324.000000, -770.000000)" stroke="#9b9bab" stroke-width="0.7">
            <g id="icons/list-items/sync" transform="translate(324.000000, 770.000000)">
                <g id="Group" transform="translate(0.365217, 0.365217)">
                    <polyline id="Shape" points="10.5913043 11.6869565 0 11.6869565 0 0 16.0695652 0 16.0695652 7.96173913"></polyline>
@ -19,4 +19,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/www/img/icon-chrome-128.png
+++ b/www/img/icon-chrome-128.png
--- a/www/img/icon-help-support.svg
+++ b/www/img/icon-help-support.svg
@ -5,7 +5,7 @@
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Icons" transform="translate(-757.000000, -769.000000)" stroke="#8F8F90">
+        <g id="Icons" transform="translate(-757.000000, -769.000000)" stroke="#9b9bab">
            <g id="ui-24px-outline-2_alert-circle-?" transform="translate(758.000000, 770.000000)">
                <g id="Group">
                    <circle id="Oval" cx="9" cy="9" r="9"></circle>
@ -15,4 +15,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/www/img/icon-network.svg
+++ b/www/img/icon-network.svg
@ -5,7 +5,7 @@
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Icons" transform="translate(-634.000000, -770.000000)" stroke="#8F8F90" stroke-width="0.7">
+        <g id="Icons" transform="translate(-634.000000, -770.000000)" stroke="#9b9bab" stroke-width="0.7">
            <g id="icons/list-items/sync" transform="translate(634.000000, 770.000000)">
                <g id="Group" transform="translate(0.403361, 0.403361)">
                    <path d="M7.41176471,6.45378151 L7.41176471,9.68067227" id="Shape"></path>
@ -18,4 +18,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/www/img/icon-splash.png
+++ b/www/img/icon-splash.png
--- a/www/img/icon-tour1.png
+++ b/www/img/icon-tour1.png
--- a/www/img/icon-unit.svg
+++ b/www/img/icon-unit.svg
--- a/www/img/img-tour1.png
+++ b/www/img/img-tour1.png
--- a/www/img/logo-negative.png
+++ b/www/img/logo-negative.png
--- a/www/img/logo.png
+++ b/www/img/logo.png
--- a/www/img/notification.png
+++ b/www/img/notification.png
--- a/www/img/qr.png
+++ b/www/img/qr.png
--- a/www/img/satoshi.gif
+++ b/www/img/satoshi.gif
--- a/www/img/step-1.png
+++ b/www/img/step-1.png
--- a/www/img/step-1.svg
+++ b/www/img/step-1.svg
@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="159px" height="16px" viewBox="0 0 159 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.0.4 (8053) - http://www.bohemiancoding.com/sketch -->
-    <title>Group@1x</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0.5" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0663185009 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
-            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
-            <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.14 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="new-2" sketch:type="MSArtboardGroup" transform="translate(-735.000000, -171.000000)">
-            <g id="Group" sketch:type="MSLayerGroup" transform="translate(736.000000, 171.000000)">
-                <path d="M71.4408381,10.856186 C72.6947093,13.3192708 75.2877935,15.0106827 78.2832665,15.0106827 C81.2787395,15.0106827 83.8718236,13.3192708 85.1256949,10.856186 L85.1256979,10.8561853 L142.032872,10.856186 C143.286744,13.3192708 145.879828,15.0106827 148.875301,15.0106827 C153.097385,15.0106827 156.52006,11.6504269 156.52006,7.50534137 C156.52006,3.36025579 153.097385,0 148.875301,0 C145.412202,0 142.486933,2.26072789 141.54712,5.36095812 L85.611447,5.36095812 C84.6716339,2.26072789 81.7463651,0 78.2832665,0 C74.8201679,0 71.894899,2.26072789 70.955086,5.36095812 L14.9264673,5.36095812 C13.9866542,2.26072789 11.0613854,0 7.59828677,0 C3.3762027,0 -0.046472702,3.36025579 -0.046472702,7.50534137 C-0.046472702,11.6504269 3.3762027,15.0106827 7.59828677,15.0106827 C10.5937598,15.0106827 13.1868439,13.3192708 14.4407152,10.856186 L71.4408351,10.8561853 Z" id="Oval-14" fill="#2C3E50" filter="url(#filter-1)" sketch:type="MSShapeGroup"></path>
-                <circle id="Oval-12" fill="#7A8C9E" sketch:type="MSShapeGroup" cx="7.5" cy="7.5" r="4.5"></circle>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/www/img/step-2.png
+++ b/www/img/step-2.png
--- a/www/img/step-2.svg
+++ b/www/img/step-2.svg
@ -1,32 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="159px" height="18px" viewBox="0 0 159 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.0.4 (8053) - http://www.bohemiancoding.com/sketch -->
-    <title>Group</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0.5" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0663185009 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
-            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
-            <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.14 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="new-3" sketch:type="MSArtboardGroup" transform="translate(-732.000000, -204.000000)">
-            <g id="Group" sketch:type="MSLayerGroup" transform="translate(733.000000, 204.724993)">
-                <path d="M71.376385,10.4695498 C72.6302562,12.9326346 75.2233404,14.6240465 78.2188133,14.6240465 C81.2142863,14.6240465 83.8073705,12.9326346 85.0612417,10.4695498 L85.0612448,10.4695491 L141.968419,10.4695498 C143.222291,12.9326346 145.815375,14.6240465 148.810848,14.6240465 C153.032932,14.6240465 156.455607,11.2637907 156.455607,7.11870514 C156.455607,2.97361957 153.032932,-0.386636224 148.810848,-0.386636224 C145.347749,-0.386636224 142.42248,1.87409167 141.482667,4.9743219 L85.5469939,4.9743219 C84.6071808,1.87409167 81.6819119,-0.386636224 78.2188133,-0.386636224 C74.7557148,-0.386636224 71.8304459,1.87409167 70.8906328,4.9743219 L14.8620142,4.9743219 C13.9222011,1.87409167 10.9969322,-0.386636224 7.53383365,-0.386636224 C3.31174957,-0.386636224 -0.110925827,2.97361957 -0.110925827,7.11870514 C-0.110925827,11.2637907 3.31174957,14.6240465 7.53383365,14.6240465 C10.5293066,14.6240465 13.1223908,12.9326346 14.376262,10.4695498 L71.3763819,10.4695491 Z" id="Oval-14" fill="#2C3E50" filter="url(#filter-1)" sketch:type="MSShapeGroup"></path>
-                <rect id="Rectangle-81" fill="#7A8C9E" sketch:type="MSShapeGroup" x="9.82695588" y="6.5" width="64" height="2"></rect>
-                <circle id="Oval-12" fill="#7A8C9E" sketch:type="MSShapeGroup" cx="7.63363776" cy="7.31145467" r="4.5"></circle>
-                <circle id="Oval-15" fill="#7A8C9E" sketch:type="MSShapeGroup" cx="78.0715917" cy="7.31145467" r="4.5"></circle>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/www/img/step-3.png
+++ b/www/img/step-3.png
--- a/www/img/step-3.svg
+++ b/www/img/step-3.svg
@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="159px" height="18px" viewBox="0 0 159 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.0.4 (8053) - http://www.bohemiancoding.com/sketch -->
-    <title>Group</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0.5" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0663185009 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
-            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
-            <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.14 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="new-3" sketch:type="MSArtboardGroup" transform="translate(-726.000000, -145.173121)">
-            <g id="Group" sketch:type="MSLayerGroup" transform="translate(727.000000, 146.000000)">
-                <path d="M71.4408381,10.856186 C72.6947093,13.3192708 75.2877935,15.0106827 78.2832665,15.0106827 C81.2787395,15.0106827 83.8718236,13.3192708 85.1256949,10.856186 L85.1256979,10.8561853 L142.032872,10.856186 C143.286744,13.3192708 145.879828,15.0106827 148.875301,15.0106827 C153.097385,15.0106827 156.52006,11.6504269 156.52006,7.50534137 C156.52006,3.36025579 153.097385,0 148.875301,0 C145.412202,0 142.486933,2.26072789 141.54712,5.36095812 L85.611447,5.36095812 C84.6716339,2.26072789 81.7463651,0 78.2832665,0 C74.8201679,0 71.894899,2.26072789 70.955086,5.36095812 L14.9264673,5.36095812 C13.9866542,2.26072789 11.0613854,0 7.59828677,0 C3.3762027,0 -0.046472702,3.36025579 -0.046472702,7.50534137 C-0.046472702,11.6504269 3.3762027,15.0106827 7.59828677,15.0106827 C10.5937598,15.0106827 13.1868439,13.3192708 14.4407152,10.856186 L71.4408351,10.8561853 Z" id="Oval-21" fill="#2C3E50" filter="url(#filter-1)" sketch:type="MSShapeGroup"></path>
-                <rect id="Rectangle-83" fill="#7A8C9E" sketch:type="MSShapeGroup" x="81" y="7" width="64" height="2"></rect>
-                <circle id="Oval-22" fill="#7A8C9E" sketch:type="MSShapeGroup" cx="149.5" cy="7.5" r="4.5"></circle>
-                <rect id="Rectangle-84" fill="#7A8C9E" sketch:type="MSShapeGroup" x="10" y="7" width="64" height="2"></rect>
-                <circle id="Oval-19" fill="#7A8C9E" sketch:type="MSShapeGroup" cx="7.5" cy="7.5" r="4.5"></circle>
-                <circle id="Oval-20" fill="#7A8C9E" sketch:type="MSShapeGroup" cx="78.5" cy="7.5" r="4.5"></circle>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/www/img/tour1.png
+++ b/www/img/tour1.png
--- a/www/img/tour2.png
+++ b/www/img/tour2.png
--- a/www/img/tour3.png
+++ b/www/img/tour3.png
--- a/www/img/tour4.png
+++ b/www/img/tour4.png
--- a/www/img/tour5.png
+++ b/www/img/tour5.png
--- a/www/views/amount.html
+++ b/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>
--- a/www/views/bitpayCard.html
+++ b/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>
--- a/www/views/buyAmazon.html
+++ b/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>
--- a/www/views/glidera.html
+++ b/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>
--- a/www/views/modals/terms.html
+++ b/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>
--- a/www/views/preferences.html
+++ b/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>
--- a/www/views/tab-home.html
+++ b/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>
--- a/www/views/tab-settings.html
+++ b/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>