diff options
-rw-r--r-- | ui/app/components/modals/modal.js | 7 | ||||
-rw-r--r-- | ui/app/css/itcss/components/modal.scss | 20 |
2 files changed, 17 insertions, 10 deletions
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 477dcbe86..04a2f5f40 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -21,12 +21,13 @@ const MODALS = { mobileModalStyle: { width: '95%', top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', }, laptopModalStyle: { width: '66%', + maxWidth: '550px', top: 'calc(30% + 10px)', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', }, }, @@ -64,7 +65,7 @@ const MODALS = { }, contentStyle: { borderRadius: '4px', - } + }, }, NEW_ACCOUNT: { diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index e9698ce5b..c85e61ae2 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -9,6 +9,12 @@ justify-content: center; text-align: center; font-family: 'DIN OT'; + padding: 0 16px; +} + +.buy-modal-content-option { + cursor: pointer; + color: #5B5D67; } @media screen and (max-width: 575px) { @@ -44,7 +50,6 @@ border-radius: 6px; border: 1px solid $black; padding: 0% 7%; - justify-content: space-around; div.buy-modal-content-option-title { font-size: 20px; @@ -76,29 +81,30 @@ .buy-modal-content-options { flex-direction: row; - margin: 20px 0; + margin: 20px 0 60px; } div.buy-modal-content-option { display: flex; flex-direction: column; width: 20vw; - height: 18vw; + height: 120px; text-align: center; border-radius: 6px; border: 1px solid $black; - margin: 0 .5vw; - justify-content: space-around; + margin: 0 8px; + padding: 18px 0; div.buy-modal-content-option-title { font-size: 20px; + margin-bottom: 12px; @media screen and (max-width: 679px) { font-size: 14px; } @media screen and (min-width: 1281px) { - font-size: 26px; + font-size: 20px; } } @@ -121,7 +127,7 @@ } @media screen and (min-width: 1281px) { - font-size: 20px; + font-size: 16px; padding: 0; } } |