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

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

@ -1,8 +1,15 @@
@import "common/sass/variables";
$summary-height: 54px;
$button-break: 'max-width: 620px';
.ConfModal {
min-width: 580px;
@media (#{$button-break}) {
min-width: 0;
}
&-summary {
display: flex;
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;
return (
<Modal
title="Confirm Your Transaction"
buttons={buttons}
handleClose={onClose}
disableButtons={isBroadcasting}
isOpen={true}
>
{
<div className="ConfModal">
{isBroadcasting ? (
<div className="ConfModal-loading">
<Spinner size="5x" />
</div>
) : (
<div>
<div className="ConfModal-summary">
<div className="ConfModal-summary-icon ConfModal-summary-icon--from">
<Identicon size="100%" address={from} />
</div>
<div className="ConfModal-summary-amount">
<div className="ConfModal-summary-amount-arrow" />
<div className="ConfModal-summary-amount-currency">
{value} {symbol}
<div className="ConfModalWrap">
<Modal
title="Confirm Your Transaction"
buttons={buttons}
handleClose={onClose}
disableButtons={isBroadcasting}
isOpen={true}
>
{
<div className="ConfModal">
{isBroadcasting ? (
<div className="ConfModal-loading">
<Spinner size="5x" />
</div>
) : (
<div>
<div className="ConfModal-summary">
<div className="ConfModal-summary-icon ConfModal-summary-icon--from">
<Identicon size="100%" address={from} />
</div>
<div className="ConfModal-summary-amount">
<div className="ConfModal-summary-amount-arrow" />
<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 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>
<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>
}
</Modal>
)}
</div>
}
</Modal>
</div>
);
}

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

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