diff --git a/common/components/WalletDecrypt/DeterministicWalletsModal.scss b/common/components/WalletDecrypt/DeterministicWalletsModal.scss index 997e6c7f..b6bf5f2d 100644 --- a/common/components/WalletDecrypt/DeterministicWalletsModal.scss +++ b/common/components/WalletDecrypt/DeterministicWalletsModal.scss @@ -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 { diff --git a/common/containers/Tabs/SendTransaction/components/ConfirmationModal.scss b/common/containers/Tabs/SendTransaction/components/ConfirmationModal.scss index d59c1f64..3477ea74 100644 --- a/common/containers/Tabs/SendTransaction/components/ConfirmationModal.scss +++ b/common/containers/Tabs/SendTransaction/components/ConfirmationModal.scss @@ -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; + } + } + } +} diff --git a/common/containers/Tabs/SendTransaction/components/ConfirmationModal.tsx b/common/containers/Tabs/SendTransaction/components/ConfirmationModal.tsx index 5a704d49..e572c725 100644 --- a/common/containers/Tabs/SendTransaction/components/ConfirmationModal.tsx +++ b/common/containers/Tabs/SendTransaction/components/ConfirmationModal.tsx @@ -101,84 +101,87 @@ class ConfirmationModal extends React.Component { broadCastTxStatus && broadCastTxStatus.isBroadcasting; return ( - - { -
- {isBroadcasting ? ( -
- -
- ) : ( -
-
-
- -
-
-
-
- {value} {symbol} +
+ + { +
+ {isBroadcasting ? ( +
+ +
+ ) : ( +
+
+
+ +
+
+
+
+ {value} {symbol} +
+
+
+
-
- + +
    +
  • + You are sending from {from} +
  • +
  • + You are sending to {toAddress} +
  • +
  • + You are sending with a nonce of {nonce} +
  • +
  • + You are sending{' '} + + {value} {symbol} + {' '} + with a gas price of {gasPrice} gwei +
  • +
  • + You are interacting with the{' '} + {node.network}{' '} + network provided by {node.service} +
  • + {!token && ( +
  • + {data ? ( + + You are sending the following data:{' '} +