1 files changed, 44 insertions, 34 deletions

diff --git a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
index 833425e19a6..ecb186bf184 100644
--- a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
+++ b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
@@ -17,22 +17,31 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import {
+  Card,
+  DiscreetLink,
+  LightPrimary,
+  Note,
+  QualityGateIndicator,
+  SubHeading,
+  UnorderedList,
+} from 'design-system';
 import * as React from 'react';
-import Link from '../../../components/common/Link';
 import MetaLink from '../../../components/common/MetaLink';
-import HelpTooltip from '../../../components/controls/HelpTooltip';
+import Tooltip from '../../../components/controls/Tooltip';
 import DateFromNow from '../../../components/intl/DateFromNow';
-import Level from '../../../components/ui/Level';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { formatMeasure } from '../../../helpers/measures';
 import { orderLinks } from '../../../helpers/projectLinks';
 import { getProjectUrl } from '../../../helpers/urls';
-import { MyProject, ProjectLink } from '../../../types/types';
+import { MetricType } from '../../../types/metrics';
+import { MyProject, ProjectLink, Status } from '../../../types/types';
 
 interface Props {
   project: MyProject;
 }
 
-export default function ProjectCard({ project }: Props) {
+export default function ProjectCard({ project }: Readonly<Props>) {
   const { links } = project;
 
   const orderedLinks: ProjectLink[] = orderLinks(
@@ -49,53 +58,54 @@ export default function ProjectCard({ project }: Props) {
 
   const { lastAnalysisDate } = project;
 
+  const formatted = formatMeasure(project.qualityGate, MetricType.Level);
+  const qualityGateLabel = translateWithParameters('overview.quality_gate_x', formatted);
+
   return (
-    <div className="account-project-card clearfix">
-      <aside className="account-project-side">
+    <Card>
+      <aside className="sw-float-right sw-flex sw-flex-col sw-items-end sw-gap-2">
         {lastAnalysisDate !== undefined ? (
-          <div className="account-project-analysis">
+          <Note>
             <DateFromNow date={lastAnalysisDate}>
               {(fromNow) => translateWithParameters('my_account.projects.analyzed_x', fromNow)}
             </DateFromNow>
-          </div>
+          </Note>
         ) : (
-          <div className="account-project-analysis">
-            {translate('my_account.projects.never_analyzed')}
-          </div>
+          <Note>{translate('my_account.projects.never_analyzed')}</Note>
         )}
 
         {project.qualityGate !== undefined && (
-          <div className="account-project-quality-gate">
-            {project.qualityGate === 'WARN' && (
-              <HelpTooltip
-                className="little-spacer-right"
-                overlay={translate('quality_gates.conditions.warning.tooltip')}
-              />
-            )}
-            <Level aria-label={translate('quality_gates.status')} level={project.qualityGate} />
+          <div>
+            <Tooltip overlay={qualityGateLabel}>
+              <span className="sw-flex sw-items-center">
+                <QualityGateIndicator
+                  status={(project.qualityGate as Status) ?? 'NONE'}
+                  ariaLabel={qualityGateLabel}
+                />
+                <LightPrimary className="sw-ml-2 sw-body-sm-highlight">{formatted}</LightPrimary>
+              </span>
+            </Tooltip>
           </div>
         )}
       </aside>
 
-      <h3 className="account-project-name">
-        <Link to={getProjectUrl(project.key)}>{project.name}</Link>
-      </h3>
+      <SubHeading as="h3">
+        <DiscreetLink to={getProjectUrl(project.key)}>{project.name}</DiscreetLink>
+      </SubHeading>
+
+      <Note>{project.key}</Note>
+
+      {!!project.description && <div className="sw-mt-2">{project.description}</div>}
 
       {orderedLinks.length > 0 && (
-        <div className="account-project-links">
-          <ul className="list-inline">
+        <div className="sw-mt-2">
+          <UnorderedList className="sw-flex sw-gap-4">
             {orderedLinks.map((link) => (
-              <MetaLink iconOnly key={link.id} link={link} />
+              <MetaLink key={link.id} link={link} />
             ))}
-          </ul>
+          </UnorderedList>
         </div>
       )}
-
-      <div className="account-project-key">{project.key}</div>
-
-      {!!project.description && (
-        <div className="account-project-description">{project.description}</div>
-      )}
-    </div>
+    </Card>
   );
 }