Minor UI fixes (#3970)

* Minor UI fixes

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'>

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",

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;
     }
 

webapp/sass/routes/_backstage.scss

@@ -287,6 +287,10 @@
         font-weight: normal;
     }
 
+    .backstage-form__title {
+        margin: 5px 0 1.5em;
+    }
+
     .radio,
     .checkbox {
         input {