m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-24 11:01:41 +01:00
Code

Merge pull request #2928 from alextsg/cb-388

Browse Source 
[NewUI] Update main view styling
This commit is contained in:
Chi Kei Chan 2018-01-12 13:41:46 -08:00 committed by GitHub
commit 89a8267fe7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 286 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
app/images/metamask-fox.svg Normal file
View File

@ -0,0 +1,128 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 318.6 318.6"
style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#161616;stroke:#161616;}
.st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;}
.st2{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;}
.st3{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;}
.st4{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;}
.st5{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;}
.st6{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;}
.st7{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;}
.st8{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;}
.st9{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;}
.st10{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;}
</style>
<polygon class="st0" points="277.3,145.6 272.3,142 280.3,134.7 274.2,129.9 282.2,123.8 276.9,119.8 285.3,79 272.7,41.1
191.6,71.4 124.1,71.4 43,41.1 30.4,79 38.9,119.8 33.5,123.8 41.5,129.9 35.4,134.7 43.4,142 38.4,145.6 49.9,159.1 32.5,213.3
48.6,268.6 105.3,253 116.3,262 138.7,277.5 177,277.5 199.4,262 210.4,253 267.1,268.6 283.3,213.3 265.8,159.1 "/>
<g>
<polygon class="st1" points="105.3,253 48.6,268.6 32.5,213.3 "/>
<polygon class="st1" points="283.3,213.3 267.1,268.6 210.4,253 "/>
<polygon class="st2" points="265.8,159.1 213.5,143.8 231.8,139 "/>
<polygon class="st2" points="49.9,159.1 84,139 102.2,143.8 "/>
<polygon class="st2" points="43.4,142 41.5,129.9 84,139 "/>
<polygon class="st2" points="272.3,142 231.8,139 274.2,129.9 "/>
<polygon class="st2" points="272.3,142 265.8,159.1 231.8,139 "/>
<polygon class="st2" points="43.4,142 84,139 49.9,159.1 "/>
<polygon class="st2" points="231.8,139 276.9,119.8 274.2,129.9 "/>
<polygon class="st2" points="84,139 41.5,129.9 38.9,119.8 "/>
<polygon class="st3" points="124.1,71.4 191.6,71.4 176.5,112.5 "/>
<polygon class="st3" points="176.5,112.5 139.2,112.5 124.1,71.4 "/>
<polygon class="st2" points="276.9,119.8 231.8,139 231,87.4 "/>
<polygon class="st2" points="102.2,143.8 84,139 84.7,87.4 "/>
<polygon class="st2" points="84.7,87.4 84,139 38.9,119.8 "/>
<polygon class="st2" points="231,87.4 231.8,139 213.5,143.8 "/>
<polygon class="st1" points="139.2,112.5 43,41.1 124.1,71.4 "/>
<polygon class="st4" points="272.7,41.1 176.5,112.5 191.6,71.4 "/>
<polygon class="st1" points="210.4,253 236.9,213.3 283.3,213.3 "/>
<polygon class="st1" points="32.5,213.3 78.9,213.3 105.3,253 "/>
<polygon class="st3" points="229.3,167.7 283.3,213.3 236.9,213.3 "/>
<polygon class="st3" points="86.4,167.7 32.5,213.3 49.9,159.1 "/>
<polygon class="st3" points="78.9,213.3 32.5,213.3 86.4,167.7 "/>
<polygon class="st3" points="229.3,167.7 265.8,159.1 283.3,213.3 "/>
<polygon class="st2" points="84.7,87.4 139.2,112.5 102.2,143.8 "/>
<polygon class="st2" points="213.5,143.8 176.5,112.5 231,87.4 "/>
<polygon class="st2" points="265.8,159.1 272.3,142 277.3,145.6 "/>
<polygon class="st2" points="49.9,159.1 38.4,145.6 43.4,142 "/>
<polygon class="st2" points="272.3,142 274.2,129.9 280.3,134.7 "/>
<polygon class="st2" points="43.4,142 35.4,134.7 41.5,129.9 "/>
<polygon class="st2" points="33.5,123.8 38.9,119.8 41.5,129.9 "/>
<polygon class="st2" points="282.2,123.8 274.2,129.9 276.9,119.8 "/>
<polygon class="st3" points="49.9,159.1 102.2,143.8 86.4,167.7 "/>
<polygon class="st3" points="265.8,159.1 229.3,167.7 213.5,143.8 "/>
<polygon class="st2" points="38.9,119.8 30.4,79 84.7,87.4 "/>
<polygon class="st2" points="231,87.4 285.3,79 276.9,119.8 "/>
<polygon class="st1" points="102.2,143.8 139.2,112.5 142.6,170.2 "/>
<polygon class="st1" points="213.5,143.8 229.3,167.7 173.1,170.2 "/>
<polygon class="st1" points="173.1,170.2 176.5,112.5 213.5,143.8 "/>
<polygon class="st1" points="142.6,170.2 86.4,167.7 102.2,143.8 "/>
<polygon class="st2" points="272.7,41.1 285.3,79 231,87.4 "/>
<polygon class="st2" points="43,41.1 139.2,112.5 84.7,87.4 "/>
<polygon class="st2" points="231,87.4 176.5,112.5 272.7,41.1 "/>
<polygon class="st2" points="84.7,87.4 30.4,79 43,41.1 "/>
<polygon class="st5" points="105.3,253 78.9,213.3 110,213.7 "/>
<polygon class="st5" points="210.4,253 205.7,213.7 236.9,213.3 "/>
<polygon class="st3" points="173.1,170.2 142.6,170.2 139.2,112.5 "/>
<polygon class="st3" points="139.2,112.5 176.5,112.5 173.1,170.2 "/>
<polygon class="st6" points="116.3,262 105.3,253 136.8,267.9 "/>
<polygon class="st6" points="178.9,267.9 210.4,253 199.4,262 "/>
<polygon class="st7" points="136.6,258.6 136.8,267.9 105.3,253 "/>
<polygon class="st7" points="179.2,258.6 210.4,253 178.9,267.9 "/>
<polygon class="st3" points="86.4,167.7 110,213.7 78.9,213.3 "/>
<polygon class="st3" points="236.9,213.3 205.7,213.7 229.3,167.7 "/>
<polygon class="st8" points="86.4,167.7 109.2,190.8 110,213.7 "/>
<polygon class="st8" points="229.3,167.7 205.7,213.7 206.6,190.8 "/>
<polygon class="st7" points="105.3,253 139.2,236.5 136.6,258.6 "/>
<polygon class="st7" points="210.4,253 179.2,258.6 176.5,236.5 "/>
<polygon class="st1" points="139.2,236.5 105.3,253 110,213.7 "/>
<polygon class="st1" points="176.5,236.5 205.7,213.7 210.4,253 "/>
<polygon class="st5" points="173.1,170.2 229.3,167.7 206.6,190.8 "/>
<polygon class="st5" points="109.2,190.8 86.4,167.7 142.6,170.2 "/>
<polygon class="st5" points="142.6,170.2 129.1,181.7 109.2,190.8 "/>
<polygon class="st5" points="206.6,190.8 186.6,181.7 173.1,170.2 "/>
<polygon class="st3" points="205.7,213.7 178.3,199.1 206.6,190.8 "/>
<polygon class="st3" points="110,213.7 109.2,190.8 137.4,199.1 "/>
<polygon class="st9" points="137.4,199.1 109.2,190.8 129.1,181.7 "/>
<polygon class="st9" points="178.3,199.1 186.6,181.7 206.6,190.8 "/>
<polygon class="st5" points="186.6,181.7 178.3,199.1 173.1,170.2 "/>
<polygon class="st5" points="129.1,181.7 142.6,170.2 137.4,199.1 "/>
<polygon class="st6" points="199.4,262 177,277.5 178.9,267.9 "/>
<polygon class="st6" points="136.8,267.9 138.7,277.5 116.3,262 "/>
<polygon class="st4" points="178.3,199.1 171.8,188.4 173.1,170.2 "/>
<polygon class="st8" points="137.4,199.1 142.6,170.2 143.9,188.4 "/>
<polygon class="st3" points="173.1,170.2 171.8,188.4 143.9,188.4 "/>
<polygon class="st3" points="143.9,188.4 142.6,170.2 173.1,170.2 "/>
<polygon class="st3" points="178.3,199.1 205.7,213.7 176.5,236.5 "/>
<polygon class="st3" points="139.2,236.5 110,213.7 137.4,199.1 "/>
<polygon class="st3" points="137.4,199.1 144,233.2 139.2,236.5 "/>
<polygon class="st3" points="176.5,236.5 171.7,233.2 178.3,199.1 "/>
<polygon class="st8" points="171.8,188.4 178.3,199.1 171.7,233.2 "/>
<polygon class="st8" points="143.9,188.4 144,233.2 137.4,199.1 "/>
<polygon class="st3" points="143.9,188.4 171.8,188.4 171.7,233.2 "/>
<polygon class="st3" points="171.7,233.2 144,233.2 143.9,188.4 "/>
<polygon class="st6" points="179.2,258.6 178.9,267.9 177,277.5 "/>
<polygon class="st6" points="138.7,277.5 136.8,267.9 136.6,258.6 "/>
<polygon class="st6" points="136.6,258.6 139,256.4 138.7,277.5 "/>
<polygon class="st6" points="177,277.5 176.7,256.4 179.2,258.6 "/>
<polygon class="st6" points="138.7,277.5 139,256.4 176.7,256.4 "/>
<polygon class="st6" points="176.7,256.4 177,277.5 138.7,277.5 "/>
<polygon class="st10" points="176.5,236.5 179.2,258.6 176.7,256.4 "/>
<polygon class="st10" points="139,256.4 136.6,258.6 139.2,236.5 "/>
<polygon class="st10" points="139.2,236.5 140.7,241.2 139,256.4 "/>
<polygon class="st10" points="176.7,256.4 175,241.2 176.5,236.5 "/>
<polygon class="st10" points="143.7,237.7 140.7,241.2 139.2,236.5 "/>
<polygon class="st10" points="176.5,236.5 175,241.2 172,237.7 "/>
<polygon class="st10" points="172,237.7 171.7,233.2 176.5,236.5 "/>
<polygon class="st10" points="139.2,236.5 144,233.2 143.7,237.7 "/>
<polygon class="st10" points="171.7,233.2 172,237.7 143.7,237.7 "/>
<polygon class="st10" points="143.7,237.7 144,233.2 171.7,233.2 "/>
<polygon class="st10" points="140.7,241.2 175,241.2 176.7,256.4 "/>
<polygon class="st10" points="176.7,256.4 139,256.4 140.7,241.2 "/>
<polygon class="st10" points="140.7,241.2 143.7,237.7 172,237.7 "/>
<polygon class="st10" points="172,237.7 175,241.2 140.7,241.2 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

