SONAR-16725 Fix styles by using plain buttons

3 files changed, 16 insertions, 10 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueBox.tsx b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueBox.tsx
index bd9c2b2ba91..2480741ff10 100644
--- a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueBox.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueBox.tsx
@@ -20,7 +20,7 @@
 import classNames from 'classnames';
 import { uniq } from 'lodash';
 import * as React from 'react';
-import { ButtonLink } from '../../../components/controls/buttons';
+import { ButtonPlain } from '../../../components/controls/buttons';
 import LocationsList from '../../../components/locations/LocationsList';
 import TypeHelper from '../../../components/shared/TypeHelper';
 import { Issue } from '../../../types/types';
@@ -92,13 +92,13 @@ export default class ConciseIssueBox extends React.PureComponent<Props> {
         className={classNames('concise-issue-box', 'clearfix', { selected })}
         ref={node => (this.rootElement = node)}
         onClick={selected ? undefined : this.handleClick}>
-        <ButtonLink
-          className="concise-issue-box-message link-no-underline"
+        <ButtonPlain
+          className="concise-issue-box-message"
           aria-current={selected}
           innerRef={node => (this.messageElement = node)}
           onClick={this.handleClick}>
           {issue.message}
-        </ButtonLink>
+        </ButtonPlain>
         <div className="concise-issue-box-attributes">
           <TypeHelper className="display-block little-spacer-right" type={issue.type} />
           <ConciseIssueLocations
diff --git a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/__tests__/__snapshots__/ConciseIssueBox-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/__tests__/__snapshots__/ConciseIssueBox-test.tsx.snap
index 81ea02f76f1..b7b98c491a5 100644
--- a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/__tests__/__snapshots__/ConciseIssueBox-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/__tests__/__snapshots__/ConciseIssueBox-test.tsx.snap
@@ -5,14 +5,14 @@ exports[`should render correctly 1`] = `
   className="concise-issue-box clearfix"
   onClick={[Function]}
 >
-  <ButtonLink
+  <ButtonPlain
     aria-current={false}
-    className="concise-issue-box-message link-no-underline"
+    className="concise-issue-box-message"
     innerRef={[Function]}
     onClick={[Function]}
   >
     Reduce the number of conditional operators (4) used in the expression
-  </ButtonLink>
+  </ButtonPlain>
   <div
     className="concise-issue-box-attributes"
   >
@@ -62,14 +62,14 @@ exports[`should render correctly 2`] = `
 <div
   className="concise-issue-box clearfix selected"
 >
-  <ButtonLink
+  <ButtonPlain
     aria-current={true}
-    className="concise-issue-box-message link-no-underline"
+    className="concise-issue-box-message"
     innerRef={[Function]}
     onClick={[Function]}
   >
     Reduce the number of conditional operators (4) used in the expression
-  </ButtonLink>
+  </ButtonPlain>
   <div
     className="concise-issue-box-attributes"
   >
diff --git a/server/sonar-web/src/main/js/components/controls/buttons.css b/server/sonar-web/src/main/js/components/controls/buttons.css
index 4e4f215dab0..1b45770fcd3 100644
--- a/server/sonar-web/src/main/js/components/controls/buttons.css
+++ b/server/sonar-web/src/main/js/components/controls/buttons.css
@@ -139,6 +139,12 @@
   background-color: transparent;
 }
 
+.button-plain:active,
+.button-plain:focus {
+  box-shadow: none;
+  outline: 1px dotted var(--blue);
+}
+
 /* #endregion */
 
 /* #region .button-link */