diff options
Diffstat (limited to 'ui')
65 files changed, 370 insertions, 358 deletions
diff --git a/ui/app/components/add-token-button/index.scss b/ui/app/components/add-token-button/index.scss index 31a9ab21..44a28e53 100644 --- a/ui/app/components/add-token-button/index.scss +++ b/ui/app/components/add-token-button/index.scss @@ -1,7 +1,7 @@ .add-token-button { display: flex; flex-direction: column; - color: lighten($scorpion, 25%); + color: $black; width: 185px; margin: 36px auto; text-align: center; @@ -19,8 +19,8 @@ &__button { font-size: 0.75rem; margin: 1rem; - text-transform: uppercase; - color: $dexon-purple; + text-decoration: underline; + color: $black; cursor: pointer; } } diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js index b799ba9f..bb3a60cb 100644 --- a/ui/app/components/app-header/app-header.component.js +++ b/ui/app/components/app-header/app-header.component.js @@ -120,12 +120,12 @@ export default class AppHeader extends PureComponent { > <img className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/dekusan.svg" - height={40} + src="/images/dexon-wallet.svg" + height={24} /> <img className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/dekusan.svg" + src="/images/dexon-wallet.svg" height={36} width={36} /> diff --git a/ui/app/components/app-header/index.scss b/ui/app/components/app-header/index.scss index 5e39e13e..6ef94298 100644 --- a/ui/app/components/app-header/index.scss +++ b/ui/app/components/app-header/index.scss @@ -7,14 +7,17 @@ flex-flow: column nowrap; width: 100%; flex: 0 0 auto; + @media screen and (max-width: 575px) { padding: 12px; - box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); z-index: $mobile-header-z-index; } + @media screen and (min-width: 576px) { height: 75px; justify-content: center; + &--back-drop { &::after { content: ''; @@ -26,51 +29,62 @@ } } } + &__metafox-logo { cursor: pointer; + &--icon { @media screen and (min-width: $break-large) { display: none; } } + &--horizontal { @media screen and (max-width: $break-small) { display: none; } } } + &__contents { display: flex; justify-content: space-between; flex-flow: row nowrap; width: 100%; + @media screen and (max-width: 575px) { height: 100%; } + @media screen and (min-width: 576px) { width: 85vw; } + @media screen and (min-width: 769px) { width: 80vw; } + @media screen and (min-width: 1281px) { width: 62vw; } } + &__logo-container { display: flex; flex-direction: row; align-items: center; cursor: pointer; } + &__account-menu-container { display: flex; flex-flow: row nowrap; align-items: center; } + &__network-component-wrapper { display: flex; flex-direction: row; align-items: center; } -}
\ No newline at end of file +} diff --git a/ui/app/components/button-group/index.scss b/ui/app/components/button-group/index.scss index 59e596a4..b7988fe2 100644 --- a/ui/app/components/button-group/index.scss +++ b/ui/app/components/button-group/index.scss @@ -6,10 +6,7 @@ &__button { font-family: Overpass; font-size: 1rem; - color: $manatee; - border-style: solid; - border-color: $geyser; - border-width: 1px 1px 1px; + color: $black; border-left: 0; flex: 1; padding: 12px; @@ -18,7 +15,6 @@ text-overflow: ellipsis; &:first-child { - border-left: 1px solid $geyser; border-radius: 4px 0 0 4px; } @@ -27,7 +23,7 @@ } &--active { - background-color: $dexon-purple; + background-color: $black; color: $white; } diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/index.scss b/ui/app/components/confirm-page-container/confirm-detail-row/index.scss index 8e83584f..bc4f9428 100644 --- a/ui/app/components/confirm-page-container/confirm-detail-row/index.scss +++ b/ui/app/components/confirm-page-container/confirm-detail-row/index.scss @@ -7,8 +7,8 @@ &__label { font-size: .75rem; - font-weight: 500; - color: $white; + font-weight: 400; + color: $black; text-transform: uppercase; } @@ -24,7 +24,7 @@ } &__secondary { - color: $oslo-gray; + color: $black; justify-content: flex-end; } @@ -32,10 +32,11 @@ font-size: .75rem; text-transform: uppercase; margin-bottom: 6px; - color: $white; + color: $black; &--edit { - color: $dexon-purple; + color: $black; + text-decoration: underline; cursor: pointer; } diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss index 1a0b30d6..949b3d6f 100644 --- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss +++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss @@ -1,9 +1,14 @@ .confirm-page-container-summary { - padding: 16px 24px 0; + padding: 16px 24px; background-color: $black; - height: 133px; box-sizing: border-box; + .currency-display-component { + &__text { + color: white; + } + } + &__action-row { display: flex; justify-content: space-between; diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss index 2a60839a..1e7139bb 100644 --- a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss +++ b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss @@ -41,7 +41,7 @@ flex-direction: row; &-label { - font-weight: 500; + font-weight: 400; padding-right: 16px; } @@ -56,7 +56,7 @@ &__function-type { font-size: .875rem; - font-weight: 500; + font-weight: 400; text-transform: capitalize; color: $white; padding-left: 5px; diff --git a/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss index 79cd21fd..89324095 100644 --- a/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss +++ b/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss @@ -18,7 +18,7 @@ } &__back-button { - color: $dexon-purple; + color: $black; font-size: 1rem; cursor: pointer; font-weight: 400; diff --git a/ui/app/components/currency-display/index.scss b/ui/app/components/currency-display/index.scss index 17410dc9..65ac05f5 100644 --- a/ui/app/components/currency-display/index.scss +++ b/ui/app/components/currency-display/index.scss @@ -6,7 +6,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - color: $white; + color: $black; } &__suffix { diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 9190947a..bb7438d0 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -115,27 +115,27 @@ NetworkDropdown.prototype.render = function () { ), ]), - // h( - // DropdownMenuItem, - // { - // key: 'main', - // closeMenu: () => this.props.hideNetworkDropdown(), - // onClick: () => props.setProviderType('mainnet'), - // style: { ...dropdownMenuItemStyle, borderColor: '#038789' }, - // }, - // [ - // providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), - // h(NetworkDropdownIcon, { - // backgroundColor: '#aeaeae', // $silver-chalice - // isSelected: providerType === 'mainnet', - // }), - // h('span.network-name-item', { - // style: { - // color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', - // }, - // }, this.context.t('mainnet')), - // ] - // ), + h( + DropdownMenuItem, + { + key: 'mainnet', + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => props.setProviderType('mainnet'), + style: dropdownMenuItemStyle, + }, + [ + providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), + h(NetworkDropdownIcon, { + backgroundColor: '#954A97', // $silver-chalice + isSelected: providerType === 'mainnet', + }), + h('span.network-name-item', { + style: { + color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', + }, + }, this.context.t('mainnet')), + ] + ), h( DropdownMenuItem, @@ -255,7 +255,7 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) { }, [ currentRpcTarget ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), - h('i.fa.fa-question-circle.fa-med.menu-icon-circle'), + // h('i.fa.fa-question-circle.fa-med.menu-icon-circle'), h('span.network-name-item', { style: { color: currentRpcTarget ? '#ffffff' : '#9b9b9b', @@ -301,7 +301,7 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) { }, [ h('i.fa.fa-check'), - h('i.fa.fa-question-circle.fa-med.menu-icon-circle'), + // h('i.fa.fa-question-circle.fa-med.menu-icon-circle'), h('span.network-name-item', { style: { color: '#ffffff', diff --git a/ui/app/components/dropdowns/tests/network-dropdown.test.js b/ui/app/components/dropdowns/tests/network-dropdown.test.js index 51f02f2a..9693db05 100644 --- a/ui/app/components/dropdowns/tests/network-dropdown.test.js +++ b/ui/app/components/dropdowns/tests/network-dropdown.test.js @@ -66,7 +66,7 @@ describe('Network Dropdown', () => { }) it('checks background color for first NetworkDropdownIcon', () => { - assert.equal(wrapper.find(NetworkDropdownIcon).at(0).prop('backgroundColor'), '#29B6AF') // Main DEXON Network Teal + assert.equal(wrapper.find(NetworkDropdownIcon).at(0).prop('backgroundColor'), '#29B6AF') // DEXON Mainnet Teal }) it('checks background color for second NetworkDropdownIcon', () => { diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss index 983ce36f..f82125c6 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss +++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss @@ -4,25 +4,24 @@ align-items: flex-start; padding-left: 21px; height: 324px; - background: $black; - border-bottom: 1px solid $tundora; + background: $white; &__title { margin-top: 19px; font-size: 16px; - color: $white; + color: $black; } &__blurb { font-size: 12px; - color: $white; + color: $black; margin-top: 5px; margin-bottom: 15px; } &__footer-blurb { font-size: 12px; - color: $alto; + color: $black; margin-top: 15px; } } diff --git a/ui/app/components/gas-customization/gas-modal-page-container/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/index.scss index 4214caf0..f696438f 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/index.scss +++ b/ui/app/components/gas-customization/gas-modal-page-container/index.scss @@ -34,7 +34,7 @@ &__header-close-text { font-size: 14px; - color: $dexon-purple; + color: $black; position: absolute; top: 16px; right: 16px; @@ -43,9 +43,9 @@ } &__title { - color: $white; + color: $black; font-size: 16px; - font-weight: 500; + font-weight: 400; line-height: 16px; display: flex; justify-content: center; @@ -70,8 +70,8 @@ } &--selected { - color: $dexon-purple; - border-bottom: 2px solid $dexon-purple; + color: $black; + border-bottom: 2px solid $black; } } } diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.scss b/ui/app/components/gas-customization/gas-price-button-group/index.scss index d0138c53..c919ea0e 100644 --- a/ui/app/components/gas-customization/gas-price-button-group/index.scss +++ b/ui/app/components/gas-customization/gas-price-button-group/index.scss @@ -33,7 +33,7 @@ padding-top: 17px; border-radius: 4px; border: 2px solid $spindle; - background: $dark-gray; + background: $white; color: $scorpion; div { @@ -76,7 +76,7 @@ } &__label { - font-weight: 500; + font-weight: 400; } &__primary-currency { @@ -102,8 +102,8 @@ .button-group__button, .button-group__button--active { height: 78px; - background: $dark-gray; - color: $dim-gray; + background: transparent; + color: $black; padding-top: 9px; padding-left: 8.5px; @@ -127,12 +127,12 @@ .button-group__button--active { color: $white; - background: $geyser; + background: $black; i { &:last-child { display: flex; - color: $dexon-purple; + color: $black; margin-top: 10px; } } @@ -153,7 +153,7 @@ } &__label { - font-weight: 500; + font-weight: 400; font-size: 10px; text-transform: capitalize; } @@ -173,16 +173,16 @@ &__time-estimate { font-size: 14px; - font-weight: 500; + font-weight: 400; margin-top: 4px; - color: $white; + color: $black; } .button-group__button, .button-group__button--active { height: 78px; - background: $dark-gray; - color: $white; + background: $white; + color: $black; width: 108px; height: 97px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.151579); @@ -211,8 +211,8 @@ } .button-group__button--active { - background: $dark-gray; - border: 2px solid $dexon-purple; + background: $white; + border: 2px solid $black; .button-check-wrapper { height: 16px; @@ -230,7 +230,7 @@ i { display: flex; - color: $dexon-purple; + color: $black; font-size: 12px; } } diff --git a/ui/app/components/gas-customization/gas-price-chart/index.scss b/ui/app/components/gas-customization/gas-price-chart/index.scss index 55bca2c8..d9cba8b9 100644 --- a/ui/app/components/gas-customization/gas-price-chart/index.scss +++ b/ui/app/components/gas-customization/gas-price-chart/index.scss @@ -53,7 +53,7 @@ .custom-tooltip th { font-family: Overpass; font-style: normal; - font-weight: 500; + font-weight: 400; line-height: normal; font-size: 10px; text-align: center; diff --git a/ui/app/components/gas-customization/gas-slider/index.scss b/ui/app/components/gas-customization/gas-slider/index.scss index 79b428d7..f9bf92f9 100644 --- a/ui/app/components/gas-customization/gas-slider/index.scss +++ b/ui/app/components/gas-customization/gas-slider/index.scss @@ -16,7 +16,7 @@ -webkit-appearance: none !important; height: 34px; width: 34px; - background-color: $dexon-purple; + background-color: $black; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); border-radius: 50%; position: relative; diff --git a/ui/app/components/info-box/index.scss b/ui/app/components/info-box/index.scss index 87262355..02b03da6 100644 --- a/ui/app/components/info-box/index.scss +++ b/ui/app/components/info-box/index.scss @@ -10,7 +10,6 @@ &__close::after { content: '\00D7'; font-size: 29px; - font-weight: 200; color: $dusty-gray; position: absolute; right: 12px; diff --git a/ui/app/components/loading-screen/loading-screen.component.js b/ui/app/components/loading-screen/loading-screen.component.js index 45703479..7e24732b 100644 --- a/ui/app/components/loading-screen/loading-screen.component.js +++ b/ui/app/components/loading-screen/loading-screen.component.js @@ -14,7 +14,7 @@ class LoadingScreen extends Component { h('.loading-overlay', [ h('.loading-overlay__container', [ h(Spinner, { - color: '#954A97', + color: '#FFFFFF', }), this.renderMessage(), diff --git a/ui/app/components/menu-bar/index.scss b/ui/app/components/menu-bar/index.scss index 13cbbe69..e298f8c5 100644 --- a/ui/app/components/menu-bar/index.scss +++ b/ui/app/components/menu-bar/index.scss @@ -6,7 +6,6 @@ flex: 0 0 auto; margin-bottom: 16px; padding: 5px; - border-bottom: 1px solid $geyser; &__sidebar-button { font-size: 1.25rem; diff --git a/ui/app/components/modal/modal-content/index.scss b/ui/app/components/modal/modal-content/index.scss index 560505b8..f134cfc5 100644 --- a/ui/app/components/modal/modal-content/index.scss +++ b/ui/app/components/modal/modal-content/index.scss @@ -7,7 +7,7 @@ &__title { font-size: 1.5rem; - font-weight: 500; + font-weight: 400; padding: 16px 0; text-align: center; } diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss index c439a8b1..1345ad51 100644 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss @@ -8,7 +8,7 @@ &__eth { font-size: 1.5rem; - font-weight: 500; + font-weight: 400; } &__fiat { diff --git a/ui/app/components/modals/cancel-transaction/index.scss b/ui/app/components/modals/cancel-transaction/index.scss index 62e8e36f..1a8b179e 100644 --- a/ui/app/components/modals/cancel-transaction/index.scss +++ b/ui/app/components/modals/cancel-transaction/index.scss @@ -2,7 +2,7 @@ .cancel-transaction { &__title { - font-weight: 500; + font-weight: 400; padding-bottom: 16px; text-align: center; } diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index e8d2dca1..14ac1ca3 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -32,10 +32,8 @@ import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-contai const modalContainerBaseStyle = { transform: 'translate3d(-50%, 0, 0px)', - border: '1px solid #4a4a4a', - borderRadius: '8px', - backgroundColor: '#222222', - boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)', + backgroundColor: '#ffffff', + boxShadow: '4px 4px 10px 0 rgba(0, 0, 0, 0.2)', } const modalContainerLaptopStyle = { @@ -51,7 +49,7 @@ const modalContainerMobileStyle = { } const modalContentStyle = { - backgroundColor: '#222222', + backgroundColor: '#ffffff', } const accountModalStyle = { @@ -69,7 +67,7 @@ const accountModalStyle = { laptopModalStyle: { width: '360px', // top: 'calc(33% + 45px)', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + boxShadow: '4px 4px 10px 0 rgba(0, 0, 0, 0.2)', borderRadius: '4px', top: '10%', transform: 'none', @@ -104,7 +102,7 @@ const MODALS = { left: '0', right: '0', margin: '0 auto', - boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', + boxShadow: '4px 4px 10px 0 rgba(0, 0, 0, 0.2)', transform: 'none', }, }, @@ -131,7 +129,7 @@ const MODALS = { left: '0', right: '0', margin: '0 auto', - boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)', + boxShadow: '4px 4px 10px 0 rgba(0, 0, 0, 0.2)', borderRadius: '7px', transform: 'none', height: 'calc(80% - 20px)', @@ -161,7 +159,7 @@ const MODALS = { width: '375px', // top: 'calc(30% + 10px)', top: '10%', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + boxShadow: '4px 4px 10px 0 rgba(0, 0, 0, 0.2)', transform: 'none', left: '0', right: '0', diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/modals/qr-scanner/index.scss index c882d940..a251c8b0 100644 --- a/ui/app/components/modals/qr-scanner/index.scss +++ b/ui/app/components/modals/qr-scanner/index.scss @@ -1,14 +1,12 @@ .qr-scanner { width: 100%; height: 100%; - background-color: $dark-gray; display: flex; flex-flow: column; - border-radius: 8px; &__title { font-size: 1.5rem; - font-weight: 500; + font-weight: 400; padding: 16px 0; text-align: center; } @@ -41,7 +39,7 @@ &__image { font-size: 1.5rem; - font-weight: 500; + font-weight: 400; padding: 16px 0 0; text-align: center; } @@ -77,6 +75,6 @@ top: 4px; right: 20px; cursor: pointer; - font-weight: 300; + font-weight: 400; } } diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/modals/transaction-confirmed/index.scss index c97371fb..86517048 100644 --- a/ui/app/components/modals/transaction-confirmed/index.scss +++ b/ui/app/components/modals/transaction-confirmed/index.scss @@ -1,7 +1,7 @@ .transaction-confirmed { &__title { font-size: 1.5rem; - font-weight: 500; + font-weight: 400; padding: 16px 0; text-align: center; } diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 2c73496a..b255cf71 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -4,7 +4,7 @@ const h = require('react-hyperscript') const connect = require('react-redux').connect const classnames = require('classnames') const inherits = require('util').inherits -const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') +// const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') Network.contextTypes = { t: PropTypes.func, @@ -78,19 +78,19 @@ Network.prototype.render = function () { switch (iconName) { case 'dexon-network': return h('.network-indicator', [ - h(NetworkDropdownIcon, { - backgroundColor: '#954A97', // $blue-lagoon - nonSelectBackgroundColor: '#954A97', - }), + // h(NetworkDropdownIcon, { + // backgroundColor: '#954A97', // $blue-lagoon + // nonSelectBackgroundColor: '#954A97', + // }), h('.network-name', context.t('mainnet')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'dexon-test-network': return h('.network-indicator', [ - h(NetworkDropdownIcon, { - backgroundColor: '#aeaeae', // $crimson - nonSelectBackgroundColor: '#aeaeae', - }), + // h(NetworkDropdownIcon, { + // backgroundColor: '#aeaeae', // $crimson + // nonSelectBackgroundColor: '#aeaeae', + // }), h('.network-name', context.t('testnet')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss index fea962be..6236e8da 100644 --- a/ui/app/components/page-container/index.scss +++ b/ui/app/components/page-container/index.scss @@ -1,15 +1,16 @@ .page-container { width: 408px; - background-color: $dark-gray; + background-color: $white; z-index: 25; display: flex; flex-flow: column; - border-radius: 8px; + border-radius: 0; &__header { display: flex; flex-flow: column; - border-bottom: 1px solid $geyser; + + // border-bottom: 1px solid $geyser; padding: 24px; flex: 0 0 auto; position: relative; @@ -40,11 +41,18 @@ justify-content: space-between; } + &__bottom { + flex: 1; + display: flex; + flex-direction: column; + } + &__footer { display: flex; flex-flow: column; justify-content: center; - border-top: 1px solid $geyser; + + // border-top: 1px solid $geyser; flex: 0 0 auto; .btn-default, @@ -69,11 +77,10 @@ a, a:hover { - text-decoration: none; cursor: pointer; font-size: 0.75rem; text-transform: uppercase; - color: $dexon-purple; + color: $dark-gray; } } } @@ -90,14 +97,14 @@ } &__back-button { - color: $dexon-purple; + color: $black; font-size: 1rem; cursor: pointer; font-weight: 400; } &__title { - color: $dexon-purple; + color: $black; font-size: 1.5rem; font-weight: 800; line-height: 1.5rem; @@ -107,7 +114,7 @@ padding-top: .5rem; line-height: initial; font-size: .9rem; - color: $gallery; + color: $black; } &__tabs { @@ -118,7 +125,7 @@ &__tab { min-width: 5rem; padding: 8px; - color: $dusty-gray; + color: $dark-gray; font-family: Overpass; font-size: 1rem; text-align: center; @@ -131,8 +138,8 @@ } &--selected { - color: $dexon-purple; - border-bottom: 2px solid $dexon-purple; + color: $black; + border-bottom: 2px solid $black; } } @@ -163,7 +170,7 @@ } &__warning-title { - font-weight: 500; + font-weight: 400; } &__warning-icon { @@ -193,8 +200,7 @@ .page-container { height: 100%; width: 100%; - background-color: $dark-gray; - border-radius: 0; + background-color: $white; flex: 1; overflow-y: auto; } @@ -207,6 +213,6 @@ flex: 0 0 auto; margin-right: auto; margin-left: auto; - border: 2px solid $geyser; + box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2); } } diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js index 389804d3..dcd60a3c 100644 --- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -178,9 +178,9 @@ export default class ConfirmTransactionBase extends Component { <ConfirmDetailRow label="Gas Fee" value={hexTransactionFee} - headerText="Edit" - headerTextClassName="confirm-detail-row__header-text--edit" - onHeaderClick={() => this.handleEditGas()} + headerText="Gas Fee" + headerTextClassName="confirm-detail-row__header-text--total" + // onHeaderClick={() => this.handleEditGas()} /> </div> <div> @@ -191,8 +191,8 @@ export default class ConfirmTransactionBase extends Component { secondaryText={secondaryTotalTextOverride} headerText="Amount + Gas Fee" headerTextClassName="confirm-detail-row__header-text--total" - primaryValueTextColor="#954A97" - fiatTextColor="#954A97" + primaryValueTextColor="#000000" + fiatTextColor="#000000" /> </div> </div> diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js index 05bd3110..6ce926db 100644 --- a/ui/app/components/pages/create-account/import-account/json.js +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -36,10 +36,11 @@ class JsonImportSubview extends Component { readAs: 'text', onLoad: this.onLoad.bind(this), style: { - margin: '20px 0px 12px 34%', + margin: '20px 0px 12px 0px', fontSize: '15px', display: 'flex', justifyContent: 'center', + width: '90%', }, }), diff --git a/ui/app/components/pages/settings/index.scss b/ui/app/components/pages/settings/index.scss index 6aef31fb..fdbb4c51 100644 --- a/ui/app/components/pages/settings/index.scss +++ b/ui/app/components/pages/settings/index.scss @@ -4,7 +4,7 @@ .settings-page { position: relative; - background: $dark-gray; + background: $white; display: flex; flex-flow: column nowrap; diff --git a/ui/app/components/pages/settings/info-tab/info-tab.component.js b/ui/app/components/pages/settings/info-tab/info-tab.component.js index 6e9b6650..e1c902bf 100644 --- a/ui/app/components/pages/settings/info-tab/info-tab.component.js +++ b/ui/app/components/pages/settings/info-tab/info-tab.component.js @@ -110,7 +110,7 @@ export default class InfoTab extends PureComponent { <div className="settings-page__content-item settings-page__content-item--without-height"> <div className="info-tab__logo-wrapper"> <img - src="/images/dekusan.svg" + src="/images/dexon-wallet-black.svg" width={160} height={160} /> @@ -125,7 +125,7 @@ export default class InfoTab extends PureComponent { </div> <div className="info-tab__item"> <div className="info-tab__about"> - {t('aboutDekuSan') } + {t('aboutDexonWallet') } </div> </div> </div> diff --git a/ui/app/components/pages/settings/settings-tab/index.scss b/ui/app/components/pages/settings/settings-tab/index.scss index 41ee8d19..f5ce3218 100644 --- a/ui/app/components/pages/settings/settings-tab/index.scss +++ b/ui/app/components/pages/settings/settings-tab/index.scss @@ -6,7 +6,9 @@ } &__advanced-link { - color: $dexon-purple; + color: $black; + cursor: pointer; + text-decoration: underline; padding-left: 5px; } diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss index 9ca3fd12..d14fed36 100644 --- a/ui/app/components/pages/unlock-page/index.scss +++ b/ui/app/components/pages/unlock-page/index.scss @@ -9,7 +9,7 @@ color: $silver-chalice; &__container { - background: $dark-gray; + background: $white; display: flex; align-self: stretch; justify-content: center; @@ -17,7 +17,7 @@ } &__mascot-container { - margin-top: 24px; + margin-top: 48px; } &__title { @@ -25,16 +25,16 @@ font-size: 2.5rem; font-weight: 800; font-stretch: condensed; - color: $white; + color: $black; } &__form { width: 100%; - margin: 56px 0 8px; + margin: 80px 0 16px; } &__links { - margin-top: 25px; + margin-top: 50px; width: 100%; } @@ -42,7 +42,8 @@ cursor: pointer; &--import { - color: $ecstasy; + color: $black; + text-decoration: underline; } &--use-classic { diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js index 4ac5d566..a91ae6a2 100644 --- a/ui/app/components/pages/unlock-page/unlock-page.component.js +++ b/ui/app/components/pages/unlock-page/unlock-page.component.js @@ -103,14 +103,14 @@ export default class UnlockPage extends Component { <div className="unlock-page"> <div className="unlock-page__mascot-container"> <img - src="/images/dekusan.svg" - width={160} - height={160} + src="/images/dexon-wallet-name.svg" + width={240} + height={54} /> </div> - <h1 className="unlock-page__title"> + {/* <h1 className="unlock-page__title"> {t('appName') } - </h1> + </h1> */} <form className="unlock-page__form" onSubmit={event => this.handleSubmit(event)} @@ -124,8 +124,8 @@ export default class UnlockPage extends Component { error={error} autoFocus autoComplete="current-password" - material fullWidth + largeLabel /> </form> { this.renderSubmitButton() } diff --git a/ui/app/components/provider-page-container/index.scss b/ui/app/components/provider-page-container/index.scss index 24b86a1b..1360cfbd 100644 --- a/ui/app/components/provider-page-container/index.scss +++ b/ui/app/components/provider-page-container/index.scss @@ -44,7 +44,8 @@ } a, a:hover { - color: $dexon-purple; + color: $dark-gray; + text-decoration: underline; } .provider-approval-visual { diff --git a/ui/app/components/selected-account/index.scss b/ui/app/components/selected-account/index.scss index a0b8497a..21a159fe 100644 --- a/ui/app/components/selected-account/index.scss +++ b/ui/app/components/selected-account/index.scss @@ -15,7 +15,7 @@ &__address { font-size: .75rem; - color: $silver-chalice; + color: black; } &__clickable { @@ -28,11 +28,11 @@ cursor: pointer; &:hover { - background-color: $geyser; + background-color: #f0f0f0; } &:active { - background-color: $geyser; + background-color: #f0f0f0; } } } diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js index ef342427..110d169a 100644 --- a/ui/app/components/text-field/text-field.component.js +++ b/ui/app/components/text-field/text-field.component.js @@ -7,30 +7,35 @@ const inputLabelBase = { transform: 'none', transition: 'none', position: 'initial', - color: '#9b9b9b', + color: '#000', + fontFamily: 'Overpass', } const styles = { + typography: { + fontFamily: 'Overpass', + }, materialLabel: { '&$materialFocused': { - color: '#aeaeae', + color: '#000', }, '&$materialError': { - color: '#aeaeae', + color: '#000', }, fontWeight: '400', - color: '#aeaeae', + fontFamily: 'Overpass', + color: '#000', }, materialFocused: {}, materialUnderline: { '&:before': { - borderBottom: '2px solid #aeaeae', + borderBottom: '2px solid #000', }, '&:hover:before': { - borderBottom: '2px solid #954a97cc!important', + borderBottom: '2px solid #000000cc!important', }, '&:after': { - borderBottom: '2px solid #954a97', + borderBottom: '2px solid #000', }, }, materialError: {}, @@ -40,11 +45,12 @@ const styles = { // Non-material styles formLabel: { '&$formLabelFocused': { - color: '#9b9b9b', + color: '#000', }, '&$materialError': { - color: '#9b9b9b', + color: '#000', }, + fontFamily: 'Overpass', }, formLabelFocused: {}, inputFocused: {}, @@ -52,18 +58,21 @@ const styles = { 'label + &': { marginTop: '8px', }, - border: '1px solid #4a4a4a', + border: 'none', height: '48px', + fontFamily: 'Overpass', + background: '#f0f0f0', borderRadius: '4px', padding: '0 16px', display: 'flex', alignItems: 'center', '&$inputFocused': { - border: '1px solid #4a4a4a', + border: 'none', }, }, input: { - color: 'white', + color: 'black', + fontFamily: 'Overpass', }, largeInputLabel: { ...inputLabelBase, diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss index 60dda998..abb6402b 100644 --- a/ui/app/components/transaction-activity-log/index.scss +++ b/ui/app/components/transaction-activity-log/index.scss @@ -1,6 +1,6 @@ .transaction-activity-log { &__card { - background: $black; + background: $white; height: 100%; } @@ -53,18 +53,18 @@ } &__activity-text { - color: $dim-gray; + color: $black; font-size: .75rem; cursor: pointer; &:hover { - color: $white; + color: #4a4a4a; } } &__value { display: inline; - font-weight: 500; + font-weight: 400; } &__entry-container { @@ -74,10 +74,11 @@ &__action-link { font-size: .75rem; cursor: pointer; - color: $dexon-purple; + color: $black; + text-decoration: underline; } b { - font-weight: 500; + font-weight: 400; } } diff --git a/ui/app/components/transaction-breakdown/index.scss b/ui/app/components/transaction-breakdown/index.scss index 8aa2cb2c..6e0b0d1c 100644 --- a/ui/app/components/transaction-breakdown/index.scss +++ b/ui/app/components/transaction-breakdown/index.scss @@ -17,7 +17,7 @@ text-overflow: ellipsis; &--eth-total { - font-weight: 500; + font-weight: 400; } } } diff --git a/ui/app/components/transaction-list-item-details/index.scss b/ui/app/components/transaction-list-item-details/index.scss index 7fc1a488..64b781ff 100644 --- a/ui/app/components/transaction-list-item-details/index.scss +++ b/ui/app/components/transaction-list-item-details/index.scss @@ -7,7 +7,7 @@ } &__body { - background: $black; + background: #fafafa; padding: 8px 16px; } diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss index 1eed0843..0cfc6866 100644 --- a/ui/app/components/transaction-list-item/index.scss +++ b/ui/app/components/transaction-list-item/index.scss @@ -1,12 +1,12 @@ .transaction-list-item { box-sizing: border-box; min-height: 74px; - border-bottom: 1px solid $geyser; + border-bottom: 1px solid #fafafa; display: flex; justify-content: center; align-items: center; flex-direction: column; - background: $black; + background: #fafafa; &__grid { cursor: pointer; @@ -114,7 +114,7 @@ &__details-container { padding: 8px 16px 16px; - background: $dark-gray; + background: $white; width: 100%; } diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss index 846f68ab..44a49e4c 100644 --- a/ui/app/components/transaction-list/index.scss +++ b/ui/app/components/transaction-list/index.scss @@ -4,7 +4,6 @@ flex: 1; overflow-y: hidden; margin-top: 8px; - border-top: 1px solid $geyser; &__completed-transactions { display: flex; @@ -14,15 +13,10 @@ &__header { flex: 0 0 auto; - font-size: .875rem; + font-weight: 600; text-align: center; - color: $white; - border-bottom: 1px solid $geyser; - padding: 8px 0 8px 20px; - - @media screen and (max-width: $break-small) { - padding: 8px 0 8px 16px; - } + color: $black; + padding: 8px 0; } &__transactions { @@ -45,6 +39,6 @@ grid-row-start: 2; display: flex; justify-content: center; - color: $geyser; + color: $black; } } diff --git a/ui/app/components/transaction-view/index.scss b/ui/app/components/transaction-view/index.scss index 80b2e206..a1331368 100644 --- a/ui/app/components/transaction-view/index.scss +++ b/ui/app/components/transaction-view/index.scss @@ -1,6 +1,6 @@ .transaction-view { flex: 1 1 66.5%; - background: $dark-gray; + background: $white; min-width: 0; display: flex; flex-direction: column; diff --git a/ui/app/components/unit-input/index.scss b/ui/app/components/unit-input/index.scss index c9c0f31d..c99199b6 100644 --- a/ui/app/components/unit-input/index.scss +++ b/ui/app/components/unit-input/index.scss @@ -1,9 +1,8 @@ .unit-input { min-height: 54px; - border: 1px solid $tundora; border-radius: 4px; - background-color: $dark-gray; - color: $dim-gray; + background-color: #f0f0f0; + color: $black; font-size: 1rem; padding: 8px 10px; position: relative; @@ -25,7 +24,7 @@ } &__input { - color: $white; + color: $black; font-size: 1rem; font-family: Overpass; border: none; diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index b14753e2..506b706a 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -143,6 +143,12 @@ &__balance { color: $dusty-gray; font-size: 14px; + + .currency-display-component { + &__text { + color: $dusty-gray; + } + } } &__action { diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index efd58d0b..851bceac 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -9,14 +9,12 @@ justify-content: center; align-items: center; box-sizing: border-box; - border-radius: 4px; font-size: 14px; font-weight: 400; transition: border-color .3s ease; padding: 0 16px; min-width: 140px; width: 100%; - text-transform: uppercase; outline: none; font-family: Overpass; @@ -30,8 +28,8 @@ .btn-primary { color: $white; - background: $dexon-purple; - border: 2px solid $dexon-purple; + background: $black; + border: 2px solid $black; &:hover { border-color: $white-transparent; @@ -58,8 +56,8 @@ .btn-default { color: $white; - border: 2px solid $dusty-gray; - background: $dusty-gray; + border: 2px solid #4a4a4a; + background: #4a4a4a; &:hover { border-color: $white-transparent; @@ -72,13 +70,13 @@ .btn-confirm { color: $white; - border: 2px solid $dexon-purple; - background-color: $dexon-purple; + border: 2px solid $black; + background-color: $black; } .btn-raised { color: $white; - background-color: $dexon-purple; + background-color: $black; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); padding: 6px; height: initial; @@ -98,16 +96,15 @@ .btn-clear { background: $white; text-align: center; + text-decoration: underline; padding: .8rem 1rem; - color: $dexon-purple; - border: 2px solid $dexon-purple; - border-radius: 4px; + color: $black; font-size: .85rem; font-weight: 400; transition: border-color .3s ease; &:hover { - border-color: $white; + color: #4d4d4d; } &--disabled, @@ -122,16 +119,14 @@ background: $white; text-align: center; padding: .9rem 1rem; - color: $scorpion; - border: 2px solid $dusty-gray; - border-radius: 4px; + color: $black; font-size: .85rem; font-weight: 400; transition: border-color .3s ease; width: 100%; &:hover { - border-color: $scorpion; + border-color: #4d4d4d; } } @@ -172,7 +167,6 @@ button.primary { color: $white; font-size: 1.1em; font-family: Overpass; - text-transform: uppercase; } .btn-light { @@ -181,7 +175,6 @@ button.primary { color: #585d67; // TODO: make reusable light button color font-size: 1.1em; font-family: Overpass; - text-transform: uppercase; text-align: center; line-height: 20px; border-radius: 2px; diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 19a01b40..738a09d9 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -266,7 +266,7 @@ section .confirm-screen-account-number, } .confirm-screen-row-info { font-size: 16px; - font-weight: 500; + font-weight: 400; line-height: 21px; } } diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index cab74597..ec9a9c2d 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -171,7 +171,7 @@ width: 33%; height: 45px; margin: 15px; - font-weight: 700; + font-weight: 800; margin-top: 25px; } @@ -192,8 +192,6 @@ align-items: center; position: relative; padding: 5px 0 31px 0; - border: 1px solid $geyser; - border-radius: 4px; font-family: Overpass; button { @@ -219,7 +217,7 @@ .account-modal-close::after { content: '\00D7'; font-size: 40px; - color: $white; + color: $black; position: absolute; top: 10px; right: 12px; @@ -250,8 +248,8 @@ .ellip-address-wrapper { display: flex; justify-content: center; - border: 1px solid $geyser; border-radius: 2px; + background-color: #f0f0f0; padding: 5px 10px; font-family: Overpass; margin-top: 7px; @@ -269,7 +267,6 @@ width: 100%; height: 1px; margin: 19px 0 8px 0; - background-color: $geyser; } // Export Private Key Modal @@ -324,7 +321,7 @@ border-radius: 8px; background-color: #FFF6F6; font-size: 12px; - font-weight: 500; + font-weight: 400; line-height: 15px; color: $crimson; width: 292px; @@ -471,7 +468,7 @@ .new-account-modal-wrapper .btn-clear { font-size: 14px; - font-weight: 700; + font-weight: 800; background: $white; border: 1px solid; border-radius: 2px; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index aecb4903..1f31d6e7 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -8,11 +8,10 @@ } .network-component.pointer { - border: 1px solid $dexon-purple; - border-radius: 4px; padding: 7px 3px; flex: 0 0 auto; display: flex; + user-select: none; &.dexon-network .menu-icon-circle div { background-color: rgba(149, 74, 151, 0.7) !important; @@ -49,10 +48,11 @@ .network-name { padding: 0 4px; font-family: Overpass; - font-size: 12px; + font-size: 14px; flex: 1 0 auto; - color: $dexon-purple; - font-weight: 500; + color: $white; + text-decoration: underline; + font-weight: 400; } .dropdown-menu-item .fa.delete { @@ -162,5 +162,5 @@ .network-caret { margin: 0 8px 2px; - color: $dexon-purple; + color: $white; } diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index a815ce23..2408c371 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -1,22 +1,21 @@ .new-account { width: 375px; - background-color: $dark-gray; - border: 2px solid $geyser; - border-radius: 4px; + background-color: $white; z-index: 25; overflow-y: auto; + box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2); &__header { display: flex; flex-flow: column; - border-bottom: 1px solid $geyser; + border-bottom: 1px solid #f0f0f0; } &__title { - color: $white; + color: $black; font-family: Overpass; font-size: 32px; - font-weight: 500; + font-weight: 400; line-height: 43px; margin-top: 22px; margin-left: 29px; @@ -39,13 +38,13 @@ } &__tab:hover { - color: $dexon-purple; - border-bottom: none; + color: $black; + border-bottom: 3px solid black; } &__selected { - color: $dexon-purple; - border-bottom: 3px solid $dexon-purple; + color: $black; + border-bottom: 3px solid $black; cursor: initial; } } @@ -53,7 +52,7 @@ .new-account-import-disclaimer { margin: 0 -30px; - background-color: $muddy-gray; + background-color: $alto; display: inline-block; align-items: center; padding: 20px 30px 20px; @@ -84,17 +83,16 @@ &__select { width: 210px; - border: 1px solid $geyser; border-radius: 4px; - background-color: $dark-gray; + background-color: #f0f0f0; display: flex; align-items: center; .Select-control { - background-color: $dark-gray !important; + background-color: #f0f0f0 !important; .Select-value-label { - color: $white !important; + color: $black !important; } } @@ -103,18 +101,18 @@ } .Select-menu { - background-color: $dark-gray !important; + background-color: #f0f0f0 !important; .Select-option.is-selected { - color: $white !important; + color: $black !important; } .Select-option { - color: $dim-gray !important; - background-color: $dark-gray !important; + color: $black !important; + background-color: #f0f0f0 !important; &:hover { - background-color: $muddy-gray !important; + background-color: $alto !important; } } } @@ -157,11 +155,10 @@ &__input-password { height: 54px; width: 315px; - border: 1px solid $geyser; border-radius: 4px; - background-color: $dark-gray; + background-color: #f0f0f0; margin-top: 16px; - color: $white; + color: $black; font-family: Overpass; font-size: 16px; padding: 0px 20px; @@ -203,7 +200,7 @@ &__msg { font-size: 14px; - color: #9b9b9b; + color: #000; margin-top: 10px; margin-bottom: 20px; } @@ -216,7 +213,7 @@ } &__connect-btn { - background-color: #954A97; + background-color: #000000; color: #fff; border: none; width: 315px; @@ -245,7 +242,7 @@ } &__btn.selected { - border: 2px solid #954A97; + border: 2px solid #000000; width: 149px; } @@ -280,7 +277,7 @@ &__learn-more { margin-top: 15px; font-size: 14px; - color: #5B5D67; + color: black; line-height: 19px; text-align: center; cursor: pointer; @@ -309,13 +306,13 @@ &__msg { font-size: 14px; - color: #9b9b9b; + color: #000; margin-top: 10px; margin-bottom: 15px; } &__link { - color: $dexon-purple; + color: $black; } &__footer { @@ -331,7 +328,7 @@ &__msg { font-size: 14px; - color: #9b9b9b; + color: #000; margin-top: 12px; margin-bottom: 27px; width: 100%; @@ -351,7 +348,7 @@ &__msg { font-size: 14px; - color: #9b9b9b; + color: #000; } &__link { @@ -517,12 +514,12 @@ } .btn-primary { - background-color: #954A97; + background-color: black; color: #FFFFFF; border: none; width: 100%; min-height: 54px; - font-weight: 300; + font-weight: 400; font-size: 14px; margin-bottom: 20px; } @@ -557,7 +554,7 @@ padding: 30px 20px; &__input-label { - color: $dim-gray; + color: $black; font-family: Overpass; font-size: 16px; line-height: 21px; @@ -567,10 +564,9 @@ &__input { height: 54px; width: 315.84px; - border: 1px solid $geyser; border-radius: 4px; - background-color: $dark-gray; - color: $white; + background-color: #f0f0f0; + color: $black; font-family: Overpass; font-size: 16px; line-height: 21px; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 8ff53723..0e3838e1 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -5,9 +5,6 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma NewUI Container Elements */ -// Component Colors -$wallet-view-bg: $muddy-gray; - // Main container .main-container { // position: absolute; @@ -41,7 +38,7 @@ $wallet-view-bg: $muddy-gray; flex-direction: column; flex: 32 1 32%; width: 0; - background: $wallet-view-bg; + background: #f0f0f0; z-index: 200; position: relative; @@ -92,8 +89,8 @@ $wallet-view-bg: $muddy-gray; &__address { border-radius: 3px; - background-color: $dark-gray; - color: $dim-gray; + background-color: #d8d8d8; + color: $tundora; font-size: 14px; line-height: 12px; padding: 4px 12px; @@ -152,7 +149,7 @@ $wallet-view-bg: $muddy-gray; .wallet-view.sidebar-right { flex: 1 0 230px; - background: $muddy-gray; + background: #f0f0f0; z-index: $sidebar-z-index; position: fixed; top: 66px; @@ -182,8 +179,7 @@ $wallet-view-bg: $muddy-gray; // margin-top: 6.9vh; width: 85vw; height: 90vh; - border: 2px solid $geyser; - border-radius: 4px; + box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2); } } @@ -217,7 +213,7 @@ $wallet-view-bg: $muddy-gray; height: 100%; width: 100%; overflow-y: auto; - background-color: $dark-gray; + background-color: $white; } .main-container-wrapper { @@ -228,7 +224,7 @@ $wallet-view-bg: $muddy-gray; // wallet view .account-name { font-size: 24px; - color: $white; + color: $black; margin-top: 8px; margin-bottom: .9rem; white-space: nowrap; @@ -284,7 +280,7 @@ $wallet-view-bg: $muddy-gray; justify-content: center; align-items: center; flex: 1 0 auto; - background: $dark-gray; + background: $white; width: 100%; } @@ -301,7 +297,7 @@ $wallet-view-bg: $muddy-gray; width: 100%; height: 100%; justify-content: center; - background: $dark-gray; + background: $white; } // tooltip style diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 34118967..65e3ef8a 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -134,7 +134,7 @@ textarea.twelve-word-phrase { /* identity panel */ .identity-panel { - font-weight: 500; + font-weight: 400; } .identity-panel .identicon-wrapper { @@ -172,9 +172,6 @@ textarea.twelve-word-phrase { /* accounts screen */ -.identity-section { -} - .identity-section .identity-panel { background: #e9e9e9; border-bottom: 1px solid #b1b1b1; @@ -208,9 +205,6 @@ textarea.twelve-word-phrase { flex-grow: 10; } -.name-label { -} - .unapproved-tx-icon { height: 16px; width: 16px; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 1ba8c7ab..e0ff03c2 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -187,7 +187,7 @@ font-size: 16px; border-radius: 4px; font-family: "Lato"; - font-weight: 500; + font-weight: 400; } .gas-tooltip-arrow { @@ -402,7 +402,7 @@ // height: 701px; width: 380px; border-radius: 8px; - background-color: $dark-gray; + background-color: $white; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); display: flex; flex-flow: column nowrap; @@ -439,7 +439,7 @@ } &__send-arrow-icon { - color: #954A97; + color: #000; transform: rotate(-45deg); position: absolute; top: -2px; @@ -495,7 +495,7 @@ } &__title { - color: $scorpion; + color: $black; font-size: 22px; line-height: 29px; text-align: center; @@ -503,7 +503,7 @@ } &__copy { - color: $gray; + color: $black; font-size: 14px; line-height: 19px; text-align: center; @@ -550,9 +550,11 @@ &__form-field { flex: 1 1 auto; + background-color: #f0f0f0; + border-radius: 4px; .currency-display { - color: $dim-gray; + color: $black; &__currency-symbol { color: $dim-gray; @@ -572,7 +574,7 @@ } &__form-label { - color: $white; + color: $black; font-family: Overpass; font-size: 16px; line-height: 22px; @@ -584,13 +586,11 @@ &__from-dropdown { height: 73px; width: 100%; - border: 1px solid $geyser; border-radius: 4px; - background-color: $dark-gray; font-family: Overpass; line-height: 16px; font-size: 12px; - color: $white; + color: $black; position: relative; &__close-area { @@ -607,9 +607,9 @@ position: absolute; height: 220px; width: 100%; - border: 1px solid $geyser; border-radius: 4px; - background-color: $dark-gray; + border: 1px solid black; + background-color: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); margin-top: 11px; margin-left: -1px; @@ -638,7 +638,7 @@ } &__qr-code:hover { - background: $geyser; + background: #9b9b9b; } &__input.with-qr { @@ -654,10 +654,8 @@ position: relative; height: 54px; width: 100%; - border: 1px solid $geyser; border-radius: 4px; - background-color: $dark-gray; - color: $white; + color: $black; padding: 10px; font-family: Overpass; font-size: 16px; @@ -666,7 +664,8 @@ } &__amount-max { - color: $dexon-purple; + color: $black; + text-decoration: underline; font-family: Overpass; font-size: 12px; left: 8px; @@ -683,7 +682,6 @@ display: flex; align-items: center; } - } &__sliders-icon-container { @@ -924,7 +922,6 @@ display: none; } } - } .advanced-gas-options-btn { diff --git a/ui/app/css/itcss/components/simple-dropdown.scss b/ui/app/css/itcss/components/simple-dropdown.scss index 210071d3..2d86acb4 100644 --- a/ui/app/css/itcss/components/simple-dropdown.scss +++ b/ui/app/css/itcss/components/simple-dropdown.scss @@ -3,11 +3,10 @@ display: flex; justify-content: flex-start; align-items: center; - border: 1px solid $geyser; border-radius: 4px; - background-color: $dark-gray; + background-color: #f0f0f0; font-size: 16px; - color: $dim-gray; + color: $black; cursor: pointer; position: relative; } @@ -29,7 +28,7 @@ width: 100%; border: 1px solid $geyser; border-radius: 4px; - background-color: $dark-gray; + background-color: $white; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); margin-top: 10px; diff --git a/ui/app/css/itcss/components/tab-bar.scss b/ui/app/css/itcss/components/tab-bar.scss index e55e404c..f8d3c4d7 100644 --- a/ui/app/css/itcss/components/tab-bar.scss +++ b/ui/app/css/itcss/components/tab-bar.scss @@ -9,13 +9,13 @@ min-width: 0; flex: 0 0 auto; padding: 15px 25px; - border-bottom: 1px solid $geyser; + border-bottom: 1px solid #f0f0f0; box-sizing: border-box; font-size: 18px; } .tab-bar__tab--active { - border-color: $white; + border-color: $black; } .tab-bar__grow-tab { diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index 54dcf5eb..2d21b29d 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -48,13 +48,12 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } &--active { - background-color: $geyser; - color: $white; + background-color: $white; + color: $black; } &__identicon { margin-right: 15px; - border: '1px solid #dedede'; min-width: 50px; @media #{$wallet-balance-breakpoint-range} { diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 5e7de8c4..51bc4fd7 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -1,13 +1,14 @@ -$wallet-balance-bg: #4a4a4a; +$wallet-balance-bg: #f0f0f0; $wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; + .wallet-balance-wrapper { flex: 0 0 auto; transition: linear 200ms; - background: rgba($wallet-balance-bg, 0); + color: $black; + &--active { - background: $geyser; - color: $white; + background: $white; } } @@ -20,6 +21,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( flex: 0 0 auto; cursor: pointer; border-top: 1px solid $wallet-balance-bg; + .balance-container { display: flex; justify-content: flex-start; @@ -27,26 +29,33 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( 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: 1.5rem; } + .fiat-amount { margin-top: .25%; font-size: 105%; } + @media #{$wallet-balance-breakpoint-range} { margin-left: 4%; + .token-amount { font-size: 105%; } + .fiat-amount { font-size: 95%; } @@ -55,10 +64,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } .balance-icon { - border-radius: 25px; width: 50px; height: 50px; - border: 1px solid $alto; padding: 5px; background: $white; -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index 5504e298..86b1a217 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -6,12 +6,13 @@ font-family: Overpass; font-weight: 400; width: 100%; + margin-bottom: -60px; flex: 1 0 auto; padding: 70px 0; - background: $dark-gray; + background: $white; @media screen and (max-width: 575px) { - padding: 0; + padding: 16px; } &__info { @@ -24,7 +25,8 @@ &__header { font-size: 1.65em; - margin-bottom: 14px; + font-weight: 800; + margin-bottom: 4px; @media screen and (max-width: 575px) { font-size: 1.5em; @@ -49,16 +51,14 @@ &__button { height: 54px; - width: 198px; - border-radius: 4px; - color: #fff; - font-size: 20px; - font-weight: 500; - line-height: 26px; + width: 100%; + color: $white; + font-size: 18px; + font-weight: 400; + line-height: 20px; text-align: center; - text-transform: uppercase; margin: 35px 0 14px; transition: 200ms ease-in-out; - background-color: rgba(149,74,151, .9); + background-color: $black; } } diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 9a040191..588e46e0 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -11,9 +11,9 @@ html, body { font-family: Overpass, Arial; - color: $white; + color: $black; font-weight: 400; - background: $dark-gray; + background: $white; width: 100%; height: 100%; margin: 0; @@ -51,24 +51,29 @@ textarea:focus { flex-direction: column; @media screen and (max-width: $break-small) { - background-color: $dark-gray; + background-color: $white; } } +input, textarea, select, button { + font-family: Overpass; +} + /* stylelint-enable */ a { - text-decoration: none; color: inherit; } a:hover { - color: #954A97; + color: #222222; } input { - color: $white; - background-color: $dark-gray; + color: $black; + background-color: #f0f0f0; + border: none; + border-radius: 4px; } input.large-input, diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss index b1930433..c90d351f 100644 --- a/ui/app/css/itcss/settings/typography.scss +++ b/ui/app/css/itcss/settings/typography.scss @@ -59,7 +59,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 300; + font-weight: 400; src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @@ -67,7 +67,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 300; + font-weight: 400; src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @@ -75,7 +75,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 300; + font-weight: 400; src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype'); unicode-range: U+1F00-1FFF; } @@ -83,7 +83,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 300; + font-weight: 400; src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype'); unicode-range: U+0370-03FF; } @@ -91,7 +91,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 300; + font-weight: 400; src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } @@ -99,7 +99,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 300; + font-weight: 400; src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @@ -107,7 +107,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 300; + font-weight: 400; src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @@ -171,7 +171,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 500; + font-weight: 400; src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @@ -179,7 +179,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 500; + font-weight: 400; src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @@ -187,7 +187,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 500; + font-weight: 400; src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype'); unicode-range: U+1F00-1FFF; } @@ -195,7 +195,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 500; + font-weight: 400; src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype'); unicode-range: U+0370-03FF; } @@ -203,7 +203,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 500; + font-weight: 400; src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } @@ -211,7 +211,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 500; + font-weight: 400; src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @@ -219,7 +219,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 500; + font-weight: 400; src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @@ -227,7 +227,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 700; + font-weight: 800; src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @@ -235,7 +235,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 700; + font-weight: 800; src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @@ -243,7 +243,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 700; + font-weight: 800; src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype'); unicode-range: U+1F00-1FFF; } @@ -251,7 +251,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 700; + font-weight: 800; src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype'); unicode-range: U+0370-03FF; } @@ -259,7 +259,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 700; + font-weight: 800; src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } @@ -267,7 +267,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 700; + font-weight: 800; src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @@ -275,7 +275,7 @@ @font-face { font-family: 'Overpass'; font-style: normal; - font-weight: 700; + font-weight: 800; src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index b46d7fc2..fd98c4ae 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -52,7 +52,7 @@ $cornflower-blue: #7057ff; $saffron: #f6c343; $dodger-blue: #3099f2; $zumthor: #edf7ff; -$ecstasy: #954a97; +$ecstasy: #000000; $linen: #fdf4f4; $oslo-gray: #8C8E94; $polar: #fafcfe; @@ -61,7 +61,7 @@ $mischka: #dddee9; $dexon-purple: #954A97; $dark-gray: #222222; $muddy-gray: #303030; -$dim-gray: #9b9b9b; +$dim-gray: #4a4a4a; $curious-blue: #3099f2; /* diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index 61d7fc81..e5446193 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -165,7 +165,7 @@ } .bold { - font-weight: 500; + font-weight: 400; } .text-transform-uppercase { diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index d877d8dd..b21163b1 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -38,7 +38,7 @@ class InitializeMenuScreen extends Component { h('.initialize-screen.flex-column.flex-center', [ h('img.welcome-screen__info__logo', { - src: '/images/dekusan.svg', + src: '/images/dexon-wallet.svg', width: 160, height: 160, }), diff --git a/ui/app/reducers/dekusan.js b/ui/app/reducers/dekusan.js index 89290954..3bed6c56 100644 --- a/ui/app/reducers/dekusan.js +++ b/ui/app/reducers/dekusan.js @@ -3,7 +3,7 @@ const actions = require('../actions') const MetamascaraPlatform = require('../../../app/scripts/platforms/window') const { getEnvironmentType } = require('../../../app/scripts/lib/util') const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums') -const { TESTNET } = require('../../../app/scripts/controllers/network/enums') +const { MAINNET } = require('../../../app/scripts/controllers/network/enums') module.exports = reduceDekusan @@ -17,7 +17,7 @@ function reduceDekusan (state, action) { isAccountMenuOpen: false, isMascara: window.platform instanceof MetamascaraPlatform, isPopup: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP, - rpcTarget: 'https://testnet-rpc.dexon.org/', + rpcTarget: 'https://mainnet-rpc.dexon.org/', identities: {}, unapprovedTxs: {}, noActiveNotices: true, @@ -47,7 +47,7 @@ function reduceDekusan (state, action) { coinOptions: {}, useBlockie: false, featureFlags: {}, - networkEndpointType: TESTNET, + networkEndpointType: MAINNET, isRevealingSeedWords: false, welcomeScreenSeen: false, currentLocale: '', diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js index 638211dc..d3ccc20e 100644 --- a/ui/app/welcome-screen.js +++ b/ui/app/welcome-screen.js @@ -44,7 +44,7 @@ class WelcomeScreen extends Component { h('div.welcome-screen__info', [ h('img.welcome-screen__info__logo', { - src: '/images/dekusan.svg', + src: '/images/dexon-wallet-black.svg', width: 160, height: 160, }), |