diff options
| -rw-r--r-- | ui/app/components/customize-gas-modal/index.js | 7 | ||||
| -rw-r--r-- | ui/app/components/modals/modal.js | 7 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/confirm.scss | 4 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/send.scss | 30 |
4 files changed, 34 insertions, 14 deletions
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 710ee24c0..e5bfcfc63 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -198,7 +198,7 @@ CustomizeGasModal.prototype.render = function () { }) return h('div.send-v2__customize-gas', {}, [ - h('div', { + h('div.send-v2__customize-gas__content', { }, [ h('div.send-v2__customize-gas__header', {}, [ @@ -241,8 +241,9 @@ CustomizeGasModal.prototype.render = function () { ]), h('div.send-v2__customize-gas__revert', { - onClick: () => console.log('Revert'), - }, ['Revert']), + // onClick: () => console.log('Revert'), + }, ['']), + // }, ['Revert']), h('div.send-v2__customize-gas__buttons', [ h('div.send-v2__customize-gas__cancel', { diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 88deb2bb0..e15dd6c1b 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -162,10 +162,9 @@ const MODALS = { h(CustomizeGasModal, {}, []), ], mobileModalStyle: { - width: '355px', - height: '598px', - // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', - top: '5%', + width: '100vw', + height: '100vh', + top: '0', transform: 'none', left: '0', right: '0', diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 03da5acb6..4a8232e39 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -85,8 +85,10 @@ background: $athens-grey; position: absolute; transform: rotate(45deg); - left: 178px; top: 71px; + left: 0; + right: 0; + margin: 0 auto; } .confirm-screen-title { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 458434de4..a8d46067b 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -274,6 +274,7 @@ color: #9b9b9b; font-size: .8em; padding: 1px 4px; + cursor: pointer; } .token-gas { @@ -474,6 +475,7 @@ @media screen and (max-width: $break-small) { height: 59px; + width: 100vw; } } @@ -484,10 +486,13 @@ position: absolute; transform: rotate(45deg); left: 178px; - top: 65px; + top: 75px; @media screen and (max-width: $break-small) { top: 46px; + left: 0; + right: 0; + margin: 0 auto; } } @@ -706,8 +711,8 @@ flex-flow: column; @media screen and (max-width: $break-small) { - width: 355px; - height: 598px; + width: 100vw; + height: 100vh; } &__header { @@ -717,6 +722,10 @@ align-items: center; justify-content: space-between; font-size: 22px; + + @media screen and (max-width: $break-small) { + flex: 0 0 auto; + } } &__title { @@ -732,14 +741,19 @@ margin-right: 19.25px; } + &__content { + display: flex; + flex-flow: column nowrap; + height: 100%; + } + &__body { - height: 248px; display: flex; + margin-bottom: 24px; @media screen and (max-width: $break-small) { - width: 355px; - height: 470px; flex-flow: column; + flex: 1 1 auto; } } @@ -751,6 +765,10 @@ justify-content: space-between; font-size: 22px; position: relative; + + @media screen and (max-width: $break-small) { + flex: 0 0 auto; + } } &__buttons { |