From 99573f30b87385d63186996fbcd665fc69a18c1d Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Mon, 3 Oct 2016 19:38:57 -0400 Subject: [PATCH 1/5] refactor(common): gc common.scss, organize styles in proper places --- public/views/add.html | 8 +- public/views/addressbook.html | 2 +- public/views/amazon.html | 2 +- public/views/buyandsell.html | 2 +- public/views/glidera.html | 6 +- public/views/preferences.html | 12 +- public/views/preferencesAbout.html | 6 +- public/views/preferencesAdvanced.html | 12 +- public/views/preferencesDeleteWallet.html | 4 +- public/views/tab-settings.html | 18 +-- src/sass/common.scss | 131 ------------------ src/sass/icons.scss | 31 +++++ src/sass/ionic.scss | 31 +++-- src/sass/main.scss | 3 +- src/sass/shame.scss | 36 +++++ src/sass/variables.scss | 20 +++ src/sass/views/amount.scss | 3 + .../onboarding/onboard-collect-email.scss | 9 ++ src/sass/views/tab-receive.scss | 3 + src/sass/views/wallet-backup-phrase.scss | 5 +- src/sass/views/walletDetails.scss | 3 + 21 files changed, 163 insertions(+), 184 deletions(-) delete mode 100644 src/sass/common.scss create mode 100644 src/sass/icons.scss create mode 100644 src/sass/variables.scss diff --git a/public/views/add.html b/public/views/add.html index 978c312af..dd499e340 100644 --- a/public/views/add.html +++ b/public/views/add.html @@ -12,7 +12,7 @@

New Personal Wallet

- + @@ -20,7 +20,7 @@

Create Shared Wallet

- + @@ -28,7 +28,7 @@

Join shared wallet

- + @@ -36,7 +36,7 @@

Import wallet

- + diff --git a/public/views/addressbook.html b/public/views/addressbook.html index 282118107..7123ce5de 100644 --- a/public/views/addressbook.html +++ b/public/views/addressbook.html @@ -31,7 +31,7 @@

{{addrEntry.name}}

{{addrEntry.address}}

- + diff --git a/public/views/amazon.html b/public/views/amazon.html index 86208c52c..fd5880776 100644 --- a/public/views/amazon.html +++ b/public/views/amazon.html @@ -33,7 +33,7 @@ Buy Gift Card - + diff --git a/public/views/buyandsell.html b/public/views/buyandsell.html index 05fcb2313..4f7dd4b10 100644 --- a/public/views/buyandsell.html +++ b/public/views/buyandsell.html @@ -8,7 +8,7 @@ - + diff --git a/public/views/glidera.html b/public/views/glidera.html index 2a8312ece..fb65265e7 100644 --- a/public/views/glidera.html +++ b/public/views/glidera.html @@ -87,7 +87,7 @@ {{email}} - +
@@ -112,14 +112,14 @@ href ui-sref="tabs.buyandsell.glidera.buy"> buy bitcoin Buy Bitcoin - + buy bitcoin Sell Bitcoin - +
diff --git a/public/views/preferences.html b/public/views/preferences.html index 41319fa36..61b68be42 100644 --- a/public/views/preferences.html +++ b/public/views/preferences.html @@ -14,7 +14,7 @@ {{wallet.name}} - + Hardware Wallet @@ -27,7 +27,7 @@ █ - + Email Notifications @@ -35,14 +35,14 @@ Disabled {{wallet.email}} - +
Security
Backup - +
@@ -56,12 +56,12 @@
Delete recovery phrase - +
Advanced - + diff --git a/public/views/preferencesAbout.html b/public/views/preferencesAbout.html index 072746127..7c66822e9 100644 --- a/public/views/preferencesAbout.html +++ b/public/views/preferencesAbout.html @@ -28,17 +28,17 @@ Terms of Use - + Translators - + Session log - + diff --git a/public/views/preferencesAdvanced.html b/public/views/preferencesAdvanced.html index 6ec4a3392..4f307ebc6 100644 --- a/public/views/preferencesAdvanced.html +++ b/public/views/preferencesAdvanced.html @@ -10,27 +10,27 @@ Wallet Information - + Sweep paper wallet - + Export Wallet - + Wallet Service URL - + Transaction History - + Delete Wallet - + diff --git a/public/views/preferencesDeleteWallet.html b/public/views/preferencesDeleteWallet.html index f9de95220..176981e40 100644 --- a/public/views/preferencesDeleteWallet.html +++ b/public/views/preferencesDeleteWallet.html @@ -5,13 +5,13 @@ -
+