14
ui/app/app.js
View File

@ -257,19 +257,13 @@ App.prototype.renderAppBar = function () {
}, [ }, [
// mini logo // mini logo
h('img.metafox-icon', { h('img.metafox-icon', {
height: 29, height: 42,
width: 29, width: 42,
src: '/images/icon-128.png', src: '/images/metamask-fox.svg',
}), }),
// metamask name // metamask name
h('h1', { h('h1', 'MetaMask'),
style: {
position: 'relative',
paddingLeft: '9px',
color: '#5B5D67',
},
}, 'MetaMask'),
]), ]),

2
ui/app/components/balance-component.js
View File

@ -40,7 +40,7 @@ BalanceComponent.prototype.render = function () {
// style: {}, // style: {},
// }), // }),
h(Identicon, { h(Identicon, {
diameter: 45, diameter: 50,
address: token && token.address, address: token && token.address,
network, network,
}), }),

4
ui/app/components/modals/account-details-modal.js
View File

@ -62,12 +62,12 @@ AccountDetailsModal.prototype.render = function () {
h('div.account-modal-divider'), h('div.account-modal-divider'),
h('button.btn-clear', { h('button.btn-clear.account-modal__button', {
onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
}, 'View account on Etherscan'), }, 'View account on Etherscan'),
// Holding on redesign for Export Private Key functionality // Holding on redesign for Export Private Key functionality
h('button.btn-clear', { h('button.btn-clear.account-modal__button', {
onClick: () => showExportPrivateKeyModal(), onClick: () => showExportPrivateKeyModal(),
}, 'Export private key'), }, 'Export private key'),

10
ui/app/components/modals/export-private-key-modal.js
View File

@ -79,11 +79,15 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) { ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
return h('div.export-private-key-buttons', {}, [ 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 (privateKey
? this.renderButton('btn-clear', () => hideModal(), 'Done') ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done')
: this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show') : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm')
), ),
]) ])

