SONAR-21259 Update QG overview measure cards design

6 files changed, 81 insertions, 78 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/BranchQualityGateConditions.tsx b/server/sonar-web/src/main/js/apps/overview/components/BranchQualityGateConditions.tsx
index 957a43f72b1..5520b9d4489 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/BranchQualityGateConditions.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/BranchQualityGateConditions.tsx
@@ -80,7 +80,7 @@ function FailedQGCondition(
 
   return (
     <StyledConditionButton className="sw-px-3 sw-py-2 sw-rounded-1 sw-body-sm" to={url}>
-      <Badge className="sw-mr-2" variant="deleted">
+      <Badge className="sw-mr-2 sw-px-1" variant="deleted">
         {translate('overview.measures.failed_badge')}
       </Badge>
       <SpanDanger>
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCard.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCard.tsx
index ae195fceafd..8b451ab348e 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCard.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCard.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { Badge, Card, ContentLink, themeColor } from 'design-system';
+import { Badge, Card, ContentLink, themeBorder, themeColor } from 'design-system';
 import * as React from 'react';
 import { To } from 'react-router-dom';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -40,42 +40,40 @@ export default function MeasuresCard(
   const { failed, children, metric, icon, value, url, label, ...rest } = props;
 
   return (
-    <Card
-      className="sw-h-fit sw-p-8 sw-rounded-2 sw-flex sw-justify-between sw-items-center sw-text-base"
-      {...rest}
-    >
-      <div className="sw-flex sw-flex-col sw-gap-1 sw-justify-between">
-        <div className="sw-flex sw-items-center sw-gap-2 sw-font-semibold">
-          {value ? (
-            <ContentLink
-              aria-label={translateWithParameters(
-                'overview.see_more_details_on_x_of_y',
-                value,
-                localizeMetric(metric),
-              )}
-              className="it__overview-measures-value sw-text-lg"
-              to={url}
-            >
-              {value}
-            </ContentLink>
-          ) : (
-            <StyledNoValue> — </StyledNoValue>
-          )}
-          {translate(label)}
-          {failed && (
-            <Badge className="sw-mt-1/2" variant="deleted">
-              {translate('overview.measures.failed_badge')}
-            </Badge>
-          )}
-        </div>
-        {children && <div className="sw-flex sw-flex-col">{children}</div>}
+    <StyledCard className="sw-h-fit sw-p-6 sw-rounded-2 sw-text-base" {...rest}>
+      <ColorBold className="sw-body-sm-highlight">{translate(label)}</ColorBold>
+      {failed && (
+        <Badge className="sw-mt-1/2 sw-px-1 sw-ml-2" variant="deleted">
+          {translate('overview.measures.failed_badge')}
+        </Badge>
+      )}
+      <div className="sw-flex sw-items-center sw-mt-1 sw-justify-between sw-font-semibold">
+        {value ? (
+          <ContentLink
+            aria-label={translateWithParameters(
+              'overview.see_more_details_on_x_of_y',
+              value,
+              localizeMetric(metric),
+            )}
+            className="it__overview-measures-value sw-text-lg"
+            to={url}
+          >
+            {value}
+          </ContentLink>
+        ) : (
+          <ColorBold> — </ColorBold>
+        )}
+        {icon}
       </div>
-
-      {icon && <div>{icon}</div>}
-    </Card>
+      {children && <div className="sw-flex sw-flex-col">{children}</div>}
+    </StyledCard>
   );
 }
 
-const StyledNoValue = styled.span`
+const StyledCard = styled(Card)`
+  border: ${themeBorder('default')};
+`;
+
+const ColorBold = styled.span`
   color: ${themeColor('pageTitle')};
 `;
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardNumber.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardNumber.tsx
index 7f905c97b9e..6ab310bb289 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardNumber.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardNumber.tsx
@@ -70,12 +70,14 @@ export default function MeasuresCardNumber(
       data-guiding-id={conditionFailed ? guidingKeyOnError : undefined}
       {...rest}
     >
-      {requireLabel &&
-        (conditionFailed ? (
-          <TextError className="sw-mt-2 sw-font-regular" text={requireLabel} />
-        ) : (
-          <LightLabel className="sw-mt-2">{requireLabel}</LightLabel>
-        ))}
+      <span className="sw-body-xs sw-mt-3">
+        {requireLabel &&
+          (conditionFailed ? (
+            <TextError className="sw-font-regular" text={requireLabel} />
+          ) : (
+            <LightLabel>{requireLabel}</LightLabel>
+          ))}
+      </span>
     </MeasuresCard>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx
index 5f116e4c822..68eb13cebb3 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx
@@ -116,7 +116,7 @@ export default function MeasuresCardPanel(props: React.PropsWithChildren<Props>)
           conditions={conditions}
           conditionMetric={MetricKey.new_duplicated_lines_density}
           newLinesMetric={MetricKey.new_lines}
-          afterMergeMetric={MetricKey.duplicated_lines_density}
+          afterMergeMetric={MetricKey.coverage}
           measures={measures}
         />
       </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPercent.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPercent.tsx
index a7a9a16172a..8998e9e32a3 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPercent.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPercent.tsx
@@ -113,46 +113,49 @@ export default function MeasuresCardPercent(
       icon={renderIcon(measurementType, value)}
     >
       <>
-        {requireLabel &&
-          (conditionFailed ? (
-            <TextError className="sw-mt-2 sw-font-regular" text={requireLabel} />
-          ) : (
-            <LightLabel className="sw-mt-2">{requireLabel}</LightLabel>
-          ))}
+        <span className="sw-body-xs sw-mt-3">
+          {requireLabel &&
+            (conditionFailed ? (
+              <TextError className="sw-font-regular" text={requireLabel} />
+            ) : (
+              <LightLabel>{requireLabel}</LightLabel>
+            ))}
+        </span>
 
-        <LightLabel className="sw-flex sw-items-center sw-gap-1 sw-mt-4">
-          <FormattedMessage
-            defaultMessage={translate(newLinesLabel)}
-            id={newLinesLabel}
-            values={{
-              link: (
-                <ContentLink
-                  aria-label={translateWithParameters(
-                    'overview.see_more_details_on_x_y',
-                    newLinesValue ?? '0',
-                    localizeMetric(newLinesMetric),
-                  )}
-                  className="sw-body-md-highlight sw-text-lg"
-                  to={newLinesUrl}
-                >
-                  {formatMeasure(newLinesValue ?? '0', MetricType.ShortInteger)}
-                </ContentLink>
-              ),
-            }}
-          />
-        </LightLabel>
-
-        {afterMergeValue && (
-          <LightLabel className="sw-mt-2">
+        <div className="sw-flex sw-justify-between sw-items-center sw-mt-1">
+          <LightLabel className="sw-flex sw-items-center sw-gap-1 ">
             <FormattedMessage
-              defaultMessage={translate('overview.quality_gate.x_estimated_after_merge')}
-              id="overview.quality_gate.x_estimated_after_merge"
+              defaultMessage={translate(newLinesLabel)}
+              id={newLinesLabel}
               values={{
-                value: <strong>{formatMeasure(afterMergeValue, MetricType.Percent)}</strong>,
+                link: (
+                  <ContentLink
+                    aria-label={translateWithParameters(
+                      'overview.see_more_details_on_x_y',
+                      newLinesValue ?? '0',
+                      localizeMetric(newLinesMetric),
+                    )}
+                    className="sw-body-md-highlight sw-text-lg"
+                    to={newLinesUrl}
+                  >
+                    {formatMeasure(newLinesValue ?? '0', MetricType.ShortInteger)}
+                  </ContentLink>
+                ),
               }}
             />
           </LightLabel>
-        )}
+          <LightLabel className="sw-mt-[1px]">
+            {afterMergeValue && (
+              <FormattedMessage
+                defaultMessage={translate('overview.quality_gate.x_estimated_after_merge')}
+                id="overview.quality_gate.x_estimated_after_merge"
+                values={{
+                  value: <strong>{formatMeasure(afterMergeValue, MetricType.Percent)}</strong>,
+                }}
+              />
+            )}
+          </LightLabel>
+        </div>
       </>
     </MeasuresCard>
   );
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/__tests__/PullRequestOverview-it.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/__tests__/PullRequestOverview-it.tsx
index 2755d3b3abf..f1c6157a6e0 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/__tests__/PullRequestOverview-it.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/__tests__/PullRequestOverview-it.tsx
@@ -180,12 +180,12 @@ it('should render correctly for a failed QG', async () => {
 
   expect(
     byRole('link', {
-      name: 'overview.measures.failed_badge overview.failed_condition.x_required 10.0% duplicated_lines ≤ 1.0%',
+      name: 'overview.measures.failed_badge overview.failed_condition.x_required 10.0% duplicated_lines≤ 1.0%',
     }).get(),
   ).toBeInTheDocument();
   expect(
     byRole('link', {
-      name: 'overview.measures.failed_badge overview.failed_condition.x_required 10 new_bugs ≤ 3',
+      name: 'overview.measures.failed_badge overview.failed_condition.x_required 10 new_bugs≤ 3',
     }).get(),
   ).toBeInTheDocument();
 });