Merge pull request #4634 from MetaMask/i4503-touch-up-shpshft-button-style

Fix style of shapeshift screen in deposit modal.

2 files changed, 26 insertions, 7 deletions

diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 93d2023b5..2c4ba40bf 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -181,7 +181,7 @@ ShapeshiftForm.prototype.render = function () {
   return h('div.shapeshift-form-wrapper', [
     showQrCode
       ? this.renderQrCode()
-      : h('div.shapeshift-form', [
+      : h('div.modal-shapeshift-form', [
           h('div.shapeshift-form__selectors', [
 
             h('div.shapeshift-form__selector', [
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 74658f656..42ef7ae0a 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -642,10 +642,31 @@
     display: flex;
     flex-flow: column nowrap;
     flex: 1;
+    align-items: center;
 
     @media screen and (max-width: 575px) {
       height: 0;
     }
+
+    .shapeshift-form-wrapper {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      flex: 1 0 auto;
+
+      .shapeshift-form, .modal-shapeshift-form {
+        border-radius: 8px;
+        background-color: rgba(0, 0, 0, .05);
+        padding: 17px 15px;
+        margin-bottom: 10px;
+
+        &__caret {
+          width: auto;
+          flex: 1;
+        }
+      }
+    }
   }
 
   &__logo {
@@ -773,17 +794,15 @@
     margin-top: 28px;
     flex: 1 0 auto;
 
-    .shapeshift-form {
-      width: auto;
+    .shapeshift-form, .modal-shapeshift-form {
+      border-radius: 8px;
+      background-color: rgba(0, 0, 0, .05);
+      padding: 17px 15px;
 
       &__caret {
         width: auto;
         flex: 1;
       }
-
-      @media screen and (max-width: 575px) {
-        width: auto;
-      }
     }
   }