aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/app.js14
-rw-r--r--ui/app/components/balance-component.js2
-rw-r--r--ui/app/components/modals/account-details-modal.js4
-rw-r--r--ui/app/components/modals/export-private-key-modal.js10
-rw-r--r--ui/app/components/network.js41
-rw-r--r--ui/app/components/pending-tx/confirm-send-ether.js4
-rw-r--r--ui/app/components/pending-tx/confirm-send-token.js4
-rw-r--r--ui/app/components/token-cell.js2
-rw-r--r--ui/app/components/tx-view.js14
-rw-r--r--ui/app/components/wallet-view.js4
-rw-r--r--ui/app/css/itcss/components/buttons.scss38
-rw-r--r--ui/app/css/itcss/components/confirm.scss9
-rw-r--r--ui/app/css/itcss/components/header.scss8
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss45
-rw-r--r--ui/app/css/itcss/components/modal.scss29
-rw-r--r--ui/app/css/itcss/components/network.scss42
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss48
-rw-r--r--ui/app/css/itcss/components/send.scss34
-rw-r--r--ui/app/css/itcss/components/token-list.scss5
-rw-r--r--ui/app/css/itcss/components/transaction-list.scss6
-rw-r--r--ui/app/css/itcss/components/wallet-balance.scss19
-rw-r--r--ui/app/css/itcss/settings/variables.scss2
-rw-r--r--ui/app/send-v2.js6
23 files changed, 156 insertions, 234 deletions
diff --git a/ui/app/app.js b/ui/app/app.js
index 3fca8ccc1..e24ab7109 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -257,19 +257,13 @@ App.prototype.renderAppBar = function () {
}, [
// mini logo
h('img.metafox-icon', {
- height: 29,
- width: 29,
- src: '/images/icon-128.png',
+ height: 42,
+ width: 42,
+ src: '/images/metamask-fox.svg',
}),
// metamask name
- h('h1', {
- style: {
- position: 'relative',
- paddingLeft: '9px',
- color: '#5B5D67',
- },
- }, 'MetaMask'),
+ h('h1', 'MetaMask'),
]),
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index 50007ce14..d591ab455 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -40,7 +40,7 @@ BalanceComponent.prototype.render = function () {
// style: {},
// }),
h(Identicon, {
- diameter: 45,
+ diameter: 50,
address: token && token.address,
network,
}),
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 4bf671834..c1f7a3236 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -62,12 +62,12 @@ AccountDetailsModal.prototype.render = function () {
h('div.account-modal-divider'),
- h('button.btn-clear', {
+ h('button.btn-clear.account-modal__button', {
onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
}, 'View account on Etherscan'),
// Holding on redesign for Export Private Key functionality
- h('button.btn-clear', {
+ h('button.btn-clear.account-modal__button', {
onClick: () => showExportPrivateKeyModal(),
}, 'Export private key'),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 193755df5..422f23f44 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -79,11 +79,15 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
return h('div.export-private-key-buttons', {}, [
- !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'),
+ !privateKey && this.renderButton(
+ 'btn-cancel export-private-key__button export-private-key__button--cancel',
+ () => hideModal(),
+ 'Cancel'
+ ),
(privateKey
- ? this.renderButton('btn-clear', () => hideModal(), 'Done')
- : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show')
+ ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done')
+ : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm')
),
])
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 5a8d0763d..3f147159b 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -39,7 +39,6 @@ Network.prototype.render = function () {
},
src: 'images/loading.svg',
}),
- h('i.fa.fa-caret-down.network-caret'),
])
} else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network'
@@ -85,12 +84,8 @@ Network.prototype.render = function () {
backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2',
}),
- h('.network-name', {
- style: {
- color: '#039396',
- }},
- 'Main Network'),
- h('i.fa.fa-caret-down.fa-lg.network-caret'),
+ h('.network-name', 'Main Network'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'ropsten-test-network':
return h('.network-indicator', [
@@ -98,12 +93,8 @@ Network.prototype.render = function () {
backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50',
}),
- h('.network-name', {
- style: {
- color: '#ff6666',
- }},
- 'Ropsten Test Net'),
- h('i.fa.fa-caret-down.fa-lg.network-caret'),
+ h('.network-name', 'Ropsten Test Net'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'kovan-test-network':
return h('.network-indicator', [
@@ -111,12 +102,8 @@ Network.prototype.render = function () {
backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3',
}),
- h('.network-name', {
- style: {
- color: '#690496',
- }},
- 'Kovan Test Net'),
- h('i.fa.fa-caret-down.fa-lg.network-caret'),
+ h('.network-name', 'Kovan Test Net'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'rinkeby-test-network':
return h('.network-indicator', [
@@ -124,12 +111,8 @@ Network.prototype.render = function () {
backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e',
}),
- h('.network-name', {
- style: {
- color: '#e7a218',
- }},
- 'Rinkeby Test Net'),
- h('i.fa.fa-caret-down.fa-lg.network-caret'),
+ h('.network-name', 'Rinkeby Test Net'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
default:
return h('.network-indicator', [
@@ -140,12 +123,8 @@ Network.prototype.render = function () {
},
}),
- h('.network-name', {
- style: {
- color: '#AEAEAE',
- }},
- 'Private Network'),
- h('i.fa.fa-caret-down.fa-lg.network-caret'),
+ h('.network-name', 'Private Network'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
}
})(),
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 566224864..652300c94 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -219,7 +219,7 @@ ConfirmSendEther.prototype.render = function () {
// Main Send token Card
h('div.confirm-screen-wrapper.flex-column.flex-grow', [
h('h3.flex-center.confirm-screen-header', [
- h('button.confirm-screen-back-button', {
+ h('button.btn-clear.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta),
}, 'EDIT'),
h('div.confirm-screen-title', 'Confirm Transaction'),
@@ -422,7 +422,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
ConfirmSendEther.prototype.cancel = function (event, txMeta) {
event.preventDefault()
const { cancelTransaction } = this.props
-
+
cancelTransaction(txMeta)
}
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index aa4f29fb0..ad489c3e9 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -314,7 +314,7 @@ ConfirmSendToken.prototype.render = function () {
// Main Send token Card
h('div.confirm-screen-wrapper.flex-column.flex-grow', [
h('h3.flex-center.confirm-screen-header', [
- h('button.confirm-screen-back-button', {
+ h('button.btn-clear.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta),
}, 'EDIT'),
h('div.confirm-screen-title', 'Confirm Transaction'),
@@ -415,7 +415,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
ConfirmSendToken.prototype.cancel = function (event, txMeta) {
event.preventDefault()
const { cancelTransaction } = this.props
-
+
cancelTransaction(txMeta)
}
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 677b66830..59552f4a0 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -106,7 +106,7 @@ TokenCell.prototype.render = function () {
h(Identicon, {
className: 'token-list-item__identicon',
- diameter: 45,
+ diameter: 50,
address,
network,
}),
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 949d91f6f..0148b32a5 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -68,18 +68,14 @@ TxView.prototype.renderButtons = function () {
return !selectedToken
? (
h('div.flex-row.flex-center.hero-balance-buttons', [
- h('button.btn-clear', {
- style: {
- textAlign: 'center',
- },
+ h('button.btn-clear.hero-balance-button', {
onClick: () => showModal({
name: 'DEPOSIT_ETHER',
}),
}, 'DEPOSIT'),
- h('button.btn-clear', {
+ h('button.btn-clear.hero-balance-button', {
style: {
- textAlign: 'center',
marginLeft: '0.8em',
},
onClick: showSendPage,
@@ -88,11 +84,7 @@ TxView.prototype.renderButtons = function () {
)
: (
h('div.flex-row.flex-center.hero-balance-buttons', [
- h('button.btn-clear', {
- style: {
- textAlign: 'center',
- marginLeft: '0.8em',
- },
+ h('button.btn-clear.hero-balance-button', {
onClick: showSendTokenPage,
}, 'SEND'),
])
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 3cb7a8b76..b1ef83cee 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -130,7 +130,7 @@ WalletView.prototype.render = function () {
selectedIdentity.name,
]),
- h('button.wallet-view__details-button', 'DETAILS'),
+ h('button.btn-clear.wallet-view__details-button', 'DETAILS'),
]),
]),
@@ -151,7 +151,7 @@ WalletView.prototype.render = function () {
h(TokenList),
- h('button.wallet-view__add-token-button', {
+ h('button.btn-clear.wallet-view__add-token-button', {
onClick: () => {
showAddTokenPage()
hideSidebar()
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 8ba084b4a..1450b71cc 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -6,9 +6,43 @@
background-color: #02c9b1; // TODO: reusable color in colors.css
}
-button.btn-clear {
+.btn-clear {
background: $white;
- border: 1px solid;
+ text-align: center;
+ padding: .8rem 1rem;
+ color: $curious-blue;
+ border: 2px solid $spindle;
+ border-radius: 4px;
+ font-size: .85rem;
+ font-weight: 400;
+ transition: border-color .3s ease;
+
+ &:hover {
+ border-color: $curious-blue;
+ }
+
+ &--disabled,
+ &[disabled] {
+ cursor: auto;
+ opacity: .5;
+ pointer-events: none;
+ }
+}
+
+.btn-cancel {
+ background: $white;
+ text-align: center;
+ padding: .9rem 1rem;
+ color: $scorpion;
+ border: 2px solid $dusty-gray;
+ border-radius: 4px;
+ font-size: .85rem;
+ font-weight: 400;
+ transition: border-color .3s ease;
+
+ &:hover {
+ border-color: $scorpion;
+ }
}
// No longer used in flat design, remove when modal buttons done
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 4a8232e39..e75a827f9 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -102,15 +102,10 @@
.confirm-screen-back-button {
background: transparent;
- border: 1px solid $curious-blue;
left: 24px;
position: absolute;
- text-align: center;
- color: $curious-blue;
- padding: 6px 13px 7px 12px;
- border-radius: 2px;
- height: 30px;
- width: 54px;
+ padding: 6px 12px;
+ font-size: .7rem;
@media screen and (max-width: $break-small) {
margin-right: 12px;
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index e27444084..ac2cecf7e 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -58,7 +58,7 @@
}
@media screen and (min-width: 1281px) {
- width: 65vw;
+ width: 62vw;
}
}
@@ -66,8 +66,10 @@
font-family: Roboto;
text-transform: uppercase;
font-weight: 400;
- color: #22232c; // $shark
- line-height: 29px;
+ font-size: 1.1rem;
+ position: relative;
+ padding-left: 15px;
+ color: #5b5d67;
@media screen and (max-width: 575px) {
display: none;
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index bdbdd2645..99fd2a96d 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -16,7 +16,7 @@
flex-direction: row;
justify-content: flex-start;
align-items: center;
- margin: 2.8em 2.37em .8em;
+ margin: 2.3em 2.37em .8em;
}
.balance-container {
@@ -37,13 +37,16 @@
}
.balance-display {
+ .token-amount {
+ color: $black;
+ }
@media screen and (max-width: $break-small) {
text-align: center;
.token-amount {
- font-size: 175%;
- margin-top: 12.5%;
+ font-size: 1.75rem;
+ margin-top: 1rem;
}
.fiat-amount {
@@ -54,12 +57,12 @@
}
@media screen and (min-width: $break-large) {
- margin-left: 3%;
+ margin-left: .8em;
justify-content: flex-start;
align-items: flex-start;
.token-amount {
- font-size: 135%;
+ font-size: 1.5rem;
}
.fiat-amount {
@@ -69,13 +72,6 @@
}
}
- .balance-icon {
- border-radius: 25px;
- width: 45px;
- height: 45px;
- border: 1px solid $alto;
- }
-
.hero-balance-buttons {
@media screen and (max-width: $break-small) {
@@ -89,26 +85,9 @@
flex-grow: 2;
justify-content: flex-end;
}
-
- button.btn-clear {
- background: $white;
- border: 1px solid;
- border-radius: 2px;
- font-size: 12px;
-
- @media screen and (max-width: $break-small) {
- border-color: $curious-blue;
- color: $curious-blue;
- height: 36px;
- }
-
- @media screen and (min-width: $break-large) {
- border-color: $curious-blue;
- color: $curious-blue;
- padding: 0;
- width: 85px;
- height: 34px;
- }
- }
}
}
+
+.hero-balance-button {
+ width: 6rem;
+}
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 2431e2f63..7a2ec35a4 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -258,19 +258,10 @@
width: 286px;
}
- .btn-clear {
- min-height: 28px;
- font-size: 14px;
- border-color: $curious-blue;
- color: $curious-blue;
- border-radius: 2px;
- flex-basis: 100%;
- width: 75%;
+ .account-modal__button {
margin-top: 17px;
padding: 10px 22px;
- height: 44px;
width: 235px;
- font-family: Roboto;
}
}
@@ -346,17 +337,17 @@
display: flex;
flex-direction: row;
justify-content: center;
+}
- .btn-clear {
- width: 141px;
- height: 54px;
- }
+.export-private-key__button {
+ margin-top: 17px;
+ padding: 10px 22px;
+ width: 141px;
+ height: 54px;
+}
- .btn-cancel {
- margin-right: 15px;
- border-color: $dusty-gray;
- color: $scorpion;
- }
+.export-private-key__button--cancel {
+ margin-right: 15px;
}
.private-key-password-display-wrapper {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 98dbdffb2..d9a39b8d5 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -8,41 +8,25 @@
}
.network-component.pointer {
- border: 1px solid $shark;
+ border: 2px solid $silver;
border-radius: 82px;
- padding: 6px;
+ padding: 3px;
flex: 0 0 auto;
- &.ethereum-network {
- border-color: rgb(3, 135, 137);
-
- .menu-icon-circle div {
- background-color: rgba(3, 135, 137, .7) !important;
- }
+ &.ethereum-network .menu-icon-circle div {
+ background-color: rgba(3, 135, 137, .7) !important;
}
- &.ropsten-test-network {
- border-color: rgb(233, 21, 80);
-
- .menu-icon-circle div {
- background-color: rgba(233, 21, 80, .7) !important;
- }
+ &.ropsten-test-network .menu-icon-circle div {
+ background-color: rgba(233, 21, 80, .7) !important;
}
- &.kovan-test-network {
- border-color: rgb(105, 4, 150);
-
- .menu-icon-circle div {
- background-color: rgba(105, 4, 150, .7) !important;
- }
+ &.kovan-test-network .menu-icon-circle div {
+ background-color: rgba(105, 4, 150, .7) !important;
}
- &.rinkeby-test-network {
- border-color: rgb(235, 179, 63);
-
- .menu-icon-circle div {
- background-color: rgba(235, 179, 63, .7) !important;
- }
+ &.rinkeby-test-network .menu-icon-circle div {
+ background-color: rgba(235, 179, 63, .7) !important;
}
}
@@ -66,11 +50,12 @@
}
.network-name {
- line-height: 15px;
padding: 0 4px;
font-family: Roboto;
font-size: 12px;
flex: 1 0 auto;
+ color: $tundora;
+ font-weight: 500;
}
.network-droppo {
@@ -167,3 +152,6 @@
line-height: 18px;
}
+.network-caret {
+ margin: 0 8px 2px;
+}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 61dfbd176..af1a6974c 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -4,7 +4,7 @@
// Component Colors
$tx-view-bg: $white;
-$wallet-view-bg: $wild-sand;
+$wallet-view-bg: $alabaster;
// Main container
.main-container {
@@ -47,7 +47,7 @@ $wallet-view-bg: $wild-sand;
.wallet-view {
display: flex;
flex-direction: column;
- flex: 33.5 1 33.5%;
+ flex: 32 1 32%;
width: 0;
background: $wallet-view-bg;
z-index: 200;
@@ -69,22 +69,18 @@ $wallet-view-bg: $wild-sand;
}
&__keyring-label {
- height: 40px;
+ height: 50px;
color: $dusty-gray;
font-family: Roboto;
font-size: 10px;
- line-height: 40px;
text-align: right;
- padding: 0 20px;
+ padding: 17px 20px 0;
+ box-sizing: border-box;
}
&__details-button {
- color: $curious-blue;
font-size: 10px;
- line-height: 13px;
- text-align: center;
- border: 1px solid $curious-blue;
- border-radius: 10.5px;
+ border-radius: 17px;
background-color: transparent;
margin: 0 auto;
padding: 4px 12px;
@@ -121,16 +117,14 @@ $wallet-view-bg: $wild-sand;
&__add-token-button {
flex: 0 0 auto;
- color: $dusty-gray;
- font-size: 14px;
- line-height: 19px;
- text-align: center;
margin: 36px auto;
- border: 1px solid $dusty-gray;
- border-radius: 2px;
- font-weight: 300;
background: none;
- padding: 9px 30px;
+ padding: .7rem 2rem;
+ transition: border-color .3s ease;
+
+ &:hover {
+ border-color: $curious-blue;
+ }
}
}
@@ -199,7 +193,7 @@ $wallet-view-bg: $wild-sand;
.main-container {
// margin-top: 6.9vh;
- width: 85%;
+ width: 85vw;
height: 90vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
}
@@ -208,7 +202,7 @@ $wallet-view-bg: $wild-sand;
@media screen and (min-width: 769px) {
.main-container {
// margin-top: 6.9vh;
- width: 80%;
+ width: 80vw;
height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
}
@@ -217,7 +211,7 @@ $wallet-view-bg: $wild-sand;
@media screen and (min-width: 1281px) {
.main-container {
// margin-top: 6.9vh;
- width: 65%;
+ width: 62vw;
height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
}
@@ -239,14 +233,6 @@ $wallet-view-bg: $wild-sand;
overflow-y: auto;
background-color: $white;
}
-
- button.btn-clear {
- width: 93px;
- height: 50px;
- font-size: .7em;
- background: $white;
- border: 1px solid;
- }
}
// wallet view
@@ -254,9 +240,9 @@ $wallet-view-bg: $wild-sand;
font-size: 24px;
font-weight: 300;
line-height: 20px;
- color: $scorpion;
+ color: $black;
margin-top: 8px;
- margin-bottom: 24px;
+ margin-bottom: .9rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 2bd192788..beb3e519c 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -526,8 +526,9 @@
}
&__form {
- margin: 13px 0;
+ padding: 13px 0;
width: 100%;
+ overflow-y: auto;
@media screen and (max-width: $break-small) {
padding: 13px 0;
@@ -587,7 +588,7 @@
width: 100%;
height: 100%;
}
-
+
&__list {
z-index: 1050;
position: absolute;
@@ -677,40 +678,15 @@
border-top: 1px solid $alto;
background: $white;
padding: 0 12px;
+ flex-shrink: 0;
}
&__next-btn,
- &__cancel-btn,
- &__next-btn__disabled {
+ &__cancel-btn {
width: 163px;
- text-align: center;
- height: 55px;
- border-radius: 2px;
- background-color: $white;
- font-family: Roboto;
- font-size: 16px;
- font-weight: 300;
- line-height: 21px;
- border: 1px solid;
margin: 0 4px;
}
- &__next-btn,
- &__next-btn__disabled {
- color: $curious-blue;
- border-color: $curious-blue;
- }
-
- &__next-btn__disabled {
- opacity: .5;
- cursor: auto;
- }
-
- &__cancel-btn {
- color: $dusty-gray;
- border-color: $dusty-gray;
- }
-
&__customize-gas {
border: 1px solid #D8D8D8;
border-radius: 4px;
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index d4add71b1..bdd26099a 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -12,7 +12,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
position: relative;
&__token-balance {
- font-size: 130%;
+ font-size: 1.5rem;
@media #{$wallet-balance-breakpoint-range} {
font-size: 105%;
@@ -34,7 +34,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
&--active {
- background-color: rgba($wallet-balance-bg, 1);
+ background-color: $manatee;
+ color: $white;
}
&__identicon {
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index fb09fd800..19dadc69a 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -32,13 +32,9 @@
}
@media screen and (min-width: $break-large) {
- .tx-list-header-wrapper {
- flex: 0 0 55px;
- }
-
.tx-list-header {
font-size: 16px;
- margin: 1.5em 2.37em;
+ margin: 1.1em 2.37em .8em;
}
.tx-list-container::-webkit-scrollbar {
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index 64b291b89..293771550 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -8,7 +8,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
background: rgba($wallet-balance-bg, 0);
&--active {
- background: rgba($wallet-balance-bg, 1);
+ background: $manatee;
+ color: $white;
}
}
@@ -41,7 +42,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
align-items: flex-start;
.token-amount {
- font-size: 135%;
+ font-size: 1.5rem;
}
.fiat-amount {
@@ -61,11 +62,13 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
}
}
+}
- .balance-icon {
- border-radius: 25px;
- width: 45px;
- height: 45px;
- border: 1px solid $alto;
- }
+.balance-icon {
+ border-radius: 25px;
+ width: 50px;
+ height: 50px;
+ border: 1px solid $alto;
+ padding: 5px;
+ background: $white;
}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index edc376c17..4c0972527 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -42,6 +42,8 @@ $malibu-blue: #7ac9fd;
$athens-grey: #e9edf0;
$jaffa: #f28930;
$geyser: #d2d8dd;
+$manatee: #93949d;
+$spindle: #c7ddec;
$mid-gray: #5b5d67;
$cape-cod: #38393a;
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 7c9b6dbc6..ca73fa5ea 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -516,16 +516,16 @@ SendTransactionScreen.prototype.renderFooter = function () {
} = this.props
const noErrors = !amountError && toError === null
- const errorClass = noErrors ? '' : '__disabled'
return h('div.send-v2__footer', [
- h('button.send-v2__cancel-btn', {
+ h('button.btn-cancel.send-v2__cancel-btn', {
onClick: () => {
clearSend()
goHome()
},
}, 'Cancel'),
- h(`button.send-v2__next-btn${errorClass}`, {
+ h('button.btn-clear.send-v2__next-btn', {
+ disabled: !noErrors,
onClick: event => this.onSubmit(event),
}, 'Next'),
])