SONAR-10164 Redesign the "default" badge to match other badges (#3120)

7 files changed, 28 insertions, 22 deletions

diff --git a/server/sonar-web/src/main/js/app/styles/components/badges.css b/server/sonar-web/src/main/js/app/styles/components/badges.css
index 4f2740c2bcb..602f7513f1a 100644
--- a/server/sonar-web/src/main/js/app/styles/components/badges.css
+++ b/server/sonar-web/src/main/js/app/styles/components/badges.css
@@ -19,14 +19,15 @@
  */
 .badge {
   display: inline-block;
+  vertical-align: middle;
+  height: var(--smallControlHeight);
+  line-height: calc(var(--smallControlHeight) - 1px);
+  padding: 0 var(--gridSize);
+  border-radius: 2px;
+  font-size: var(--smallFontSize);
   min-width: 10px;
-  padding: 2px 7px;
-  font-size: 11px;
-  font-weight: normal;
   letter-spacing: 0.03em;
   color: #ffffff;
-  line-height: var(--smallFontSize);
-  vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
   background-color: var(--blue);
@@ -55,7 +56,7 @@ a.badge {
 .list-group-item > .badge,
 .list-group-item-heading > .badge {
   float: right;
-  margin-top: 3px;
+  margin: 3px;
 }
 
 .list-group-item > .badge + .badge,
@@ -68,6 +69,11 @@ a.badge {
   letter-spacing: inherit;
 }
 
+.badge-tiny-height {
+  height: var(--tinyControlHeight);
+  line-height: calc(var(--tinyControlHeight) - 1px);
+}
+
 .badge-muted {
   background-color: transparent;
   color: var(--secondFontColor);
@@ -128,9 +134,9 @@ a.badge-focus:active {
 .outline-badge {
   display: inline-block;
   vertical-align: middle;
-  height: 20px;
-  line-height: 19px;
-  padding: 0 8px;
+  height: var(--smallControlHeight);
+  line-height: calc(var(--smallControlHeight) - 1px);
+  padding: 0 var(--gridSize);
   border: 1px solid var(--gray80);
   border-radius: 2px;
   box-sizing: border-box;
diff --git a/server/sonar-web/src/main/js/app/styles/components/list-groups.css b/server/sonar-web/src/main/js/app/styles/components/list-groups.css
index b2200de0745..69045097a54 100644
--- a/server/sonar-web/src/main/js/app/styles/components/list-groups.css
+++ b/server/sonar-web/src/main/js/app/styles/components/list-groups.css
@@ -62,6 +62,12 @@ a.list-group-item {
   margin-bottom: 5px;
 }
 
+.list-group-item-heading:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
 .list-group-item-text {
   margin-bottom: 0;
   line-height: 1.3;
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
index 3b70690ca5f..1bb277e6df2 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
@@ -186,7 +186,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
               <td className="coding-rule-table-meta-cell">
                 <div className="display-flex-center coding-rule-meta">
                   {rule.status !== 'READY' && (
-                    <span className="spacer-left badge badge-normal-size badge-danger-light">
+                    <span className="spacer-left badge badge-normal-size badge-tiny-height badge-danger-light">
                       {translate('rules.status', rule.status)}
                     </span>
                   )}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/style.css b/server/sonar-web/src/main/js/apps/marketplace/style.css
index 1ceb206fe2b..9e51642bbc5 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/style.css
+++ b/server/sonar-web/src/main/js/apps/marketplace/style.css
@@ -41,6 +41,8 @@
   top: 16px;
   padding: 4px 8px;
   border-radius: 2px 0 0 2px;
+  height: inherit;
+  line-height: inherit;
 }
 
 .marketplace-edition-action {
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 4563968dc1a..5b556ae3a88 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -431,11 +431,8 @@
 }
 
 .overview-analysis-event.badge {
-  vertical-align: middle;
   /* 260px to match the sidebar width on project dashboard */
   max-width: 260px;
-  padding: 4px 14px;
-  box-sizing: border-box;
   border-radius: 2px;
   font-weight: bold;
   font-size: var(--smallFontSize);
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
index 5341f0557ec..f4613f78b97 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
@@ -286,9 +286,6 @@
 
 .project-activity-version-badge .badge {
   max-width: 385px;
-  vertical-align: middle;
-  padding: 4px 14px 4px 14px;
-  box-sizing: border-box;
   border-radius: 0 2px 2px 0;
   font-weight: bold;
   font-size: var(--smallFontSize);
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/List.js b/server/sonar-web/src/main/js/apps/quality-gates/components/List.js
index cc5675f1e8f..69db7ff0a73 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/List.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/List.js
@@ -28,19 +28,17 @@ export default function List({ organization, qualityGates }) {
     <div className="list-group">
       {qualityGates.map(qualityGate => (
         <Link
-          key={qualityGate.id}
-          to={getQualityGateUrl(String(qualityGate.id), organization && organization.key)}
           activeClassName="active"
           className="list-group-item"
-          data-id={qualityGate.id}>
+          data-id={qualityGate.id}
+          key={qualityGate.id}
+          to={getQualityGateUrl(String(qualityGate.id), organization && organization.key)}>
           <table>
             <tbody>
               <tr>
                 <td>{qualityGate.name}</td>
                 <td className="thin nowrap spacer-left text-right">
-                  {qualityGate.isDefault && (
-                    <span className="text-middle badge">{translate('default')}</span>
-                  )}
+                  {qualityGate.isDefault && <span className="badge">{translate('default')}</span>}
                   {qualityGate.isBuiltIn && (
                     <BuiltInQualityGateBadge className="little-spacer-left" tooltip={false} />
                   )}