SONAR-8713 update issue type icons, add new places

9 files changed, 28 insertions, 34 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/styles.css b/server/sonar-web/src/main/js/apps/about/styles.css
index a3aba28b9b7..98840ab8fcd 100644
--- a/server/sonar-web/src/main/js/apps/about/styles.css
+++ b/server/sonar-web/src/main/js/apps/about/styles.css
@@ -72,6 +72,11 @@
   text-align: left;
 }
 
+.about-page-issue-types svg {
+  vertical-align: middle;
+  transform: translateY(-1px);
+}
+
 .about-page-issue-type-number {
   display: inline-block;
   min-width: 60px;
diff --git a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js
index e490522146a..3e8a6cdeadb 100644
--- a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js
+++ b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js
@@ -162,7 +162,7 @@ export default class QualityGateCondition extends React.Component {
 
           <div>
             <div className="overview-quality-gate-condition-metric">
-              <IssueTypeIcon query={metric.key} className="spacer-right"/>
+              <IssueTypeIcon query={metric.key} className="little-spacer-right"/>
               {metric.name}
             </div>
             {!isDiff && period != null && (
diff --git a/server/sonar-web/src/main/js/components/source-viewer/templates/measures/_source-viewer-measures-all.hbs b/server/sonar-web/src/main/js/components/source-viewer/templates/measures/_source-viewer-measures-all.hbs
index ee5ff5358a6..cac99fea52d 100644
--- a/server/sonar-web/src/main/js/components/source-viewer/templates/measures/_source-viewer-measures-all.hbs
+++ b/server/sonar-web/src/main/js/components/source-viewer/templates/measures/_source-viewer-measures-all.hbs
@@ -9,7 +9,7 @@
             </div>
             {{#each metrics}}
                 <div class="measure measure-one-line" data-metric="{{key}}">
-                  <span class="measure-name">{{name}}</span>
+                  <span class="measure-name">{{#eq key 'bugs'}}{{issueTypeIcon 'BUG'}} {{/eq}}{{#eq key 'vulnerabilities'}}{{issueTypeIcon 'VULNERABILITY'}} {{/eq}}{{#eq key 'code_smells'}}{{issueTypeIcon 'CODE_SMELL'}} {{/eq}}{{name}}</span>
                   <span class="measure-value">&nbsp;{{value}}</span>
                 </div>
             {{/each}}
@@ -29,7 +29,7 @@
             </div>
             {{#each metrics}}
               <div class="measure measure-one-line" data-metric="{{key}}">
-                <span class="measure-name">{{name}}</span>
+                <span class="measure-name">{{#eq key 'bugs'}}{{issueTypeIcon 'BUG'}} {{/eq}}{{#eq key 'vulnerabilities'}}{{issueTypeIcon 'VULNERABILITY'}} {{/eq}}{{#eq key 'code_smells'}}{{issueTypeIcon 'CODE_SMELL'}} {{/eq}}{{name}}</span>
                 <span class="measure-value">&nbsp;{{value}}</span>
               </div>
             {{/each}}
diff --git a/server/sonar-web/src/main/js/components/ui/BugIcon.js b/server/sonar-web/src/main/js/components/ui/BugIcon.js
index 4b61686c888..e6f31697112 100644
--- a/server/sonar-web/src/main/js/components/ui/BugIcon.js
+++ b/server/sonar-web/src/main/js/components/ui/BugIcon.js
@@ -24,10 +24,8 @@ export default class BugIcon extends React.Component {
   render () {
     /* eslint-disable max-len */
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style={{ position: 'relative', top: -1, verticalAlign: 'middle' }}>
-          <g transform="matrix(1,0,0,1,0.495158,0.453789)">
-            <path style={{ fill: 'currentColor' }} d="M10.3 8l1.4 1.2.7-.8L10.7 7H9v-.3l2-2.3V2h-1v2L9 5.1V4h-.2c-.1-.8-.6-1.5-1.3-1.8L8.9.8 8.1.1 6.5 1.7 4.9.1l-.7.7 1.4 1.4c-.8.3-1.3 1-1.4 1.8H4v1.1L3 4V2H2v2.3l2 2.3V7H2.3L.7 8.4l.7.8L2.7 8H4v.3l-2 1.9V13h1v-2.4l1-1C4 11 5.1 12 6.4 12h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V13h1v-2.8L9 8.3V8h1.3zM6 10V4.3h1V10H6z"/>
-          </g>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+          <path style={{ fill: 'currentColor' }} d="M11 9h1.3l.5.8.8-.5-.8-1.3H11v-.3l2-2.3V3h-1v2l-1 1.2V5c-.1-.8-.7-1.5-1.4-1.9L11 1.8l-.7-.7-1.8 1.6-1.8-1.6-.7.7 1.5 1.3C6.7 3.5 6.1 4.2 6 5v1.1L5 5V3H4v2.3l2 2.3V8H4.2l-.7 1.2.8.5.4-.7H6v.3l-2 1.9V14h1v-2.4l1-1C6 12 7.1 13 8.4 13h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V14h1v-2.8l-2-1.9V9zm-2 2H8V6h1v5z"/>
         </svg>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js b/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js
index 86b86422c3b..7f510cdaca5 100644
--- a/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js
+++ b/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js
@@ -24,10 +24,8 @@ export default class CodeSmellIcon extends React.Component {
   render () {
     /* eslint-disable max-len */
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style={{ position: 'relative', top: -1, verticalAlign: 'middle' }}>
-          <g transform="matrix(1,0,0,1,0.5,0.5)">
-            <path style={{ fill: 'currentColor' }} d="M6.5 0C2.9 0 0 2.9 0 6.5S2.9 13 6.5 13 13 10.1 13 6.5 10.1 0 6.5 0zM6 6h1v1H6V6zm-4.1.2c-.1 0-.2-.1-.2-.2 0-.4.2-1.3.7-2.1.5-1 1.3-1.5 1.6-1.7.1-.1.2 0 .3.1l1.4 2.5c0 .1 0 .2-.1.3-.2.1-.3.3-.4.4-.1.2-.2.4-.2.6 0 .1-.1.2-.2.2l-2.9-.1zm6.7 4.7c-.3.2-1.2.5-2.2.5-1 0-1.8-.4-2.2-.5-.1-.1-.1-.2-.1-.3l1.4-2.5c.1-.1.2-.1.3-.1.2.1.4.1.6.1.2 0 .4 0 .6-.1.1 0 .2 0 .3.1l1.4 2.5c0 .1 0 .2-.1.3zm2.6-4.5l-2.8.1c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.6l-.4-.4c-.1 0-.2-.2-.1-.2l1.4-2.5c.1-.1.2-.1.3-.1.3.2 1 .7 1.6 1.6.5.9.6 1.8.7 2.1-.1.1-.1.2-.3.2z"/>
-          </g>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+          <path style={{ fill: 'currentColor' }} d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm-.5 5.5h.9v.9h-.9v-.9zm-3.8.2c-.1 0-.2-.1-.2-.2 0-.4.1-1.2.6-2S5.3 4.2 5.6 4c.2 0 .3 0 .3.1l1.3 2.3c0 .1 0 .2-.1.2-.1.2-.2.3-.3.5-.1.2-.2.4-.2.5 0 .1-.1.2-.2.2l-2.7-.1zM9.9 12c-.3.2-1.1.5-2 .5-.9 0-1.7-.3-2-.5-.1 0-.1-.2-.1-.3l1.3-2.3c0-.1.1-.1.2-.1.2.1.3.1.5.1s.4 0 .5-.1c.1 0 .2 0 .2.1l1.3 2.3c.2.2.2.3.1.3zm2.5-4.1L9.7 8c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.5 0-.1-.2-.3-.3-.4-.1 0-.1-.1-.1-.2l1.3-2.3c.1-.1.2-.1.3-.1.3.2 1 .7 1.5 1.5s.6 1.6.6 2c0 0-.1.1-.2.1z"/>
         </svg>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js b/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js
index 3891aaa0b97..ebf2704bbb8 100644
--- a/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js
+++ b/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js
@@ -24,11 +24,8 @@ export default class VulnerabilityIcon extends React.Component {
   render () {
     /* eslint-disable max-len */
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style={{ position: 'relative', top: -1, verticalAlign: 'middle' }}>
-          <g transform="matrix(1,0,0,1,2.49176,-0.686483)">
-            <path style={{ fill: 'currentColor' }} d="M7.5 6H3V3.6c0-1 .8-1.9 1.9-1.9s1.9.8 1.9 1.9c0 .3.2.5.5.5s.5-.2.5-.5C7.8 2 6.5.7 4.9.7S2 2.1 2 3.6V6h-.5C.7 6 0 6.7 0 7.5v5c0 .8.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5v-5C9 6.7 8.3 6 7.5 6zM3 9.5C3 8.7 3.7 8 4.5 8S6 8.7 6 9.5c0 .7-.4 1.2-1 1.4V12H4v-1.1c-.6-.2-1-.7-1-1.4zM10.9 2.9L9.5 3c.1 0 .2 0 .3-.1l1-1c.2-.2.2-.5 0-.7s-.5-.2-.7 0l-1 1c-.1.1-.1.5 0 .7.1 0 .3.1.4.1-.3 0-.5.3-.5.5 0 .3.2.5.5.5l1.4-.1c.3 0 .5-.3.5-.5 0-.3-.3-.5-.5-.5z"/>
-            <path style={{ fill: 'currentColor' }} d="M9.8 4.1c-.2-.2-.5-.1-.7.1-.2.2-.1.5.1.7l1.1.9c.1.1.2.1.3.1.1 0 .3-.1.4-.2.2-.2.1-.5-.1-.7l-1.1-.9z"/>
-          </g>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+          <path style={{ fill: 'currentColor' }} d="M10.8 5H6V3.9a2.28 2.28 0 0 1 2-2.5 2.22 2.22 0 0 1 1.8 1.2.48.48 0 0 0 .7.2.48.48 0 0 0 .2-.7A3 3 0 0 0 8 .4a3.34 3.34 0 0 0-3 3.5v1.2a2.16 2.16 0 0 0-2 2.1v4.4a2.22 2.22 0 0 0 2.2 2.2h5.6a2.22 2.22 0 0 0 2.2-2.2V7.2A2.22 2.22 0 0 0 10.8 5zm-2.2 5.5v1.2H7.4v-1.2a1.66 1.66 0 0 1-1.1-1.6A1.75 1.75 0 0 1 8 7.2a1.71 1.71 0 0 1 .6 3.3z"/>
         </svg>
     );
   }
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 230088e7e87..9c43694986b 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
@@ -8,7 +8,7 @@
       {{#if severity}}
         <li class="coding-rules-detail-property"
             data-toggle="tooltip" data-placement="bottom" title="{{t 'coding_rules.type.tooltip' this.type}}">
-          {{issueType this.type}}
+          <span class="little-spacer-right">{{issueTypeIcon this.type}}</span>{{issueType this.type}}
         </li>
 
         <li class="coding-rules-detail-property"
diff --git a/server/sonar-web/src/main/js/helpers/handlebars/issueTypeIcon.js b/server/sonar-web/src/main/js/helpers/handlebars/issueTypeIcon.js
index 916e190a476..04d0051cf11 100644
--- a/server/sonar-web/src/main/js/helpers/handlebars/issueTypeIcon.js
+++ b/server/sonar-web/src/main/js/helpers/handlebars/issueTypeIcon.js
@@ -21,26 +21,19 @@ import Handlebars from 'handlebars/runtime';
 
 /* eslint-disable max-len */
 const bug = new Handlebars.default.SafeString(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style="position: relative; top: -1px; vertical-align: middle">
-      <g transform="matrix(1,0,0,1,0.495158,0.453789)">
-        <path style="fill: currentColor" d="M10.3 8l1.4 1.2.7-.8L10.7 7H9v-.3l2-2.3V2h-1v2L9 5.1V4h-.2c-.1-.8-.6-1.5-1.3-1.8L8.9.8 8.1.1 6.5 1.7 4.9.1l-.7.7 1.4 1.4c-.8.3-1.3 1-1.4 1.8H4v1.1L3 4V2H2v2.3l2 2.3V7H2.3L.7 8.4l.7.8L2.7 8H4v.3l-2 1.9V13h1v-2.4l1-1C4 11 5.1 12 6.4 12h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V13h1v-2.8L9 8.3V8h1.3zM6 10V4.3h1V10H6z"/>
-      </g>
-    </svg>`
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+       <path style="fill:currentColor" d="M11 9h1.3l.5.8.8-.5-.8-1.3H11v-.3l2-2.3V3h-1v2l-1 1.2V5c-.1-.8-.7-1.5-1.4-1.9L11 1.8l-.7-.7-1.8 1.6-1.8-1.6-.7.7 1.5 1.3C6.7 3.5 6.1 4.2 6 5v1.1L5 5V3H4v2.3l2 2.3V8H4.2l-.7 1.2.8.5.4-.7H6v.3l-2 1.9V14h1v-2.4l1-1C6 12 7.1 13 8.4 13h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V14h1v-2.8l-2-1.9V9zm-2 2H8V6h1v5z"/>
+     </svg>`
 );
 const vulnerability = new Handlebars.default.SafeString(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style="position: relative; top: -1px; vertical-align: middle">
-      <g transform="matrix(1,0,0,1,2.49176,-0.686483)">
-        <path style="fill: currentColor" d="M7.5 6H3V3.6c0-1 .8-1.9 1.9-1.9s1.9.8 1.9 1.9c0 .3.2.5.5.5s.5-.2.5-.5C7.8 2 6.5.7 4.9.7S2 2.1 2 3.6V6h-.5C.7 6 0 6.7 0 7.5v5c0 .8.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5v-5C9 6.7 8.3 6 7.5 6zM3 9.5C3 8.7 3.7 8 4.5 8S6 8.7 6 9.5c0 .7-.4 1.2-1 1.4V12H4v-1.1c-.6-.2-1-.7-1-1.4zM10.9 2.9L9.5 3c.1 0 .2 0 .3-.1l1-1c.2-.2.2-.5 0-.7s-.5-.2-.7 0l-1 1c-.1.1-.1.5 0 .7.1 0 .3.1.4.1-.3 0-.5.3-.5.5 0 .3.2.5.5.5l1.4-.1c.3 0 .5-.3.5-.5 0-.3-.3-.5-.5-.5z"/>
-        <path style="fill: currentColor" d="M9.8 4.1c-.2-.2-.5-.1-.7.1-.2.2-.1.5.1.7l1.1.9c.1.1.2.1.3.1.1 0 .3-.1.4-.2.2-.2.1-.5-.1-.7l-1.1-.9z"/>
-      </g>
-    </svg>`
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+       <path style="fill:currentColor" d="M10.8 5H6V3.9a2.28 2.28 0 0 1 2-2.5 2.22 2.22 0 0 1 1.8 1.2.48.48 0 0 0 .7.2.48.48 0 0 0 .2-.7A3 3 0 0 0 8 .4a3.34 3.34 0 0 0-3 3.5v1.2a2.16 2.16 0 0 0-2 2.1v4.4a2.22 2.22 0 0 0 2.2 2.2h5.6a2.22 2.22 0 0 0 2.2-2.2V7.2A2.22 2.22 0 0 0 10.8 5zm-2.2 5.5v1.2H7.4v-1.2a1.66 1.66 0 0 1-1.1-1.6A1.75 1.75 0 0 1 8 7.2a1.71 1.71 0 0 1 .6 3.3z"/>
+     </svg>`
 );
 const codeSmell = new Handlebars.default.SafeString(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style="position: relative; top: -1px; vertical-align: middle">
-      <g transform="matrix(1,0,0,1,0.5,0.5)">
-        <path style="fill: currentColor" d="M6.5 0C2.9 0 0 2.9 0 6.5S2.9 13 6.5 13 13 10.1 13 6.5 10.1 0 6.5 0zM6 6h1v1H6V6zm-4.1.2c-.1 0-.2-.1-.2-.2 0-.4.2-1.3.7-2.1.5-1 1.3-1.5 1.6-1.7.1-.1.2 0 .3.1l1.4 2.5c0 .1 0 .2-.1.3-.2.1-.3.3-.4.4-.1.2-.2.4-.2.6 0 .1-.1.2-.2.2l-2.9-.1zm6.7 4.7c-.3.2-1.2.5-2.2.5-1 0-1.8-.4-2.2-.5-.1-.1-.1-.2-.1-.3l1.4-2.5c.1-.1.2-.1.3-.1.2.1.4.1.6.1.2 0 .4 0 .6-.1.1 0 .2 0 .3.1l1.4 2.5c0 .1 0 .2-.1.3zm2.6-4.5l-2.8.1c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.6l-.4-.4c-.1 0-.2-.2-.1-.2l1.4-2.5c.1-.1.2-.1.3-.1.3.2 1 .7 1.6 1.6.5.9.6 1.8.7 2.1-.1.1-.1.2-.3.2z"/>
-      </g>
-    </svg>`
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+       <path style="fill:currentColor" d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm-.5 5.5h.9v.9h-.9v-.9zm-3.8.2c-.1 0-.2-.1-.2-.2 0-.4.1-1.2.6-2S5.3 4.2 5.6 4c.2 0 .3 0 .3.1l1.3 2.3c0 .1 0 .2-.1.2-.1.2-.2.3-.3.5-.1.2-.2.4-.2.5 0 .1-.1.2-.2.2l-2.7-.1zM9.9 12c-.3.2-1.1.5-2 .5-.9 0-1.7-.3-2-.5-.1 0-.1-.2-.1-.3l1.3-2.3c0-.1.1-.1.2-.1.2.1.3.1.5.1s.4 0 .5-.1c.1 0 .2 0 .2.1l1.3 2.3c.2.2.2.3.1.3zm2.5-4.1L9.7 8c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.5 0-.1-.2-.3-.3-.4-.1 0-.1-.1-.1-.2l1.3-2.3c.1-.1.2-.1.3-.1.3.2 1 .7 1.5 1.5s.6 1.6.6 2c0 0-.1.1-.2.1z"/>
+     </svg>`
 );
 
 module.exports = function (type) {
diff --git a/server/sonar-web/src/main/less/init/type.less b/server/sonar-web/src/main/less/init/type.less
index ca99d978dbc..80ee2a56e70 100644
--- a/server/sonar-web/src/main/less/init/type.less
+++ b/server/sonar-web/src/main/less/init/type.less
@@ -43,7 +43,10 @@ body {
   font-size: ~"@{@{h}-font-size}";
   font-weight: ~"@{@{h}-font-weight}";
 
-  img { vertical-align: middle; }
+  img, svg {
+    vertical-align: middle;
+    transform: translateY(-1px);
+  }
 }
 
 h1, .h1 { .header(h1); }