diff options
Diffstat (limited to 'ui')
63 files changed, 1120 insertions, 264 deletions
diff --git a/ui/app/app.js b/ui/app/app.js index 5fe96042..970cb181 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -336,7 +336,6 @@ function mapStateToProps (state) { frequentRpcListDetail: state.metamask.frequentRpcListDetail || [], currentCurrency: state.metamask.currentCurrency, isMouseUser: state.appState.isMouseUser, - betaUI: state.metamask.featureFlags.betaUI, isRevealingSeedWords: state.metamask.isRevealingSeedWords, Qr: state.appState.Qr, welcomeScreenSeen: state.metamask.welcomeScreenSeen, diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js index 86520748..1e454c54 100644 --- a/ui/app/components/account-export.js +++ b/ui/app/components/account-export.js @@ -123,7 +123,7 @@ ExportAccountView.prototype.render = function () { style: { marginLeft: '10px', }, - onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey), + onClick: () => exportAsFile(`DekuSan ${nickname} Private Key`, plainKey), }, this.context.t('saveAsFile')), ]) } diff --git a/ui/app/components/card/index.scss b/ui/app/components/card/index.scss index bde54a15..faf1d9aa 100644 --- a/ui/app/components/card/index.scss +++ b/ui/app/components/card/index.scss @@ -1,10 +1,9 @@ .card { border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); padding: 8px; &__title { - border-bottom: 1px solid #d8d8d8; + border-bottom: 1px solid $geyser; padding-bottom: 4px; text-transform: capitalize; } 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 580a41fd..8e83584f 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 @@ -8,7 +8,7 @@ &__label { font-size: .75rem; font-weight: 500; - color: $scorpion; + color: $white; text-transform: uppercase; } @@ -32,10 +32,10 @@ font-size: .75rem; text-transform: uppercase; margin-bottom: 6px; - color: $scorpion; + color: $white; &--edit { - color: $curious-blue; + color: $dexon-purple; 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 7f0f5d37..1a0b30d6 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,6 +1,6 @@ .confirm-page-container-summary { padding: 16px 24px 0; - background-color: #f9fafa; + background-color: $black; height: 133px; box-sizing: border-box; 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 be77edbd..79cd21fd 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: #2f9ae0; + color: $dexon-purple; font-size: 1rem; cursor: pointer; font-weight: 400; diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js index 149f063a..2f392423 100644 --- a/ui/app/components/dropdowns/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -19,10 +19,10 @@ class Dropdown extends Component { } = this.props const innerStyleDefaults = extend({ - borderRadius: '4px', padding: '8px 16px', - background: 'rgba(0, 0, 0, 0.8)', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + background: 'rgba(0, 0, 0, 0.9)', + border: '1px solid #4a4a4a', + borderRadius: '4px', }, innerStyle) return h( diff --git a/ui/app/components/dropdowns/tests/network-dropdown.test.js b/ui/app/components/dropdowns/tests/network-dropdown.test.js index 88ad5685..4cf47e2d 100644 --- a/ui/app/components/dropdowns/tests/network-dropdown.test.js +++ b/ui/app/components/dropdowns/tests/network-dropdown.test.js @@ -78,7 +78,7 @@ describe('Network Dropdown', () => { }) it('checks background color for fourth NetworkDropdownIcon', () => { - assert.equal(wrapper.find(NetworkDropdownIcon).at(3).prop('backgroundColor'), '#f6c343') // Rinkeby Yellow + assert.equal(wrapper.find(NetworkDropdownIcon).at(3).prop('backgroundColor'), '#f6c343') // DEXON Yellow }) it('checks background color for fifth NetworkDropdownIcon', () => { diff --git a/ui/app/components/export-text-container/index.scss b/ui/app/components/export-text-container/index.scss index 975d62f7..1da79c2d 100644 --- a/ui/app/components/export-text-container/index.scss +++ b/ui/app/components/export-text-container/index.scss @@ -39,7 +39,7 @@ align-items: center; font-size: 12px; cursor: pointer; - color: $curious-blue; + color: $dexon-purple; &--copy { border-right: 1px solid $alto; diff --git a/ui/app/components/loading-screen/loading-screen.component.js b/ui/app/components/loading-screen/loading-screen.component.js index 6b843cfe..45703479 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: '#F7C06C', + color: '#954A97', }), this.renderMessage(), 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 ce81dd44..c439a8b1 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 @@ -1,5 +1,5 @@ .cancel-transaction-gas-fee { - background: #F1F4F9; + background: $muddy-gray; padding: 16px; display: flex; flex-direction: column; diff --git a/ui/app/components/modals/confirm-remove-account/index.scss b/ui/app/components/modals/confirm-remove-account/index.scss index 3be3a196..aa608490 100644 --- a/ui/app/components/modals/confirm-remove-account/index.scss +++ b/ui/app/components/modals/confirm-remove-account/index.scss @@ -53,6 +53,6 @@ } &__link { - color: #2f9ae0; + color: $dexon-purple; } -}
\ No newline at end of file +} diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 99e79a42..68dcae10 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -5,16 +5,11 @@ const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util') -const ShapeshiftForm = require('../shapeshift-form') import Button from '../button' let DIRECT_DEPOSIT_ROW_TITLE let DIRECT_DEPOSIT_ROW_TEXT -let COINBASE_ROW_TITLE -let COINBASE_ROW_TEXT -let SHAPESHIFT_ROW_TITLE -let SHAPESHIFT_ROW_TEXT let FAUCET_ROW_TITLE function mapStateToProps (state) { @@ -49,10 +44,6 @@ function DepositEtherModal (props, context) { // need to set after i18n locale has loaded DIRECT_DEPOSIT_ROW_TITLE = context.t('directDepositEther') DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer') - COINBASE_ROW_TITLE = context.t('buyCoinbase') - COINBASE_ROW_TEXT = context.t('buyCoinbaseExplainer') - SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift') - SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer') FAUCET_ROW_TITLE = context.t('testFaucet') this.state = { @@ -123,10 +114,10 @@ DepositEtherModal.prototype.renderRow = function ({ } DepositEtherModal.prototype.render = function () { - const { network, toCoinbase, address, toFaucet } = this.props + const { network, toFaucet } = this.props const { buyingWithShapeshift } = this.state - const isTestNetwork = ['3', '4', '42'].find(n => n === network) + const isTestNetwork = ['2', '3', '4', '42'].find(n => n === network) const networkName = getNetworkDisplayName(network) return h('div.page-container.page-container--full-width.page-container--full-height', {}, [ diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 8227fec3..e8d2dca1 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -32,7 +32,7 @@ import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-contai const modalContainerBaseStyle = { transform: 'translate3d(-50%, 0, 0px)', - border: '1px solid #CCCFD1', + border: '1px solid #4a4a4a', borderRadius: '8px', backgroundColor: '#222222', boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)', @@ -50,6 +50,10 @@ const modalContainerMobileStyle = { top: '12.5%', } +const modalContentStyle = { + backgroundColor: '#222222', +} + const accountModalStyle = { mobileModalStyle: { width: '95%', @@ -439,7 +443,10 @@ Modal.prototype.render = function () { this.modalRef = ref }, modalStyle, - contentStyle, + contentStyle: { + ...modalContentStyle, + ...contentStyle, + }, backdropStyle: BACKDROPSTYLE, closeOnClick: !disableBackdropClick, }, diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss index 1a2db5f9..78b23dee 100644 --- a/ui/app/components/page-container/index.scss +++ b/ui/app/components/page-container/index.scss @@ -73,7 +73,7 @@ cursor: pointer; font-size: 0.75rem; text-transform: uppercase; - color: #2f9ae0; + color: $dexon-purple; } } } @@ -90,7 +90,7 @@ } &__back-button { - color: #2f9ae0; + color: $dexon-purple; font-size: 1rem; cursor: pointer; font-weight: 400; @@ -131,8 +131,8 @@ } &--selected { - color: $curious-blue; - border-bottom: 2px solid $curious-blue; + color: $dexon-purple; + border-bottom: 2px solid $dexon-purple; } } @@ -207,5 +207,6 @@ flex: 0 0 auto; margin-right: auto; margin-left: auto; + border: 2px solid $geyser; } } diff --git a/ui/app/components/pages/add-token/token-list/token-list-placeholder/index.scss b/ui/app/components/pages/add-token/token-list/token-list-placeholder/index.scss index cc495dfb..df265aff 100644 --- a/ui/app/components/pages/add-token/token-list/token-list-placeholder/index.scss +++ b/ui/app/components/pages/add-token/token-list/token-list-placeholder/index.scss @@ -18,6 +18,6 @@ } &__link { - color: $curious-blue; + color: $dexon-purple; } } diff --git a/ui/app/components/pages/confirm-add-token/index.scss b/ui/app/components/pages/confirm-add-token/index.scss index 66146cf7..8897997b 100644 --- a/ui/app/components/pages/confirm-add-token/index.scss +++ b/ui/app/components/pages/confirm-add-token/index.scss @@ -26,14 +26,14 @@ align-items: flex-start; &__amount { - color: $scorpion; + color: $white; font-size: 43px; line-height: 43px; margin-right: 8px; } &__symbol { - color: $scorpion; + color: $white; font-size: 16px; font-weight: 400; line-height: 24px; 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 6bc41578..ada2b5b4 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 @@ -191,7 +191,8 @@ export default class ConfirmTransactionBase extends Component { secondaryText={secondaryTotalTextOverride} headerText="Amount + Gas Fee" headerTextClassName="confirm-detail-row__header-text--total" - primaryValueTextColor="#2f9ae0" + primaryValueTextColor="#954A97" + fiatTextColor="#954A97" /> </div> </div> diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js index 49a5610c..026b6620 100644 --- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js @@ -150,8 +150,8 @@ class ConnectScreen extends Component { renderFooter () { return ( h('div.hw-connect__footer', {}, [ - h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)), - this.renderButtons(), + // h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)), + // this.renderButtons(), h('p.hw-connect__footer__msg', {}, [ this.context.t(`havingTroubleConnecting`), h('a.hw-connect__footer__link', { @@ -169,8 +169,8 @@ class ConnectScreen extends Component { this.renderHeader(), this.renderButtons(), this.renderTrezorAffiliateLink(), - this.renderLearnMore(), - this.renderTutorialSteps(), + // this.renderLearnMore(), + // this.renderTutorialSteps(), this.renderFooter(), ]) ) 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 bb6771e4..8ca167e2 100644 --- a/ui/app/components/pages/create-account/import-account/json.js +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -28,10 +28,10 @@ class JsonImportSubview extends Component { h('div.new-account-import-form__json', [ h('p', this.context.t('usedByClients')), - h('a.warning', { - href: HELP_LINK, - target: '_blank', - }, this.context.t('fileImportFail')), + // h('a.warning', { + // href: HELP_LINK, + // target: '_blank', + // }, this.context.t('fileImportFail')), h(FileInput, { readAs: 'text', diff --git a/ui/app/components/pages/settings/index.scss b/ui/app/components/pages/settings/index.scss index 138ebcfc..6aef31fb 100644 --- a/ui/app/components/pages/settings/index.scss +++ b/ui/app/components/pages/settings/index.scss @@ -1,10 +1,10 @@ -@import './info-tab/index'; +@import "./info-tab/index"; -@import './settings-tab/index'; +@import "./settings-tab/index"; .settings-page { position: relative; - background: $white; + background: $dark-gray; display: flex; flex-flow: column nowrap; @@ -15,7 +15,7 @@ &__close-button::after { content: '\00D7'; font-size: 40px; - color: $dusty-gray; + color: $dim-gray; position: absolute; top: 25px; right: 30px; @@ -63,7 +63,7 @@ &__content-description { font-size: 14px; - color: $dusty-gray; + color: $dim-gray; padding-top: 5px; } diff --git a/ui/app/components/pages/settings/info-tab/index.scss b/ui/app/components/pages/settings/info-tab/index.scss index 43ad6f65..7182e509 100644 --- a/ui/app/components/pages/settings/info-tab/index.scss +++ b/ui/app/components/pages/settings/info-tab/index.scss @@ -1,6 +1,6 @@ .info-tab { &__logo-wrapper { - height: 80px; + height: 180px; margin-bottom: 20px; } @@ -30,27 +30,27 @@ } &__link-text { - color: $curious-blue; + color: $dexon-purple; } &__version-number { padding-top: 5px; font-size: 13px; - color: $dusty-gray; + color: $dim-gray; } &__separator { margin: 15px 0; width: 80px; - border-color: $alto; + border-color: $geyser; border: none; height: 1px; - background-color: $alto; - color: $alto; + background-color: $geyser; + color: $geyser; } &__about { - color: $dusty-gray; + color: $dim-gray; margin-bottom: 15px; } } 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 72f7d835..f598fff7 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,8 +110,9 @@ 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/info-logo.png" - className="info-tab__logo" + src="/images/dekusan.svg" + width={160} + height={160} /> </div> <div className="info-tab__item"> @@ -124,7 +125,7 @@ export default class InfoTab extends PureComponent { </div> <div className="info-tab__item"> <div className="info-tab__about"> - { t('builtInCalifornia') } + {t('aboutDekuSan') } </div> </div> </div> diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js index a0a8ed47..457d87ec 100644 --- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js @@ -266,7 +266,7 @@ export default class SettingsTab extends PureComponent { if (err) { displayWarning(t('stateLogError')) } else { - exportAsFile('MetaMask State Logs.json', result) + exportAsFile('DekuSan State Logs.json', result) } }) }} @@ -336,34 +336,6 @@ export default class SettingsTab extends PureComponent { ) } - renderOldUI () { - const { t } = this.context - const { setFeatureFlagToBeta } = this.props - - return ( - <div className="settings-page__content-row"> - <div className="settings-page__content-item"> - <span>{ t('useOldUI') }</span> - </div> - <div className="settings-page__content-item"> - <div className="settings-page__content-item-col"> - <Button - type="secondary" - large - className="settings-tab__button--orange" - onClick={event => { - event.preventDefault() - setFeatureFlagToBeta() - }} - > - { t('useOldUI') } - </Button> - </div> - </div> - </div> - ) - } - renderResetAccount () { const { t } = this.context const { showResetAccountConfirmationModal } = this.props @@ -521,7 +493,7 @@ export default class SettingsTab extends PureComponent { } render () { - const { warning, isMascara } = this.props + const { warning } = this.props return ( <div className="settings-page__content"> @@ -532,7 +504,6 @@ export default class SettingsTab extends PureComponent { { this.renderNewRpcUrl() } { this.renderStateLogs() } { this.renderSeedWords() } - { !isMascara && this.renderOldUI() } { this.renderResetAccount() } { this.renderClearApproval() } { this.renderPrivacyOptIn() } diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js index b6c33a5b..04d79295 100644 --- a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js +++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js @@ -55,9 +55,6 @@ const mapDispatchToProps = dispatch => { revealSeedConfirmation: () => dispatch(revealSeedConfirmation()), setUseBlockie: value => dispatch(setUseBlockie(value)), updateCurrentLocale: key => dispatch(updateCurrentLocale(key)), - setFeatureFlagToBeta: () => { - return dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) - }, setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)), setPrivacyMode: enabled => dispatch(setFeatureFlag('privacyMode', enabled)), showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })), diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss index ebc58a0a..9ca3fd12 100644 --- a/ui/app/components/pages/unlock-page/index.scss +++ b/ui/app/components/pages/unlock-page/index.scss @@ -7,38 +7,46 @@ padding: 30px; font-weight: 400; color: $silver-chalice; + &__container { background: $dark-gray; display: flex; align-self: stretch; justify-content: center; flex: 1 0 auto; - height: calc(100vh - 75px); } + &__mascot-container { margin-top: 24px; } + &__title { margin-top: 5px; - font-size: 2rem; + font-size: 2.5rem; font-weight: 800; - color: $tundora; + font-stretch: condensed; + color: $white; } + &__form { width: 100%; margin: 56px 0 8px; } + &__links { margin-top: 25px; width: 100%; } + &__link { cursor: pointer; + &--import { color: $ecstasy; } + &--use-classic { margin-top: 10px; } } -}
\ No newline at end of file +} 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 90c72098..4ac5d566 100644 --- a/ui/app/components/pages/unlock-page/unlock-page.component.js +++ b/ui/app/components/pages/unlock-page/unlock-page.component.js @@ -6,7 +6,6 @@ import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums' import { getEnvironmentType } from '../../../../../app/scripts/lib/util' import getCaretCoordinates from 'textarea-caret' import { EventEmitter } from 'events' -import Mascot from '../../mascot' import { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } from '../../../routes' export default class UnlockPage extends Component { @@ -103,16 +102,15 @@ export default class UnlockPage extends Component { <div className="unlock-page__container"> <div className="unlock-page"> <div className="unlock-page__mascot-container"> - <Mascot - animationEventEmitter={this.animationEventEmitter} - width="120" - height="120" + <img + src="/images/dekusan.svg" + width={160} + height={160} /> </div> <h1 className="unlock-page__title"> - { t('welcomeBack') } + {t('appName') } </h1> - <div>{ t('unlockMessage') }</div> <form className="unlock-page__form" onSubmit={event => this.handleSubmit(event)} diff --git a/ui/app/components/selected-account/index.scss b/ui/app/components/selected-account/index.scss index 5339a228..a0b8497a 100644 --- a/ui/app/components/selected-account/index.scss +++ b/ui/app/components/selected-account/index.scss @@ -28,11 +28,11 @@ cursor: pointer; &:hover { - background-color: #e8e6e8; + background-color: $geyser; } &:active { - background-color: #d9d7da; + background-color: $geyser; } } } diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss index b21e4e1b..4920bdc4 100644 --- a/ui/app/components/sender-to-recipient/index.scss +++ b/ui/app/components/sender-to-recipient/index.scss @@ -53,7 +53,7 @@ } &__arrow-circle { - background: $white; + background: $black; padding: 5px; border: 1px solid $geyser; border-radius: 20px; @@ -85,7 +85,7 @@ border-radius: 4px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); padding: 6px; - background: $white; + background: $black; cursor: pointer; min-width: 0; color: $dusty-gray; diff --git a/ui/app/components/tabs/tab/index.scss b/ui/app/components/tabs/tab/index.scss index 1de6ffa0..808e4a1f 100644 --- a/ui/app/components/tabs/tab/index.scss +++ b/ui/app/components/tabs/tab/index.scss @@ -10,6 +10,6 @@ &--active { color: $black; - border-bottom: 2px solid $curious-blue; + border-bottom: 2px solid $dexon-purple; } } diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js index 97086565..ef342427 100644 --- a/ui/app/components/text-field/text-field.component.js +++ b/ui/app/components/text-field/text-field.component.js @@ -52,7 +52,7 @@ const styles = { 'label + &': { marginTop: '8px', }, - border: '1px solid #777777', + border: '1px solid #4a4a4a', height: '48px', borderRadius: '4px', padding: '0 16px', diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss index 00c17e6a..c6afd5ec 100644 --- a/ui/app/components/transaction-activity-log/index.scss +++ b/ui/app/components/transaction-activity-log/index.scss @@ -1,8 +1,7 @@ .transaction-activity-log { - &__title { - border-bottom: 1px solid #d8d8d8; - padding-bottom: 4px; - text-transform: capitalize; + &__card { + background: $black; + height: 100%; } &__activities-container { @@ -22,8 +21,8 @@ left: 0; top: 0; height: 100%; - width: 7px; - border-right: 1px solid #909090; + width: 6px; + border-right: 1px solid $geyser; } &:first-child::after { @@ -45,7 +44,7 @@ height: 15px; margin-right: 6px; border-radius: 50%; - background: #909090; + background: $geyser; flex: 0 0 auto; display: flex; justify-content: center; @@ -54,7 +53,7 @@ } &__activity-text { - color: $dusty-gray; + color: $dim-gray; font-size: .75rem; cursor: pointer; diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js index d014b888..aa2e2d4a 100644 --- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js +++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js @@ -192,7 +192,7 @@ describe('getActivities', () => { op: 'add', path: '/origin', timestamp: 1535507561516, - value: 'MetaMask', + value: 'DekuSan', }, [], ], diff --git a/ui/app/components/transaction-breakdown/index.scss b/ui/app/components/transaction-breakdown/index.scss index b56cbdd7..8aa2cb2c 100644 --- a/ui/app/components/transaction-breakdown/index.scss +++ b/ui/app/components/transaction-breakdown/index.scss @@ -1,10 +1,9 @@ @import './transaction-breakdown-row/index'; .transaction-breakdown { - &__title { - border-bottom: 1px solid #d8d8d8; - padding-bottom: 4px; - text-transform: capitalize; + &__card { + background: $black; + height: 100%; } &__row-title { diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss index 8c73be1a..e651b44f 100644 --- a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss +++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss @@ -1,12 +1,12 @@ .transaction-breakdown-row { font-size: .75rem; - color: $scorpion; + color: $dim-gray; display: flex; justify-content: space-between; padding: 8px 0; &:not(:last-child) { - border-bottom: 1px solid #d8d8d8; + border-bottom: 1px solid $geyser; } &__title { diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss index 9e73a546..1eed0843 100644 --- a/ui/app/components/transaction-list-item/index.scss +++ b/ui/app/components/transaction-list-item/index.scss @@ -6,7 +6,7 @@ justify-content: center; align-items: center; flex-direction: column; - background: $white; + background: $black; &__grid { cursor: pointer; @@ -14,21 +14,16 @@ padding: 16px 20px; display: grid; grid-template-columns: 45px 1fr 1fr 1fr; - grid-template-areas: - "identicon action status primary-amount" - "identicon nonce status secondary-amount"; + grid-template-areas: "identicon action status primary-amount" "identicon nonce status secondary-amount"; @media screen and (max-width: $break-small) { padding: 8px 20px 12px; grid-template-columns: 45px 5fr 3fr; - grid-template-areas: - "nonce nonce nonce" - "identicon action primary-amount" - "identicon status secondary-amount"; + grid-template-areas: "nonce nonce nonce" "identicon action primary-amount" "identicon status secondary-amount"; } &:hover { - background: rgba($alto, .2); + background: rgba($alto, 0.2); } } @@ -64,7 +59,7 @@ &__nonce { font-size: .75rem; - color: #5e6064; + color: $dim-gray; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -97,7 +92,7 @@ &--secondary { text-align: end; font-size: .75rem; - color: #5e6064; + color: $dim-gray; grid-area: secondary-amount; align-self: start; justify-self: end; @@ -117,6 +112,12 @@ } } + &__details-container { + padding: 8px 16px 16px; + background: $dark-gray; + width: 100%; + } + &__expander { max-height: 0px; width: 100%; diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index b29afdc8..780a89c7 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -53,7 +53,7 @@ } &__account-primary-balance { - color: $scorpion; + color: $white; border: none; outline: 0 !important; } @@ -67,6 +67,7 @@ width: 80%; overflow: hidden; text-overflow: ellipsis; + color: $dim-gray; } &__dropdown { diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 4ae95151..630928f8 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -65,12 +65,12 @@ .btn-confirm { color: $white; - border: 2px solid $curious-blue; + border: 2px solid $dexon-purple; background-color: $dexon-purple; } .btn-raised { - color: $curious-blue; + color: $white; background-color: $dexon-purple; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); padding: 6px; diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index db59339a..42bbc466 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -97,7 +97,7 @@ } .confirm-screen-back-button { - color: $curious-blue; + color: $dexon-purple; font-family: Roboto; font-size: 1rem; position: absolute; diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index 8442799c..9f9a040a 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -1,18 +1,20 @@ .currency-display { height: 54px; - border: 1px solid $alto; + border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; - color: $scorpion; + color: $dim-gray; font-family: Roboto; font-size: 16px; padding: 8px 10px; position: relative; + &__primary-row { display: flex; } + &__input { - color: $scorpion; + color: $white; font-family: Roboto; font-size: 16px; line-height: 22px; @@ -20,16 +22,19 @@ outline: 0 !important; max-width: 22ch; } + &__primary-currency { - color: $scorpion; + color: $white; font-weight: 400; font-family: Roboto; font-size: 16px; line-height: 22px; } + &__converted-row { display: flex; } + &__converted-value, &__converted-currency { color: $dusty-gray; @@ -37,39 +42,46 @@ font-size: 12px; line-height: 12px; } + &__input-wrapper { position: relative; display: flex; flex: 1; max-width: 100%; + input[type="number"] { -moz-appearance: textfield; } + input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; display: none; } + input[type="number"]:hover::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; display: none; } } + &__currency-symbol { margin-top: 1px; color: $scorpion; } + .react-numeric-input { input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; display: none; } + input[type="number"]:hover::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; display: none; } } -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/editable-label.scss b/ui/app/css/itcss/components/editable-label.scss index c69ea142..9d113d02 100644 --- a/ui/app/css/itcss/components/editable-label.scss +++ b/ui/app/css/itcss/components/editable-label.scss @@ -15,7 +15,7 @@ width: 250px; font-size: 14px; text-align: center; - border: 1px solid $alto; + border: 1px solid $geyser; &--error { border: 1px solid $monzo; @@ -30,6 +30,6 @@ &__icon { cursor: pointer; - color: $dusty-gray; + color: $white; } } diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index b023c842..f6c0f63f 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -9,7 +9,7 @@ flex: 1 1 auto; width: 100%; height: 100%; - background: rgba(255, 255, 255, .8); + background: rgba(0, 0, 0, .8); &__container { position: absolute; diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 6409ad54..d9f8856f 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -1,7 +1,7 @@ .menu { + background: rgba($black, .9); + border: 1px solid $geyser; border-radius: 4px; - background: rgba($black, .8); - box-shadow: rgba($black, .15) 0 2px 2px 2px; min-width: 150px; color: $white; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 0fe46752..8dec5235 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -192,7 +192,7 @@ align-items: center; position: relative; padding: 5px 0 31px 0; - border: 1px solid $silver; + border: 1px solid $geyser; border-radius: 4px; font-family: Roboto; @@ -219,7 +219,7 @@ .account-modal-close::after { content: '\00D7'; font-size: 40px; - color: $dusty-gray; + color: $white; position: absolute; top: 10px; right: 12px; @@ -244,12 +244,14 @@ .qr-wrapper { margin-top: 5px; + background-color: $white; } .ellip-address-wrapper { display: flex; justify-content: center; - border: 1px solid $alto; + border: 1px solid $geyser; + border-radius: 2px; padding: 5px 10px; font-family: Roboto; margin-top: 7px; @@ -267,7 +269,7 @@ width: 100%; height: 1px; margin: 19px 0 8px 0; - background-color: $alto; + background-color: $geyser; } // Export Private Key Modal @@ -584,7 +586,7 @@ } &__link { - color: $curious-blue; + color: $dexon-purple; } } diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index ace2c73b..22888ece 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -1,15 +1,18 @@ .new-account { width: 375px; - background-color: #FFFFFF; - box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); + background-color: $dark-gray; + border: 2px solid $geyser; + border-radius: 4px; z-index: 25; + &__header { display: flex; flex-flow: column; border-bottom: 1px solid $geyser; } + &__title { - color: $tundora; + color: $white; font-family: Roboto; font-size: 32px; font-weight: 500; @@ -17,10 +20,12 @@ margin-top: 22px; margin-left: 29px; } + &__tabs { margin-left: 22px; display: flex; margin-top: 10px; + &__tab { height: 54px; padding: 15px 10px; @@ -31,21 +36,23 @@ text-align: center; cursor: pointer; } + &__tab:hover { - color: $black; + color: $dexon-purple; border-bottom: none; } + &__selected { - color: $curious-blue; - border-bottom: 3px solid $curious-blue; + color: $dexon-purple; + border-bottom: 3px solid $dexon-purple; cursor: initial; } } } .new-account-import-disclaimer { - width: 120%; - background-color: #F4F9FC; + margin: 0 -30px; + background-color: $muddy-gray; display: inline-block; align-items: center; padding: 20px 30px 20px; @@ -58,6 +65,7 @@ flex-flow: column; align-items: center; padding: 0 30px 30px; + &__select-section { display: flex; justify-content: space-between; @@ -65,50 +73,86 @@ margin-top: 29px; width: 100%; } + &__select-label { - color: $scorpion; + color: $dim-gray; font-family: Roboto; font-size: 16px; line-height: 21px; } + &__select { - height: 54px; width: 210px; - border: 1px solid #D2D8DD; + border: 1px solid $geyser; border-radius: 4px; - background-color: #FFFFFF; + background-color: $dark-gray; display: flex; align-items: center; + + .Select-control { + background-color: $dark-gray !important; + + .Select-value-label { + color: $white !important; + } + } + + .Select-menu-outer { + border: 1px solid $geyser; + } + + .Select-menu { + background-color: $dark-gray !important; + + .Select-option.is-selected { + color: $white !important; + } + + .Select-option { + color: $dim-gray !important; + background-color: $dark-gray !important; + + &:hover { + background-color: $muddy-gray !important; + } + } + } + .Select-control, .Select-control:hover { height: 100%; border: none; box-shadow: none; + .Select-value { display: flex; align-items: center; } } } + &__private-key-password-container { display: flex; flex-flow: column; align-items: center; width: 100%; } + &__instruction { - color: $scorpion; + color: $dim-gray; font-family: Roboto; font-size: 16px; line-height: 21px; align-self: flex-start; } + &__private-key { display: flex; flex-flow: column; align-items: flex-start; margin-top: 34px; } + &__input-password { height: 54px; width: 315px; @@ -116,17 +160,19 @@ border-radius: 4px; background-color: $dark-gray; margin-top: 16px; - color: $scorpion; + color: $white; font-family: Roboto; font-size: 16px; padding: 0px 20px; } + &__json { display: flex; flex-flow: column; align-items: center; margin-top: 29px; } + &__buttons { margin-top: 39px; display: flex; @@ -146,12 +192,14 @@ .hw-connect { width: 100%; + &__header { &__title { margin-top: 5px; margin-bottom: 15px; font-size: 22px; } + &__msg { font-size: 14px; color: #9b9b9b; @@ -159,19 +207,26 @@ margin-bottom: 20px; } } + &__btn-wrapper { flex: 1; flex-direction: row; display: flex; } + &__connect-btn { + background-color: #954A97; + color: #fff; + border: none; width: 315px; margin: 20px; } + &__connect-btn.disabled { cursor: not-allowed; opacity: .5; } + &__btn { background: #fbfbfb; border: 1px solid #e5e5e5; @@ -182,37 +237,45 @@ align-items: center; justify-content: center; border-radius: 5px; + &__img { width: 95px; } } + &__btn.selected { - border: 2px solid #00a8ee; + border: 2px solid #954A97; width: 149px; } + &__btn:first-child { margin-right: 15px; margin-left: 20px; } + &__btn:last-child { margin-right: 20px; } + &__hdPath { display: flex; flex-direction: row; margin-top: 15px; margin-bottom: 30px; font-size: 14px; + &__title { display: flex; margin-top: 10px; margin-right: 15px; } + &__select { display: flex; flex: 1; } } + &__learn-more { margin-top: 15px; font-size: 14px; @@ -220,6 +283,7 @@ line-height: 19px; text-align: center; cursor: pointer; + &__arrow { transform: rotate(90deg); display: block; @@ -228,26 +292,31 @@ margin: 0px auto 10px; } } + &__title { padding-top: 10px; font-weight: 400; font-size: 18px; } + &__unlock-title { padding-top: 10px; font-weight: 400; font-size: 22px; margin-bottom: 15px; } + &__msg { font-size: 14px; color: #9b9b9b; margin-top: 10px; margin-bottom: 15px; } + &__link { - color: #2f9ae0; + color: $dexon-purple; } + &__footer { &__title { padding-top: 15px; @@ -256,6 +325,7 @@ font-size: 18px; text-align: center; } + &__msg { font-size: 14px; color: #9b9b9b; @@ -265,26 +335,31 @@ display: block; margin-left: 20px; } + &__link { - color: #2f9ae0; + color: $dexon-purple; margin-left: 5px; } } + &__get-hw { width: 100%; padding-bottom: 10px; padding-top: 10px; + &__msg { font-size: 14px; color: #9b9b9b; } + &__link { font-size: 14px; text-align: center; - color: #2f9ae0; + color: $dexon-purple; cursor: pointer; } } + &__step-asset { margin: 0px auto 20px; display: flex; @@ -296,11 +371,13 @@ flex: 1; flex-flow: column; width: 100%; + &__title_wrapper { display: flex; flex-direction: row; flex: 1; } + &__title { margin-bottom: 23px; align-self: flex-start; @@ -312,6 +389,7 @@ display: flex; flex: 1; } + &__device { margin-bottom: 23px; align-self: flex-end; @@ -322,6 +400,7 @@ font-weight: normal; display: flex; } + &__item { font-size: 15px; flex-direction: row; @@ -329,27 +408,34 @@ padding-left: 10px; padding-right: 10px; } + &__item:nth-of-type(even) { - background-color: #fbfbfb; + background-color: $geyser; } + &__item:nth-of-type(odd) { background: rgba(0, 0, 0, 0.03); } + &__item:hover { background-color: rgba(0, 0, 0, 0.06); } + &__item__index { display: flex; width: 24px; } + &__item__radio { display: flex; flex: 1; + input { padding: 10px; margin-top: 13px; } } + &__item__label { display: flex; flex: 1; @@ -357,15 +443,18 @@ padding-top: 10px; padding-bottom: 10px; } + &__item__balance { display: flex; flex: 1; justify-content: center; } + &__item__link { display: flex; margin-top: 13px; } + &__item__link img { width: 15px; height: 15px; @@ -376,11 +465,13 @@ display: flex; align-self: flex-end; margin-top: 10px; + &__button { background: #fff; height: 19px; display: flex; - color: #33a4e7; + color: $dexon-purple; + background-color: $dark-gray; font-size: 14px; line-height: 19px; border: none; @@ -400,37 +491,44 @@ padding: 15px 30px 0; height: 710px; overflow: auto; + &.unsupported-browser { height: 210px; } + &.account-list { height: auto; padding-left: 20px; padding-right: 20px; } + &__buttons { margin-top: 39px; display: flex; width: 100%; justify-content: space-between; } + &__button { width: 150px; min-width: initial; } + .btn-primary { - background-color: #259DE5; + background-color: #954A97; color: #FFFFFF; border: none; width: 100%; min-height: 54px; font-weight: 300; font-size: 14px; - margin-bottom: 20px + margin-bottom: 20px; } + &__button.unlock { width: 50%; } + &__button.btn-primary--disabled { cursor: not-allowed; opacity: .5; @@ -442,8 +540,9 @@ flex-flow: column; align-items: center; padding: 22px; + a { - color: #2f9ae0; + color: $dexon-purple; font-size: 14px; cursor: pointer; } @@ -454,34 +553,38 @@ flex-flow: column; align-items: center; padding: 30px; + &__input-label { - color: $scorpion; + color: $dim-gray; font-family: Roboto; font-size: 16px; line-height: 21px; align-self: flex-start; } + &__input { height: 54px; width: 315.84px; border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; - color: $scorpion; + color: $white; font-family: Roboto; font-size: 16px; line-height: 21px; margin-top: 15px; padding: 0px 20px; } + &__buttons { margin-top: 39px; display: flex; width: 100%; justify-content: space-between; } + &__button { width: 150px; min-width: initial; } -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 9dc11042..db9dfd04 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -92,8 +92,8 @@ $wallet-view-bg: $muddy-gray; &__address { border-radius: 3px; - background-color: $alto; - color: $scorpion; + background-color: $dark-gray; + color: $dim-gray; font-size: 14px; line-height: 12px; padding: 4px 12px; @@ -101,7 +101,7 @@ $wallet-view-bg: $muddy-gray; flex: 0 0 auto; &__pressed { - background-color: ($manatee,); + background-color: $black; } } @@ -303,6 +303,5 @@ $wallet-view-bg: $muddy-gray; width: 100%; height: 100%; justify-content: center; - padding: 0 10px; - background: white; + background: $dark-gray; } diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 45a4a812..0677cad1 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -177,7 +177,7 @@ &__help-link { cursor: pointer; text-decoration: underline; - color: $curious-blue; + color: $dexon-purple; } &__footer { width: 100%; diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 9cb0dceb..00a776c5 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -45,8 +45,7 @@ textarea.twelve-word-phrase { /* unlock */ .error { - // color: #e20202; - color: #954a97; + color: #e20202; margin-bottom: 9px; } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 9feef1b3..f3f90f0c 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -3,10 +3,12 @@ flex-flow: column nowrap; z-index: 25; font-family: Roboto; + @media screen and (max-width: $break-small) { width: 100%; overflow-y: auto; } + section { flex: 0 0 auto; } @@ -14,7 +16,7 @@ .send-screen-card { background-color: #fff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 46px 40.5px 26px; position: relative; // top: -26px; align-items: center; @@ -22,6 +24,7 @@ flex-flow: column nowrap; width: 498px; flex: 1 0 auto; + @media screen and (max-width: $break-small) { top: 0; width: 100%; @@ -46,12 +49,13 @@ width: 70px; height: 70px; border: 1px solid $alto; - box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2); + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); position: absolute; top: -35px; z-index: 25; padding: 4px; background-color: $white; + @media screen and (max-width: $break-small) { position: relative; top: 0; @@ -61,9 +65,11 @@ .send-screen-input-wrapper { width: 95%; position: relative; + .fa-bolt { padding-right: 4px; } + .large-input { border: 1px solid $dusty-gray; border-radius: 4px; @@ -72,17 +78,21 @@ line-height: 22.4px; font-family: Roboto; } + .send-screen-gas-input { border: 1px solid transparent; } + &__error-message { display: none; } + &--error { input, .send-screen-gas-input { border-color: $red !important; } + .send-screen-input-wrapper__error-message { display: block; position: absolute; @@ -93,6 +103,7 @@ color: $red; } } + .send-screen-input-wrapper__error-message { display: block; position: absolute; @@ -138,8 +149,9 @@ .currency-toggle { &__item { - color: $curious-blue; + color: $dexon-purple; cursor: pointer; + &--selected { color: $black; cursor: default; @@ -148,7 +160,7 @@ } .send-screen-gas-input-customize { - color: $curious-blue; + color: $dexon-purple; font-size: 12px; cursor: pointer; } @@ -269,6 +281,7 @@ display: inline-block; margin-right: 4px; } + &__symbol { display: inline-block; } @@ -280,16 +293,19 @@ font-size: 18px; line-height: 29px; } + &__subtitle { margin: 10px 0 20px; font-size: 14px; line-height: 24px; } + &__send-button, &__cancel-button { width: 163px; text-align: center; } + &__send-button__disabled { opacity: .5; cursor: auto; @@ -301,17 +317,19 @@ flex-flow: column nowrap; z-index: 25; font-family: Roboto; + &__content { width: 498px; height: 605px; background-color: #fff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 46px 40.5px 26px; position: relative; // top: -26px; align-items: center; display: flex; flex-flow: column nowrap; flex: 1 0 auto; + @media screen and (max-width: $break-small) { top: 0; width: 100%; @@ -319,21 +337,25 @@ padding: 12px; } } + .identicon { position: absolute; top: -35px; z-index: 25; + @media screen and (max-width: $break-small) { position: relative; top: 0; flex: 0 0 auto; } } + &__title { color: $scorpion; font-size: 18px; line-height: 29px; } + &__description, &__balance-text, &__token-symbol { @@ -342,22 +364,27 @@ line-height: 24px; text-align: center; } + &__token-balance { font-size: 40px; line-height: 40px; margin-top: 13px; + .token-balance__amount { padding-right: 12px; } } + &__button-group { display: flex; flex-flow: column nowrap; align-items: center; flex: 0 0 auto; + @media screen and (max-width: $break-small) { margin-top: 24px; } + button { width: 163px; } @@ -376,13 +403,14 @@ width: 380px; border-radius: 8px; background-color: $dark-gray; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); display: flex; flex-flow: column nowrap; z-index: 25; align-items: center; font-family: Roboto; position: relative; + @media screen and (max-width: $break-small) { width: 100%; top: 0; @@ -390,13 +418,16 @@ flex: 1 1 auto; } } + &__send-header-icon-container { z-index: 25; + @media screen and (max-width: $break-small) { position: relative; top: 0; } } + &__send-header-icon { border-radius: 50%; width: 48px; @@ -406,14 +437,16 @@ padding: 4px; background-color: $white; } + &__send-arrow-icon { - color: #f28930; + color: #954A97; transform: rotate(-45deg); position: absolute; top: -2px; left: 0; font-size: 1.12em; } + &__arrow-background { background-color: $white; height: 14px; @@ -423,10 +456,12 @@ left: 199px; border-radius: 50%; z-index: 100; + @media screen and (max-width: $break-small) { top: 36px; } } + &__header { height: 88px; width: 380px; @@ -435,11 +470,13 @@ display: flex; justify-content: center; align-items: center; + @media screen and (max-width: $break-small) { height: 59px; width: 100vw; } } + &__header-tip { height: 25px; width: 25px; @@ -448,6 +485,7 @@ transform: rotate(45deg); left: 178px; top: 75px; + @media screen and (max-width: $break-small) { top: 46px; left: 0; @@ -455,6 +493,7 @@ margin: 0 auto; } } + &__title { color: $scorpion; font-size: 22px; @@ -462,6 +501,7 @@ text-align: center; margin-top: 25px; } + &__copy { color: $gray; font-size: 14px; @@ -470,22 +510,27 @@ margin-top: 10px; width: 287px; } + &__error { font-size: 12px; line-height: 12px; left: 8px; color: $red; } + &__error-border { color: $red; } + &__form { padding: 10px 0 25px; + @media screen and (max-width: $break-small) { margin: 0; flex: 1 1 auto; } } + &__form-header, &__form-header-copy { width: 100%; @@ -493,6 +538,7 @@ flex-flow: column; align-items: center; } + &__form-row { margin: 14.5px 18px 0px; position: relative; @@ -501,26 +547,32 @@ flex: 1 0 auto; justify-content: space-between; } + &__form-field { flex: 1 1 auto; + .currency-display { - color: $tundora; + color: $dim-gray; + &__currency-symbol { - color: $tundora; + color: $dim-gray; } + &__converted-value, &__converted-currency { - color: $tundora; + color: $dim-gray; } } + .account-list-item { &__account-secondary-balance { - color: $tundora; + color: $dim-gray; } } } + &__form-label { - color: $scorpion; + color: $white; font-family: Roboto; font-size: 16px; line-height: 22px; @@ -528,17 +580,19 @@ font-weight: 400; flex: 0 0 auto; } + &__from-dropdown { height: 73px; width: 100%; - border: 1px solid $alto; + border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; font-family: Roboto; line-height: 16px; font-size: 12px; - color: $tundora; + color: $white; position: relative; + &__close-area { position: fixed; top: 0; @@ -547,6 +601,7 @@ width: 100%; height: 100%; } + &__list { z-index: 1050; position: absolute; @@ -554,21 +609,24 @@ width: 100%; border: 1px solid $geyser; border-radius: 4px; - background-color: $white; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); + background-color: $dark-gray; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); margin-top: 11px; margin-left: -1px; overflow-y: scroll; } } + &__to-autocomplete { position: relative; + &__down-caret { z-index: 1026; position: absolute; top: 18px; right: 12px; } + &__qr-code { z-index: 1026; position: absolute; @@ -578,13 +636,16 @@ padding: 8px 5px 5px; border-radius: 4px; } + &__qr-code:hover { - background: #f1f1f1; + background: $geyser; } + &__input.with-qr { padding-right: 65px; } } + &__to-autocomplete, &__memo-text-area, &__hex-data { @@ -593,27 +654,30 @@ position: relative; height: 54px; width: 100%; - border: 1px solid $alto; + border: 1px solid $geyser; border-radius: 4px; - background-color: $white; - color: $tundora; + background-color: $dark-gray; + color: $white; padding: 10px; font-family: Roboto; font-size: 16px; line-height: 21px; } } + &__amount-max { - color: $curious-blue; + color: $dexon-purple; font-family: Roboto; font-size: 12px; left: 8px; border: none; cursor: pointer; } + &__gas-fee-display { width: 100%; position: relative; + .currency-display--message { padding: 8px 38px 8px 10px; display: flex; @@ -621,57 +685,65 @@ } } + &__sliders-icon-container { display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; - border: 1px solid $curious-blue; + border: 1px solid $dexon-purple; border-radius: 4px; - background-color: $white; + background-color: $dark-gray; position: absolute; right: 15px; top: 14px; cursor: pointer; font-size: 1em; } + &__sliders-icon { - color: $curious-blue; + color: $dexon-purple; } + &__memo-text-area { &__input { padding: 6px 10px; } } + &__footer { height: 92px; width: 100%; display: flex; justify-content: space-evenly; align-items: center; - border-top: 1px solid $alto; + border-top: 1px solid $geyser; background: $white; padding: 0 12px; flex-shrink: 0; } + &__next-btn, &__cancel-btn { width: 163px; margin: 0 4px; } + &__customize-gas { - border: 1px solid #D8D8D8; + border: 1px solid $geyser; border-radius: 4px; - background-color: #FFFFFF; + background-color: $dark-gray; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14); font-family: Roboto; display: flex; flex-flow: column; + @media screen and (max-width: $break-small) { width: 100vw; height: 100vh; } + &__header { height: 52px; border-bottom: 1px solid $alto; @@ -679,13 +751,16 @@ align-items: center; justify-content: space-between; font-size: 22px; + @media screen and (max-width: $break-small) { flex: 0 0 auto; } } + &__title { margin-left: 19.25px; } + &__close::after { content: '\00D7'; font-size: 1.8em; @@ -694,19 +769,23 @@ cursor: pointer; margin-right: 19.25px; } + &__content { display: flex; flex-flow: column nowrap; height: 100%; } + &__body { display: flex; margin-bottom: 24px; + @media screen and (max-width: $break-small) { flex-flow: column; flex: 1 1 auto; } } + &__footer { height: 75px; border-top: 1px solid $alto; @@ -715,15 +794,18 @@ justify-content: space-between; font-size: 22px; position: relative; + @media screen and (max-width: $break-small) { flex: 0 0 auto; } } + &__buttons { display: flex; justify-content: space-between; margin-right: 21.25px; } + &__revert, &__cancel, &__save, @@ -734,21 +816,25 @@ padding: 0 3px; cursor: pointer; } + &__revert { color: $silver-chalice; font-size: 16px; margin-left: 21.25px; } + &__cancel, &__save, &__save__error { width: 85.74px; min-width: initial; } + &__save__error { opacity: 0.5; cursor: auto; } + &__error-message { display: block; position: absolute; @@ -760,16 +846,19 @@ width: 100%; text-align: center; } + &__cancel { margin-right: 10px; } } + &__gas-modal-card { width: 360px; display: flex; flex-flow: column; align-items: flex-start; padding-left: 20px; + &__title { height: 26px; color: $tundora; @@ -778,6 +867,7 @@ line-height: 26px; margin-top: 17px; } + &__copy { height: 38px; width: 314px; @@ -787,9 +877,11 @@ line-height: 19px; margin-top: 17px; } + .customize-gas-input-wrapper { margin-top: 17px; } + .customize-gas-input { height: 54px; width: 315px; @@ -797,6 +889,7 @@ background-color: $white; padding-left: 15px; } + .gas-tooltip-input-arrows { width: 32px; height: 54px; @@ -809,6 +902,7 @@ justify-content: space-around; align-items: center; } + .gas-tooltip-input-arrow-wrapper { align-items: center; align-self: stretch; @@ -817,10 +911,12 @@ flex-grow: 1; justify-content: center; } + input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } + input[type="number"]:hover::-webkit-inner-spin-button { -webkit-appearance: none; display: none; @@ -843,7 +939,7 @@ justify-content: center; height: 24px; width: 24px; - border: 1px solid $curious-blue; + border: 1px solid $dexon-purple; border-radius: 4px; background-color: $dark-gray; position: absolute; @@ -871,5 +967,5 @@ } .sliders-icon { - color: $curious-blue; -}
\ No newline at end of file + color: $dexon-purple; +} diff --git a/ui/app/css/itcss/components/simple-dropdown.scss b/ui/app/css/itcss/components/simple-dropdown.scss index 1a7b2ca2..210071d3 100644 --- a/ui/app/css/itcss/components/simple-dropdown.scss +++ b/ui/app/css/itcss/components/simple-dropdown.scss @@ -3,11 +3,11 @@ display: flex; justify-content: flex-start; align-items: center; - border: 1px solid $alto; + border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; font-size: 16px; - color: $geyser; + color: $dim-gray; cursor: pointer; position: relative; } @@ -30,8 +30,8 @@ border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; - -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); + -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; overflow-y: scroll; left: 0; @@ -40,15 +40,17 @@ .simple-dropdown__option { padding: 10px; + &:hover { background-color: $gallery; } } .simple-dropdown__option--selected { - background-color: $alto; + background-color: $white; + &:hover { - background-color: $alto; + background-color: $white; cursor: default; } } @@ -60,4 +62,4 @@ z-index: 1000; width: 100%; height: 100%; -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/tab-bar.scss b/ui/app/css/itcss/components/tab-bar.scss index 4f307797..e55e404c 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 $alto; + border-bottom: 1px solid $geyser; box-sizing: border-box; font-size: 18px; } .tab-bar__tab--active { - border-color: $black; + border-color: $white; } .tab-bar__grow-tab { diff --git a/ui/app/css/itcss/components/tooltip.scss b/ui/app/css/itcss/components/tooltip.scss index 78325865..484c03cb 100644 --- a/ui/app/css/itcss/components/tooltip.scss +++ b/ui/app/css/itcss/components/tooltip.scss @@ -1,7 +1,659 @@ .metamask-tooltip { - padding: 5px !important; + padding: 5px !important; } // needed for react-tippy // copied from node_modules/react-tippy/dist/tippy.css -.tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}} +.tippy-touch { + cursor: pointer !important; +} + +.tippy-notransition { + transition: none !important; +} + +.tippy-popper { + max-width: 400px; + -webkit-perspective: 800px; + perspective: 800px; + z-index: 9999; + outline: 0; + transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); + pointer-events: none; +} + +.tippy-popper.html-template { + max-width: 96%; + max-width: calc(100% - 20px); +} + +.tippy-popper[x-placement^=top] [x-arrow] { + border-top: 7px solid #ccc; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + bottom: -7px; + margin: 0 9px; +} + +.tippy-popper[x-placement^=top] [x-arrow].arrow-small { + border-top: 5px solid #ccc; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + bottom: -5px; +} + +.tippy-popper[x-placement^=top] [x-arrow].arrow-big { + border-top: 10px solid #ccc; + border-right: 10px solid transparent; + border-left: 10px solid transparent; + bottom: -10px; +} + +.tippy-popper[x-placement^=top] [x-circle] { + -webkit-transform-origin: 0 33%; + transform-origin: 0 33%; +} + +.tippy-popper[x-placement^=top] [x-circle].enter { + -webkit-transform: scale(1) translate(-50%, -55%); + transform: scale(1) translate(-50%, -55%); + opacity: 1; +} + +.tippy-popper[x-placement^=top] [x-circle].leave { + -webkit-transform: scale(0.15) translate(-50%, -50%); + transform: scale(0.15) translate(-50%, -50%); + opacity: 0; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle] { + background-color: #000; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow] { + border-top: 7px solid #000; + border-right: 7px solid transparent; + border-left: 7px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small { + border-top: 5px solid #000; + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big { + border-top: 10px solid #000; + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle] { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow] { + border-top: 7px solid rgba(0, 0, 0, 0.7); + border-right: 7px solid transparent; + border-left: 7px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { + border-top: 5px solid rgba(0, 0, 0, 0.7); + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { + border-top: 10px solid rgba(0, 0, 0, 0.7); + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.tippy-popper[x-placement^=top] [data-animation=perspective] { + -webkit-transform-origin: bottom; + transform-origin: bottom; +} + +.tippy-popper[x-placement^=top] [data-animation=perspective].enter { + opacity: 1; + -webkit-transform: translateY(-10px) rotateX(0); + transform: translateY(-10px) rotateX(0); +} + +.tippy-popper[x-placement^=top] [data-animation=perspective].leave { + opacity: 0; + -webkit-transform: translateY(0) rotateX(90deg); + transform: translateY(0) rotateX(90deg); +} + +.tippy-popper[x-placement^=top] [data-animation=fade].enter { + opacity: 1; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} + +.tippy-popper[x-placement^=top] [data-animation=fade].leave { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} + +.tippy-popper[x-placement^=top] [data-animation=shift].enter { + opacity: 1; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} + +.tippy-popper[x-placement^=top] [data-animation=shift].leave { + opacity: 0; + -webkit-transform: translateY(0); + transform: translateY(0); +} + +.tippy-popper[x-placement^=top] [data-animation=scale].enter { + opacity: 1; + -webkit-transform: translateY(-10px) scale(1); + transform: translateY(-10px) scale(1); +} + +.tippy-popper[x-placement^=top] [data-animation=scale].leave { + opacity: 0; + -webkit-transform: translateY(0) scale(0); + transform: translateY(0) scale(0); +} + +.tippy-popper[x-placement^=bottom] [x-arrow] { + border-bottom: 7px solid #ccc; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + top: -7px; + margin: 0 9px; +} + +.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small { + border-bottom: 5px solid #ccc; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + top: -5px; +} + +.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big { + border-bottom: 10px solid #ccc; + border-right: 10px solid transparent; + border-left: 10px solid transparent; + top: -10px; +} + +.tippy-popper[x-placement^=bottom] [x-circle] { + -webkit-transform-origin: 0 -50%; + transform-origin: 0 -50%; +} + +.tippy-popper[x-placement^=bottom] [x-circle].enter { + -webkit-transform: scale(1) translate(-50%, -45%); + transform: scale(1) translate(-50%, -45%); + opacity: 1; +} + +.tippy-popper[x-placement^=bottom] [x-circle].leave { + -webkit-transform: scale(0.15) translate(-50%, -5%); + transform: scale(0.15) translate(-50%, -5%); + opacity: 0; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle] { + background-color: #000; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow] { + border-bottom: 7px solid #000; + border-right: 7px solid transparent; + border-left: 7px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small { + border-bottom: 5px solid #000; + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big { + border-bottom: 10px solid #000; + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle] { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow] { + border-bottom: 7px solid rgba(0, 0, 0, 0.7); + border-right: 7px solid transparent; + border-left: 7px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { + border-bottom: 5px solid rgba(0, 0, 0, 0.7); + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { + border-bottom: 10px solid rgba(0, 0, 0, 0.7); + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.tippy-popper[x-placement^=bottom] [data-animation=perspective] { + -webkit-transform-origin: top; + transform-origin: top; +} + +.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter { + opacity: 1; + -webkit-transform: translateY(10px) rotateX(0); + transform: translateY(10px) rotateX(0); +} + +.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave { + opacity: 0; + -webkit-transform: translateY(0) rotateX(-90deg); + transform: translateY(0) rotateX(-90deg); +} + +.tippy-popper[x-placement^=bottom] [data-animation=fade].enter { + opacity: 1; + -webkit-transform: translateY(10px); + transform: translateY(10px); +} + +.tippy-popper[x-placement^=bottom] [data-animation=fade].leave { + opacity: 0; + -webkit-transform: translateY(10px); + transform: translateY(10px); +} + +.tippy-popper[x-placement^=bottom] [data-animation=shift].enter { + opacity: 1; + -webkit-transform: translateY(10px); + transform: translateY(10px); +} + +.tippy-popper[x-placement^=bottom] [data-animation=shift].leave { + opacity: 0; + -webkit-transform: translateY(0); + transform: translateY(0); +} + +.tippy-popper[x-placement^=bottom] [data-animation=scale].enter { + opacity: 1; + -webkit-transform: translateY(10px) scale(1); + transform: translateY(10px) scale(1); +} + +.tippy-popper[x-placement^=bottom] [data-animation=scale].leave { + opacity: 0; + -webkit-transform: translateY(0) scale(0); + transform: translateY(0) scale(0); +} + +.tippy-popper[x-placement^=left] [x-arrow] { + border-left: 7px solid #ccc; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + right: -7px; + margin: 6px 0; +} + +.tippy-popper[x-placement^=left] [x-arrow].arrow-small { + border-left: 5px solid #ccc; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + right: -5px; +} + +.tippy-popper[x-placement^=left] [x-arrow].arrow-big { + border-left: 10px solid #ccc; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + right: -10px; +} + +.tippy-popper[x-placement^=left] [x-circle] { + -webkit-transform-origin: 50% 0; + transform-origin: 50% 0; +} + +.tippy-popper[x-placement^=left] [x-circle].enter { + -webkit-transform: scale(1) translate(-50%, -50%); + transform: scale(1) translate(-50%, -50%); + opacity: 1; +} + +.tippy-popper[x-placement^=left] [x-circle].leave { + -webkit-transform: scale(0.15) translate(-50%, -50%); + transform: scale(0.15) translate(-50%, -50%); + opacity: 0; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle] { + background-color: #000; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow] { + border-left: 7px solid #000; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small { + border-left: 5px solid #000; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big { + border-left: 10px solid #000; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle] { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow] { + border-left: 7px solid rgba(0, 0, 0, 0.7); + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { + border-left: 5px solid rgba(0, 0, 0, 0.7); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { + border-left: 10px solid rgba(0, 0, 0, 0.7); + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; +} + +.tippy-popper[x-placement^=left] [data-animation=perspective] { + -webkit-transform-origin: right; + transform-origin: right; +} + +.tippy-popper[x-placement^=left] [data-animation=perspective].enter { + opacity: 1; + -webkit-transform: translateX(-10px) rotateY(0); + transform: translateX(-10px) rotateY(0); +} + +.tippy-popper[x-placement^=left] [data-animation=perspective].leave { + opacity: 0; + -webkit-transform: translateX(0) rotateY(-90deg); + transform: translateX(0) rotateY(-90deg); +} + +.tippy-popper[x-placement^=left] [data-animation=fade].enter { + opacity: 1; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); +} + +.tippy-popper[x-placement^=left] [data-animation=fade].leave { + opacity: 0; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); +} + +.tippy-popper[x-placement^=left] [data-animation=shift].enter { + opacity: 1; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); +} + +.tippy-popper[x-placement^=left] [data-animation=shift].leave { + opacity: 0; + -webkit-transform: translateX(0); + transform: translateX(0); +} + +.tippy-popper[x-placement^=left] [data-animation=scale].enter { + opacity: 1; + -webkit-transform: translateX(-10px) scale(1); + transform: translateX(-10px) scale(1); +} + +.tippy-popper[x-placement^=left] [data-animation=scale].leave { + opacity: 0; + -webkit-transform: translateX(0) scale(0); + transform: translateX(0) scale(0); +} + +.tippy-popper[x-placement^=right] [x-arrow] { + border-right: 7px solid #ccc; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + left: -7px; + margin: 6px 0; +} + +.tippy-popper[x-placement^=right] [x-arrow].arrow-small { + border-right: 5px solid #ccc; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + left: -5px; +} + +.tippy-popper[x-placement^=right] [x-arrow].arrow-big { + border-right: 10px solid #ccc; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + left: -10px; +} + +.tippy-popper[x-placement^=right] [x-circle] { + -webkit-transform-origin: -50% 0; + transform-origin: -50% 0; +} + +.tippy-popper[x-placement^=right] [x-circle].enter { + -webkit-transform: scale(1) translate(-50%, -50%); + transform: scale(1) translate(-50%, -50%); + opacity: 1; +} + +.tippy-popper[x-placement^=right] [x-circle].leave { + -webkit-transform: scale(0.15) translate(-50%, -50%); + transform: scale(0.15) translate(-50%, -50%); + opacity: 0; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle] { + background-color: #000; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow] { + border-right: 7px solid #000; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small { + border-right: 5px solid #000; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big { + border-right: 10px solid #000; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle] { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow] { + border-right: 7px solid rgba(0, 0, 0, 0.7); + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { + border-right: 5px solid rgba(0, 0, 0, 0.7); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { + border-right: 10px solid rgba(0, 0, 0, 0.7); + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; +} + +.tippy-popper[x-placement^=right] [data-animation=perspective] { + -webkit-transform-origin: left; + transform-origin: left; +} + +.tippy-popper[x-placement^=right] [data-animation=perspective].enter { + opacity: 1; + -webkit-transform: translateX(10px) rotateY(0); + transform: translateX(10px) rotateY(0); +} + +.tippy-popper[x-placement^=right] [data-animation=perspective].leave { + opacity: 0; + -webkit-transform: translateX(0) rotateY(90deg); + transform: translateX(0) rotateY(90deg); +} + +.tippy-popper[x-placement^=right] [data-animation=fade].enter { + opacity: 1; + -webkit-transform: translateX(10px); + transform: translateX(10px); +} + +.tippy-popper[x-placement^=right] [data-animation=fade].leave { + opacity: 0; + -webkit-transform: translateX(10px); + transform: translateX(10px); +} + +.tippy-popper[x-placement^=right] [data-animation=shift].enter { + opacity: 1; + -webkit-transform: translateX(10px); + transform: translateX(10px); +} + +.tippy-popper[x-placement^=right] [data-animation=shift].leave { + opacity: 0; + -webkit-transform: translateX(0); + transform: translateX(0); +} + +.tippy-popper[x-placement^=right] [data-animation=scale].enter { + opacity: 1; + -webkit-transform: translateX(10px) scale(1); + transform: translateX(10px) scale(1); +} + +.tippy-popper[x-placement^=right] [data-animation=scale].leave { + opacity: 0; + -webkit-transform: translateX(0) scale(0); + transform: translateX(0) scale(0); +} + +.tippy-popper .tippy-tooltip.transparent-theme { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill] { + background-color: transparent; +} + +.tippy-popper .tippy-tooltip.light-theme { + color: #26323d; + box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.1), 0 4px 80px -8px rgba(0, 20, 60, 0.2); + background-color: #000; +} + +.tippy-popper .tippy-tooltip.light-theme[data-animatefill] { + background-color: transparent; +} + +.tippy-tooltip { + position: relative; + color: #000; + border-radius: 4px; + font-size: .95rem; + padding: .4rem .8rem; + text-align: center; + will-change: transform; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: #ccc; +} + +.tippy-tooltip--small { + padding: .25rem .5rem; + font-size: .8rem; +} + +.tippy-tooltip--big { + padding: .6rem 1.2rem; + font-size: 1.2rem; +} + +.tippy-tooltip[data-animatefill] { + overflow: hidden; + background-color: transparent; +} + +.tippy-tooltip[data-interactive] { + pointer-events: auto; +} + +.tippy-tooltip[data-inertia] { + transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85); +} + +.tippy-tooltip [x-arrow] { + position: absolute; + width: 0; + height: 0; +} + +.tippy-tooltip [x-circle] { + position: absolute; + will-change: transform; + background-color: #ccc; + border-radius: 50%; + width: 130%; + width: calc(110% + 2rem); + left: 50%; + top: 50%; + z-index: -1; + overflow: hidden; + transition: all ease; +} + +.tippy-tooltip [x-circle]:before { + content: ""; + padding-top: 90%; + float: left; +} + +@media (max-width: 450px) { + .tippy-popper { + max-width: 96%; + max-width: calc(100% - 20px); + } +} diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index af1d6739..59f5308f 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -8,7 +8,7 @@ width: 100%; flex: 1 0 auto; padding: 70px 0; - background: $white; + background: $dark-gray; @media screen and (max-width: 575px) { padding: 0; @@ -31,6 +31,10 @@ } } + &__logo { + margin-bottom: 20px; + } + &__copy { font-size: 1em; width: 400px; @@ -46,7 +50,7 @@ &__button { height: 54px; width: 198px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); + border-radius: 4px; color: #fff; font-size: 20px; font-weight: 500; @@ -55,6 +59,6 @@ text-transform: uppercase; margin: 35px 0 14px; transition: 200ms ease-in-out; - background-color: rgba(247, 134, 28, .9); + background-color: rgba(149,74,151, .9); } } diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index a1b02b55..edc1157b 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -2,7 +2,8 @@ Generic */ -@import './reset.scss'; +@import "./reset.scss"; + * { box-sizing: border-box; } @@ -48,6 +49,7 @@ textarea:focus { height: 100%; display: flex; flex-direction: column; + @media screen and (max-width: $break-small) { background-color: $dark-gray; } @@ -61,7 +63,12 @@ a { } a:hover { - color: #df6b0e; + color: #954A97; +} + +input { + color: $white; + background-color: $dark-gray; } input.large-input, @@ -90,22 +97,27 @@ input.form-control { border: 1px solid $alto; border-radius: 3px; width: 100%; + &::-webkit-input-placeholder { font-weight: 100; color: $dusty-gray; } + &::-moz-placeholder { font-weight: 100; color: $dusty-gray; } + &:-ms-input-placeholder { font-weight: 100; color: $dusty-gray; } + &:-moz-placeholder { font-weight: 100; color: $dusty-gray; } + &--error { border: 1px solid $monzo; } @@ -115,4 +127,4 @@ input.form-control { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -}
\ 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 3b5e2411..bb4af1e8 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -28,7 +28,7 @@ $dusty-gray: #777777; $alto: #dedede; $alabaster: #fafafa; $silver-chalice: #aeaeae; -$curious-blue: #2f9ae0; +$dexon-purple: #2f9ae0; $concrete: #f3f3f3; $tundora: #4d4d4d; $nile-blue: #1b344d; @@ -64,6 +64,7 @@ $mischka: #dddee9; $dexon-purple: #954A97; $dark-gray: #222222; $muddy-gray: #303030; +$dim-gray: #9b9b9b; /* Z-Indicies diff --git a/ui/app/keychains/hd/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js index 5ab5d4c3..d4481d9f 100644 --- a/ui/app/keychains/hd/create-vault-complete.js +++ b/ui/app/keychains/hd/create-vault-complete.js @@ -53,7 +53,7 @@ CreateVaultCompleteScreen.prototype.render = function () { textAlign: 'center', }, }, [ - h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'), + h('span.error', 'These 12 words are the only way to restore your DekuSan accounts.\nSave them somewhere safe and secret.'), ]), h('textarea.twelve-word-phrase', { @@ -72,7 +72,7 @@ CreateVaultCompleteScreen.prototype.render = function () { }, 'I\'ve copied it somewhere safe'), h('button.primary', { - onClick: () => exportAsFile(`MetaMask Seed Words`, seed), + onClick: () => exportAsFile(`DekuSan Seed Words`, seed), style: { margin: '10px', fontSize: '0.9em', diff --git a/ui/app/reducers.js b/ui/app/reducers.js index 786af853..ea5b3e97 100644 --- a/ui/app/reducers.js +++ b/ui/app/reducers.js @@ -25,7 +25,7 @@ function rootReducer (state, action) { } // - // MetaMask + // DekuSan // state.metamask = reduceMetamask(state, action) diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 302d1627..3dc60e64 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.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 { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/controllers/network/enums') +const { MAINNET } = require('../../../app/scripts/controllers/network/enums') module.exports = reduceMetamask @@ -47,7 +47,7 @@ function reduceMetamask (state, action) { coinOptions: {}, useBlockie: false, featureFlags: {}, - networkEndpointType: OLD_UI_NETWORK_TYPE, + networkEndpointType: MAINNET, isRevealingSeedWords: false, welcomeScreenSeen: false, currentLocale: '', diff --git a/ui/app/select-app.js b/ui/app/select-app.js index f5f9e33a..ed705811 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -4,15 +4,16 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const { HashRouter } = require('react-router-dom') const App = require('./app') -const OldApp = require('../../old-ui/app/app') -const { getShouldUseNewUi } = require('./selectors') +const { autoAddToBetaUI } = require('./selectors') const { setFeatureFlag } = require('./actions') const I18nProvider = require('./i18n-provider') function mapStateToProps (state) { return { + autoAdd: autoAddToBetaUI(state), + isUnlocked: state.metamask.isUnlocked, isMascara: state.metamask.isMascara, - shouldUseNewUi: getShouldUseNewUi(state), + shouldUseNewUi: true, } } @@ -53,13 +54,13 @@ SelectedApp.prototype.componentWillReceiveProps = function (nextProps) { } SelectedApp.prototype.render = function () { - const { shouldUseNewUi } = this.props - const newUi = h(HashRouter, { + // Code commented out until we begin auto adding users to NewUI + // const { betaUI, isMascara, firstTime } = this.props + // const Selected = betaUI || isMascara || firstTime ? App : OldApp + + return h(HashRouter, { hashType: 'noslash', }, [ - h(I18nProvider, [ - h(App), - ]), + h(I18nProvider, [h(App)]), ]) - return shouldUseNewUi ? newUi : h(OldApp) } diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js index 146661eb..ecd50ae7 100644 --- a/ui/app/welcome-screen.js +++ b/ui/app/welcome-screen.js @@ -44,10 +44,10 @@ class WelcomeScreen extends Component { h('div.welcome-screen__info', [ - h(Mascot, { - animationEventEmitter: this.animationEventEmitter, - width: '225', - height: '225', + h('img.welcome-screen__info__logo', { + src: '/images/dekusan.svg', + width: 160, + height: 160, }), h('div.welcome-screen__info__header', this.context.t('welcome')), diff --git a/ui/example.js b/ui/example.js index 4627c0e9..119a9ea7 100644 --- a/ui/example.js +++ b/ui/example.js @@ -1,6 +1,6 @@ const injectCss = require('inject-css') -const MetaMaskUi = require('./index.js') -const MetaMaskUiCss = require('./css.js') +const DekuSanUi = require('./index.js') +const DekuSanUiCss = require('./css.js') const EventEmitter = require('events').EventEmitter // account management @@ -103,10 +103,10 @@ accountManager._didUpdate = function () { var container = document.getElementById('app-content') -var css = MetaMaskUiCss() +var css = DekuSanUiCss() injectCss(css) -MetaMaskUi({ +DekuSanUi({ container: container, accountManager: accountManager, }) diff --git a/ui/index.html b/ui/index.html index 8c8db1d8..53c594b3 100644 --- a/ui/index.html +++ b/ui/index.html @@ -2,7 +2,7 @@ <html> <head> <meta charset="utf-8"> - <title>Dex San</title> + <title>DekuSan</title> </head> <body> diff --git a/ui/lib/lost-accounts-notice.js b/ui/lib/lost-accounts-notice.js index 948b13db..fad08d4a 100644 --- a/ui/lib/lost-accounts-notice.js +++ b/ui/lib/lost-accounts-notice.js @@ -4,7 +4,7 @@ module.exports = function (lostAccounts) { return { date: new Date().toDateString(), title: 'Account Problem Caught', - body: `MetaMask has fixed a bug where some accounts were previously mis-generated. This was a rare issue, but you were affected! + body: `DekuSan has fixed a bug where some accounts were previously mis-generated. This was a rare issue, but you were affected! We have successfully imported the accounts that were mis-generated, but they will no longer be recovered with your normal seed phrase. |