From e7f1fc44361829f05a713218f8b1837a8574c2f2 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 19 Sep 2017 18:49:35 -0700
Subject: Buy Modal Styling

---
 ui/app/components/modals/modal.js      |  7 ++++---
 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;
       }
     }
-- 
cgit