1 files changed, 6 insertions, 17 deletions
diff --git a/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx b/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx
index cce2c4419d6..106ca9b1439 100644
--- a/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx
+++ b/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx
@@ -33,6 +33,7 @@ import {
   Title,
 } from '~design-system';
 import { Image } from '~sonar-aligned/components/common/Image';
+import { SonarQubeConnectionIllustration } from '../../components/branding/SonarQubeConnectionIllustration';
 import { whenLoggedIn } from '../../components/hoc/whenLoggedIn';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import { generateSonarLintUserToken, portIsValid, sendUserToken } from '../../helpers/sonarlint';
@@ -88,13 +89,9 @@ export function SonarLintConnection({ currentUser }: Readonly<Props>) {
       {status === Status.request && (
         <>
           <Title>{translate('sonarlint-connection.request.title')}</Title>
-          <Image
-            alt="sonarlint-connection-request"
-            className="sw-my-4"
-            src="/images/SonarLint-connection-request.png"
-          />
+          <SonarQubeConnectionIllustration className="sw-my-4" connected={false} />
           <p className="sw-my-4">
-            {translateWithParameters('sonarlint-connection.request.description', ideName)}
+            <FormattedMessage id="sonarlint-connection.request.description" values={{ ideName }} />
           </p>
           <p className="sw-mb-10">{translate('sonarlint-connection.request.description2')}</p>
 
@@ -110,7 +107,7 @@ export function SonarLintConnection({ currentUser }: Readonly<Props>) {
 
       {status === Status.tokenError && (
         <>
-          <Image alt="sonarlint-token-error" className="sw-my-4 sw-pt-2" src="/images/cross.svg" />
+          <Image aria-hidden className="sw-my-4 sw-pt-2" src="/images/cross.svg" />
           <Title>{translate('sonarlint-connection.token-error.title')}</Title>
           <p className="sw-my-4">{translate('sonarlint-connection.token-error.description')}</p>
           <p className="sw-mb-4">
@@ -131,11 +128,7 @@ export function SonarLintConnection({ currentUser }: Readonly<Props>) {
 
       {status === Status.tokenCreated && newToken && (
         <>
-          <Image
-            alt="sonarlint-connection-error"
-            className="sw-my-4 sw-pt-2"
-            src="/images/check.svg"
-          />
+          <Image aria-hidden className="sw-my-4 sw-pt-2" src="/images/check.svg" />
           <Title>{translate('sonarlint-connection.connection-error.title')}</Title>
           <p className="sw-my-6">
             {translate('sonarlint-connection.connection-error.description')}
@@ -167,11 +160,7 @@ export function SonarLintConnection({ currentUser }: Readonly<Props>) {
       {status === Status.tokenSent && newToken && (
         <>
           <Title>{translate('sonarlint-connection.success.title')}</Title>
-          <Image
-            alt="sonarlint-connection-success"
-            className="sw-mb-4"
-            src="/images/SonarLint-connection-ok.png"
-          />
+          <SonarQubeConnectionIllustration className="sw-mb-4" connected />
           <p className="sw-my-4">
             {translateWithParameters('sonarlint-connection.success.description', newToken.name)}
           </p>