SONAR-8749 Update landing page

11 files changed, 271 insertions, 152 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
index 542056a1329..21db6186dee 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
@@ -17,42 +17,55 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+// @flow
 import React from 'react';
 import { connect } from 'react-redux';
 import keyBy from 'lodash/keyBy';
+import { Link } from 'react-router';
 import AboutProjects from './AboutProjects';
 import EntryIssueTypes from './EntryIssueTypes';
+import AboutLanguages from './AboutLanguages';
 import AboutCleanCode from './AboutCleanCode';
-import AboutIssues from './AboutIssues';
+import AboutQualityModel from './AboutQualityModel';
 import AboutQualityGates from './AboutQualityGates';
 import AboutLeakPeriod from './AboutLeakPeriod';
 import AboutStandards from './AboutStandards';
 import AboutScanners from './AboutScanners';
-import { translate } from '../../../helpers/l10n';
 import { searchProjects } from '../../../api/components';
 import { getFacet } from '../../../api/issues';
-import { getSettingValue } from '../../../store/rootReducer';
 import * as settingsAPI from '../../../api/settings';
+import { getCurrentUser } from '../../../store/rootReducer';
 import '../styles.css';
+import { translate } from '../../../helpers/l10n';
+
+type State = {
+  loading: boolean,
+  projectsCount?: number,
+  issueTypes?: {
+    [key: string]: {
+      count: number
+    }
+  },
+  customText?: string
+};
 
 class AboutApp extends React.Component {
-  static propTypes = {
-    customLogoUrl: React.PropTypes.string,
-    customLogoWidth: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])
+  mounted: boolean;
+
+  props: {
+    currentUser: { isLoggedIn: boolean }
   };
 
