diff options
author | Chi Kei Chan <chikeichan@gmail.com> | 2019-06-13 10:56:04 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-06-13 10:56:04 +0800 |
commit | 9a1a207ffae63962b2ae0ec1bdd7daa7a67eaa27 (patch) | |
tree | 13933ea3bd92289b0b8fa067546d545ac380d9e6 /ui/app/components | |
parent | 71390db4a3cd98e9a70abaae75b9e2864ebbddc6 (diff) | |
download | tangerine-wallet-browser-9a1a207ffae63962b2ae0ec1bdd7daa7a67eaa27.tar tangerine-wallet-browser-9a1a207ffae63962b2ae0ec1bdd7daa7a67eaa27.tar.gz tangerine-wallet-browser-9a1a207ffae63962b2ae0ec1bdd7daa7a67eaa27.tar.bz2 tangerine-wallet-browser-9a1a207ffae63962b2ae0ec1bdd7daa7a67eaa27.tar.lz tangerine-wallet-browser-9a1a207ffae63962b2ae0ec1bdd7daa7a67eaa27.tar.xz tangerine-wallet-browser-9a1a207ffae63962b2ae0ec1bdd7daa7a67eaa27.tar.zst tangerine-wallet-browser-9a1a207ffae63962b2ae0ec1bdd7daa7a67eaa27.zip |
MetaMorph - Spacing and Typeface on Extension Main view (#6584)
* wip
* Style Update: Mobile App Header
* wip
* Style Update: mobile menu-bar
* Style Update: Primary and Secondary balance on mobile main view
* Style Update: Spacing for transaction-list and transaction-list-item
* Address PR Comments
* Fix full-width view
* line-height fixes
Diffstat (limited to 'ui/app/components')
13 files changed, 66 insertions, 37 deletions
diff --git a/ui/app/components/app/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss index 9a61bf887..435dd6b2a 100644 --- a/ui/app/components/app/account-menu/index.scss +++ b/ui/app/components/app/account-menu/index.scss @@ -21,7 +21,7 @@ } &__icon { - margin-left: 20px; + margin-left: 1rem; cursor: pointer; &--disabled { diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js index 343e0daab..171a3499f 100644 --- a/ui/app/components/app/app-header/app-header.component.js +++ b/ui/app/components/app/app-header/app-header.component.js @@ -101,8 +101,6 @@ export default class AppHeader extends PureComponent { <img className="app-header__metafox-logo app-header__metafox-logo--icon" src="/images/logo/metamask-fox.svg" - height={42} - width={42} /> </div> <div className="app-header__account-menu-container"> diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss index d46b16f25..d3f37b7a2 100644 --- a/ui/app/components/app/app-header/index.scss +++ b/ui/app/components/app/app-header/index.scss @@ -1,6 +1,6 @@ .app-header { align-items: center; - background: $gallery; + background: $Grey-000; position: relative; z-index: $header-z-index; display: flex; @@ -9,7 +9,7 @@ flex: 0 0 auto; @media screen and (max-width: 575px) { - padding: 12px; + padding: 1rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } @@ -34,6 +34,7 @@ cursor: pointer; &--icon { + height: 32px; @media screen and (min-width: $break-large) { display: none; } diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss index f699f4090..eaa50619c 100644 --- a/ui/app/components/app/menu-bar/index.scss +++ b/ui/app/components/app/menu-bar/index.scss @@ -5,19 +5,28 @@ align-items: center; flex: 0 0 auto; margin-bottom: 16px; - padding: 5px; - border-bottom: 1px solid #e5e5e5; + padding: 0 22px; + border-bottom: 1px solid $Grey-100; &__sidebar-button { - font-size: 1.25rem; + width: 20px; + height: 20px; + background-image: url(/images/icons/hamburger.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: center; cursor: pointer; - padding: 10px; } &__open-in-browser { + width: 20px; + height: 20px; + background-image: url(/images/icons/3dots.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: center; cursor: pointer; display: flex; justify-content: center; - padding: 10px; } } diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js index e37fddda4..c830d8a19 100644 --- a/ui/app/components/app/menu-bar/menu-bar.component.js +++ b/ui/app/components/app/menu-bar/menu-bar.component.js @@ -30,7 +30,7 @@ export default class MenuBar extends PureComponent { position="bottom" > <div - className="fa fa-bars menu-bar__sidebar-button" + className="menu-bar__sidebar-button" onClick={() => { this.context.metricsEvent({ eventOpts: { @@ -50,7 +50,7 @@ export default class MenuBar extends PureComponent { position="bottom" > <div - className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser" + className="menu-bar__open-in-browser" onClick={() => { this.context.metricsEvent({ eventOpts: { diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js index 9ee0a1e17..e778700cd 100644 --- a/ui/app/components/app/network.js +++ b/ui/app/components/app/network.js @@ -82,7 +82,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('mainnet')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'ropsten-test-network': return h('.network-indicator', [ @@ -92,7 +92,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('ropsten')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'kovan-test-network': return h('.network-indicator', [ @@ -102,7 +102,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('kovan')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'rinkeby-test-network': return h('.network-indicator', [ @@ -112,7 +112,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('rinkeby')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'goerli-test-network': return h('.network-indicator', [ @@ -122,7 +122,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('goerli')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) default: return h('.network-indicator', [ @@ -142,7 +142,7 @@ Network.prototype.render = function () { }), h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) } })(), diff --git a/ui/app/components/app/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss index 5339a228b..fa3079d77 100644 --- a/ui/app/components/app/selected-account/index.scss +++ b/ui/app/components/app/selected-account/index.scss @@ -7,15 +7,21 @@ &__name { max-width: 200px; + font-size: 1rem; + font-weight: 500; + line-height: 19px; + color: $black; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; + margin-bottom: 4px; } &__address { font-size: .75rem; - color: $silver-chalice; + line-height: .75rem; + color: #989a9b; } &__clickable { @@ -23,7 +29,8 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 5px 15px; + margin: 4px 0; + padding: 6px 15px; border-radius: 10px; cursor: pointer; diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss index 9e73a546c..4dba4b2c3 100644 --- a/ui/app/components/app/transaction-list-item/index.scss +++ b/ui/app/components/app/transaction-list-item/index.scss @@ -1,7 +1,7 @@ .transaction-list-item { box-sizing: border-box; min-height: 74px; - border-bottom: 1px solid $geyser; + border-bottom: 1px solid $Grey-100; display: flex; justify-content: center; align-items: center; @@ -19,7 +19,7 @@ "identicon nonce status secondary-amount"; @media screen and (max-width: $break-small) { - padding: 8px 20px 12px; + padding: .5rem 1rem; grid-template-columns: 45px 5fr 3fr; grid-template-areas: "nonce nonce nonce" @@ -44,12 +44,13 @@ &__action { text-transform: capitalize; - padding: 0 8px 2px 0; + padding: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-area: action; - align-self: end; + color: $Grey-800; + line-height: 20px; } &__status { @@ -72,7 +73,8 @@ align-self: start; @media screen and (max-width: $break-small) { - padding-bottom: 4px; + padding-bottom: 8px; + line-height: 12px; } } @@ -88,19 +90,22 @@ grid-area: primary-amount; align-self: end; justify-self: end; + line-height: 20px; @media screen and (max-width: $break-small) { - padding-bottom: 2px; + padding-bottom: 4px; + height: 100%; + color: $Grey-800; } } &--secondary { text-align: end; font-size: .75rem; - color: #5e6064; grid-area: secondary-amount; align-self: start; justify-self: end; + color: $Grey-500; } } diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js index 0d4127b4f..80b26469b 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js @@ -179,7 +179,7 @@ export default class TransactionListItem extends PureComponent { <Identicon className="transaction-list-item__identicon" address={toAddress} - diameter={34} + diameter={36} image={assetImages[toAddress]} /> <TransactionAction diff --git a/ui/app/components/app/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss index a486f4112..42eddd31e 100644 --- a/ui/app/components/app/transaction-list/index.scss +++ b/ui/app/components/app/transaction-list/index.scss @@ -12,9 +12,10 @@ &__header { flex: 0 0 auto; - font-size: .875rem; - color: $dusty-gray; - border-bottom: 1px solid $geyser; + font-size: 14px; + line-height: 20px; + color: $Grey-400; + border-bottom: 1px solid $Grey-100; padding: 8px 0 8px 20px; @media screen and (max-width: $break-small) { diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss index e7daafeef..024cbf2a1 100644 --- a/ui/app/components/app/transaction-status/index.scss +++ b/ui/app/components/app/transaction-status/index.scss @@ -12,8 +12,9 @@ @media screen and (max-width: $break-small) { height: 16px; - width: 72px; - font-size: .5rem; + min-width: 72px; + font-size: 10px; + padding: 0 12px; } &--confirmed { diff --git a/ui/app/components/app/transaction-view-balance/index.scss b/ui/app/components/app/transaction-view-balance/index.scss index bdcd536b0..cdb09db8a 100644 --- a/ui/app/components/app/transaction-view-balance/index.scss +++ b/ui/app/components/app/transaction-view-balance/index.scss @@ -33,11 +33,14 @@ &__primary-balance { font-size: 1.5rem; + color: $black; @media screen and (max-width: $break-small) { - font-size: 1.75rem; + font-size: 32px; + line-height: 45px; width: 100%; justify-content: center; + } } @@ -51,12 +54,15 @@ &__cached-secondary-balance { color: rgba(220, 153, 18, 0.6901960784313725); - font-size: 1.15rem; + font-size: 16px; + line-height: 23px; } &__secondary-balance { - font-size: 1.15rem; - color: #a0a0a0; + font-size: 16px; + line-height: 23px; + font-weight: 400; + color: $Grey-400; } &__balance-container { diff --git a/ui/app/components/ui/currency-display/index.scss b/ui/app/components/ui/currency-display/index.scss index 313c932b8..6d069eb05 100644 --- a/ui/app/components/ui/currency-display/index.scss +++ b/ui/app/components/ui/currency-display/index.scss @@ -6,6 +6,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } &__suffix { |