aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@users.noreply.github.com>2018-11-20 14:46:41 +0800
committerDan Finlay <542863+danfinlay@users.noreply.github.com>2018-11-20 14:46:41 +0800
commita7b3750a3efd4dd521baf2aae4dab4c630aba418 (patch)
treeeefebfd219fe75fb5b37020f3a2f2d863f338aad
parent4c87c05a02d5bf5634234a74910e5d3e559dd413 (diff)
downloadtangerine-wallet-browser-a7b3750a3efd4dd521baf2aae4dab4c630aba418.tar
tangerine-wallet-browser-a7b3750a3efd4dd521baf2aae4dab4c630aba418.tar.gz
tangerine-wallet-browser-a7b3750a3efd4dd521baf2aae4dab4c630aba418.tar.bz2
tangerine-wallet-browser-a7b3750a3efd4dd521baf2aae4dab4c630aba418.tar.lz
tangerine-wallet-browser-a7b3750a3efd4dd521baf2aae4dab4c630aba418.tar.xz
tangerine-wallet-browser-a7b3750a3efd4dd521baf2aae4dab4c630aba418.tar.zst
tangerine-wallet-browser-a7b3750a3efd4dd521baf2aae4dab4c630aba418.zip
Fix button styling for Create Account Connect (#5787)
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/account-list.js2
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/connect-screen.js16
-rw-r--r--ui/app/css/itcss/components/new-account.scss42
3 files changed, 13 insertions, 47 deletions
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
index 2767b2e1f..c63de234a 100644
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -152,7 +152,7 @@ class AccountList extends Component {
}, [this.context.t('cancel')]),
h(Button, {
- type: 'primary',
+ type: 'confirm',
large: true,
className: 'new-account-connect-form__button unlock',
disabled,
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 d3abf3119..49a5610c1 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
@@ -45,11 +45,13 @@ class ConnectScreen extends Component {
this.renderConnectToLedgerButton(),
this.renderConnectToTrezorButton(),
]),
- h(
- `button.hw-connect__connect-btn${!this.state.selectedDevice ? '.disabled' : ''}`,
- { onClick: this.connect },
- this.context.t('connect')
- ),
+ h(Button, {
+ type: 'confirm',
+ large: true,
+ className: 'hw-connect__connect-btn',
+ onClick: this.connect,
+ disabled: !this.state.selectedDevice,
+ }, this.context.t('connect')),
])
)
}
@@ -67,9 +69,7 @@ class ConnectScreen extends Component {
onClick: () => global.platform.openWindow({
url: 'https://google.com/chrome',
}),
- },
- this.context.t('downloadGoogleChrome')
- ),
+ }, this.context.t('downloadGoogleChrome')),
])
)
}
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index e4c7a4e0d..5548025e0 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -3,6 +3,7 @@
background-color: #FFFFFF;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
z-index: 25;
+ height: 100%;
&__header {
display: flex;
@@ -186,22 +187,8 @@
}
&__connect-btn {
- background-color: #259De5;
- color: #fff;
- border: none;
width: 315px;
- min-height: 54px;
- font-weight: 300;
- font-size: 14px;
- margin-bottom: 20px;
- margin-top: 20px;
- border-radius: 5px;
- display: flex;
- flex: 1;
- margin-left: 20px;
- margin-right: 20px;
- justify-content: center;
- text-transform: uppercase;
+ margin: 20px;
}
&__connect-btn.disabled {
@@ -489,29 +476,8 @@
justify-content: space-between;
}
- &__button {
- width: 150px;
- min-width: initial;
- }
-
- .btn-primary {
- background-color: #259DE5;
- color: #FFFFFF;
- border: none;
- width: 100%;
- min-height: 54px;
- font-weight: 300;
- font-size: 14px;
- margin-bottom: 20px
- }
-
- &__button.unlock {
- width: 50%;
- }
-
- &__button.btn-primary--disabled {
- cursor: not-allowed;
- opacity: .5;
+ &__button:not(:last-child) {
+ margin-right: 16px;
}
}