Fix styling in rules meta data

5 files changed, 27 insertions, 20 deletions

diff --git a/server/sonar-web/src/main/js/components/common/MultiSelect.tsx b/server/sonar-web/src/main/js/components/common/MultiSelect.tsx
index 8fe2519b558..bc235e5a1af 100644
--- a/server/sonar-web/src/main/js/components/common/MultiSelect.tsx
+++ b/server/sonar-web/src/main/js/components/common/MultiSelect.tsx
@@ -235,6 +235,7 @@ export default class MultiSelect extends React.PureComponent<Props, State> {
         <div className="menu-search">
           <SearchBox
             autoFocus={true}
+            className="little-spacer-top"
             onChange={this.handleSearchChange}
             placeholder={this.props.placeholder}
             value={query}
@@ -244,32 +245,32 @@ export default class MultiSelect extends React.PureComponent<Props, State> {
           {selectedElements.length > 0 &&
             selectedElements.map(element => (
               <MultiSelectOption
-                key={element}
-                element={element}
-                selected={true}
                 active={activeElement === element}
-                onSelectChange={this.handleSelectChange}
+                element={element}
+                key={element}
                 onHover={this.handleElementHover}
+                onSelectChange={this.handleSelectChange}
+                selected={true}
               />
             ))}
           {unselectedElements.length > 0 &&
             unselectedElements.map(element => (
               <MultiSelectOption
-                key={element}
-                element={element}
                 active={activeElement === element}
-                onSelectChange={this.handleSelectChange}
+                element={element}
+                key={element}
                 onHover={this.handleElementHover}
+                onSelectChange={this.handleSelectChange}
               />
             ))}
           {this.isNewElement(query, this.props) && (
             <MultiSelectOption
-              key={query}
-              element={query}
-              custom={true}
               active={activeElement === query}
-              onSelectChange={this.handleSelectChange}
+              custom={true}
+              element={query}
+              key={query}
               onHover={this.handleElementHover}
+              onSelectChange={this.handleSelectChange}
             />
           )}
         </ul>
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MultiSelect-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MultiSelect-test.tsx.snap
index 32dac980bbe..15c17fc74ad 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MultiSelect-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MultiSelect-test.tsx.snap
@@ -9,6 +9,7 @@ exports[`should render multiselect with selected elements 1`] = `
   >
     <SearchBox
       autoFocus={true}
+      className="little-spacer-top"
       onChange={[Function]}
       placeholder=""
       value=""
@@ -38,6 +39,7 @@ exports[`should render multiselect with selected elements 2`] = `
   >
     <SearchBox
       autoFocus={true}
+      className="little-spacer-top"
       onChange={[Function]}
       placeholder=""
       value=""
@@ -81,6 +83,7 @@ exports[`should render multiselect with selected elements 3`] = `
   >
     <SearchBox
       autoFocus={true}
+      className="little-spacer-top"
       onChange={[Function]}
       placeholder=""
       value=""
@@ -124,6 +127,7 @@ exports[`should render multiselect with selected elements 4`] = `
   >
     <SearchBox
       autoFocus={true}
+      className="little-spacer-top"
       onChange={[Function]}
       placeholder=""
       value="test"
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
index 75013a4c6ef..270cbe04158 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
@@ -124,12 +124,13 @@ class SetAssigneePopup extends React.PureComponent {
   render() {
     return (
       <BubblePopup
-        position={this.props.popupPosition}
-        customClass="bubble-popup-menu bubble-popup-bottom">
+        customClass="bubble-popup-menu bubble-popup-bottom"
+        position={this.props.popupPosition}>
         <div className="multi-select">
           <div className="menu-search">
             <SearchBox
               autoFocus={true}
+              className="little-spacer-top"
               minLength={2}
               onChange={this.handleSearchChange}
               placeholder={translate('search.search_for_users')}
@@ -137,8 +138,8 @@ class SetAssigneePopup extends React.PureComponent {
             />
           </div>
           <SelectList
-            items={map(this.state.users, 'login')}
             currentItem={this.state.currentUser}
+            items={map(this.state.users, 'login')}
             onSelect={this.props.onSelect}>
             {this.state.users.map(user => (
               <SelectListItem key={user.login} item={user.login}>
diff --git a/server/sonar-web/src/main/js/components/ui/buttons.css b/server/sonar-web/src/main/js/components/ui/buttons.css
index da474c888c4..3df0420fc49 100644
--- a/server/sonar-web/src/main/js/components/ui/buttons.css
+++ b/server/sonar-web/src/main/js/components/ui/buttons.css
@@ -48,6 +48,10 @@
   padding: 0;
 }
 
+.button-icon.button-icon.button-tiny svg {
+  margin-top: 0;
+}
+
 .button-icon.button-icon:hover,
 .button-icon.button-icon:focus {
   background-color: currentColor;
diff --git a/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs b/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs
index a20fdd8bed8..304daeaca48 100644
--- a/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs
+++ b/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs
@@ -24,7 +24,7 @@
 
       <li class="coding-rules-detail-property coding-rules-detail-tag-list {{#if canWrite}}coding-rules-detail-tags-change{{/if}}"
           data-toggle="tooltip" data-placement="bottom" title="Rule tags">
-        <i class="icon-tags"></i>
+        <i class="icon-tags little-spacer-right"></i>
         <span>{{#if allTags}}{{join allTags ', '}}{{else}}{{t 'coding_rules.no_tags'}}{{/if}}</span>
       </li>
 
@@ -41,7 +41,7 @@
         </li>
       {{/if}}
 
-      <li class="pull-right spacer-left">
+      <li class="coding-rules-detail-property spacer-left">
         <a class="link-no-underline" target="_blank" href="{{permalink}}">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -54,10 +54,7 @@
             />
           </svg>
         </a>
-      </li>
-
-      <li class="pull-right">
-        <span class="note">{{key}}</span>
+        <span class="note little-spacer-left">{{key}}</span>
       </li>
     </ul>