PLT-3484 OAuth2 Service Provider (#3632)

* PLT-3484 OAuth2 Service Provider

* PM text review for OAuth 2.0 Service Provider

* PLT-3484 OAuth2 Service Provider UI tweaks (#3668)

* Tweaks to help text

* Pushing OAuth improvements (#3680)

* Re-arrange System Console for OAuth 2.0 Provider

3 files changed, 42 insertions, 6 deletions

diff --git a/webapp/sass/components/_oauth.scss b/webapp/sass/components/_oauth.scss
index 04840457c..2b4f2f9c9 100644
--- a/webapp/sass/components/_oauth.scss
+++ b/webapp/sass/components/_oauth.scss
@@ -10,14 +10,19 @@
 
     .prompt__heading {
         display: table;
-        font-size: em(20px);
+        font-size: em(18px);
         line-height: normal;
         margin: 1em 0;
+        table-layout: fixed;
         width: 100%;
 
         > div {
             display: table-cell;
             vertical-align: top;
+
+            &:first-child {
+                width: 70px;
+            }
         }
 
         img {
@@ -26,12 +31,12 @@
     }
 
     .prompt__allow {
-        font-size: em(24px);
+        font-size: em(20px);
         margin: 1em 0;
     }
 
     .prompt__buttons {
-        border-top: 1px solid $dark-gray;
+        border-top: 1px solid $light-gray;
         padding: 1.5em 0;
         text-align: right;
     }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 53a9f6c7d..df615aa13 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,19 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .prompt {
+        .prompt__heading {
+            display: block;
+
+            > div {
+                &:first-child {
+                    display: block;
+                    margin: 0 0 1em;
+                }
+            }
+        }
+    }
+
     .scrollbar--view {
         margin-right: 0 !important;
     }
@@ -1092,6 +1105,10 @@
             @include translate3d(260px, 0, 0);
         }
     }
+
+    .integration__icon {
+        display: none;
+    }
 }
 
 @media screen and (max-height: 640px) {
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index 4b8c6ff6c..7bcafd4c1 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -40,7 +40,7 @@
 .backstage-content {
     background-color: $bg--gray;
     margin: 46px auto;
-    max-width: 960px;
+    max-width: 1200px;
     padding-left: 135px;
     vertical-align: top;
 }
@@ -216,6 +216,7 @@
     border-bottom: 1px solid $light-gray;
     display: flex;
     padding: 20px 15px;
+    position: relative;
 
     &:last-child {
         border: none;
@@ -276,6 +277,7 @@
     background-color: $white;
     border: 1px solid $light-gray;
     padding: 40px 30px 30px;
+    position: relative;
 
     label {
         font-weight: normal;
@@ -323,16 +325,27 @@
     }
 }
 
+.integration__icon {
+    position: absolute;
+    height: 100px;
+    width: 100px;
+    right: 20px;
+
+    &.integration-list__icon {
+        top: 50px;
+    }
+}
+
 .integration-option {
     background-color: $white;
     border: 1px solid $light-gray;
     display: inline-block;
-    height: 210px;
     margin: 0 30px 30px 0;
+    min-height: 230px;
     padding: 20px;
     text-align: center;
     vertical-align: top;
-    width: 250px;
+    width: 290px;
 
     &:last-child {
         margin-right: 0;
@@ -346,6 +359,7 @@
 
 .integration-option__image {
     height: 80px;
+    margin: .5em 0 .7em;
     width: 80px;
 }