From cf9ff0988b6e962498f10e144fc4416b83f70f18 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Tue, 6 Sep 2016 23:57:58 +0500
Subject: [PATCH] Minor UI fixes (#3970)

* Minor UI fixes
---
 .../components/confirm_integration.jsx             | 14 ++++++++++----
 webapp/i18n/en.json                                |  1 +
 webapp/sass/components/_tutorial.scss              |  4 ++--
 webapp/sass/routes/_backstage.scss                 |  4 ++++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/webapp/components/integrations/components/confirm_integration.jsx b/webapp/components/integrations/components/confirm_integration.jsx
index ce7e50fd14..bb26a9a8af 100644
--- a/webapp/components/integrations/components/confirm_integration.jsx
+++ b/webapp/components/integrations/components/confirm_integration.jsx
@@ -82,7 +82,7 @@ export default class ConfirmIntegration extends React.Component {
                 </p>
             );
             tokenText = (
-                <p>
+                <p className='word-break--all'>
                     <FormattedHTMLMessage
                         id='add_command.token'
                         defaultMessage='<b>Token</b>: {token}'
@@ -108,7 +108,7 @@ export default class ConfirmIntegration extends React.Component {
                 </p>
             );
             tokenText = (
-                <p>
+                <p className='word-break--all'>
                     <FormattedHTMLMessage
                         id='add_incoming_webhook.url'
                         defaultMessage='<b>URL</b>: {url}'
@@ -134,7 +134,7 @@ export default class ConfirmIntegration extends React.Component {
                 </p>
             );
             tokenText = (
-                <p>
+                <p className='word-break--all'>
                     <FormattedHTMLMessage
                         id='add_outgoing_webhook.token'
                         defaultMessage='<b>Token</b>: {token}'
@@ -199,7 +199,7 @@ export default class ConfirmIntegration extends React.Component {
                 );
 
                 tokenText = (
-                    <p>
+                    <p className='word-break--all'>
                         <FormattedHTMLMessage
                             id='add_oauth_app.url'
                             defaultMessage='<b>URL(s)</b>: {url}'
@@ -224,6 +224,12 @@ export default class ConfirmIntegration extends React.Component {
                     />
                 </BackstageHeader>
                 <div className='backstage-form backstage-form__confirmation'>
+                    <h4 className='backstage-form__title'>
+                        <FormattedMessage
+                            id='integrations.successful'
+                            defaultMessage='Setup Successful'
+                        />
+                    </h4>
                     {helpText}
                     {tokenText}
                     <div className='backstage-form__footer'>
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index a3b777accd..dff0150d27 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1345,6 +1345,7 @@
   "installed_outgoing_webhooks.search": "Search Outgoing Webhooks",
   "installed_outgoing_webhooks.unknown_channel": "A Private Webhook",
   "integrations.add": "Add",
+  "integrations.successful": "Setup Successful",
   "integrations.command.description": "Slash commands send events to external integrations",
   "integrations.command.title": "Slash Command",
   "integrations.done": "Done",
diff --git a/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss
index cd972c80c6..0eae59629a 100644
--- a/webapp/sass/components/_tutorial.scss
+++ b/webapp/sass/components/_tutorial.scss
@@ -182,7 +182,7 @@
             display: inline-block;
             margin-bottom: 50px;
             max-width: 310px;
-            min-height: 410px;
+            min-height: 480px;
             position: relative;
             text-align: left;
         }
@@ -206,7 +206,7 @@
     }
 
     .tutorial__circles {
-        bottom: 40px;
+        bottom: 25px;
         position: absolute;
     }
 
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index 871189f45b..79a92cde5c 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -287,6 +287,10 @@
         font-weight: normal;
     }
 
+    .backstage-form__title {
+        margin: 5px 0 1.5em;
+    }
+
     .radio,
     .checkbox {
         input {