From 535d2e0a088065d36c33e04e7aaa4756dc5d2472 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Wed, 12 Oct 2016 18:05:28 -0400 Subject: [PATCH 01/17] feat(design): improve layout and design of tab-settings closes #378 --- src/sass/views/tab-settings.scss | 17 ++++++++++++----- www/views/tab-settings.html | 16 ++++++++-------- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss index 9443e05b0..f4fec0000 100644 --- a/src/sass/views/tab-settings.scss +++ b/src/sass/views/tab-settings.scss @@ -6,6 +6,16 @@ } #tab-settings { + .setting-title, .setting-value { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .setting-value { + color: $light-gray; + font-size: 14px; + } .list { .item { color: #444; @@ -23,8 +33,8 @@ left:8px; .bg { border-radius: 50%; - width:30px; - height:30px; + width: 25px; + height: 25px; padding:.1rem; } } @@ -54,9 +64,6 @@ width: 0; } } - .item-note { - color: $light-gray; - } } } .item-radio .radio-icon { diff --git a/www/views/tab-settings.html b/www/views/tab-settings.html index c22662e72..df2530346 100644 --- a/www/views/tab-settings.html +++ b/www/views/tab-settings.html @@ -6,7 +6,7 @@
- + @@ -20,7 +20,7 @@ Address Book - + @@ -53,8 +53,8 @@ - Unit - + Unit + {{unitName}} @@ -64,8 +64,8 @@ - Alternative Currency - + Alternative Currency + {{selectedAlternative.name}} @@ -75,8 +75,8 @@ - Bitcoin Network Fee Policy - + Bitcoin Network Fee Policy + {{feeOpts[currentFeeLevel]|translate}} From 779205c7ad8de6a16d213b5fa1f11fb363abbd4a Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Wed, 12 Oct 2016 18:59:45 -0400 Subject: [PATCH 02/17] feat(design): improve design of bitcoin network fee policy view --- src/sass/views/tab-settings.scss | 41 ++++++++++++++++++++++++++++---- www/views/preferencesFee.html | 24 ++++++++++--------- 2 files changed, 49 insertions(+), 16 deletions(-) diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss index f4fec0000..c99815870 100644 --- a/src/sass/views/tab-settings.scss +++ b/src/sass/views/tab-settings.scss @@ -1,11 +1,22 @@ .settings { .item { - color: #444; + color: $dark-gray; border-color: rgba(221, 221, 221, 0.3); } -} - -#tab-settings { + &-explaination { + padding: 0 1rem; + margin: 1rem 0; + } + &-heading { + font-size: 17px; + color: $dark-gray; + margin: 1rem 0; + } + &-description { + font-size: 15px; + color: $mid-gray; + margin: 1rem 0; + } .setting-title, .setting-value { display: block; overflow: hidden; @@ -16,9 +27,12 @@ color: $light-gray; font-size: 14px; } +} + +#tab-settings { .list { .item { - color: #444; + color: $dark-gray; border-top: none; padding-top: 1.3rem; padding-bottom: 1.3rem; @@ -70,3 +84,20 @@ font-size: 18px; } } + +#settings-fee { + .estimates { + font-size: 15px; + color: $dark-gray; + } + .fee-minutes, .fee-rate { + font-weight: bold; + display: block; + margin-bottom: .5rem; + } + .fee-policies { + border-color: #fff; + border-width: 2px 0; + border-style: solid; + } +} diff --git a/www/views/preferencesFee.html b/www/views/preferencesFee.html index a07f46f66..123cec824 100644 --- a/www/views/preferencesFee.html +++ b/www/views/preferencesFee.html @@ -1,4 +1,4 @@ - + {{'Bitcoin Network Fee Policy'|translate}} @@ -6,19 +6,21 @@ - - - {{feeOpts[fee.level]|translate}} - -
-
- Average confirmation time: {{fee.nbBlocks * 10}} minutes. +
+
Bitcoin transactions include a fee collected by miners on the network.
+
The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy.
+
+
+ Average confirmation time: {{fee.nbBlocks * 10}} minutes +
+ Current fee rate for this policy: {{fee.feePerKBUnit}}/kiB
- Current fee rate for this policy: {{fee.feePerKBUnit}}/kiB
-
- Bitcoin transactions may include a fee collected by miners on the network. The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy. +
+ + {{feeOpts[fee.level]|translate}} +
From cf35248c7ef80c1f4fdded499f15ee46e14c5f46 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Wed, 12 Oct 2016 19:11:02 -0400 Subject: [PATCH 03/17] feat(design): better settings list organization --- www/views/tab-settings.html | 48 ++++++++++++++++++++----------------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/www/views/tab-settings.html b/www/views/tab-settings.html index df2530346..8d0e9f185 100644 --- a/www/views/tab-settings.html +++ b/www/views/tab-settings.html @@ -20,6 +20,15 @@ Address Book + + + + + Help & Support + + + + @@ -81,15 +90,9 @@ - - - - - Advanced - -
Wallets & Integrations
+ @@ -107,14 +110,8 @@
- - - - - About {{appName}} - - - + + @@ -122,16 +119,23 @@ -
- +
+ + - - - Help & Support - - + + Advanced + + + + + + About {{appName}} + + +
From 9ec7d5f38ce3b7622f909671617849a2401592dd Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Wed, 12 Oct 2016 19:33:54 -0400 Subject: [PATCH 04/17] feat(design): improve wallet settings view and wallet settings alias view --- src/sass/views/tab-settings.scss | 11 +++++++++++ www/views/preferences.html | 4 ++-- www/views/preferencesAlias.html | 15 +++++++++------ 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss index c99815870..5f37ea40e 100644 --- a/src/sass/views/tab-settings.scss +++ b/src/sass/views/tab-settings.scss @@ -27,6 +27,17 @@ color: $light-gray; font-size: 14px; } + .settings-list { + background-color: #fff; + .item-stacked-label { + padding: 1rem; + } + .input-label { + text-transform: uppercase; + font-size: 12px; + font-weight: bold; + } + } } #tab-settings { diff --git a/www/views/preferences.html b/www/views/preferences.html index 76432715d..5dd11b872 100644 --- a/www/views/preferences.html +++ b/www/views/preferences.html @@ -30,8 +30,8 @@ - Email Notifications - + Email Notifications + Disabled {{wallet.email}} diff --git a/www/views/preferencesAlias.html b/www/views/preferencesAlias.html index ae0df0c89..44d824b1f 100644 --- a/www/views/preferencesAlias.html +++ b/www/views/preferencesAlias.html @@ -1,17 +1,21 @@ - + - {{'Alias'|translate}} + {{'Wallet Name'|translate}} +
+
What do you call this wallet?
+
When this wallet was created, it was called "{{walletName}}". You can change how the name is displayed on this device below.
+
-
+
Color - - █ + + diff --git a/www/views/preferencesAlias.html b/www/views/preferencesAlias.html index 44d824b1f..8471af6f5 100644 --- a/www/views/preferencesAlias.html +++ b/www/views/preferencesAlias.html @@ -9,7 +9,7 @@
What do you call this wallet?
-
When this wallet was created, it was called "{{walletName}}". You can change how the name is displayed on this device below.
+
When this wallet was created, it was called “{{walletName}}”. You can change the name displayed on this device below.
diff --git a/www/views/preferencesColor.html b/www/views/preferencesColor.html index 0edab4cbd..f5a7a659a 100644 --- a/www/views/preferencesColor.html +++ b/www/views/preferencesColor.html @@ -1,15 +1,15 @@ - + - {{'Color'|translate}} + {{'Wallet Color'|translate}} - █ - {{c.name}} + + {{c.name}} diff --git a/www/views/tab-settings.html b/www/views/tab-settings.html index 8d0e9f185..551454d6d 100644 --- a/www/views/tab-settings.html +++ b/www/views/tab-settings.html @@ -1,6 +1,6 @@ - {{'Global Settings' | translate}} + {{'Settings' | translate}} From 23ffd9a7b2a866b78660cd7cd95055d66ba83649 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Wed, 12 Oct 2016 20:39:36 -0400 Subject: [PATCH 06/17] feat(design): cut down opacity of non-essential icons --- src/sass/icons.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/sass/icons.scss b/src/sass/icons.scss index fd352e9ca..65e4e7f1a 100644 --- a/src/sass/icons.scss +++ b/src/sass/icons.scss @@ -1,13 +1,20 @@ .icon.bp-arrow-right { @extend .ion-ios-arrow-right; + @extend %just-a-hint; } .icon.bp-arrow-down { @extend .ion-ios-arrow-down; + @extend %just-a-hint; } .icon.bp-arrow-up { @extend .ion-ios-arrow-up; + @extend %just-a-hint; +} + +%just-a-hint { + opacity: 0.2; } .item.item-big-icon-left { From 53366f6faab033bca685a909a9f6e04570412362 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Wed, 12 Oct 2016 20:41:15 -0400 Subject: [PATCH 07/17] fix(preferences): fix improperly closed a tag --- www/views/preferences.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/views/preferences.html b/www/views/preferences.html index d9d198dd9..410b93119 100644 --- a/www/views/preferences.html +++ b/www/views/preferences.html @@ -21,7 +21,7 @@ {{externalSource}} -
+ Color From 41c01250a0ea37fe9b777797efdeb21156b67758 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Wed, 12 Oct 2016 21:17:30 -0400 Subject: [PATCH 08/17] fix(home): correct subtle item divider details on home tab fixes #428 --- src/sass/views/tab-home.scss | 35 +++++------- www/views/tab-home.html | 100 ++++++++++++++++++----------------- 2 files changed, 63 insertions(+), 72 deletions(-) diff --git a/src/sass/views/tab-home.scss b/src/sass/views/tab-home.scss index 7a1f5c6a6..2956d8ea3 100644 --- a/src/sass/views/tab-home.scss +++ b/src/sass/views/tab-home.scss @@ -22,6 +22,18 @@ border-top:none; padding-bottom: 1.5rem; padding-top:1.5rem; + &.wallet{ + .big-icon-svg{ + & > .bg{ + padding: .25rem + } + } + } + } + .item-sub { + &:first-child:before { + width: 100% + } &:before { display: block; position: absolute; @@ -37,29 +49,6 @@ } } } - &.item-heading{ - &:before{ - width:100% !important; - top:99% - } - } - &:nth-child(1){ - &:before{ - width:0; - } - } - &:nth-child(2):last-child{ - &:before{ - width:0; - } - } - &.wallet{ - .big-icon-svg{ - & > .bg{ - padding: .25rem - } - } - } } } .next-step.item { diff --git a/www/views/tab-home.html b/www/views/tab-home.html index 0cc933f8a..9b9cbdb14 100644 --- a/www/views/tab-home.html +++ b/www/views/tab-home.html @@ -34,7 +34,7 @@ {{txpsN}} - +
@@ -48,7 +48,7 @@
Updating activity...
- +
@@ -58,57 +58,59 @@ Wallets
- - -
- - Create a bitcoin wallet - - - - - - - - {{wallet.name || wallet.id}} - - {{wallet.m}}-of-{{wallet.n}} +
+ + +
+ + Create a bitcoin wallet + + + + + + + + {{wallet.name || wallet.id}} + + {{wallet.m}}-of-{{wallet.n}} + - -

- - Incomplete - - - {{wallet.status.availableBalanceStr}} - [Balance Hidden] - -   -

- - - - -
- -

BitPay Card

-

Add funds to get started

- ${{bitpayCard.balance}} - - +

+ + Incomplete + + + {{wallet.status.availableBalanceStr}} + [Balance Hidden] + +   +

+ + + + +
+ +

BitPay Card

+

Add funds to get started

+ ${{bitpayCard.balance}} + + +
-
+
Buy & Sell Bitcoin
- + @@ -119,7 +121,7 @@
- +
@@ -136,21 +138,21 @@
- +
Add BitPay Visa® Card - +
Buy or Sell Bitcoin - +
From b755f915c086ffb83dbd5c962971b7ca7baa755a Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Wed, 12 Oct 2016 21:21:47 -0400 Subject: [PATCH 09/17] fix(send): fully hide zero state when user has funds --- www/views/tab-send.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/views/tab-send.html b/www/views/tab-send.html index 886ea93a7..d617ec552 100644 --- a/www/views/tab-send.html +++ b/www/views/tab-send.html @@ -2,8 +2,8 @@ {{'Send' | translate}} - -
+ +
From 4f8758c6d7ca111df8ec85d0d11340dc2db88fc9 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Wed, 12 Oct 2016 22:01:48 -0400 Subject: [PATCH 10/17] feat(design): polish all settings views Closes #424 --- src/sass/icons.scss | 8 ++++---- src/sass/views/advancedSettings.scss | 12 +++--------- src/sass/views/tab-settings.scss | 24 ++++++++++++++---------- www/img/icon-link.svg | 4 ++-- www/views/advancedSettings.html | 12 +++++++----- www/views/paperWallet.html | 20 ++++++-------------- www/views/preferences.html | 4 ++-- www/views/preferencesAdvanced.html | 2 +- www/views/preferencesAlias.html | 2 +- www/views/preferencesEmail.html | 11 ++++++++--- www/views/preferencesInformation.html | 14 ++++++++++---- www/views/tab-settings.html | 4 ++-- 12 files changed, 60 insertions(+), 57 deletions(-) diff --git a/src/sass/icons.scss b/src/sass/icons.scss index 65e4e7f1a..0e7c431a5 100644 --- a/src/sass/icons.scss +++ b/src/sass/icons.scss @@ -1,19 +1,19 @@ .icon.bp-arrow-right { @extend .ion-ios-arrow-right; - @extend %just-a-hint; + @extend .just-a-hint; } .icon.bp-arrow-down { @extend .ion-ios-arrow-down; - @extend %just-a-hint; + @extend .just-a-hint; } .icon.bp-arrow-up { @extend .ion-ios-arrow-up; - @extend %just-a-hint; + @extend .just-a-hint; } -%just-a-hint { +.just-a-hint { opacity: 0.2; } diff --git a/src/sass/views/advancedSettings.scss b/src/sass/views/advancedSettings.scss index d3da674d9..85dee4e55 100644 --- a/src/sass/views/advancedSettings.scss +++ b/src/sass/views/advancedSettings.scss @@ -8,10 +8,6 @@ #advanced-settings { .list { .item { - color: #444; - border-top: none; - padding-top: 1.5rem; - padding-bottom: 1.5rem; &:before { display: block; position: absolute; @@ -39,15 +35,13 @@ color: rgb(58, 58, 58); } } + .has-comment { + border-bottom: 0 none; + } .comment { padding: 15px; background-color: #fff; color: rgba(74, 74, 74, 0.8); } - .divider-comment { - padding: 15px; - color: rgba(74, 74, 74, 0.8); - font-size: 15px; - } } } diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss index 309cb6119..a4bedf400 100644 --- a/src/sass/views/tab-settings.scss +++ b/src/sass/views/tab-settings.scss @@ -27,7 +27,7 @@ color: $light-gray; font-size: 14px; } - .settings-list { + .settings-input-group { background-color: #fff; .item-stacked-label { padding: 1rem; @@ -37,16 +37,25 @@ font-size: 12px; font-weight: bold; } + } + .settings-list { + .item { + color: $dark-gray; + border-top: none; + padding-top: 1.3rem; + padding-bottom: 1.3rem; + &.item-divider { + color: $mid-gray; + padding-bottom: .5rem; + font-size: .9rem; + } + } } } #tab-settings { .list { .item { - color: $dark-gray; - border-top: none; - padding-top: 1.3rem; - padding-bottom: 1.3rem; .big-icon-svg { & > .bg{ width:20px; @@ -75,11 +84,6 @@ right: 0; content: ''; } - &.item-divider { - color: $mid-gray; - padding-bottom: .5rem; - font-size: .9rem; - } &.item-heading { &:before { top: 99% diff --git a/www/img/icon-link.svg b/www/img/icon-link.svg index 38d3e8cb0..eba22bf4e 100644 --- a/www/img/icon-link.svg +++ b/www/img/icon-link.svg @@ -5,7 +5,7 @@ Created with sketchtool. - + @@ -15,4 +15,4 @@ - \ No newline at end of file + diff --git a/www/views/advancedSettings.html b/www/views/advancedSettings.html index e0a2d0e5d..505ea7dc6 100644 --- a/www/views/advancedSettings.html +++ b/www/views/advancedSettings.html @@ -6,7 +6,7 @@ -
+
Enabled Integrations
@@ -30,7 +30,7 @@
Wallet Operation
- + Use Unconfirmed Funds
@@ -38,11 +38,13 @@
Experimental Features
-
- These features aren't quite ready for primetime. They may change, stop working, or disappear at any time. +
+
+ These features aren't quite ready for primetime. They may change, stop working, or disappear at any time. +
- + Recent Transaction Card
diff --git a/www/views/paperWallet.html b/www/views/paperWallet.html index 08b198155..43c9754fc 100644 --- a/www/views/paperWallet.html +++ b/www/views/paperWallet.html @@ -6,21 +6,13 @@ -
-
-

-
- - Backup Needed. - - Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup. - -
-
- - Preferences - +
+
+
Backup Needed
+
+ Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
+ Preferences
diff --git a/www/views/preferences.html b/www/views/preferences.html index 410b93119..54e38ccd2 100644 --- a/www/views/preferences.html +++ b/www/views/preferences.html @@ -7,7 +7,7 @@ -
+
Name @@ -56,7 +56,7 @@
- Advanced + More Options
diff --git a/www/views/preferencesAdvanced.html b/www/views/preferencesAdvanced.html index 4f307ebc6..ee1c3b859 100644 --- a/www/views/preferencesAdvanced.html +++ b/www/views/preferencesAdvanced.html @@ -1,6 +1,6 @@ - {{'Advanced Preferences' | translate}} + {{'More Options' | translate}} diff --git a/www/views/preferencesAlias.html b/www/views/preferencesAlias.html index 8471af6f5..ed052c03f 100644 --- a/www/views/preferencesAlias.html +++ b/www/views/preferencesAlias.html @@ -12,7 +12,7 @@
When this wallet was created, it was called “{{walletName}}”. You can change the name displayed on this device below.
-
+