status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Various unlock / send style fixes (#331) 

* Fix table spacing.

* Fix modal button wrapping

* Fix hanging send transaction button.

* Space
This commit is contained in:
William O'Beirne 2017-10-30 14:29:27 -07:00 committed by Daniel Ternyak
parent 68e5972a03
commit ad084745c7
4 changed files with 115 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
common/components/WalletDecrypt/DeterministicWalletsModal.scss
View File

@ -23,6 +23,7 @@
&-table { &-table {
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-bottom: 10px;
&-token { &-token {
width: 82px; width: 82px;
@ -32,6 +33,10 @@
font-size: 13px; font-size: 13px;
text-align: left; text-align: left;
font-family: $font-family-monospace; font-family: $font-family-monospace;
input {
margin-right: 6px;
}
} }
&-more { &-more {

23
common/containers/Tabs/SendTransaction/components/ConfirmationModal.scss
View File

@ -1,8 +1,15 @@
@import "common/sass/variables"; @import "common/sass/variables";
$summary-height: 54px; $summary-height: 54px;
$button-break: 'max-width: 620px';
.ConfModal { .ConfModal {
min-width: 580px;
@media (#{$button-break}) {
min-width: 0;
}
&-summary { &-summary {
display: flex; display: flex;
margin-bottom: 30px; margin-bottom: 30px;
@ -51,3 +58,19 @@ $summary-height: 54px;
} }
} }
// Modal overrides for extra long buttons
@media (#{$button-break}) {
.ConfModalWrap {
.Modal-footer-btn {
display: block;
float: none;
width: 100%;
margin: 0 0 5px;
&:last-child {
margin: 0;
}
}
}
}

151
common/containers/Tabs/SendTransaction/components/ConfirmationModal.tsx
View File

@ -101,84 +101,87 @@ class ConfirmationModal extends React.Component<Props, State> {
broadCastTxStatus && broadCastTxStatus.isBroadcasting; broadCastTxStatus && broadCastTxStatus.isBroadcasting;
return ( return (
<Modal <div className="ConfModalWrap">
title="Confirm Your Transaction" <Modal
buttons={buttons} title="Confirm Your Transaction"
handleClose={onClose} buttons={buttons}
disableButtons={isBroadcasting} handleClose={onClose}
isOpen={true} disableButtons={isBroadcasting}
> isOpen={true}
{ >
<div className="ConfModal"> {
{isBroadcasting ? ( <div className="ConfModal">
<div className="ConfModal-loading"> {isBroadcasting ? (
<Spinner size="5x" /> <div className="ConfModal-loading">
</div> <Spinner size="5x" />
) : ( </div>
<div> ) : (
<div className="ConfModal-summary"> <div>
<div className="ConfModal-summary-icon ConfModal-summary-icon--from"> <div className="ConfModal-summary">
<Identicon size="100%" address={from} /> <div className="ConfModal-summary-icon ConfModal-summary-icon--from">
</div> <Identicon size="100%" address={from} />
<div className="ConfModal-summary-amount"> </div>
<div className="ConfModal-summary-amount-arrow" /> <div className="ConfModal-summary-amount">
<div className="ConfModal-summary-amount-currency"> <div className="ConfModal-summary-amount-arrow" />
{value} {symbol} <div className="ConfModal-summary-amount-currency">
{value} {symbol}
</div>
</div>
<div className="ConfModal-summary-icon ConfModal-summary-icon--to">
<Identicon size="100%" address={toAddress} />
</div> </div>
</div> </div>
<div className="ConfModal-summary-icon ConfModal-summary-icon--to">
<Identicon size="100%" address={toAddress} /> <ul className="ConfModal-details">
<li className="ConfModal-details-detail">
You are sending from <code>{from}</code>
</li>
<li className="ConfModal-details-detail">
You are sending to <code>{toAddress}</code>
</li>
<li className="ConfModal-details-detail">
You are sending with a nonce of <code>{nonce}</code>
</li>
<li className="ConfModal-details-detail">
You are sending{' '}
<strong>
{value} {symbol}
</strong>{' '}
with a gas price of <strong>{gasPrice} gwei</strong>
</li>
<li className="ConfModal-details-detail">
You are interacting with the{' '}
<strong>{node.network}</strong>{' '}
network provided by <strong>{node.service}</strong>
</li>
{!token && (
<li className="ConfModal-details-detail">
{data ? (
<span>
You are sending the following data:{' '}
<textarea
className="form-control"
value={data}
rows={3}
disabled={true}
/>
</span>
) : (
'There is no data attached to this transaction'
)}
</li>
)}
</ul>
<div className="ConfModal-confirm">
{translate('SENDModal_Content_3')}
</div> </div>
</div> </div>
)}
<ul className="ConfModal-details"> </div>
<li className="ConfModal-details-detail"> }
You are sending from <code>{from}</code> </Modal>
</li> </div>
<li className="ConfModal-details-detail">
You are sending to <code>{toAddress}</code>
</li>
<li className="ConfModal-details-detail">
You are sending with a nonce of <code>{nonce}</code>
</li>
<li className="ConfModal-details-detail">
You are sending{' '}
<strong>
{value} {symbol}
</strong>{' '}
with a gas price of <strong>{gasPrice} gwei</strong>
</li>
<li className="ConfModal-details-detail">
You are interacting with the <strong>{node.network}</strong>{' '}
network provided by <strong>{node.service}</strong>
</li>
{!token && (
<li className="ConfModal-details-detail">
{data ? (
<span>
You are sending the following data:{' '}
<textarea
className="form-control"
value={data}
rows={3}
disabled={true}
/>
</span>
) : (
'There is no data attached to this transaction'
)}
</li>
)}
</ul>
<div className="ConfModal-confirm">
{translate('SENDModal_Content_3')}
</div>
</div>
)}
</div>
}
</Modal>
); );
} }

18
common/containers/Tabs/SendTransaction/index.tsx
View File

@ -382,14 +382,16 @@ export class SendTransaction extends React.Component<Props, State> {
</div> </div>
{!offline && ( {!offline && (
<div className="form-group"> <div className="row form-group">
<button <div className="col-xs-12">
className="btn btn-primary btn-block col-sm-11" <button
disabled={!this.state.transaction} className="btn btn-primary btn-block"
onClick={this.openTxModal} disabled={!this.state.transaction}
> onClick={this.openTxModal}
{translate('SEND_trans')} >
</button> {translate('SEND_trans')}
</button>
</div>
</div> </div>
)} )}
</div> </div>