diff options
author | Chi Kei Chan <chikeichan@gmail.com> | 2019-04-17 03:35:22 +0800 |
---|---|---|
committer | Dan J Miller <danjm.com@gmail.com> | 2019-04-17 03:35:22 +0800 |
commit | 92c03bdff2281b5901151ad0840b83e40dad73bc (patch) | |
tree | bec5a94c8dd191269d927523b6495e5fe37e6235 /ui/app/pages | |
parent | fb22fb12cafec238a2143df6e94218c890e4ba4e (diff) | |
download | tangerine-wallet-browser-92c03bdff2281b5901151ad0840b83e40dad73bc.tar.gz tangerine-wallet-browser-92c03bdff2281b5901151ad0840b83e40dad73bc.tar.zst tangerine-wallet-browser-92c03bdff2281b5901151ad0840b83e40dad73bc.zip |
Update buttons & colors to match design system (#6446)
* Refactoring button styles
* renaming buttons
* Add Link and Button styles
* Update new btn styles and storybook
* Fix tests
* Change font weight; Update storybook
* Fix linter
Diffstat (limited to 'ui/app/pages')
22 files changed, 27 insertions, 44 deletions
diff --git a/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss index cc495dfb0..a363c77c5 100644 --- a/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss +++ b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss @@ -18,6 +18,7 @@ } &__link { - color: $curious-blue; + @extend %link; + margin-top: .5rem; } } diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js index 7edb8f541..9a118a815 100644 --- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js +++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js @@ -103,7 +103,7 @@ export default class ConfirmAddSuggestedToken extends Component { { this.context.t('cancel') } </Button> <Button - type="primary" + type="secondary" large className="page-container__footer-button" onClick={() => { diff --git a/ui/app/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/pages/confirm-add-token/confirm-add-token.component.js index c0ec624ac..f0a19e8d9 100644 --- a/ui/app/pages/confirm-add-token/confirm-add-token.component.js +++ b/ui/app/pages/confirm-add-token/confirm-add-token.component.js @@ -96,7 +96,7 @@ export default class ConfirmAddToken extends Component { { this.context.t('back') } </Button> <Button - type="primary" + type="secondary" large className="page-container__footer-button" onClick={() => { diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js index 617fb8833..a521c7eaf 100644 --- a/ui/app/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/pages/create-account/connect-hardware/account-list.js @@ -152,7 +152,7 @@ class AccountList extends Component { }, [this.context.t('cancel')]), h(Button, { - type: 'confirm', + type: 'primary', large: true, className: 'new-account-connect-form__button unlock', disabled, diff --git a/ui/app/pages/create-account/connect-hardware/connect-screen.js b/ui/app/pages/create-account/connect-hardware/connect-screen.js index 7e9dee970..f5a83e6cf 100644 --- a/ui/app/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/pages/create-account/connect-hardware/connect-screen.js @@ -46,7 +46,7 @@ class ConnectScreen extends Component { this.renderConnectToTrezorButton(), ]), h(Button, { - type: 'confirm', + type: 'primary', large: true, className: 'hw-connect__connect-btn', onClick: this.connect, diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js index 17bef763c..ad430ba58 100644 --- a/ui/app/pages/create-account/import-account/json.js +++ b/ui/app/pages/create-account/import-account/json.js @@ -61,7 +61,7 @@ class JsonImportSubview extends Component { }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: () => this.createNewKeychain(), diff --git a/ui/app/pages/create-account/import-account/private-key.js b/ui/app/pages/create-account/import-account/private-key.js index 450614e87..0cdf25ce9 100644 --- a/ui/app/pages/create-account/import-account/private-key.js +++ b/ui/app/pages/create-account/import-account/private-key.js @@ -75,7 +75,7 @@ PrivateKeyImportView.prototype.render = function () { }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: () => this.createNewKeychain(), diff --git a/ui/app/pages/create-account/new-account.js b/ui/app/pages/create-account/new-account.js index 316fbe6f1..d19e6bc38 100644 --- a/ui/app/pages/create-account/new-account.js +++ b/ui/app/pages/create-account/new-account.js @@ -47,7 +47,7 @@ class NewAccountCreateForm extends Component { }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: () => { diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 96ff11eaf..5092d277e 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -261,7 +261,7 @@ export default class ImportWithSeedPhrase extends PureComponent { </span> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" disabled={!this.isValid() || !termsChecked} onClick={this.handleImport} diff --git a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js index c040cff88..de073af2f 100644 --- a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -211,7 +211,7 @@ export default class NewAccount extends PureComponent { </span> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" disabled={!this.isValid() || !termsChecked} onClick={this.handleCreate} diff --git a/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js index 3434d117a..590cf0303 100644 --- a/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js +++ b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js @@ -34,7 +34,7 @@ export default class UniqueImageScreen extends PureComponent { { t('protectYourKeysMessage2') } </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={() => { this.context.metricsEvent({ diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js index c4292331b..83b0e7fc6 100644 --- a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -71,7 +71,7 @@ export default class EndOfFlowScreen extends PureComponent { </a>. </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={async () => { await completeOnboarding() diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index 59b4f73a6..f3bfc3171 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -142,7 +142,7 @@ export default class ConfirmSeedPhrase extends PureComponent { } </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleSubmit} disabled={!this.isValid()} diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js index ee352d74e..4e9948a0e 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -130,7 +130,7 @@ export default class RevealSeedPhrase extends PureComponent { </div> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleNext} disabled={!isShowingSeedPhrase} diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js index b25a15514..5af29a505 100644 --- a/ui/app/pages/first-time-flow/select-action/select-action.component.js +++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js @@ -95,7 +95,7 @@ export default class SelectAction extends PureComponent { </div> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleCreate} > diff --git a/ui/app/pages/first-time-flow/welcome/welcome.component.js b/ui/app/pages/first-time-flow/welcome/welcome.component.js index 3b8d6eb17..c720d2572 100644 --- a/ui/app/pages/first-time-flow/welcome/welcome.component.js +++ b/ui/app/pages/first-time-flow/welcome/welcome.component.js @@ -56,7 +56,7 @@ export default class Welcome extends PureComponent { <div>{ t('happyToSeeYou') }</div> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleContinue} > diff --git a/ui/app/pages/keychains/reveal-seed.js b/ui/app/pages/keychains/reveal-seed.js index edc9db5a0..e83e3fd98 100644 --- a/ui/app/pages/keychains/reveal-seed.js +++ b/ui/app/pages/keychains/reveal-seed.js @@ -116,7 +116,7 @@ class RevealSeedPage extends Component { onClick: () => this.props.history.push(DEFAULT_ROUTE), }, this.context.t('cancel')), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'page-container__footer-button', onClick: event => this.handleSubmit(event), diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js index 0938ad103..00a514534 100644 --- a/ui/app/pages/mobile-sync/index.js +++ b/ui/app/pages/mobile-sync/index.js @@ -315,7 +315,7 @@ class MobileSyncPage extends Component { }, this.context.t('cancel')), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: event => this.handleSubmit(event), diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js index d1cad1746..14b9daae6 100644 --- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js @@ -189,7 +189,7 @@ export default class AdvancedTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="primary" + type="secondary" large onClick={event => { event.preventDefault() @@ -219,7 +219,7 @@ export default class AdvancedTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="primary" + type="secondary" large onClick={() => { window.logStateString((err, result) => { @@ -251,7 +251,7 @@ export default class AdvancedTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="secondary" + type="warning" large className="settings-tab__button--orange" onClick={event => { diff --git a/ui/app/pages/settings/info-tab/index.scss b/ui/app/pages/settings/info-tab/index.scss index 43ad6f652..9cc7e21b2 100644 --- a/ui/app/pages/settings/info-tab/index.scss +++ b/ui/app/pages/settings/info-tab/index.scss @@ -30,7 +30,7 @@ } &__link-text { - color: $curious-blue; + @extend %link; } &__version-number { diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js index 233561115..01a28bac7 100644 --- a/ui/app/pages/settings/security-tab/security-tab.component.js +++ b/ui/app/pages/settings/security-tab/security-tab.component.js @@ -39,7 +39,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="primary" + type="secondary" large onClick={() => { window.logStateString((err, result) => { @@ -73,7 +73,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="secondary" + type="warning" large className="settings-tab__button--orange" onClick={event => { @@ -101,7 +101,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="secondary" + type="danger" large onClick={event => { event.preventDefault() diff --git a/ui/app/pages/settings/settings-tab/index.scss b/ui/app/pages/settings/settings-tab/index.scss index ef32b0e4c..c1750af2c 100644 --- a/ui/app/pages/settings/settings-tab/index.scss +++ b/ui/app/pages/settings/settings-tab/index.scss @@ -6,19 +6,15 @@ } &__advanced-link { - color: $curious-blue; + @extend %small-link; padding-left: 5px; } &__rpc-save-button { align-self: flex-end; padding: 5px; - text-transform: uppercase; - color: $dusty-gray; cursor: pointer; width: 25%; - min-width: 80px; - height: 33px; } &__button--red { @@ -35,20 +31,6 @@ } } - &__button--orange { - border-color: lighten($ecstasy, 20%); - color: $ecstasy; - - &:active { - background: lighten($ecstasy, 40%); - border-color: $ecstasy; - } - - &:hover { - border-color: $ecstasy; - } - } - &__radio-buttons { display: flex; align-items: center; |