SONARCLOUD-210 Correct language icons on Azure DevOps page

diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/AzureDevOps.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/AzureDevOps.tsx
index da9bea478da2cb55333f9ac58b2dd771c868ae8e..1ad9fa7bc805d13d2f440fe164e3f4dcdda42394 100644 (file)
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/AzureDevOps.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/AzureDevOps.tsx
@@ -25,6 +25,15 @@ import { isLoggedIn } from '../../../helpers/users';
 import { getBaseUrl } from '../../../helpers/urls';
 import './style.css';
 
+const LANGUAGES = [
+  { name: 'JavaScript', file: 'js.svg', width: 60 },
+  { name: 'TypeScript', file: 'ts.svg', width: 130 },
+  { name: 'C#', file: 'csharp.svg', width: 60 },
+  { name: 'C++', file: 'c-c-plus-plus.svg', width: 53 },
+  { name: 'T-SQL', file: 't-sql.svg', width: 80 },
+  { name: 'VB', file: 'vb.svg', width: 70 }
+];
+
 export default function AzureDevOps() {
   return (
     <SQPageContainer>
@@ -116,24 +125,15 @@ export default function AzureDevOps() {
           <div className="sc-integrations">
             <h2 className="sc-sq-header2 sc-integrations-title">Analyze .NET languages and more</h2>
             <ul className="sc-languages-list">
-              <li>
-                <img alt="C#" height="60" src={`${getBaseUrl()}/images/languages/c-sharp.svg`} />
-              </li>
-              <li>
-                <img alt="VB" height="60" src={`${getBaseUrl()}/images/languages/vb.svg`} />
-              </li>
-              <li>
-                <img alt="JavaScript" height="60" src={`${getBaseUrl()}/images/languages/js.svg`} />
-              </li>
-              <li>
-                <img alt="TypeScript" height="60" src={`${getBaseUrl()}/images/languages/ts.svg`} />
-              </li>
-              <li>
-                <img alt="T-SQL" height="60" src={`${getBaseUrl()}/images/languages/tsql.svg`} />
-              </li>
-              <li>
-                <img alt="C++" height="60" src={`${getBaseUrl()}/images/languages/c-plus.svg`} />
-              </li>
+              {LANGUAGES.map(language => (
+                <li key={language.name}>
+                  <img
+                    alt={language.name}
+                    src={`${getBaseUrl()}/images/languages/black/${language.file}`}
+                    style={{ width: language.width + 'px' }}
+                  />
+                </li>
+              ))}
             </ul>
           </div>
         </div>

diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css
index 6a5737a91029aaff90455cf616e64854ac29bef5..995a71778fd8f6f981b1b8477c5e21ad6a2d921a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css
@@ -313,6 +313,7 @@
   display: flex;
   justify-content: center;
   margin-top: 20px;
+  align-items: center;
 }
 
 .sc-languages-list > li {