Warning!

Permanently delete this wallet.

-

+

THIS ACTION CANNOT BE REVERSED

diff --git a/public/views/tab-settings.html b/public/views/tab-settings.html index 3ab43fd36..351e17844 100644 --- a/public/views/tab-settings.html +++ b/public/views/tab-settings.html @@ -11,7 +11,7 @@ Address Book - +
Preferences
@@ -21,7 +21,7 @@ Notifications - + @@ -32,7 +32,7 @@ {{currentLanguageName|translate}} - + @@ -43,7 +43,7 @@ {{unitName}} - + @@ -54,7 +54,7 @@ {{selectedAlternative.name}} - + @@ -65,7 +65,7 @@ {{feeOpts[currentFeeLevel]|translate}} - +
Wallets Preferences
@@ -80,13 +80,13 @@ Incomplete - +
Advanced - +
@@ -95,7 +95,7 @@ About {{appName}} - +
diff --git a/src/sass/common.scss b/src/sass/common.scss deleted file mode 100644 index 23da004f3..000000000 --- a/src/sass/common.scss +++ /dev/null @@ -1,131 +0,0 @@ -.icon.nav-item-arrow-right { - color: #666; - font-size: 26px; - @extend .ion-ios-arrow-right; -} - -.icon.nav-item-arrow-down { - color: #666; - font-size: 26px; - @extend .ion-ios-arrow-down; -} - -.icon.nav-item-arrow-up { - color: #666; - font-size: 26px; - @extend .ion-ios-arrow-up; -} - -.item.item-heading { - font-weight: bold; -} - -.item.item-footer { - font-weight: lighter; -} - -.icon.close-home-tip { - color: #666; - font-size: 38px; -} - -.icon.list-add-button { - color: #666; - font-size: 38px; -} - -.item.item-big-icon-left { - padding-left: 74px; -} - -.item-no-bottom-border + .item { - border-top: 0; -} - -.big-icon-svg { - padding: 0 7px; - > .bg { - border-radius: 50%; - width: 40px; - height: 40px; - box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3); - background-repeat:no-repeat; - background-clip: padding-box; - background-size: 103%; - &.green{ - background: rgb(1, 209, 162); - } - } -} - -.white-bg{ - background: #fff; -} - -.overlay { - position: absolute; - top:0; - left:0; - width:100%; - height: 100%; - background: rgba(0,0,0,.4); - z-index: 4; -} -.back-button { - border: 0; - .icon:before { - color: #fff; - font-size: 30px !important; - font-weight: bold; - margin-left: 5px; - } -} - -.search-button { - .icon:before { - color: #fff; - font-size: 30px !important; - margin-left: 5px; - } -} - -.button-block { - width: 90% !important; - margin-left: auto; - margin-right: auto; -} - -.bar-green{ - background: rgb(17, 209, 166) !important; -} - -ion-header-bar{ - button{ - border:none; - } -} - -.border-top{ - border-top:1px solid rgb(228,228,228); -} - -.bold-text{ - font-weight: bold !important; -} - -.card{ - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); -} - -/* Wrap text from item-note */ -.item-note{ - white-space: -moz-pre-wrap !important; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - white-space: pre-wrap; - word-wrap: break-word; - white-space: -webkit-pre-wrap; - word-break: break-all; - white-space: normal; -} - diff --git a/src/sass/icons.scss b/src/sass/icons.scss new file mode 100644 index 000000000..0f4569e3b --- /dev/null +++ b/src/sass/icons.scss @@ -0,0 +1,31 @@ +.icon.bp-arrow-right { + @extend .ion-ios-arrow-right; +} + +.icon.bp-arrow-down { + @extend .ion-ios-arrow-down; +} + +.icon.bp-arrow-up { + @extend .ion-ios-arrow-up; +} + +.item.item-big-icon-left { + padding-left: 74px; +} + +.big-icon-svg { + padding: 0 7px; + > .bg { + border-radius: 50%; + width: 40px; + height: 40px; + box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3); + background-repeat:no-repeat; + background-clip: padding-box; + background-size: 103%; + &.green{ + background: rgb(1, 209, 162); + } + } +} diff --git a/src/sass/ionic.scss b/src/sass/ionic.scss index 2730f327c..c7c3e0f1c 100644 --- a/src/sass/ionic.scss +++ b/src/sass/ionic.scss @@ -1,19 +1,9 @@ -/* constants */ -$royal: #1e3186; -$soft-blue: #647ce8; -$subtle-gray: #f5f5f5; -$roboto: "Roboto", sans-serif; -$roboto-light: "Roboto-Light", sans-serif-light; +// This file is for changes to the standard Ionic Framework which cannot be made +// in variables.scss. -/* 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; +@import "../../bower_components/ionic/scss/ionic"; -$ios-transition-duration: 200ms; - -/* Ionic Workarounds */ +/* Ionic Overrides and Workarounds */ // Please include a description of the problem solved by the workaround. // class to dynamically hide the ion-nav-bar for v1 Amazon flow @@ -25,4 +15,15 @@ ion-tabs.ion-tabs-transparent { background: none transparent; } -@import "../../bower_components/ionic/scss/ionic"; +// Some overrides for the card class which can't be set by variable +.card, .list { + .icon { + color: $light-gray; + } + & > .item-heading { + font-weight: 700; + .icon { + color: $mid-gray; + } + } +} diff --git a/src/sass/main.scss b/src/sass/main.scss index 121ecacbd..acb64a176 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,6 +1,7 @@ @import "fonts"; +@import "variables"; +@import "icons"; @import "ionic"; -@import "common"; @import "forms"; @import "mixins/mixins"; @import "views/views"; diff --git a/src/sass/shame.scss b/src/sass/shame.scss index d79b4da3d..62f0ae8ad 100644 --- a/src/sass/shame.scss +++ b/src/sass/shame.scss @@ -62,6 +62,42 @@ input[type=number] { height: 24px; } +/* Wrap text from item-note */ +.item-note{ + white-space: -moz-pre-wrap !important; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + white-space: pre-wrap; + word-wrap: break-word; + white-space: -webkit-pre-wrap; + word-break: break-all; + white-space: normal; +} + +.back-button { + border: 0; + .icon:before { + color: #fff; + font-size: 30px !important; + font-weight: bold; + margin-left: 5px; + } +} + +.search-button { + .icon:before { + color: #fff; + font-size: 30px !important; + margin-left: 5px; + } +} + +.button-block { + width: 90% !important; + margin-left: auto; + margin-right: auto; +} + .name-wallet { font-size: 14px; font-weight: 400; diff --git a/src/sass/variables.scss b/src/sass/variables.scss new file mode 100644 index 000000000..54e56b9ec --- /dev/null +++ b/src/sass/variables.scss @@ -0,0 +1,20 @@ +/* constants */ +$royal: #1e3186; +$soft-blue: #647ce8; +$subtle-gray: #f5f5f5; +$roboto: "Roboto", sans-serif; +$roboto-light: "Roboto-Light", sans-serif-light; +$mid-gray: #667; +$light-gray: #9b9bab; + +/* 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; + +$card-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + +$item-icon-font-size: 24px; diff --git a/src/sass/views/amount.scss b/src/sass/views/amount.scss index 83f1c3b14..5e355544a 100644 --- a/src/sass/views/amount.scss +++ b/src/sass/views/amount.scss @@ -1,4 +1,7 @@ #view-amount { + .item-no-bottom-border + .item { + border-top: 0; + } .icon-bitpay-card { background-image: url("../img/icon-bitpay.svg"); } diff --git a/src/sass/views/onboarding/onboard-collect-email.scss b/src/sass/views/onboarding/onboard-collect-email.scss index a6cf4acc4..f88175c67 100644 --- a/src/sass/views/onboarding/onboard-collect-email.scss +++ b/src/sass/views/onboarding/onboard-collect-email.scss @@ -1,5 +1,14 @@ #onboarding-collect-email { background: rgb(17, 209, 166); + .overlay { + position: absolute; + top:0; + left:0; + width:100%; + height: 100%; + background: rgba(0,0,0,.4); + z-index: 4; + } .scroll-content { margin-top: 0; height: 101%; diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 0bdbdbb88..100d730e1 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -7,6 +7,9 @@ } } } + .border-top{ + border-top:1px solid rgb(228,228,228); + } #address { background: #fff; .incomplete { diff --git a/src/sass/views/wallet-backup-phrase.scss b/src/sass/views/wallet-backup-phrase.scss index 057dea5f0..c4c3c20b0 100644 --- a/src/sass/views/wallet-backup-phrase.scss +++ b/src/sass/views/wallet-backup-phrase.scss @@ -26,6 +26,9 @@ color: rgb(43, 43, 43); } } + .bold-text { + font-weight: bold !important; + } p { color: rgb(58, 58, 58); font-weight: 200; @@ -115,7 +118,7 @@ &, & ion-content, & ion-content .scroll { - overflow-y:visible; + overflow-y:visible; } #select-phrase { float: left; diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss index 8383f783d..f3eea2550 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -28,6 +28,9 @@ line-height: 100%; } } + .item.item-footer { + font-weight: lighter; + } } .wallet-details-release { From fd16d9b5e0a2a71a71e51ba59cff0ac45bea6d3f Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Mon, 3 Oct 2016 19:55:13 -0400 Subject: [PATCH 2/5] design(home): update amazon and bitcoin icons, polish home view --- public/img/icon-amazon.svg | 20 +++++++++++++ public/img/icon-bitcoin.svg | 55 ++++++++++++++++++++---------------- public/views/tab-home.html | 38 ++++++++++++------------- src/sass/views/tab-home.scss | 20 ++++++------- 4 files changed, 80 insertions(+), 53 deletions(-) create mode 100644 public/img/icon-amazon.svg mode change 100755 => 100644 public/img/icon-bitcoin.svg diff --git a/public/img/icon-amazon.svg b/public/img/icon-amazon.svg new file mode 100644 index 000000000..14a4778ea --- /dev/null +++ b/public/img/icon-amazon.svg @@ -0,0 +1,20 @@ + + + + + + + + + + diff --git a/public/img/icon-bitcoin.svg b/public/img/icon-bitcoin.svg old mode 100755 new mode 100644 index 42747c028..5c532c555 --- a/public/img/icon-bitcoin.svg +++ b/public/img/icon-bitcoin.svg @@ -1,24 +1,31 @@ - - - - item-ico-bitcoin - Created with Sketch. - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + diff --git a/public/views/tab-home.html b/public/views/tab-home.html index 4ebf12c01..b43869c56 100644 --- a/public/views/tab-home.html +++ b/public/views/tab-home.html @@ -24,7 +24,7 @@
{{'Payment Proposals'|translate}} - + {{txpsN}} @@ -36,11 +36,11 @@
Recent Transactions - + -
Updating activity. Please stand by
+
Updating activity...
 @@ -57,7 +57,7 @@
Create a bitcoin wallet - + -

+ {{wallet.name || wallet.id}} {{wallet.m}}-of-{{wallet.n}} -

+

@@ -82,7 +82,7 @@  

- + BitPay Card

Add funds to get started

${{bitpayCard.balance}} - +
@@ -104,7 +104,7 @@
- + - + {{item.name}} - +
diff --git a/src/sass/views/tab-send.scss b/src/sass/views/tab-send.scss index 20ced3169..5c2a45669 100644 --- a/src/sass/views/tab-send.scss +++ b/src/sass/views/tab-send.scss @@ -11,11 +11,6 @@ padding-bottom: 1px; } } - .send-gravatar { - left: 11px; - position: absolute; - top: 10px; - } .show-more { text-align: center; padding: 20px; From 0acfc6ae6e5aacd6c1007622747feb9e544f6d66 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Mon, 3 Oct 2016 19:59:06 -0400 Subject: [PATCH 4/5] design(scan): better scan view responsiveness on very wide screens --- src/sass/views/tab-scan.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sass/views/tab-scan.scss b/src/sass/views/tab-scan.scss index 36d42ca2b..41d9e7ef1 100644 --- a/src/sass/views/tab-scan.scss +++ b/src/sass/views/tab-scan.scss @@ -21,6 +21,7 @@ width: 60%; max-width: 400px; margin-bottom: 8em; + max-height: 50%; } .icon-flash, .icon-camera-toggle { border-radius: 50%; From 04fd3915795070d88592734736d8aae5a5aba46e Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Mon, 3 Oct 2016 20:01:27 -0400 Subject: [PATCH 5/5] design(settings): polish settings view --- src/sass/views/tab-settings.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss index a8c6a6357..64085a563 100644 --- a/src/sass/views/tab-settings.scss +++ b/src/sass/views/tab-settings.scss @@ -10,8 +10,8 @@ .item { color: #444; border-top: none; - padding-top: 1.5rem; - padding-bottom: 1.5rem; + padding-top: 1.3rem; + padding-bottom: 1.3rem; .big-icon-svg { & > .bg{ width:20px; @@ -31,7 +31,9 @@ content: ''; } &.item-divider { - color: rgba(74, 74, 74, .8); + color: $mid-gray; + padding-bottom: .5rem; + font-size: .9rem; } &.item-heading { &:before { @@ -44,8 +46,11 @@ } } .item-note { - color: rgb(58, 58, 58); + color: $light-gray; } } } + .item-radio .radio-icon { + font-size: 18px; + } }