SONAR-7811 make warning badge rendering consistent

2 files changed, 32 insertions, 16 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js
index bef63b8da97..439be30205c 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js
@@ -19,7 +19,6 @@
  */
 import React from 'react';
 import { Link, IndexLink } from 'react-router';
-import classNames from 'classnames';
 import ProfileLink from '../components/ProfileLink';
 import ProfileActions from '../components/ProfileActions';
 import ProfileDate from '../components/ProfileDate';
@@ -36,30 +35,47 @@ export default class ProfileHeader extends React.Component {
 
   renderUpdateDate () {
     const { profile } = this.props;
-    const warning = isStagnant(profile);
-    const className = classNames('small spacer-right', {
-      'alert-warning': warning
-    });
-    return (
-        <li className={className}>
+    let inner = (
+        <span>
           {translate('quality_profiles.updated_')}
           {' '}
           <ProfileDate date={profile.userUpdatedAt}/>
+        </span>
+    );
+    if (isStagnant(profile)) {
+      inner = (
+          <span className="badge badge-normal-size badge-focus">
+            {inner}
+          </span>
+      );
+    }
+    return (
+        <li className="small spacer-right">
+          {inner}
         </li>
     );
   }
 
   renderUsageDate () {
     const { profile } = this.props;
-    const warning = !profile.lastUsed;
-    const className = classNames('small big-spacer-right', {
-      'alert-warning': warning
-    });
-    return (
-        <li className={className}>
+    let inner = (
+        <span>
           {translate('quality_profiles.used_')}
           {' '}
           <ProfileDate date={profile.lastUsed}/>
+        </span>
+    );
+    if (!profile.lastUsed) {
+      inner = (
+          <span className="badge badge-normal-size badge-focus">
+            {inner}
+          </span>
+      );
+    }
+
+    return (
+        <li className="small big-spacer-right">
+          {inner}
         </li>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.js b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.js
index eeefc1b2514..255b2bb1e9e 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.js
@@ -86,7 +86,7 @@ export default class ProfilesListRow extends React.Component {
         <div>
           {profile.activeDeprecatedRuleCount > 0 && (
               <span className="spacer-right">
-                <a className="badge badge-danger-light"
+                <a className="badge badge-normal-size badge-danger-light"
                    href={deprecatedRulesUrl}
                    title={translate('quality_profiles.deprecated_rules')}
                    data-toggle="tooltip">
@@ -105,7 +105,7 @@ export default class ProfilesListRow extends React.Component {
   renderUpdateDate () {
     const date = <ProfileDate date={this.props.profile.userUpdatedAt}/>;
     if (isStagnant(this.props.profile)) {
-      return <span className="badge badge-focus">{date}</span>;
+      return <span className="badge badge-normal-size badge-focus">{date}</span>;
     } else {
       return date;
     }
@@ -115,7 +115,7 @@ export default class ProfilesListRow extends React.Component {
     const { lastUsed } = this.props.profile;
     const date = <ProfileDate date={lastUsed}/>;
     if (!lastUsed) {
-      return <span className="badge badge-focus">{date}</span>;
+      return <span className="badge badge-normal-size badge-focus">{date}</span>;
     } else {
       return date;
     }