mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Signature Request
This commit is contained in:
parent
0d39a3a8d4
commit
78836b0ead
78
ui/app/components/dropdowns/account-dropdown-mini.js
Normal file
78
ui/app/components/dropdowns/account-dropdown-mini.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
const Component = require('react').Component
|
||||||
|
const h = require('react-hyperscript')
|
||||||
|
const inherits = require('util').inherits
|
||||||
|
const Identicon = require('../identicon')
|
||||||
|
const AccountListItem = require('../send/account-list-item')
|
||||||
|
|
||||||
|
module.exports = AccountDropdownMini
|
||||||
|
|
||||||
|
inherits(AccountDropdownMini, Component)
|
||||||
|
function AccountDropdownMini () {
|
||||||
|
Component.call(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
AccountDropdownMini.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
|
||||||
|
const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
|
||||||
|
|
||||||
|
return currentAccount.address === selectedAccount.address
|
||||||
|
? listItemIcon
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
|
||||||
|
AccountDropdownMini.prototype.renderDropdown = function () {
|
||||||
|
const {
|
||||||
|
accounts,
|
||||||
|
selectedAccount,
|
||||||
|
closeDropdown,
|
||||||
|
onSelect,
|
||||||
|
} = this.props
|
||||||
|
|
||||||
|
return h('div', {}, [
|
||||||
|
|
||||||
|
h('div.account-dropdown-mini__close-area', {
|
||||||
|
onClick: closeDropdown,
|
||||||
|
}),
|
||||||
|
|
||||||
|
h('div.account-dropdown-mini__list', {}, [
|
||||||
|
|
||||||
|
...accounts.map(account => h(AccountListItem, {
|
||||||
|
account,
|
||||||
|
displayBalance: false,
|
||||||
|
displayAddress: false,
|
||||||
|
handleClick: () => {
|
||||||
|
onSelect(account)
|
||||||
|
closeDropdown()
|
||||||
|
},
|
||||||
|
icon: this.getListItemIcon(account, selectedAccount),
|
||||||
|
}))
|
||||||
|
|
||||||
|
]),
|
||||||
|
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
AccountDropdownMini.prototype.render = function () {
|
||||||
|
const {
|
||||||
|
accounts,
|
||||||
|
selectedAccount,
|
||||||
|
openDropdown,
|
||||||
|
closeDropdown,
|
||||||
|
dropdownOpen,
|
||||||
|
} = this.props
|
||||||
|
|
||||||
|
return h('div.account-dropdown-mini', {}, [
|
||||||
|
|
||||||
|
h(AccountListItem, {
|
||||||
|
account: selectedAccount,
|
||||||
|
handleClick: openDropdown,
|
||||||
|
displayBalance: false,
|
||||||
|
displayAddress: false,
|
||||||
|
icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
|
||||||
|
}),
|
||||||
|
|
||||||
|
dropdownOpen && this.renderDropdown(),
|
||||||
|
|
||||||
|
])
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,47 +0,0 @@
|
|||||||
const Component = require('react').Component
|
|
||||||
const h = require('react-hyperscript')
|
|
||||||
const inherits = require('util').inherits
|
|
||||||
const PendingTxDetails = require('./pending-personal-msg-details')
|
|
||||||
|
|
||||||
module.exports = PendingMsg
|
|
||||||
|
|
||||||
inherits(PendingMsg, Component)
|
|
||||||
function PendingMsg () {
|
|
||||||
Component.call(this)
|
|
||||||
}
|
|
||||||
|
|
||||||
PendingMsg.prototype.render = function () {
|
|
||||||
var state = this.props
|
|
||||||
var msgData = state.txData
|
|
||||||
|
|
||||||
return (
|
|
||||||
|
|
||||||
h('div', {
|
|
||||||
key: msgData.id,
|
|
||||||
}, [
|
|
||||||
|
|
||||||
// header
|
|
||||||
h('h3', {
|
|
||||||
style: {
|
|
||||||
fontWeight: 'bold',
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
}, 'Sign Message'),
|
|
||||||
|
|
||||||
// message details
|
|
||||||
h(PendingTxDetails, state),
|
|
||||||
|
|
||||||
// sign + cancel
|
|
||||||
h('.flex-row.flex-space-around', [
|
|
||||||
h('button', {
|
|
||||||
onClick: state.cancelPersonalMessage,
|
|
||||||
}, 'Cancel'),
|
|
||||||
h('button', {
|
|
||||||
onClick: state.signPersonalMessage,
|
|
||||||
}, 'Sign'),
|
|
||||||
]),
|
|
||||||
])
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
245
ui/app/components/signature-request.js
Normal file
245
ui/app/components/signature-request.js
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
const Component = require('react').Component
|
||||||
|
const h = require('react-hyperscript')
|
||||||
|
const inherits = require('util').inherits
|
||||||
|
const Identicon = require('./identicon')
|
||||||
|
const connect = require('react-redux').connect
|
||||||
|
const ethUtil = require('ethereumjs-util')
|
||||||
|
const PendingTxDetails = require('./pending-personal-msg-details')
|
||||||
|
const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
|
||||||
|
const BinaryRenderer = require('./binary-renderer')
|
||||||
|
|
||||||
|
const actions = require('../actions')
|
||||||
|
const { conversionUtil } = require('../conversion-util')
|
||||||
|
|
||||||
|
const {
|
||||||
|
getSelectedAccount,
|
||||||
|
getCurrentAccountWithSendEtherInfo,
|
||||||
|
getSelectedAddress,
|
||||||
|
accountsWithSendEtherInfoSelector,
|
||||||
|
conversionRateSelector,
|
||||||
|
} = require('../selectors.js')
|
||||||
|
|
||||||
|
function mapStateToProps (state) {
|
||||||
|
return {
|
||||||
|
balance: getSelectedAccount(state).balance,
|
||||||
|
selectedAccount: getCurrentAccountWithSendEtherInfo(state),
|
||||||
|
selectedAddress: getSelectedAddress(state),
|
||||||
|
requester: null,
|
||||||
|
requesterAddress: null,
|
||||||
|
accounts: accountsWithSendEtherInfoSelector(state),
|
||||||
|
conversionRate: conversionRateSelector(state)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps (dispatch) {
|
||||||
|
return {
|
||||||
|
goHome: () => dispatch(actions.goHome())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest)
|
||||||
|
|
||||||
|
inherits(SignatureRequest, Component)
|
||||||
|
function SignatureRequest (props) {
|
||||||
|
Component.call(this)
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
selectedAccount: props.selectedAccount,
|
||||||
|
accountDropdownOpen: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.renderHeader = function () {
|
||||||
|
return h('div.request-signature__header', [
|
||||||
|
|
||||||
|
h('div.request-signature__header-background'),
|
||||||
|
|
||||||
|
h('div.request-signature__header__text', 'Signature Request'),
|
||||||
|
|
||||||
|
h('div.request-signature__header__tip-container', [
|
||||||
|
h('div.request-signature__header__tip'),
|
||||||
|
]),
|
||||||
|
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.renderAccountDropdown = function () {
|
||||||
|
const {
|
||||||
|
selectedAccount,
|
||||||
|
accountDropdownOpen,
|
||||||
|
} = this.state
|
||||||
|
|
||||||
|
const {
|
||||||
|
accounts,
|
||||||
|
} = this.props
|
||||||
|
|
||||||
|
return h('div.request-signature__account', [
|
||||||
|
|
||||||
|
h('div.request-signature__account-text', ['Account:']),
|
||||||
|
|
||||||
|
h(AccountDropdownMini, {
|
||||||
|
selectedAccount,
|
||||||
|
accounts,
|
||||||
|
onSelect: selectedAccount => this.setState({ selectedAccount }),
|
||||||
|
dropdownOpen: accountDropdownOpen,
|
||||||
|
openDropdown: () => this.setState({ accountDropdownOpen: true }),
|
||||||
|
closeDropdown: () => this.setState({ accountDropdownOpen: false }),
|
||||||
|
})
|
||||||
|
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.renderBalance = function () {
|
||||||
|
const { balance, conversionRate } = this.props
|
||||||
|
|
||||||
|
const balanceInEther = conversionUtil(balance, {
|
||||||
|
fromNumericBase: 'hex',
|
||||||
|
toNumericBase: 'dec',
|
||||||
|
fromDenomination: 'WEI',
|
||||||
|
numberOfDecimals: 6,
|
||||||
|
conversionRate,
|
||||||
|
})
|
||||||
|
|
||||||
|
return h('div.request-signature__balance', [
|
||||||
|
|
||||||
|
h('div.request-signature__balance-text', ['Balance:']),
|
||||||
|
|
||||||
|
h('div.request-signature__balance-value', `${balanceInEther} ETH`),
|
||||||
|
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.renderAccountInfo = function () {
|
||||||
|
return h('div.request-signature__account-info', [
|
||||||
|
|
||||||
|
this.renderAccountDropdown(),
|
||||||
|
|
||||||
|
this.renderRequestIcon(),
|
||||||
|
|
||||||
|
this.renderBalance(),
|
||||||
|
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.renderRequestIcon = function () {
|
||||||
|
const { requesterAddress } = this.props
|
||||||
|
|
||||||
|
return h('div.request-signature__request-icon', [
|
||||||
|
h(Identicon, {
|
||||||
|
diameter: 40,
|
||||||
|
address: requesterAddress,
|
||||||
|
})
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.renderRequestInfo = function () {
|
||||||
|
const { requester } = this.props
|
||||||
|
|
||||||
|
return h('div.request-signature__request-info', [
|
||||||
|
|
||||||
|
h('div.request-signature__headline', [
|
||||||
|
`Your signature is being requested`,
|
||||||
|
])
|
||||||
|
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.msgHexToText = function (hex) {
|
||||||
|
try {
|
||||||
|
const stripped = ethUtil.stripHexPrefix(hex)
|
||||||
|
const buff = Buffer.from(stripped, 'hex')
|
||||||
|
return buff.toString('utf8')
|
||||||
|
} catch (e) {
|
||||||
|
return hex
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.renderBody = function () {
|
||||||
|
let rows
|
||||||
|
|
||||||
|
const { txData } = this.props
|
||||||
|
const { type, msgParams: { data } } = txData
|
||||||
|
|
||||||
|
if (type === 'personal_sign') {
|
||||||
|
rows = [{ name: 'Message:', value: this.msgHexToText(data) }]
|
||||||
|
}
|
||||||
|
else if (type === 'eth_signTypedData') {
|
||||||
|
rows = data
|
||||||
|
}
|
||||||
|
// given the warning in './pending-msg.js', eth_sign' has not been implemented on NewUI-flat at this time
|
||||||
|
// else if (type === 'eth_sign') {
|
||||||
|
// console.log('Not currently supported')
|
||||||
|
// }
|
||||||
|
|
||||||
|
return h('div.request-signature__body', {}, [
|
||||||
|
|
||||||
|
this.renderAccountInfo(),
|
||||||
|
|
||||||
|
this.renderRequestInfo(),
|
||||||
|
|
||||||
|
h('div.request-signature__notice', ['You are signing:']),
|
||||||
|
|
||||||
|
h('div.request-signature__rows', [
|
||||||
|
|
||||||
|
...rows.map(({ name, value }) => {
|
||||||
|
return h('div.request-signature__row', [
|
||||||
|
h('div.request-signature__row-title', [`${name}:`]),
|
||||||
|
h('div.request-signature__row-value', value),
|
||||||
|
])
|
||||||
|
}),
|
||||||
|
|
||||||
|
]),
|
||||||
|
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.renderFooter = function () {
|
||||||
|
const {
|
||||||
|
goHome,
|
||||||
|
signPersonalMessage,
|
||||||
|
signTypedMessage,
|
||||||
|
cancelPersonalMessage,
|
||||||
|
cancelTypedMessage,
|
||||||
|
} = this.props
|
||||||
|
|
||||||
|
const { txData } = this.props
|
||||||
|
const { type } = txData
|
||||||
|
|
||||||
|
let cancel
|
||||||
|
let sign
|
||||||
|
if (type === 'personal_sign') {
|
||||||
|
cancel = cancelPersonalMessage
|
||||||
|
sign = signPersonalMessage
|
||||||
|
}
|
||||||
|
else if (type === 'eth_signTypedData') {
|
||||||
|
cancel = cancelTypedMessage
|
||||||
|
sign = signTypedMessage
|
||||||
|
}
|
||||||
|
|
||||||
|
return h('div.request-signature__footer', [
|
||||||
|
h('div.request-signature__footer__cancel-button', {
|
||||||
|
onClick: cancel,
|
||||||
|
}, 'CANCEL'),
|
||||||
|
h('div.request-signature__footer__sign-button', {
|
||||||
|
onClick: sign,
|
||||||
|
}, 'SIGN'),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
SignatureRequest.prototype.render = function () {
|
||||||
|
return (
|
||||||
|
|
||||||
|
h('div.request-signature__container', [
|
||||||
|
|
||||||
|
this.renderHeader(),
|
||||||
|
|
||||||
|
this.renderBody(),
|
||||||
|
|
||||||
|
this.renderFooter(),
|
||||||
|
|
||||||
|
])
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -6,9 +6,10 @@ const actions = require('./actions')
|
|||||||
const txHelper = require('../lib/tx-helper')
|
const txHelper = require('../lib/tx-helper')
|
||||||
|
|
||||||
const PendingTx = require('./components/pending-tx')
|
const PendingTx = require('./components/pending-tx')
|
||||||
const PendingMsg = require('./components/pending-msg')
|
const SignatureRequest = require('./components/signature-request')
|
||||||
const PendingPersonalMsg = require('./components/pending-personal-msg')
|
// const PendingMsg = require('./components/pending-msg')
|
||||||
const PendingTypedMsg = require('./components/pending-typed-msg')
|
// const PendingPersonalMsg = require('./components/pending-personal-msg')
|
||||||
|
// const PendingTypedMsg = require('./components/pending-typed-msg')
|
||||||
const Loading = require('./components/loading')
|
const Loading = require('./components/loading')
|
||||||
|
|
||||||
// const contentDivider = h('div', {
|
// const contentDivider = h('div', {
|
||||||
@ -102,8 +103,10 @@ ConfirmTxScreen.prototype.render = function () {
|
|||||||
cancelTransaction: this.cancelTransaction.bind(this, txData),
|
cancelTransaction: this.cancelTransaction.bind(this, txData),
|
||||||
signMessage: this.signMessage.bind(this, txData),
|
signMessage: this.signMessage.bind(this, txData),
|
||||||
signPersonalMessage: this.signPersonalMessage.bind(this, txData),
|
signPersonalMessage: this.signPersonalMessage.bind(this, txData),
|
||||||
|
signTypedMessage: this.signTypedMessage.bind(this, txData),
|
||||||
cancelMessage: this.cancelMessage.bind(this, txData),
|
cancelMessage: this.cancelMessage.bind(this, txData),
|
||||||
cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
|
cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
|
||||||
|
cancelTypedMessage: this.cancelTypedMessage.bind(this, txData),
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -119,16 +122,18 @@ function currentTxView (opts) {
|
|||||||
} else if (msgParams) {
|
} else if (msgParams) {
|
||||||
log.debug('msgParams detected, rendering pending msg')
|
log.debug('msgParams detected, rendering pending msg')
|
||||||
|
|
||||||
if (type === 'eth_sign') {
|
return h(SignatureRequest, opts)
|
||||||
log.debug('rendering eth_sign message')
|
|
||||||
return h(PendingMsg, opts)
|
// if (type === 'eth_sign') {
|
||||||
} else if (type === 'personal_sign') {
|
// log.debug('rendering eth_sign message')
|
||||||
log.debug('rendering personal_sign message')
|
// return h(PendingMsg, opts)
|
||||||
return h(PendingPersonalMsg, opts)
|
// } else if (type === 'personal_sign') {
|
||||||
} else if (type === 'eth_signTypedData') {
|
// log.debug('rendering personal_sign message')
|
||||||
log.debug('rendering eth_signTypedData message')
|
// return h(PendingPersonalMsg, opts)
|
||||||
return h(PendingTypedMsg, opts)
|
// } else if (type === 'eth_signTypedData') {
|
||||||
}
|
// log.debug('rendering eth_signTypedData message')
|
||||||
|
// return h(PendingTypedMsg, opts)
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
return h(Loading)
|
return h(Loading)
|
||||||
}
|
}
|
||||||
|
48
ui/app/css/itcss/components/account-dropdown-mini.scss
Normal file
48
ui/app/css/itcss/components/account-dropdown-mini.scss
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
.account-dropdown-mini {
|
||||||
|
height: 22px;
|
||||||
|
background-color: $white;
|
||||||
|
font-family: Roboto;
|
||||||
|
line-height: 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 124px;
|
||||||
|
|
||||||
|
&__close-area {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
z-index: 1050;
|
||||||
|
position: absolute;
|
||||||
|
height: 180px;
|
||||||
|
width: 96pxpx;
|
||||||
|
border: 1px solid $geyser;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: $white;
|
||||||
|
box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-list-item {
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-list-item__account-name {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-list-item__top-row {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-list-item__icon {
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
}
|
@ -43,3 +43,7 @@
|
|||||||
@import './tab-bar.scss';
|
@import './tab-bar.scss';
|
||||||
|
|
||||||
@import './simple-dropdown.scss';
|
@import './simple-dropdown.scss';
|
||||||
|
|
||||||
|
@import './request-signature.scss';
|
||||||
|
|
||||||
|
@import './account-dropdown-mini.scss';
|
||||||
|
220
ui/app/css/itcss/components/request-signature.scss
Normal file
220
ui/app/css/itcss/components/request-signature.scss
Normal file
@ -0,0 +1,220 @@
|
|||||||
|
.request-signature {
|
||||||
|
&__container {
|
||||||
|
height: 619px;
|
||||||
|
width: 380px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: $white;
|
||||||
|
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;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
height: 64px;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header-background {
|
||||||
|
position: absolute;
|
||||||
|
background-color: $athens-grey;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header__text {
|
||||||
|
height: 29px;
|
||||||
|
width: 179px;
|
||||||
|
color: #5B5D67;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 29px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header__tip-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header__tip {
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
background: $athens-grey;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__account-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 18px;
|
||||||
|
height: 69px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__account {
|
||||||
|
color: $dusty-gray;
|
||||||
|
margin-left: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__account-text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__balance {
|
||||||
|
color: $dusty-gray;
|
||||||
|
margin-right: 17px;
|
||||||
|
width: 124px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__balance-text {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__balance-value {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 2.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__request-icon {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__request-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__headline {
|
||||||
|
height: 48px;
|
||||||
|
width: 240px;
|
||||||
|
color: $tundora;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 24px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__notice {
|
||||||
|
height: 19px;
|
||||||
|
width: 105px;
|
||||||
|
color: #9B9B9B;
|
||||||
|
font-family: "Avenir Next";
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 21px;
|
||||||
|
margin-bottom: 11px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__rows {
|
||||||
|
height: 262px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
border-top: 1px solid $geyser;
|
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) {
|
||||||
|
height: 208px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// &__rows::-webkit-scrollbar {
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
|
||||||
|
&__row {
|
||||||
|
height: 74px;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
border-bottom: 1px solid $geyser;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-title {
|
||||||
|
height: 22px;
|
||||||
|
width: 80px;
|
||||||
|
color: $dusty-gray;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-left: 18px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-value {
|
||||||
|
height: 19px;
|
||||||
|
color: $scorpion;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-left: 18px;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer {
|
||||||
|
height: 108px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
font-size: 22px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__cancel-button,
|
||||||
|
&__sign-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 300;
|
||||||
|
height: 55px;
|
||||||
|
line-height: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: none;
|
||||||
|
max-width: 162px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__cancel-button {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid $dusty-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sign-button {
|
||||||
|
background-color: $caribbean-green;
|
||||||
|
border-width: 0;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user