Minor UI improvements (#3904)

* PLT-3917 - Adding cross icon to remove deleted post in the RHS.

* PLT-3997 - Improving the integration confirmation screen

1 files changed, 35 insertions, 33 deletions

diff --git a/webapp/components/integrations/components/confirm_integration.jsx b/webapp/components/integrations/components/confirm_integration.jsx
index 96e24c575..1b95824ca 100644
--- a/webapp/components/integrations/components/confirm_integration.jsx
+++ b/webapp/components/integrations/components/confirm_integration.jsx
@@ -74,15 +74,15 @@ export default class ConfirmIntegration extends React.Component {
                 />
             );
             helpText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_command.doneHelp'
                         defaultMessage='Your slash command has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href="https://docs.mattermost.com/developer/slash-commands.html">documentation</a> for further details).'
                     />
-                </div>
+                </p>
             );
             tokenText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_command.token'
                         defaultMessage='<b>Token</b>: {token}'
@@ -90,7 +90,7 @@ export default class ConfirmIntegration extends React.Component {
                             token: this.state.id
                         }}
                     />
-                </div>
+                </p>
             );
         } else if (this.state.type === Constants.Integrations.INCOMING_WEBHOOK) {
             headerText = (
@@ -100,15 +100,15 @@ export default class ConfirmIntegration extends React.Component {
                 />
             );
             helpText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_incoming_webhook.doneHelp'
                         defaultMessage='Your incoming webhook has been set up. Please send data to the following URL (see <a href=\"https://docs.mattermost.com/developer/webhooks-incoming.html\">documentation</a> for further details).'
                     />
-                </div>
+                </p>
             );
             tokenText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_incoming_webhook.url'
                         defaultMessage='<b>URL</b>: {url}'
@@ -116,7 +116,7 @@ export default class ConfirmIntegration extends React.Component {
                             url: window.location.origin + '/hooks/' + this.state.id
                         }}
                     />
-                </div>
+                </p>
             );
         } else if (this.state.type === Constants.Integrations.OUTGOING_WEBHOOK) {
             headerText = (
@@ -126,15 +126,15 @@ export default class ConfirmIntegration extends React.Component {
                 />
             );
             helpText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_outgoing_webhook.doneHelp'
                         defaultMessage='Your outgoing webhook has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href=\"https://docs.mattermost.com/developer/webhooks-outgoing.html\">documentation</a> for further details).'
                     />
-                </div>
+                </p>
             );
             tokenText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_outgoing_webhook.token'
                         defaultMessage='<b>Token</b>: {token}'
@@ -142,7 +142,7 @@ export default class ConfirmIntegration extends React.Component {
                             token: this.state.id
                         }}
                     />
-                </div>
+                </p>
             );
         } else if (this.state.type === Constants.Integrations.OAUTH_APP) {
             let oauthApp = {};
@@ -163,15 +163,15 @@ export default class ConfirmIntegration extends React.Component {
 
                 helpText = [];
                 helpText.push(
-                    <div className='backstage-list__help'>
+                    <p>
                         <FormattedMessage
                             id='add_oauth_app.doneHelp'
                             defaultMessage='Your OAuth 2.0 application has been set up. Please use the following Client ID and Client Secret when requesting authorization for your application.'
                         />
-                    </div>
+                    </p>
                 );
                 helpText.push(
-                    <div className='backstage-list__help'>
+                    <p>
                         <FormattedHTMLMessage
                             id='add_oauth_app.clientId'
                             defaultMessage='<b>Client ID:</b> {id}'
@@ -186,20 +186,20 @@ export default class ConfirmIntegration extends React.Component {
                                 secret: oauthApp.client_secret
                             }}
                         />
-                    </div>
+                    </p>
                 );
 
                 helpText.push(
-                    <div className='backstage-list__help'>
+                    <p>
                         <FormattedHTMLMessage
                             id='add_oauth_app.doneUrlHelp'
                             defaultMessage='Please send data to the following URL.'
                         />
-                    </div>
+                    </p>
                 );
 
                 tokenText = (
-                    <div className='backstage-list__help'>
+                    <p>
                         <FormattedHTMLMessage
                             id='add_oauth_app.url'
                             defaultMessage='<b>URL(s)</b>: {url}'
@@ -207,7 +207,7 @@ export default class ConfirmIntegration extends React.Component {
                                 url: oauthApp.callback_urls
                             }}
                         />
-                    </div>
+                    </p>
                 );
             }
         }
@@ -223,19 +223,21 @@ export default class ConfirmIntegration extends React.Component {
                         defaultMessage='Add'
                     />
                 </BackstageHeader>
-                {helpText}
-                {tokenText}
-                <div className='backstage-list__help'>
-                    <SpinnerButton
-                        className='btn btn-primary'
-                        type='submit'
-                        onClick={this.handleDone}
-                    >
-                        <FormattedMessage
-                            id='integrations.done'
-                            defaultMessage='Done'
-                        />
-                    </SpinnerButton>
+                <div className='backstage-form backstage-form__confirmation'>
+                    {helpText}
+                    {tokenText}
+                    <div className='backstage-form__footer'>
+                        <SpinnerButton
+                            className='btn btn-primary'
+                            type='submit'
+                            onClick={this.handleDone}
+                        >
+                            <FormattedMessage
+                                id='integrations.done'
+                                defaultMessage='Done'
+                            />
+                        </SpinnerButton>
+                    </div>
                 </div>
             </div>
         );