-  state = {
+  state: State = {
     loading: true
   };
 
   componentDidMount () {
     this.mounted = true;
-    document.querySelector('html').classList.add('dashboard-page');
     this.loadData();
   }
 
   componentWillUnmount () {
-    document.querySelector('html').classList.remove('dashboard-page');
     this.mounted = false;
   }
 
@@ -94,47 +107,51 @@ class AboutApp extends React.Component {
 
     const { customText } = this.state;
 
-    const logoUrl = this.props.customLogoUrl || `${window.baseUrl}/images/logo.svg`;
-    const logoWidth = Number(this.props.customLogoWidth || 100);
-    const logoHeight = 30;
-    const logoTitle = this.props.customLogoUrl ? '' : translate('layout.sonar.slogan');
+    // $FlowFixMe
+    const bugs = this.state.issueTypes['BUG'].count;
+    // $FlowFixMe
+    const vulnerabilities = this.state.issueTypes['VULNERABILITY'].count;
+    // $FlowFixMe
+    const codeSmells = this.state.issueTypes['CODE_SMELL'].count;
 
     return (
         <div id="about-page" className="about-page">
-          <div className="about-page-entry">
-            <div className="about-page-container clearfix">
-              <div className="pull-left">
-                <div className="about-page-logo">
-                  <img src={logoUrl} width={2 * logoWidth} height={2 * logoHeight} alt={logoTitle}/>
-                </div>
-              </div>
-
-              <div className="about-page-entry-column">
-                <EntryIssueTypes
-                    bugs={this.state.issueTypes['BUG'].count}
-                    vulnerabilities={this.state.issueTypes['VULNERABILITY'].count}
-                    codeSmells={this.state.issueTypes['CODE_SMELL'].count}/>
+          <div className="about-page-container">
+            <div className="about-page-entry">
+              <div className="about-page-intro">
+                <h1 className="big-spacer-bottom">
+                  {translate('layout.sonar.slogan')}
+                </h1>
+                {!this.props.currentUser.isLoggedIn && (
+                    <Link to="/sessions/new" className="button button-active big-spacer-right">
+                      {translate('layout.login')}
+                    </Link>
+                )}
+                <a className="button" href="https://redirect.sonarsource.com/doc/home.html">
+                  {translate('about_page.read_documentation')}
+                </a>
               </div>
 
-              <div className="about-page-entry-column">
+              <div className="about-page-instance">
                 <AboutProjects count={this.state.projectsCount}/>
+                <EntryIssueTypes bugs={bugs} vulnerabilities={vulnerabilities} codeSmells={codeSmells}/>
               </div>
             </div>
-          </div>
-
-          <div className="about-page-container">
 
             {customText != null && customText.length > 0 && (
                 <div className="about-page-section" dangerouslySetInnerHTML={{ __html: customText }}/>
             )}
 
+            <AboutLanguages/>
+
+            <AboutQualityModel/>
+
             <div className="flex-columns">
-              <div className="flex-column flex-column-two-thirds about-page-group-boxes">
+              <div className="flex-column flex-column-half about-page-group-boxes">
                 <AboutCleanCode/>
-                <AboutLeakPeriod/>
               </div>
-              <div className="flex-column flex-column-third about-page-group-boxes">
-                <AboutIssues/>
+              <div className="flex-column flex-column-half about-page-group-boxes">
+                <AboutLeakPeriod/>
               </div>
             </div>
 
@@ -155,8 +172,7 @@ class AboutApp extends React.Component {
 }
 
 const mapStateToProps = state => ({
-  customLogoUrl: (getSettingValue(state, 'sonar.lf.logoUrl') || {}).value,
-  customLogoWidth: (getSettingValue(state, 'sonar.lf.logoWidthPx') || {}).value
+  currentUser: getCurrentUser(state)
 });
 
 export default connect(mapStateToProps)(AboutApp);
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutCleanCode.js b/server/sonar-web/src/main/js/apps/about/components/AboutCleanCode.js
index 9c3c57c5e0a..d5531859fc2 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutCleanCode.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutCleanCode.js
@@ -18,8 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import ReadMore from './ReadMore';
 import { translate } from '../../../helpers/l10n';
 
+const link = 'https://redirect.sonarsource.com/doc/issues.html';
+
 export default class AboutCleanCode extends React.Component {
   render () {
     return (
@@ -27,6 +30,7 @@ export default class AboutCleanCode extends React.Component {
           <h2>{translate('about_page.clean_code')}</h2>
           <div className="boxed-group-inner">
             <p className="about-page-text">{translate('about_page.clean_code.text')}</p>
+            <ReadMore link={link}/>
           </div>
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js b/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
deleted file mode 100644
index 8213bf6316c..00000000000
--- a/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2016 SonarSource SA
- * mailto:contact AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import React from 'react';
-import { translate } from '../../../helpers/l10n';
-import BugIcon from '../../../components/ui/BugIcon';
-import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
-import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
-
-export default class AboutIssues extends React.Component {
-  render () {
-    return (
-        <div className="boxed-group">
-          <h2>{translate('about_page.quality_model')}</h2>
-
-          <div className="boxed-group-inner clearfix">
-            <h3 className="spacer-bottom">
-              <span className="little-spacer-right"><BugIcon/></span>
-              {translate('issue.type.BUG.plural')}
-            </h3>
-            <p className="about-page-text">
-              {translate('about_page.quality_model.bugs')}
-            </p>
-
-            <h3 className="big-spacer-top spacer-bottom">
-              <span className="little-spacer-right"><VulnerabilityIcon/></span>
-              {translate('issue.type.VULNERABILITY.plural')}
-            </h3>
-            <p className="about-page-text">
-              {translate('about_page.quality_model.vulnerabilities')}
-            </p>
-
-            <h3 className="big-spacer-top spacer-bottom">
-              <span className="little-spacer-right"><CodeSmellIcon/></span>
-              {translate('issue.type.CODE_SMELL.plural')}
-            </h3>
-            <p className="about-page-text">
-              {translate('about_page.quality_model.code_smells')}
-            </p>
-          </div>
-        </div>
-    );
-  }
-}
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutLanguages.js b/server/sonar-web/src/main/js/apps/about/components/AboutLanguages.js
new file mode 100644
index 00000000000..824e10cb33d
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutLanguages.js
@@ -0,0 +1,70 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+import { translate } from '../../../helpers/l10n';
+
+const languages = [
+  { name: 'Java', url: 'https://redirect.sonarsource.com/plugins/java.html' },
+  { name: 'C/C++', url: 'https://redirect.sonarsource.com/plugins/cpp.html' },
+  { name: 'C#', url: 'https://redirect.sonarsource.com/plugins/csharp.html' },
+  { name: 'COBOL', url: 'https://redirect.sonarsource.com/plugins/cobol.html' },
+  { name: 'ABAP', url: 'https://redirect.sonarsource.com/plugins/abap.html' },
+  { name: 'HTML', url: 'https://redirect.sonarsource.com/plugins/web.html' },
+  { name: 'RPG', url: 'https://redirect.sonarsource.com/plugins/rpg.html' },
+  { name: 'JavaScript', url: 'https://redirect.sonarsource.com/plugins/javascript.html' },
+  { name: 'Objective C', url: 'https://redirect.sonarsource.com/plugins/objectivec.html' },
+  { name: 'XML', url: 'https://redirect.sonarsource.com/plugins/xml.html' },
+  { name: 'VB.NET', url: 'https://redirect.sonarsource.com/plugins/vbnet.html' },
+  { name: 'PL/SQL', url: 'https://redirect.sonarsource.com/plugins/plsql.html' },
+  { name: 'Flex', url: 'https://redirect.sonarsource.com/plugins/flex.html' },
+  { name: 'Python', url: 'https://redirect.sonarsource.com/plugins/python.html' },
+  { name: 'Groovy', url: 'https://redirect.sonarsource.com/plugins/groovy.html' },
+  { name: 'PHP', url: 'https://redirect.sonarsource.com/plugins/php.html' },
+  { name: 'Swift', url: 'https://redirect.sonarsource.com/plugins/swift.html' },
+  { name: 'Visual Basic', url: 'https://redirect.sonarsource.com/plugins/vb.html' },
+  { name: 'PL/I', url: 'https://redirect.sonarsource.com/plugins/pli.html' }
+];
+
+const half = (languages.length + 1) / 2;
+
+export default class AboutLanguages extends React.Component {
+  render () {
+    return (
+        <div className="boxed-group">
+          <h2>{translate('about_page.languages')}</h2>
+          <div className="boxed-group-inner">
+            <p className="about-page-text">{translate('about_page.languages.text')}</p>
+            <ul className="about-page-languages">
+              {languages.slice(0, half).map((language, index) => (
+                  <li key={index}>
+                    <a href={languages[index].url}>{languages[index].name}</a>
+                    <br/>
+                    {index + half < languages.length && (
+                        <a href={languages[index + half].url}>{languages[index + half].name}</a>
+                    )}
+                  </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutLeakPeriod.js b/server/sonar-web/src/main/js/apps/about/components/AboutLeakPeriod.js
index 1755b96e69a..feb094aa5c9 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutLeakPeriod.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutLeakPeriod.js
@@ -27,9 +27,9 @@ export default class AboutLeakPeriod extends React.Component {
   render () {
     return (
         <div className="boxed-group">
-          <h2>{translate('about_page.leak_period')}</h2>
+          <h2>{translate('about_page.fix_the_leak')}</h2>
           <div className="boxed-group-inner">
-            <p className="about-page-text">{translate('about_page.leak_period.text')}</p>
+            <p className="about-page-text">{translate('about_page.fix_the_leak.text')}</p>
             <ReadMore link={link}/>
           </div>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js b/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js
index 190f41f6704..ecaf724f924 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js
@@ -30,7 +30,7 @@ export default class AboutProjects extends React.Component {
   render () {
     return (
         <div className="about-page-projects">
-          <div className="big-spacer-bottom">
+          <div>
             <Link to="/projects" className="about-page-projects-link">
               {formatMeasure(this.props.count, 'INT')}
             </Link>
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutQualityModel.js b/server/sonar-web/src/main/js/apps/about/components/AboutQualityModel.js
new file mode 100644
index 00000000000..fc036f18c95
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutQualityModel.js
@@ -0,0 +1,65 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+import { translate } from '../../../helpers/l10n';
+import BugIcon from '../../../components/ui/BugIcon';
+import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
+import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
+
+export default class AboutQualityModel extends React.Component {
+  render () {
+    return (
+        <div className="boxed-group about-quality-model">
+          <h2>{translate('about_page.quality_model')}</h2>
+
+          <div className="boxed-group-inner clearfix">
+            <div className="flex-columns">
+              <div className="flex-column flex-column-third">
+                <div className="pull-left little-spacer-right"><BugIcon/></div>
+                <p className="about-page-text overflow-hidden">
+                  <strong>{translate('issue.type.BUG.plural')}</strong>
+                  {' '}
+                  {translate('about_page.quality_model.bugs')}
+                </p>
+              </div>
+
+              <div className="flex-column flex-column-third">
+                <div className="pull-left little-spacer-right"><VulnerabilityIcon/></div>
+                <p className="about-page-text overflow-hidden">
+                  <strong>{translate('issue.type.VULNERABILITY.plural')}</strong>
+                  {' '}
+                  {translate('about_page.quality_model.vulnerabilities')}
+                </p>
+              </div>
+
+              <div className="flex-column flex-column-third">
+                <div className="pull-left little-spacer-right"><CodeSmellIcon/></div>
+                <p className="about-page-text overflow-hidden">
+                  <strong>{translate('issue.type.CODE_SMELL.plural')}</strong>
+                  {' '}
+                  {translate('about_page.quality_model.code_smells')}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutScanners.js b/server/sonar-web/src/main/js/apps/about/components/AboutScanners.js
index 627996d1945..42b0e5328a9 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutScanners.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutScanners.js
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import ReadMore from './ReadMore';
 import { translate } from '../../../helpers/l10n';
 
 const scanners = [
@@ -49,16 +48,13 @@ export default class AboutScanners extends React.Component {
         <div className="boxed-group">
           <h2>{translate('about_page.scanners')}</h2>
           <div className="boxed-group-inner">
+            <p className="about-page-text">{translate('about_page.scanners.text')}</p>
             <div className="about-page-analyzers">
               {scanners.map(scanner => (
-                  <div key={scanner.key} className="about-page-analyzer-box">
-                    <div className="big-spacer-bottom">
-                      <img src={`${window.baseUrl}/images/scanner-logos/${scanner.key}.svg`} height={80}
-                           alt={translate('about_page.scanners', scanner.key)}/>
-                    </div>
-                    <p className="about-page-text">{translate('about_page.scanners', scanner.key, 'text')}</p>
-                    <ReadMore link={scanner.link}/>
-                  </div>
+                  <a key={scanner.key} className="about-page-analyzer-box" href={scanner.link}>
+                    <img src={`${window.baseUrl}/images/scanner-logos/${scanner.key}.svg`} height={60}
+                         alt={translate('about_page.scanners', scanner.key)}/>
+                  </a>
               ))}
             </div>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/about/components/ReadMore.js b/server/sonar-web/src/main/js/apps/about/components/ReadMore.js
index 2199979f1ca..8ba0ea98a22 100644
--- a/server/sonar-web/src/main/js/apps/about/components/ReadMore.js
+++ b/server/sonar-web/src/main/js/apps/about/components/ReadMore.js
@@ -30,7 +30,6 @@ export default class ReadMore extends React.Component {
         <div className="big-spacer-top">
           <a className="about-page-link-more" href={this.props.link} target="_blank">
             <span>{translate('about_page.read_more')}</span>
-            <i className="icon-detach spacer-left"/>
           </a>
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/about/styles.css b/server/sonar-web/src/main/js/apps/about/styles.css
index 98840ab8fcd..d09ede5c5f7 100644
--- a/server/sonar-web/src/main/js/apps/about/styles.css
+++ b/server/sonar-web/src/main/js/apps/about/styles.css
@@ -1,10 +1,21 @@
 .about-page {
+  font-size: 14px;
+}
+
+.about-page .boxed-group {
+  border: none;
 }
 
 .about-page .boxed-group h2 {
   font-size: 18px;
-  font-weight: bold;
-  text-align: center;
+}
+
+.about-page .boxed-group > h2 {
+  padding-top: 25px;
+}
+
+.about-page .boxed-group-inner {
+  padding-bottom: 25px;
 }
 
 .about-page-container {
@@ -17,61 +28,63 @@
   box-sizing: border-box;
 }
 
-.about-page-center-container {
-  position: relative;
-  width: 640px;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.about-page-logo {
-  padding: 20px 0;
-}
-
 .about-page-entry {
-  margin-bottom: 50px;
-  padding: 40px 0 50px;
-  background-color: #363636;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 45px;
+  padding: 65px 0 65px;
+  border-bottom: 1px solid #e6e6e6;
 }
 
-.about-page-entry .about-page-header {
-  color: rgba(255, 255, 255, 0.9);
+.about-page-intro {
+  padding-right: 65px;
+  border-right: 1px solid #e6e6e6;
 }
 
-.about-page-entry-column {
-  float: right;
-  text-align: center;
-  box-sizing: border-box;
+.about-page-intro > h1 {
+  line-height: 40px;
+  font-size: 26px;
+  font-weight: 300;
 }
 
-.about-page-entry-column + .about-page-entry-column {
-  margin-right: 60px;
-  padding-right: 60px;
-  border-right: 1px solid rgba(75, 159, 213, 0.2);
+.about-page-intro > .button {
+  height: 32px;
+  line-height: 30px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-radius: 3px;
+  font-size: 13px;
+  font-weight: 400;
 }
 
-.about-page-entry .alert {
-  font-size: 13px;
+.about-page-instance {
+  display: flex;
+  align-items: center;
 }
 
 .about-page-projects {
+  margin-left: 65px;
   line-height: 1.4;
-  color: rgba(255, 255, 255, 0.9);
   font-size: 16px;
   text-align: center;
 }
 
 .about-page-projects-link {
-  border-bottom-color: rgba(75, 159, 213, 0.2);
-  color: rgb(75, 159, 213);
-  font-size: 44px;
-  font-weight: bold;
+  display: inline-block;
+  line-height: 1;
+  margin-bottom: 12px;
+  font-size: 32px;
 }
 
 .about-page-issue-types {
   text-align: left;
 }
 
+.about-page-issue-types > li + li {
+  margin-top: 12px;
+}
+
 .about-page-issue-types svg {
   vertical-align: middle;
   transform: translateY(-1px);
@@ -85,9 +98,7 @@
 }
 
 .about-page-issue-type-link {
-  border-bottom-color: rgba(75, 159, 213, 0.2);
-  color: rgb(75, 159, 213);
-  font-size: 24px;
+  font-size: 16px;
   font-weight: bold;
 }
 
@@ -194,15 +205,34 @@
   text-transform: uppercase;
 }
 
+.about-page-languages {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.about-page-languages > li {
+  line-height: 2;
+}
+
+.about-quality-model .flex-column + .flex-column{
+  margin-left: 30px;
+  padding-left: 30px;
+  border-left: 1px solid #e6e6e6;
+}
+
+.about-quality-model svg {
+  transform: translateY(2px);
+}
+
 .about-page-analyzers {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
+  margin-top: 15px;
 }
 
 .about-page-analyzer-box {
-  width: 310px;
-  margin-top: 40px;
+  border: none;
 }
 
 .about-page-group-boxes {
diff --git a/server/sonar-web/src/main/webapp/images/scanner-logos/sonarqube.svg b/server/sonar-web/src/main/webapp/images/scanner-logos/sonarqube.svg
index f0650ba552f..ad6cebddc28 100644
--- a/server/sonar-web/src/main/webapp/images/scanner-logos/sonarqube.svg
+++ b/server/sonar-web/src/main/webapp/images/scanner-logos/sonarqube.svg
@@ -1,7 +1,6 @@
-<svg viewBox="0 0 165 80" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
+<svg viewBox="0 0 169 60" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.41421">
   <g fill-rule="nonzero">
-    <path d="M159.602 51.9h-2.013c0-16.19-13.378-29.423-29.903-29.423V20.4c17.603 0 31.956 14.217 31.956 31.5h-.04z" fill="#4B9FD5"/>
-    <path d="M161 41.066c-2.424-10.167-10.658-18.708-21.053-21.653l.467-1.652c10.94 3.184 19.655 12.153 22.174 22.987l-1.587.32zM163.28 31.55c-2.505-5.474-6.703-10.18-11.954-13.35l.668-1.2c5.45 3.278 9.94 8.316 12.46 14.005l-1.174.546z" fill="#4B9FD5"/>
-    <path d="M0 51.14c1.2.654 3.064 1.2 5.144 1.2 4.49 0 6.782-2.186 6.782-5.145-.04-2.29-1.318-3.93-4.263-4.917-1.947-.666-2.52-1.09-2.52-1.865-.04-.76.653-1.2 1.854-1.2 1.304 0 2.744.44 3.398.868l.853-3.385c-.974-.44-2.6-.986-4.466-.986C2.905 35.71.44 38 .44 40.96c-.08 1.865 1.198 3.61 4.477 4.704 1.8.653 2.305.987 2.305 1.866-.012.878-.653 1.306-2.078 1.306-1.493 0-3.398-.654-4.265-1.2L0 51.14zM21.575 39.32c2.225 0 3.158 2.292 3.158 4.704-.026 2.853-1.213 4.704-3.172 4.704-2.09 0-3.184-1.972-3.184-4.704-.026-2.29.88-4.704 3.185-4.704m.174-3.61c-5.104 0-8.488 3.278-8.488 8.42.026 5.145 3.597 8.21 8.196 8.21 4.237 0 8.315-2.733 8.315-8.53.026-4.703-3.17-8.1-7.983-8.1h-.04M31.316 51.9h4.917v-9.075c0-.44-.014-.88.2-1.213.307-.865 1.092-1.85 2.518-1.85 1.733 0 2.413 1.425 2.413 3.383l.04 8.755h4.905v-9.3c0-4.706-2.426-6.784-5.61-6.784-2.693 0-4.266 1.533-4.918 2.52h-.108l-.226-2.188h-4.263c.065 1.428.105 3.066.105 5.04l.028 10.712zM57.154 46.21c0 .226-.04.546-.147.773-.28 1.093-1.318 1.853-2.517 1.853-1.08 0-1.973-.654-1.973-1.853.04-1.865 2.078-2.52 4.597-2.52l.04 1.746m4.744-3.61c0-3.72-1.612-6.89-6.864-6.89-2.93 0-5.143.88-6.235 1.425l.946 3.17c1.037-.65 2.77-1.198 4.41-1.198 2.386 0 2.85 1.2 2.85 2.08l-.01.213c-5.598 0-9.29 1.972-9.29 6.022.013 2.505 1.972 4.917 5.143 4.917 1.838 0 3.505-.76 4.477-1.973h.107l.293 1.533h4.438c-.2-.865-.24-2.293-.24-3.824l-.027-5.477zM64.31 51.9h4.903v-7.98c0-.335.042-.775.042-1.095.386-1.533 1.652-2.52 3.398-2.52.573 0 .986.108 1.304.108l.04-4.597c-.346 0-.585-.107-1.012-.107-1.573 0-3.505.985-4.277 3.278h-.133l-.2-2.84h-4.198c.093 1.307.16 2.84.16 5.144L64.31 51.9zM106.82 47.53c0 1.638.08 3.17.08 4.37h-2.534l-.16-2.625h-.064c-.762 1.318-2.494 3.064-5.345 3.064-2.45 0-5.464-1.426-5.464-6.996v-9.422h2.92v8.876c0 3.052.906 5.13 3.53 5.13 1.987 0 3.29-1.412 3.838-2.733.188-.44.32-.878.32-1.425l-.025-9.848h2.905V47.53zM111.95 45.664c0 .333.093.653.093.987.613 2.078 2.293 3.504 4.37 3.504 3.078 0 4.932-2.517 4.932-6.235-.04-3.173-1.64-5.918-4.824-5.918-1.958 0-3.825 1.318-4.37 3.61-.093.334-.214.666-.214 1.213l.014 2.84m-3 6.342c.067-1.093.135-2.624.135-4.038V28.592h2.865v10.075h.065c1.026-1.76 2.866-2.96 5.492-2.96 3.93 0 6.782 3.28 6.675 8.21.028 5.69-3.61 8.53-7.102 8.53-2.345 0-4.158-.868-5.37-3.065h-.12l-.133 2.624h-2.506zM137.096 42.386c.026-1.865-.76-4.705-4.052-4.705-2.917 0-4.263 2.733-4.478 4.706h8.53m-8.53 2.078c.068 3.944 2.627 5.585 5.464 5.585 2.106 0 3.398-.443 4.492-.882l.453 2.08c-1.026.44-2.76.986-5.265.986-4.983 0-7.888-3.172-7.888-7.995-.028-4.813 2.852-8.636 7.448-8.636 5.238 0 6.677 4.597 6.677 7.54-.053.548-.12.987-.12 1.32h-11.26zM86.577 48.836c-2.704 1.865-6.37 1.213-8.236-1.533-1.81-2.732-1.09-6.343 1.534-8.196 2.746-1.865 6.45-1.105 8.316 1.533 1.785 2.732 1.093 6.45-1.64 8.196m3.68-9.622c-2.613-3.837-7.836-4.81-11.78-2.185-3.8 2.624-4.81 7.875-2.186 11.698 2.318 3.398 6.676 4.597 10.393 3.066l3.225 5.25 2.598-1.746-3.265-5.37c2.826-2.733 3.345-7.21 1.054-10.714h-.04"/>
+    <path d="M5.6405 33.56208c0-.39166-.13802-.6925-.41525-.9013-.27605-.21-.7739-.43178-1.49235-.66418-.71962-.2324-1.28825-.46245-1.70823-.68778-1.14197-.617-1.71413-1.44988-1.71413-2.4951 0-.54386.15336-1.02872.4601-1.45578.3067-.42588.74675-.75856 1.3201-.99805.57334-.2395 1.21747-.35982 1.93238-.35982.71844 0 1.35903.12977 1.92176.3905.56155.2607.99804.6276 1.3095 1.10302.31143.47425.46716 1.01338.46716 1.6174H5.6476c0-.46127-.14512-.8199-.43533-1.07472-.2902-.256-.6984-.3846-1.22337-.3846-.50728 0-.9013.10736-1.18208.32207-.28195.2147-.42234.49666-.42234.84704 0 .32677.16517.60047.4943.82225.32915.2206.8152.42824 1.45578.62172 1.17972.3551 2.03856.79513 2.5777 1.3201.53912.52616.80928 1.17972.80928 1.96306 0 .8718-.33032 1.55487-.9886 2.05035-.65947.49548-1.54662.74322-2.66146.74322-.7739 0-1.47937-.14156-2.11523-.42587-.63587-.28314-1.12074-.67126-1.45578-1.1644-.33386-.4931-.5002-1.0641-.5002-1.71412h2.07985c0 1.11013.66418 1.66577 1.99136 1.66577.49313 0 .87772-.10027 1.15377-.30082.27723-.20056.41526-.48015.41526-.83997zM16.47152 31.39848c0 .99096-.17578 1.85924-.52497 2.606-.35038.74676-.85176 1.32247-1.50415 1.7283-.65238.4058-1.39915.60872-2.24265.60872-.83406 0-1.57846-.20055-2.2332-.60165-.65357-.4011-1.16085-.97327-1.52066-1.71767-.35983-.7444-.5415-1.60088-.54622-2.56826v-.49784c0-.99096.1793-1.86277.5356-2.61662.35744-.75266.86236-1.33072 1.51475-1.73418.6512-.40347 1.3968-.6052 2.23557-.6052.83878 0 1.58436.20173 2.23675.6052.6512.40346 1.15612.98152 1.51358 1.73418.35745.75385.5356 1.6233.5356 2.60954v.44948zm-2.10108-.45655c0-1.05467-.18994-1.85688-.56745-2.40545-.37752-.5474-.91665-.82227-1.6174-.82227-.69604 0-1.2328.27135-1.61032.81284-.3775.5415-.5698 1.33426-.57452 2.38067v.49078c0 1.02753.18993 1.82502.56744 2.39247.3775.56627.92136.8494 1.63155.8494.69604 0 1.23045-.27252 1.60324-.81873.37397-.5462.56272-1.34252.56744-2.38893v-.49077zM25.24274 36.2023H23.1688l-4.037-6.62177v6.62177h-2.07396V26.1381h2.07395l4.04407 6.63593V26.1381h2.06687v10.0642zM31.94 34.12953h-3.6359l-.6913 2.07277h-2.2049l3.7456-10.0642h1.92177l3.76803 10.0642h-2.2049l-.6984-2.07277zm-3.0767-1.67992h2.51634l-1.26466-3.76802-1.25168 3.76803zM38.5889 32.51803h-1.65278v3.68427h-2.07276V26.1381h3.73853c1.18915 0 2.10697.26544 2.75228.79514.64412.5297.96737 1.2788.96737 2.24618 0 .6866-.14865 1.25995-.44594 1.71768-.29728.4589-.74793.82462-1.35195 1.09596l2.17777 4.1125v.09674h-2.22614l-1.88637-3.68427zm-1.65278-1.67874h1.67285c.52143 0 .9249-.13332 1.2104-.39757.28548-.26544.42823-.63115.42823-1.09596 0-.47425-.1345-.84822-.40465-1.11956-.26897-.2725-.68305-.40817-1.24106-.40817H36.9361v3.02126zM51.2308 31.39848c0 .94023-.1522 1.7566-.45656 2.45028-.30437.69367-.72553 1.2505-1.26466 1.6693l1.67284 1.3142-1.3201 1.16793-2.14356-1.72122c-.2442.0413-.49784.06252-.75974.06252-.83406 0-1.57846-.20055-2.2332-.60165-.65475-.4011-1.16085-.97327-1.52066-1.71767-.35982-.7444-.5415-1.60088-.5462-2.56826v-.49784c0-.99096.1793-1.86277.53558-2.61662.35745-.75266.86237-1.33072 1.51476-1.73418.6512-.40347 1.3968-.6052 2.23557-.6052.83878 0 1.58436.20173 2.23675.6052.6512.40346 1.15612.98152 1.51358 1.73418.35627.75385.5356 1.6233.5356 2.60954v.44948zm-2.1011-.45655c0-1.05467-.18993-1.85688-.56744-2.40545-.3775-.5474-.91664-.82227-1.6174-.82227-.69603 0-1.2328.27135-1.6103.81284-.3787.5415-.5698 1.33426-.57453 2.38067v.49078c0 1.02753.18993 1.82502.56744 2.39247.3775.56627.92136.8494 1.63155.8494.69604 0 1.23045-.27252 1.60324-.81873.37398-.5462.56273-1.34252.56745-2.38893v-.49077zM59.44872 26.1381v6.62885c0 1.10186-.34448 1.9725-1.03343 2.61308-.68897.6406-1.6304.96147-2.82426.96147-1.175 0-2.10816-.31144-2.79948-.93315-.69132-.6229-1.04287-1.477-1.05703-2.5647V26.1381h2.07395v6.643c0 .65947.1569 1.13962.47307 1.44163.31616.302.75266.453 1.3095.453 1.16673 0 1.75895-.61344 1.77664-1.83917V26.1381h2.08102zM60.22852 36.2023V26.1381h3.52618c1.221 0 2.1471.2336 2.77824.70194.63115.46717.9473 1.1526.9473 2.05625 0 .4931-.1274.92725-.37986 1.30358-.25364.37515-.60637.65003-1.0582.8258.5167.1286.92254.3893 1.21983.78098.2973.39167.44594.87063.44594 1.43808 0 .96737-.3091 1.69998-.92608 2.19782-.617.49784-1.49706.75148-2.6402.75974H60.2285zm2.07394-4.38148v2.7157h1.77666c.4884 0 .86946-.1156 1.14433-.34918.2737-.2324.41054-.5533.41054-.96384 0-.92136-.4766-1.3897-1.431-1.40268h-1.90054zm0-1.4664h1.53482c1.0464-.0177 1.56903-.4353 1.56903-1.2505 0-.45655-.13212-.7845-.39756-.98506-.26426-.20056-.68306-.30083-1.25404-.30083h-1.45224v2.5364zM74.39813 31.84087h-3.98155v2.69566h4.67287v1.66577H68.3438V26.1381h6.73267v1.67993h-4.6599v2.39837h3.98156v1.62447z" fill="#4A9ACD"/>
+    <path d="M83.21064 33.56208c0-.39166-.1392-.6925-.41526-.9013-.27606-.21-.7739-.43178-1.49353-.66418-.71845-.2324-1.28707-.46245-1.70705-.68778-1.14315-.617-1.71413-1.44988-1.71413-2.4951 0-.54386.15336-1.02872.4601-1.45578.3067-.42588.74675-.75856 1.3201-.99805.57334-.2395 1.21746-.35982 1.93237-.35982.71845 0 1.35904.12977 1.9206.3905.56272.2607.9992.6276 1.31066 1.10302.31144.47425.466 1.01338.466 1.6174H83.2177c0-.46127-.1463-.8199-.4365-1.07472-.2902-.256-.6972-.3846-1.22337-.3846-.5061 0-.90012.10736-1.18208.32207-.28077.2147-.42116.49666-.42116.84704 0 .32677.16517.60047.49432.82225.32914.2206.814.42824 1.4546.62172 1.1797.3551 2.03973.79513 2.57886 1.3201.53913.52616.8081 1.17972.8081 1.96306 0 .8718-.32913 1.55487-.9886 2.05035-.65828.49548-1.54543.74322-2.66027.74322-.77506 0-1.47936-.14156-2.11522-.42587-.63587-.28314-1.12192-.67126-1.45578-1.1644-.33386-.4931-.50138-1.0641-.50138-1.71412h2.08103c0 1.11013.66418 1.66577 1.99136 1.66577.49314 0 .87772-.10027 1.15378-.30082.27605-.20056.41526-.48015.41526-.83997zM93.67476 32.8507c-.07786 1.083-.4778 1.93475-1.19978 2.55765-.7208.6217-1.67166.93315-2.85138.93315-1.28944 0-2.30517-.4353-3.04486-1.3036-.73968-.86826-1.10894-2.06096-1.10894-3.5769v-.6158c0-.96738.17106-1.82032.512-2.55764.34094-.73733.82817-1.3024 1.46168-1.69644.6335-.39403 1.36965-.59104 2.20843-.59104 1.16086 0 2.09637.31145 2.80657.93316.709.6217 1.11955 1.49588 1.23044 2.62016h-2.07393c-.05073-.65003-.23123-1.12074-.54268-1.4145-.31145-.29256-.78452-.43884-1.4204-.43884-.6913 0-1.2092.24774-1.5525.74322-.3433.49548-.51908 1.26466-.5285 2.30517v.76092c0 1.0877.16515 1.88283.4943 2.38422.32913.50255.8494.75383 1.5584.75383.6406 0 1.11955-.1463 1.43454-.43886.31616-.29257.49666-.74558.54267-1.35786h2.07396zM99.79868 34.12953h-3.6359l-.6913 2.07277h-2.2049l3.7456-10.0642h1.92177l3.76802 10.0642h-2.2049l-.6984-2.07277zm-3.0767-1.67992h2.51634l-1.26466-3.76802-1.2517 3.76803zM110.90575 36.2023h-2.07395l-4.037-6.62177v6.62177h-2.07277V26.1381h2.07277l4.04408 6.63593V26.1381h2.06687v10.0642zM119.98133 36.2023h-2.07394l-4.03702-6.62177v6.62177h-2.07394V26.1381h2.07394l4.04408 6.63593V26.1381h2.06687v10.0642zM126.92752 31.84087h-3.98155v2.69566h4.67287v1.66577h-6.74682V26.1381h6.73266v1.67993h-4.6587v2.39837h3.98154v1.62447zM131.6405 32.51803h-1.6516v3.68427h-2.07395V26.1381h3.7397c1.18917 0 2.1058.26544 2.75112.79514.6453.5297.96737 1.2788.96737 2.24618 0 .6866-.14864 1.25995-.44593 1.71768-.29728.4589-.74794.82462-1.35077 1.09596l2.17658 4.1125v.09674h-2.22494l-1.88755-3.68427zm-1.6516-1.67874h1.67284c.52026 0 .92372-.13332 1.2092-.39757.2855-.26544.42825-.63115.42825-1.09596 0-.47425-.1345-.84822-.40347-1.11956-.27016-.2725-.68424-.40817-1.24107-.40817h-1.66576v3.02126zM146.53565 32.8507c-.07904 1.083-.47897 1.93475-1.19977 2.55765-.7208.6217-1.67167.93315-2.8514.93315-1.2906 0-2.30516-.4353-3.04485-1.3036-.73968-.86826-1.10893-2.06096-1.10893-3.5769v-.6158c0-.96738.16988-1.82032.51082-2.55764.34094-.73733.82816-1.3024 1.46167-1.69644.63468-.39403 1.37082-.59104 2.20843-.59104 1.16202 0 2.09754.31145 2.80655.93316.7102.6217 1.12073 1.49588 1.23045 2.62016h-2.07277c-.05073-.65003-.2324-1.12074-.54267-1.4145-.31146-.29256-.78453-.43884-1.42157-.43884-.69014 0-1.20804.24774-1.55134.74322-.3433.49548-.51908 1.26466-.52852 2.30517v.76092c0 1.0877.16398 1.88283.4943 2.38422.32914.50255.84822.75383 1.5584.75383.6406 0 1.1184-.1463 1.43455-.43886.315-.29257.49666-.74558.54267-1.35786h2.07395zM149.0508 34.53653h4.40273v1.66577h-6.47666V26.1381h2.07394v8.39843zM153.85345 26.1381h2.07395v10.0642h-2.07395z" fill="#616161"/>
   </g>
 </svg>