41
ui/app/components/network.js
View File

@ -39,7 +39,6 @@ Network.prototype.render = function () {
}, },
src: 'images/loading.svg', src: 'images/loading.svg',
}), }),
h('i.fa.fa-caret-down.network-caret'),
]) ])
} else if (providerName === 'mainnet') { } else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network' hoverText = 'Main Ethereum Network'
@ -85,12 +84,8 @@ Network.prototype.render = function () {
backgroundColor: '#038789', // $blue-lagoon backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2', nonSelectBackgroundColor: '#15afb2',
}), }),
h('.network-name', { h('.network-name', 'Main Network'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#039396',
}},
'Main Network'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
case 'ropsten-test-network': case 'ropsten-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -98,12 +93,8 @@ Network.prototype.render = function () {
backgroundColor: '#e91550', // $crimson backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50', nonSelectBackgroundColor: '#ec2c50',
}), }),
h('.network-name', { h('.network-name', 'Ropsten Test Net'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#ff6666',
}},
'Ropsten Test Net'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
case 'kovan-test-network': case 'kovan-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -111,12 +102,8 @@ Network.prototype.render = function () {
backgroundColor: '#690496', // $purple backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3', nonSelectBackgroundColor: '#b039f3',
}), }),
h('.network-name', { h('.network-name', 'Kovan Test Net'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#690496',
}},
'Kovan Test Net'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
case 'rinkeby-test-network': case 'rinkeby-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -124,12 +111,8 @@ Network.prototype.render = function () {
backgroundColor: '#ebb33f', // $tulip-tree backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e', nonSelectBackgroundColor: '#ecb23e',
}), }),
h('.network-name', { h('.network-name', 'Rinkeby Test Net'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#e7a218',
}},
'Rinkeby Test Net'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
default: default:
return h('.network-indicator', [ return h('.network-indicator', [
@ -140,12 +123,8 @@ Network.prototype.render = function () {
}, },
}), }),
h('.network-name', { h('.network-name', 'Private Network'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#AEAEAE',
}},
'Private Network'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
} }
})(), })(),

