From ceac7c2c2bce1e1ea4bca67a8d172b864a09ce5e Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Fri, 30 Sep 2016 21:28:25 -0400 Subject: [PATCH] design(home): new icons and design improvements for the home tab --- public/img/icon-card.svg | 15 ++ public/img/icon-wallet.svg | 38 +--- public/views/tab-home.html | 6 +- src/sass/ionic.scss | 22 ++- src/sass/main.scss | 358 +---------------------------------- src/sass/views/tab-home.scss | 8 +- 6 files changed, 48 insertions(+), 399 deletions(-) create mode 100644 public/img/icon-card.svg diff --git a/public/img/icon-card.svg b/public/img/icon-card.svg new file mode 100644 index 000000000..873f912f6 --- /dev/null +++ b/public/img/icon-card.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/public/img/icon-wallet.svg b/public/img/icon-wallet.svg index 9cbcfb85f..a1d7c73eb 100644 --- a/public/img/icon-wallet.svg +++ b/public/img/icon-wallet.svg @@ -1,28 +1,10 @@ - - - - Wallet Copy - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - + + + + + + diff --git a/public/views/tab-home.html b/public/views/tab-home.html index 7ef233580..e2de16373 100644 --- a/public/views/tab-home.html +++ b/public/views/tab-home.html @@ -135,7 +135,7 @@
- Add BitPay Card + Add BitPay Visa® Card @@ -155,9 +155,5 @@ -

-{{name}} v{{version}} -

