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 {

webapp/sass/components/_suggestion-list.scss

@@ -4,19 +4,26 @@
     @extend %popover-box-shadow;
     width: 100%;
     z-index: 100;
+
+    .suggestion-list__item {
+        &:hover {
+            background: alpha-color($black, .1);
+        }
+    }
 }
 
 .suggestion-list--top {
-    position: absolute;
     bottom: 100%;
+    position: absolute;
 }
 
 .suggestion-list--bottom {
-    position: relative;
     height: 0;
+    position: relative;
 }
 
 .suggestion-list__content {
+    -webkit-overflow-scrolling: touch;
     background-color: $white;
     border: $border-gray;
     max-height: 292px;
@@ -24,7 +31,6 @@
     overflow-y: scroll;
     padding-bottom: 5px;
     width: 100%;
-    -webkit-overflow-scrolling: touch;
 
     .command {
         border-bottom: 1px solid $light-gray;

webapp/sass/routes/_admin-console.scss

@@ -185,6 +185,17 @@
         margin: 2em 0;
         padding: .8em 1.5rem;
 
+        &.banner--url {
+            padding: 1.2em;
+        }
+
+        .banner__url {
+            background: alpha-color($black, .07);
+            border-radius: 2px;
+            padding: .7em 1em;
+            word-break: break-all;
+        }
+
         .banner__heading {
             font-size: 1.5em;
             margin-bottom: 0.5em;
@@ -305,7 +316,7 @@
     .status-icon-error {
         color: #ea6262;
     }
-    
+
     .suggestion--selected {
         background-color: #e2e2e2;
     }