diff options
| -rw-r--r-- | ui/app/components/wallet-view.js | 146 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/index.scss | 4 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 17 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/wallet-balance.scss | 63 | ||||
| -rw-r--r-- | ui/app/css/itcss/settings/variables.scss | 1 |
5 files changed, 213 insertions, 18 deletions
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 5622505c8..4f6a67994 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -6,6 +6,7 @@ const Identicon = require('./identicon') const AccountDropdowns = require('./account-dropdowns').AccountDropdowns const Content = require('./wallet-content-display') const actions = require('../actions') +const BalanceComponent = require('./balance-component') const selectors = require('../selectors') module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) @@ -113,22 +114,133 @@ WalletView.prototype.render = function () { ]), ]), - h(Content, { - title: 'Wallet', - amount: '1001.124 ETH', - fiatValue: '$300,000.00 USD', - active: true, - }), - - // Wallet contents - h(Content, { - title: "Total Token Balance", - amount: "45.439 ETH", - fiatValue: "$13,000.00 USD", - active: false, - style: { - marginTop: '1.3em', - } - }) + //'Wallet' - Title + // Not visible on mobile + h('div.flex-column.wallet-view-title-wrapper', {}, [ + h('span.wallet-view-title', {}, [ + 'Wallet', + ]) + ]), + + //Wallet Balances + h('div.flex-column.wallet-balance-wrapper-active', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + ]) } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index de248de79..1b0a41714 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -4,6 +4,10 @@ @import './network.scss'; @import './modal.scss'; @import './newui-sections.scss'; + +// Balances @import './hero-balance.scss'; +@import './wallet-balance.scss'; + @import './transaction-list.scss'; @import './sections.scss'; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index a9167dfb8..01c69f818 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -28,7 +28,22 @@ $wallet-view-bg: $wild-sand; .wallet-view { flex: 33.5 0 33.5%; - background: $wallet-view-bg, + background: $wallet-view-bg; + overflow-y: scroll; +} + +.wallet-view-title-wrapper { + height: 25px; +} + +.wallet-view-title { + margin-left: 15px; + font-size: 16px; + + // No title on mobile + @media screen and (max-width: 575px) { + display: none; + } } .account-options-menu { diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss new file mode 100644 index 000000000..03cc38a03 --- /dev/null +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -0,0 +1,63 @@ +$wallet-balance-bg: $gallery; +$wallet-balance-breakpoint: 890px; +$wallet-balance-breakpoint-range: + "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; + +.wallet-balance { + background: inherit; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .balance-container { + display: flex; + justify-content: flex-start; + align-items: center; + margin: 20px 24px; + flex-direction: row; + flex-grow: 3; + + @media #{$wallet-balance-breakpoint-range} { + margin: 10% 4%; + } + } + + .balance-display { + margin-left: 15px; + justify-content: flex-start; + align-items: flex-start; + + .token-amount { + font-size: 135%; + } + + .fiat-amount { + margin-top: 0.25%; + font-size: 105%; + } + + @media #{$wallet-balance-breakpoint-range} { + margin-left: 4%; + + .token-amount { + font-size: 105%; + } + + .fiat-amount { + font-size: 95%; + } + } + } + + .balance-icon { + border-radius: 25px; + width: 45px; + height: 45px; + border: 1px solid $alto; + } +} + +.wallet-balance-wrapper-active { + background: $wallet-balance-bg; +}
\ No newline at end of file diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 9bd10cb4e..f47b7c889 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -18,6 +18,7 @@ $wild-sand: #F6F6F6; $white: #FFFFFF; $dusty-gray: #9B9B9B; $alto: #DEDEDE; +$alabaster: #FAFAFA; /* Z-Indicies |