PLT-7295 - Submitting UI changes for Jira (#7097)

* PLT-7295 - Submitting UI changes for Jira

* Updating help text

* Revert "Updating help text"

This reverts commit 2885b290c6951b47da1465095ee6e83c6a750f33.

webapp/plugins/jira/components/settings.jsx

@@ -29,7 +29,7 @@ class UserSuggestion extends Suggestion {
     render() {
         const {item, isSelection} = this.props;
 
-        let className = 'jirabots__name';
+        let className = 'suggestion-list__item mentions__name';
         if (isSelection) {
             className += ' suggestion--selected';
         }
@@ -218,7 +218,7 @@ export default class JIRASettings extends AdminSettings {
                     onChange={this.handleSecretChange}
                     disabled={!this.state.enabled}
                 />
-                <div className='banner'>
+                <div className='banner banner--url'>
                     <div className='banner__content'>
                         <p>
                             <FormattedMessage
@@ -229,8 +229,8 @@ export default class JIRASettings extends AdminSettings {
                                 }}
                             />
                         </p>
-                        <p>
-                            <code
+                        <div className='banner__url'>
+                            <span
                                 dangerouslySetInnerHTML={{
                                     __html: encodeURI(this.state.siteURL) +
                                         '/plugins/jira/webhook?secret=' +
@@ -242,7 +242,7 @@ export default class JIRASettings extends AdminSettings {
                                         '</b>'
                                 }}
                             />
-                        </p>
+                        </div>
                     </div>
                 </div>
             </SettingsGroup>

webapp/plugins/jira/components/style.scss

@@ -5,34 +5,19 @@
 
 .jirabots__dropdown {
     position: relative;
-}
 
-.jirabots__dropdown::before {
-    position: absolute;
-    top: 13px;
-    right: 8px;
-    content: " ";
-    pointer-events: none;
-
-    width: 0; 
-    height: 0; 
-
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 8px solid #e2e2e2;
-}
-
-.jirabots__name {
-    @include clearfix;
-    cursor: pointer;
-    font-size: 13px;
-    line-height: 20px;
-    margin: 0;
-    padding: 6px 10px;
-    position: relative;
-    white-space: nowrap;
-    width: 100%;
-    z-index: 101;
+    &:before {
+        border-color: #999 transparent transparent;
+        border-style: solid;
+        border-width: 5px 5px 2.5px;
+        content: '';
+        height: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 11px;
+        top: 15px;
+        width: 0;
+    }
 }
 
 .jirabot__image {