- diff --git a/src/sass/ionic.scss b/src/sass/ionic.scss index bad6f9c09..0244562b7 100644 --- a/src/sass/ionic.scss +++ b/src/sass/ionic.scss @@ -1,12 +1,22 @@ -/* Set ionic variables */ -$font-family-sans-serif: "Roboto", sans-serif; -$font-family-light-sans-serif: "Roboto-Light", sans-serif-light; +/* constants */ $royal: #1e3186; -$soft-blue: rgb(100,124,232); -$base-background-color: #f5f5f5; +$soft-blue: #647ce8; +$subtle-gray: #f5f5f5; +$roboto: "Roboto", sans-serif; +$roboto-light: "Roboto-Light", sans-serif-light; -/* Ionic Workaround */ +/* Set ionic variables */ +$font-family-sans-serif: $roboto; +$font-family-light-sans-serif: $roboto-light; +$base-background-color: $subtle-gray; +$item-default-active-bg: $subtle-gray; +$ios-transition-duration: 200ms; + +/* Ionic Workarounds */ +// Please include a description of the problem solved by the workaround. + +// class to dynamically hide the ion-nav-bar for v1 Amazon flow ion-nav-bar.hide { display: block !important; } diff --git a/src/sass/main.scss b/src/sass/main.scss index c2cb10722..013e1293e 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -438,363 +438,6 @@ ul.wallet-selection.wallets { } // General purpose -.dn { - display: none; -} - -.dni { - display: none !important; -} - -.pr { - position: relative; -} - -.pa { - position: absolute; -} - -.m0 { - margin: 0; -} - -.p0i { - padding: 0 !important; -} - -.db { - display: block; -} - -.dib { - display: inline-block; -} - -.size-10 { - font-size: 10px; -} - -.size-12 { - font-size: 12px; -} - -.size-14 { - font-size: 14px; -} - -.size-16 { - font-size: 16px; -} - -.size-18 { - font-size: 18px; -} - -.size-21 { - font-size: 21px; -} - -.size-24 { - font-size: 24px; -} - -.size-28 { - font-size: 28px; -} - -.size-32 { - font-size: 32px; -} - -.size-36 { - font-size: 36px; -} - -.size-42 { - font-size: 42px; -} - -.size-48 { - font-size: 48px; -} - -.size-60 { - font-size: 60px; -} - -.size-72 { - font-size: 72px; -} - -.m5 { - margin: 5px; -} - -.m5t { - margin-top: 5px; -} - -.m8t { - margin-top: 8px; -} - -.m5b { - margin-bottom: 5px; -} - -.m5r { - margin-right: 5px; -} - -.m10 { - margin: 10px; -} - -.m10b { - margin-bottom: 10px; -} - -.m3t { - margin-top: 3px; -} - -.m10t { - margin-top: 10px; -} - -.m15b { - margin-bottom: 15px; -} - -.m15r { - margin-right: 15px; -} - -.m20b { - margin-bottom: 20px; -} - -.m30b { - margin-bottom: 30px; -} - -.m40b { - margin-bottom: 40px; -} - -.m50b { - margin-bottom: 50px; -} - -.m10r { - margin-right: 10px; -} - -.m40r { - margin-right: 40px; -} - -.m55r { - margin-right: 55px; -} - -.m25r { - margin-right: 25px; -} - -.m10l { - margin-left: 10px; -} - -.m5l { - margin-left: 5px; -} - -.m15l { - margin-left: 15px; -} - -.m15t { - margin-top: 15px; -} - -.m20r { - margin-right: 20px; -} - -.m20t { - margin-top: 20px; -} - -.m20ti { - margin-top: 20px !important; -} - -.m20tp { - margin-top: 20%; -} - -.m30tp { - margin-top: 30%; -} - -.m15 { - margin: 15px; -} - -.m15h { - margin: 0 15px; -} - -.p10t { - padding-top: 10px; -} - -.p10h { - padding-right: 10px; - padding-left: 10px; -} - -.p15h { - padding: 0 15px; -} - -.p0r { - padding-right: 0; -} - -.p70r { - padding-right: 70px; -} - -.p70l { - padding-left: 70px; -} - -.p5h { - padding: 0 5px; -} - -.p20h { - padding: 0 20px; -} - -.p20v { - padding: 20px 0; -} - -.p20b { - padding-bottom: 20px; -} - -.p25b { - padding-bottom: 25px; -} - -.p25l { - padding-left: 25px; -} - -.p15l { - padding-left: 15px; -} - -.p15 { - padding: 15px; -} - -.p20 { - padding: 20px; -} - -.p15t { - padding-top: 15px; -} - -.p20t { - padding-top: 20px; -} - -.p50t { - padding-top: 50px; -} - -.p10 { - padding: 10px; -} - -.p10i { - padding: 10px !important; -} - -.p10b { - padding-bottom: 10px; -} - -.p45t { - padding-top: 45px; -} - -.p60t { - padding-top: 60px; -} - -.p60b { - padding-bottom: 60px; -} - -.m60t { - margin-top: 60px; -} - -.p45li { - padding-left: 45px !important; -} - -.m30v { - margin: 30px 0; -} - -.m15v { - margin: 15px 0; -} - -.m10h { - margin: 0 10px; -} - -.m10v { - margin: 10px 0; -} - -.m20v { - margin: 20px 0; -} - -.m30v { - margin: 30px 0; -} - -.m30a { - margin: 30px auto; -} - -.m-negative-l { - margin-left: -0.9375rem; -} - -.br100 { - border-radius: 100% !important; -} - -.lh { - line-height: 0; -} - -.lh140 { - line-height: 140%; -} - .oh { overflow: hidden; } @@ -993,6 +636,7 @@ input[type=number] { @import "views/confirm"; @import "views/tab-home"; @import "views/tab-receive"; +@import "views/tab-scan"; @import "views/tab-send"; @import "views/tab-settings"; @import "views/walletDetails"; diff --git a/src/sass/views/tab-home.scss b/src/sass/views/tab-home.scss index 4ce59566b..05f5ff2d6 100644 --- a/src/sass/views/tab-home.scss +++ b/src/sass/views/tab-home.scss @@ -1,12 +1,14 @@ #tab-home { .icon-create-wallet { - background-image: url("../img/icon-bitcoin.svg"); + background-image: url("../img/icon-wallet.svg"); + background-color: #4A90E2; // default wallet color } .icon-buy-bitcoin { - background-image: url("../img/icon-gift.svg"); + background-image: url("../img/icon-bitcoin.svg"); } .icon-bitpay-card { - background-image: url("../img/icon-bitpay.svg"); + background-image: url("../img/icon-card.svg"); + background-color: #1e3186; } .icon-gift { background-image: url("../img/icon-gift.svg");