aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--ui/app/components/modals/modal.js7
-rw-r--r--ui/app/css/itcss/components/modal.scss20
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;
}
}