4
ui/app/components/pending-tx/confirm-send-ether.js
View File

@ -219,7 +219,7 @@ ConfirmSendEther.prototype.render = function () {
// Main Send token Card // Main Send token Card
h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('div.confirm-screen-wrapper.flex-column.flex-grow', [
h('h3.flex-center.confirm-screen-header', [ h('h3.flex-center.confirm-screen-header', [
h('button.confirm-screen-back-button', { h('button.btn-clear.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta), onClick: () => editTransaction(txMeta),
}, 'EDIT'), }, 'EDIT'),
h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-title', 'Confirm Transaction'),
@ -422,7 +422,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
ConfirmSendEther.prototype.cancel = function (event, txMeta) { ConfirmSendEther.prototype.cancel = function (event, txMeta) {
event.preventDefault() event.preventDefault()
const { cancelTransaction } = this.props const { cancelTransaction } = this.props
cancelTransaction(txMeta) cancelTransaction(txMeta)
} }

4
ui/app/components/pending-tx/confirm-send-token.js
View File

@ -314,7 +314,7 @@ ConfirmSendToken.prototype.render = function () {
// Main Send token Card // Main Send token Card
h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('div.confirm-screen-wrapper.flex-column.flex-grow', [
h('h3.flex-center.confirm-screen-header', [ h('h3.flex-center.confirm-screen-header', [
h('button.confirm-screen-back-button', { h('button.btn-clear.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta), onClick: () => editTransaction(txMeta),
}, 'EDIT'), }, 'EDIT'),
h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-title', 'Confirm Transaction'),
@ -415,7 +415,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
ConfirmSendToken.prototype.cancel = function (event, txMeta) { ConfirmSendToken.prototype.cancel = function (event, txMeta) {
event.preventDefault() event.preventDefault()
const { cancelTransaction } = this.props const { cancelTransaction } = this.props
cancelTransaction(txMeta) cancelTransaction(txMeta)
} }

2
ui/app/components/token-cell.js
View File

@ -106,7 +106,7 @@ TokenCell.prototype.render = function () {
h(Identicon, { h(Identicon, {
className: 'token-list-item__identicon', className: 'token-list-item__identicon',
diameter: 45, diameter: 50,
address, address,
network, network,
}), }),

14
ui/app/components/tx-view.js
View File

@ -68,18 +68,14 @@ TxView.prototype.renderButtons = function () {
return !selectedToken return !selectedToken
? ( ? (
h('div.flex-row.flex-center.hero-balance-buttons', [ h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.btn-clear', { h('button.btn-clear.hero-balance-button', {
style: {
textAlign: 'center',
},
onClick: () => showModal({ onClick: () => showModal({
name: 'DEPOSIT_ETHER', name: 'DEPOSIT_ETHER',
}), }),
}, 'DEPOSIT'), }, 'DEPOSIT'),
h('button.btn-clear', { h('button.btn-clear.hero-balance-button', {
style: { style: {
textAlign: 'center',
marginLeft: '0.8em', marginLeft: '0.8em',
}, },
onClick: showSendPage, onClick: showSendPage,
@ -88,11 +84,7 @@ TxView.prototype.renderButtons = function () {
) )
: ( : (
h('div.flex-row.flex-center.hero-balance-buttons', [ h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.btn-clear', { h('button.btn-clear.hero-balance-button', {
style: {
textAlign: 'center',
marginLeft: '0.8em',
},
onClick: showSendTokenPage, onClick: showSendTokenPage,
}, 'SEND'), }, 'SEND'),
]) ])

4
ui/app/components/wallet-view.js
View File

@ -130,7 +130,7 @@ WalletView.prototype.render = function () {
selectedIdentity.name, 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(TokenList),
h('button.wallet-view__add-token-button', { h('button.btn-clear.wallet-view__add-token-button', {
onClick: () => { onClick: () => {
showAddTokenPage() showAddTokenPage()
hideSidebar() hideSidebar()

38
ui/app/css/itcss/components/buttons.scss
View File

@ -6,9 +6,43 @@
background-color: #02c9b1; // TODO: reusable color in colors.css background-color: #02c9b1; // TODO: reusable color in colors.css
} }
button.btn-clear { .btn-clear {
background: $white; 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 // No longer used in flat design, remove when modal buttons done

9
ui/app/css/itcss/components/confirm.scss
View File

@ -102,15 +102,10 @@
.confirm-screen-back-button { .confirm-screen-back-button {
background: transparent; background: transparent;
border: 1px solid $curious-blue;
left: 24px; left: 24px;
position: absolute; position: absolute;
text-align: center; padding: 6px 12px;
color: $curious-blue; font-size: .7rem;
padding: 6px 13px 7px 12px;
border-radius: 2px;
height: 30px;
width: 54px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
margin-right: 12px; margin-right: 12px;

8
ui/app/css/itcss/components/header.scss
View File

@ -58,7 +58,7 @@
} }
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {
width: 65vw; width: 62vw;
} }
} }
@ -66,8 +66,10 @@
font-family: Roboto; font-family: Roboto;
text-transform: uppercase; text-transform: uppercase;
font-weight: 400; font-weight: 400;
color: #22232c; // $shark font-size: 1.1rem;
line-height: 29px; position: relative;
padding-left: 15px;
color: #5b5d67;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
display: none; display: none;

45
ui/app/css/itcss/components/hero-balance.scss
View File

@ -16,7 +16,7 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: 2.8em 2.37em .8em; margin: 2.3em 2.37em .8em;
} }
.balance-container { .balance-container {
@ -37,13 +37,16 @@
} }
.balance-display { .balance-display {
.token-amount {
color: $black;
}
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
text-align: center; text-align: center;
.token-amount { .token-amount {
font-size: 175%; font-size: 1.75rem;
margin-top: 12.5%; margin-top: 1rem;
} }
.fiat-amount { .fiat-amount {
@ -54,12 +57,12 @@
} }
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
margin-left: 3%; margin-left: .8em;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
.token-amount { .token-amount {
font-size: 135%; font-size: 1.5rem;
} }
.fiat-amount { .fiat-amount {
@ -69,13 +72,6 @@
} }
} }
.balance-icon {
border-radius: 25px;
width: 45px;
height: 45px;
border: 1px solid $alto;
}
.hero-balance-buttons { .hero-balance-buttons {
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
@ -89,26 +85,9 @@
flex-grow: 2; flex-grow: 2;
justify-content: flex-end; 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;
}

29
ui/app/css/itcss/components/modal.scss
View File

@ -258,19 +258,10 @@
width: 286px; width: 286px;
} }
.btn-clear { .account-modal__button {
min-height: 28px;
font-size: 14px;
border-color: $curious-blue;
color: $curious-blue;
border-radius: 2px;
flex-basis: 100%;
width: 75%;
margin-top: 17px; margin-top: 17px;
padding: 10px 22px; padding: 10px 22px;
height: 44px;
width: 235px; width: 235px;
font-family: Roboto;
} }
} }
@ -346,17 +337,17 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
}
.btn-clear { .export-private-key__button {
width: 141px; margin-top: 17px;
height: 54px; padding: 10px 22px;
} width: 141px;
height: 54px;
}
.btn-cancel { .export-private-key__button--cancel {
margin-right: 15px; margin-right: 15px;
border-color: $dusty-gray;
color: $scorpion;
}
} }
.private-key-password-display-wrapper { .private-key-password-display-wrapper {

42
ui/app/css/itcss/components/network.scss
View File

@ -8,41 +8,25 @@
} }
.network-component.pointer { .network-component.pointer {
border: 1px solid $shark; border: 2px solid $silver;
border-radius: 82px; border-radius: 82px;
padding: 6px; padding: 3px;
flex: 0 0 auto; flex: 0 0 auto;
&.ethereum-network { &.ethereum-network .menu-icon-circle div {
border-color: rgb(3, 135, 137); background-color: rgba(3, 135, 137, .7) !important;
.menu-icon-circle div {
background-color: rgba(3, 135, 137, .7) !important;
}
} }
&.ropsten-test-network { &.ropsten-test-network .menu-icon-circle div {
border-color: rgb(233, 21, 80); background-color: rgba(233, 21, 80, .7) !important;
.menu-icon-circle div {
background-color: rgba(233, 21, 80, .7) !important;
}
} }
&.kovan-test-network { &.kovan-test-network .menu-icon-circle div {
border-color: rgb(105, 4, 150); background-color: rgba(105, 4, 150, .7) !important;
.menu-icon-circle div {
background-color: rgba(105, 4, 150, .7) !important;
}
} }
&.rinkeby-test-network { &.rinkeby-test-network .menu-icon-circle div {
border-color: rgb(235, 179, 63); background-color: rgba(235, 179, 63, .7) !important;
.menu-icon-circle div {
background-color: rgba(235, 179, 63, .7) !important;
}
} }
} }
@ -66,11 +50,12 @@
} }
.network-name { .network-name {
line-height: 15px;
padding: 0 4px; padding: 0 4px;
font-family: Roboto; font-family: Roboto;
font-size: 12px; font-size: 12px;
flex: 1 0 auto; flex: 1 0 auto;
color: $tundora;
font-weight: 500;
} }
.network-droppo { .network-droppo {
@ -167,3 +152,6 @@
line-height: 18px; line-height: 18px;
} }
.network-caret {
margin: 0 8px 2px;
}

48
ui/app/css/itcss/components/newui-sections.scss
View File

@ -4,7 +4,7 @@
// Component Colors // Component Colors
$tx-view-bg: $white; $tx-view-bg: $white;
$wallet-view-bg: $wild-sand; $wallet-view-bg: $alabaster;
// Main container // Main container
.main-container { .main-container {
@ -47,7 +47,7 @@ $wallet-view-bg: $wild-sand;
.wallet-view { .wallet-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 33.5 1 33.5%; flex: 32 1 32%;
width: 0; width: 0;
background: $wallet-view-bg; background: $wallet-view-bg;
z-index: 200; z-index: 200;
@ -69,22 +69,18 @@ $wallet-view-bg: $wild-sand;
} }
&__keyring-label { &__keyring-label {
height: 40px; height: 50px;
color: $dusty-gray; color: $dusty-gray;
font-family: Roboto; font-family: Roboto;
font-size: 10px; font-size: 10px;
line-height: 40px;
text-align: right; text-align: right;
padding: 0 20px; padding: 17px 20px 0;
box-sizing: border-box;
} }
&__details-button { &__details-button {
color: $curious-blue;
font-size: 10px; font-size: 10px;
line-height: 13px; border-radius: 17px;
text-align: center;
border: 1px solid $curious-blue;
border-radius: 10.5px;
background-color: transparent; background-color: transparent;
margin: 0 auto; margin: 0 auto;
padding: 4px 12px; padding: 4px 12px;
@ -121,16 +117,14 @@ $wallet-view-bg: $wild-sand;
&__add-token-button { &__add-token-button {
flex: 0 0 auto; flex: 0 0 auto;
color: $dusty-gray;
font-size: 14px;
line-height: 19px;
text-align: center;
margin: 36px auto; margin: 36px auto;
border: 1px solid $dusty-gray;
border-radius: 2px;
font-weight: 300;
background: none; 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 { .main-container {
// margin-top: 6.9vh; // margin-top: 6.9vh;
width: 85%; width: 85vw;
height: 90vh; height: 90vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); 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) { @media screen and (min-width: 769px) {
.main-container { .main-container {
// margin-top: 6.9vh; // margin-top: 6.9vh;
width: 80%; width: 80vw;
height: 82vh; height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); 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) { @media screen and (min-width: 1281px) {
.main-container { .main-container {
// margin-top: 6.9vh; // margin-top: 6.9vh;
width: 65%; width: 62vw;
height: 82vh; height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
} }
@ -239,14 +233,6 @@ $wallet-view-bg: $wild-sand;
overflow-y: auto; overflow-y: auto;
background-color: $white; background-color: $white;
} }
button.btn-clear {
width: 93px;
height: 50px;
font-size: .7em;
background: $white;
border: 1px solid;
}
} }
// wallet view // wallet view
@ -254,9 +240,9 @@ $wallet-view-bg: $wild-sand;
font-size: 24px; font-size: 24px;
font-weight: 300; font-weight: 300;
line-height: 20px; line-height: 20px;
color: $scorpion; color: $black;
margin-top: 8px; margin-top: 8px;
margin-bottom: 24px; margin-bottom: .9rem;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;

36
ui/app/css/itcss/components/send.scss
View File

@ -526,8 +526,9 @@
} }
&__form { &__form {
margin: 13px 0; padding: 13px 0;
width: 100%; width: 100%;
overflow-y: auto;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
padding: 13px 0; padding: 13px 0;
@ -587,7 +588,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&__list { &__list {
z-index: 1050; z-index: 1050;
position: absolute; position: absolute;
@ -677,38 +678,13 @@
border-top: 1px solid $alto; border-top: 1px solid $alto;
background: $white; background: $white;
padding: 0 12px; padding: 0 12px;
flex-shrink: 0;
} }
&__next-btn, &__next-btn,
&__cancel-btn,
&__next-btn__disabled {
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 { &__cancel-btn {
color: $dusty-gray; width: 163px;
border-color: $dusty-gray; margin: 0 4px;
} }
&__customize-gas { &__customize-gas {

5
ui/app/css/itcss/components/token-list.scss
View File

@ -12,7 +12,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
position: relative; position: relative;
&__token-balance { &__token-balance {
font-size: 130%; font-size: 1.5rem;
@media #{$wallet-balance-breakpoint-range} { @media #{$wallet-balance-breakpoint-range} {
font-size: 105%; font-size: 105%;
@ -34,7 +34,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
} }
&--active { &--active {
background-color: rgba($wallet-balance-bg, 1); background-color: $manatee;
color: $white;
} }
&__identicon { &__identicon {

6
ui/app/css/itcss/components/transaction-list.scss
View File

@ -32,13 +32,9 @@
} }
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
.tx-list-header-wrapper {
flex: 0 0 55px;
}
.tx-list-header { .tx-list-header {
font-size: 16px; font-size: 16px;
margin: 1.5em 2.37em; margin: 1.1em 2.37em .8em;
} }
.tx-list-container::-webkit-scrollbar { .tx-list-container::-webkit-scrollbar {

21
ui/app/css/itcss/components/wallet-balance.scss
View File

@ -8,7 +8,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
background: rgba($wallet-balance-bg, 0); background: rgba($wallet-balance-bg, 0);
&--active { &--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; align-items: flex-start;
.token-amount { .token-amount {
font-size: 135%; font-size: 1.5rem;
} }
.fiat-amount { .fiat-amount {
@ -61,11 +62,13 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
} }
} }
} }
}
.balance-icon {
border-radius: 25px; .balance-icon {
width: 45px; border-radius: 25px;
height: 45px; width: 50px;
border: 1px solid $alto; height: 50px;
} border: 1px solid $alto;
padding: 5px;
background: $white;
} }

2
ui/app/css/itcss/settings/variables.scss
View File

@ -42,6 +42,8 @@ $malibu-blue: #7ac9fd;
$athens-grey: #e9edf0; $athens-grey: #e9edf0;
$jaffa: #f28930; $jaffa: #f28930;
$geyser: #d2d8dd; $geyser: #d2d8dd;
$manatee: #93949d;
$spindle: #c7ddec;
$mid-gray: #5b5d67; $mid-gray: #5b5d67;
$cape-cod: #38393a; $cape-cod: #38393a;

6
ui/app/send-v2.js
View File

@ -516,16 +516,16 @@ SendTransactionScreen.prototype.renderFooter = function () {
} = this.props } = this.props
const noErrors = !amountError && toError === null const noErrors = !amountError && toError === null
const errorClass = noErrors ? '' : '__disabled'
return h('div.send-v2__footer', [ return h('div.send-v2__footer', [
h('button.send-v2__cancel-btn', { h('button.btn-cancel.send-v2__cancel-btn', {
onClick: () => { onClick: () => {
clearSend() clearSend()
goHome() goHome()
}, },
}, 'Cancel'), }, 'Cancel'),
h(`button.send-v2__next-btn${errorClass}`, { h('button.btn-clear.send-v2__next-btn', {
disabled: !noErrors,
onClick: event => this.onSubmit(event), onClick: event => this.onSubmit(event),
}, 'Next'), }, 'Next'),
]) ])