WWWSC-81 Rectify design & Text of new About Page (#551)

diff --git a/server/sonar-web/public/images/sonarcloud/bitbucket-white.svg b/server/sonar-web/public/images/sonarcloud/bitbucket-white.svg
deleted file mode 100644 (file)
index fd609b5..0000000
--- a/server/sonar-web/public/images/sonarcloud/bitbucket-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.6 63.3"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="62.16" y1="735.29" x2="32.81" y2="755.16" gradientTransform="translate(0 -702)"><stop offset=".07" stop-color="#fff" stop-opacity=".4"/><stop offset="1" stop-color="#fff"/></linearGradient><path d="M59.7 25.1H40.9l-3.2 18.4h-13L9.4 61.7c.5.4 1.1.7 1.8.7h40.7c1 0 1.8-.7 2-1.7l5.8-35.6z" fill="url(#a)"/><path d="M2 6.3c-1.1 0-2 .9-2 2v.3l8.5 51.5c.1.6.4 1.2.9 1.6.5.4 1.1.7 1.8.7L27 43.5h-2.2l-3.5-18.4h38.4l2.7-16.5c.2-1.1-.6-2.1-1.7-2.3H2z" fill="#fff"/></svg>
\ No newline at end of file

diff --git a/server/sonar-web/public/images/sonarcloud/bitbucket.svg b/server/sonar-web/public/images/sonarcloud/bitbucket.svg
new file mode 100644 (file)
index 0000000..984afda
--- /dev/null
+++ b/server/sonar-web/public/images/sonarcloud/bitbucket.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-361.924 -3545.014 58.441 52.551">
+  <defs>
+    <linearGradient id="a" x1="1.086" x2=".469" y1=".138" y2=".788" gradientUnits="objectBoundingBox">
+      <stop offset=".18" stop-color="#0052cc"/>
+      <stop offset="1" stop-color="#2684ff"/>
+    </linearGradient>
+  </defs>
+  <path fill="#2684ff" d="M-360.027-3545.013a1.872 1.872 0 0 0-1.871 2.172l7.947 48.253a2.547 2.547 0 0 0 2.49 2.125h38.133a1.872 1.872 0 0 0 1.872-1.573l7.949-48.8a1.872 1.872 0 0 0-1.872-2.172zm33.47 34.875h-12.171l-3.3-17.217h18.42z"/>
+  <path fill="url(#a)" d="M56.464 25.12H38.891l-2.949 17.217H23.771L9.4 59.4a2.537 2.537 0 0 0 1.638.618H49.18a1.872 1.872 0 0 0 1.872-1.573z" transform="translate(-362.499 -3552.476)"/>
+</svg>
\ No newline at end of file

diff --git a/server/sonar-web/public/images/sonarcloud/github-white.svg b/server/sonar-web/public/images/sonarcloud/github-white.svg
deleted file mode 100644 (file)
index ec49a93..0000000
--- a/server/sonar-web/public/images/sonarcloud/github-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1096.695 -5028.598 25.874 25.241"><path data-name="Tracé 10275" d="M-1072.556-5022.155a12.881 12.881 0 0 0-4.708-4.708 12.654 12.654 0 0 0-6.494-1.735 12.655 12.655 0 0 0-6.494 1.735 12.879 12.879 0 0 0-4.708 4.708 12.655 12.655 0 0 0-1.735 6.492 12.573 12.573 0 0 0 2.468 7.605 12.67 12.67 0 0 0 6.376 4.674.754.754 0 0 0 .674-.118.659.659 0 0 0 .219-.505l-.008-.91q-.008-.859-.008-1.5l-.387.067a4.943 4.943 0 0 1-.935.059 7.123 7.123 0 0 1-1.171-.118 2.616 2.616 0 0 1-1.129-.5 2.137 2.137 0 0 1-.741-1.036l-.168-.388a4.209 4.209 0 0 0-.531-.859 2.033 2.033 0 0 0-.733-.64l-.118-.084a1.237 1.237 0 0 1-.219-.2.924.924 0 0 1-.152-.236q-.051-.118.084-.194a1.092 1.092 0 0 1 .489-.075l.337.05a2.459 2.459 0 0 1 .834.4 2.719 2.719 0 0 1 .819.877 2.969 2.969 0 0 0 .935 1.053 1.983 1.983 0 0 0 1.1.362 4.79 4.79 0 0 0 .96-.084 3.35 3.35 0 0 0 .758-.253 2.729 2.729 0 0 1 .825-1.735 11.534 11.534 0 0 1-1.727-.3 6.875 6.875 0 0 1-1.583-.657 4.535 4.535 0 0 1-1.356-1.128 5.424 5.424 0 0 1-.884-1.769 8.411 8.411 0 0 1-.345-2.527 4.913 4.913 0 0 1 1.331-3.47 4.528 4.528 0 0 1 .118-3.436 2.36 2.36 0 0 1 1.449.227 10.129 10.129 0 0 1 1.407.649q.447.269.716.455a12.166 12.166 0 0 1 6.469 0l.64-.4a9.066 9.066 0 0 1 1.549-.741 2.208 2.208 0 0 1 1.365-.185 4.485 4.485 0 0 1 .134 3.436 4.914 4.914 0 0 1 1.331 3.47 8.505 8.505 0 0 1-.345 2.535 5.213 5.213 0 0 1-.892 1.769 4.709 4.709 0 0 1-1.365 1.12 6.888 6.888 0 0 1-1.584.657 11.523 11.523 0 0 1-1.727.3 3 3 0 0 1 .876 2.392v3.554a.671.671 0 0 0 .211.505.732.732 0 0 0 .665.118 12.669 12.669 0 0 0 6.376-4.674 12.575 12.575 0 0 0 2.467-7.612 12.665 12.665 0 0 0-1.735-6.492z" fill="#fff"/></svg>
\ No newline at end of file

diff --git a/server/sonar-web/public/images/sonarcloud/github.svg b/server/sonar-web/public/images/sonarcloud/github.svg
new file mode 100644 (file)
index 0000000..97c8f32
--- /dev/null
+++ b/server/sonar-web/public/images/sonarcloud/github.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-738.601 -3545.014 54.017 52.551">
+  <path fill="#191717" fill-rule="evenodd" d="M-711.675-3545.014a26.975 26.975 0 0 0-8.59 52.53c1.322.165 1.817-.661 1.817-1.322v-4.625c-7.433 1.652-9.085-3.634-9.085-3.634-1.156-3.139-2.973-3.965-2.973-3.965-2.478-1.652.165-1.652.165-1.652 2.643.165 4.13 2.808 4.13 2.808 2.478 4.13 6.277 2.973 7.764 2.313a5.752 5.752 0 0 1 1.646-3.634c-5.947-.661-12.224-2.973-12.224-13.38a10.24 10.24 0 0 1 2.808-7.268 9.781 9.781 0 0 1 .33-6.938s2.313-.661 7.433 2.808a23.083 23.083 0 0 1 6.773-.826 30.4 30.4 0 0 1 6.773.826c5.121-3.469 7.433-2.808 7.433-2.808a10.343 10.343 0 0 1 .33 7.1 10.684 10.684 0 0 1 2.815 7.267c0 10.407-6.277 12.554-12.224 13.215.991.826 1.817 2.478 1.817 4.956v7.433c0 .661.5 1.487 1.817 1.322a26.976 26.976 0 0 0-8.755-52.526z"/>
+</svg>
\ No newline at end of file

diff --git a/server/sonar-web/public/images/sonarcloud/windows-white.svg b/server/sonar-web/public/images/sonarcloud/windows-white.svg
deleted file mode 100644 (file)
index ccd03f6..0000000
--- a/server/sonar-web/public/images/sonarcloud/windows-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><style>.st0{fill:#fff}</style><g id="Groupe_5913" transform="translate(-1246 -5477)"><path id="Rectangle_6108" class="st0" d="M1248.1 5479.1h8.2v8.2h-8.2z"/><path id="Rectangle_6109" class="st0" d="M1248.1 5488.7h8.2v8.2h-8.2z"/><path id="Rectangle_6110" class="st0" d="M1257.7 5479.1h8.2v8.2h-8.2z"/><path id="Rectangle_6111" class="st0" d="M1257.7 5488.7h8.2v8.2h-8.2z"/></g></svg>
\ No newline at end of file

diff --git a/server/sonar-web/src/main/js/app/components/__tests__/GlobalFooter-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/GlobalFooter-test.tsx
index dad1ed27cab99d1720ec6572088ea877826dcc6d..5d493f1c3c685413091d3a3066d05f931face77a 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/__tests__/GlobalFooter-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/GlobalFooter-test.tsx
@@ -51,5 +51,7 @@ it('should render SonarCloud footer', () => {
 
 function getWrapper(props = {}, onSonarCloud = false) {
   (isSonarCloud as jest.Mock).mockImplementation(() => onSonarCloud);
-  return shallow(<GlobalFooter productionDatabase={true} sonarqubeEdition={EditionKey.community} {...props} />);
+  return shallow(
+    <GlobalFooter productionDatabase={true} sonarqubeEdition={EditionKey.community} {...props} />
+  );
 }

diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js
index b9e4c9670cceb878ae791de3718db12a282deca7..91ba51aa4c3353b2bcfc3c85a4c1535877414a20 100644 (file)
--- a/server/sonar-web/src/main/js/app/theme.js
+++ b/server/sonar-web/src/main/js/app/theme.js
@@ -80,6 +80,7 @@ module.exports = {
 
   // different
   baseFontFamily: "'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif",
+  systemFontFamily: "-apple-system,'BlinkMacSystemFont','Segoe UI','Helvetica','Arial',sans-serif",
   defaultShadow: '0 6px 12px rgba(0, 0, 0, 0.175)',
 
   // z-index
@@ -111,8 +112,10 @@ module.exports = {
   // sonarcloud
   sonarcloudOrange: '#f60',
   sonarcloudOrangeDark: '#e65c00',
+  sonarcloudBlack100: '#ffffff',
   sonarcloudBlack200: '#f9f9fb',
   sonarcloudBlack300: '#cfd3d7',
+  sonarcloudBlack500: '#8a8c8f',
   sonarcloudBlack700: '#434447',
   sonarcloudBlack800: '#2d3032',
   sonarcloudBlack900: '#070706',

diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx
index b6055d50309f80c92a37fd96b3ca645922802eb1..3943b5eced59c6ea1984d64edfb792758f99db9a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx
@@ -35,7 +35,7 @@ export default function Pricing() {
         <strong>
           From <span className="sc-pricing-price">10€</span>/mo
         </strong>
-        <Link className="sc-arrow-link sc-pricing-small" to="/documentation/sonarcloud-pricing">
+        <Link className="sc-news-link" to="/documentation/sonarcloud-pricing">
           see prices
         </Link>
       </div>

diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx
index bce6f46f94d031ff477d3e17d5eafef860355ac2..7d9067e3a0d81c25da92ad48c00e01498659f1f6 100644 (file)
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx
@@ -61,21 +61,21 @@ function Jumbotron() {
         </div>
         <div>
           <a
-            className="sc-black-button sc-sq-login-button"
+            className="sc-white-button sc-sq-login-button"
             href={`${getBaseUrl()}/sessions/init/github`}>
-            <img alt="" height="25" src={`${getBaseUrl()}/images/sonarcloud/github-white.svg`} />
+            <img alt="" height="25" src={`${getBaseUrl()}/images/sonarcloud/github.svg`} />
             GitHub
           </a>
           <a
-            className="sc-black-button sc-sq-login-button"
+            className="sc-white-button sc-sq-login-button"
             href={`${getBaseUrl()}/sessions/init/bitbucket`}>
-            <img alt="" height="25" src={`${getBaseUrl()}/images/sonarcloud/bitbucket-white.svg`} />
+            <img alt="" height="25" src={`${getBaseUrl()}/images/sonarcloud/bitbucket.svg`} />
             Bitbucket
           </a>
           <a
-            className="sc-black-button sc-sq-login-button"
+            className="sc-white-button sc-sq-login-button"
             href={`${getBaseUrl()}/sessions/init/microsoft`}>
-            <img alt="" height="25" src={`${getBaseUrl()}/images/sonarcloud/windows-white.svg`} />
+            <img alt="" height="25" src={`${getBaseUrl()}/images/sonarcloud/windows.svg`} />
             VSTS
           </a>
         </div>
@@ -94,10 +94,7 @@ function Jumbotron() {
 function Features() {
   return (
     <>
-      <h2 className="sc-sq-header2">
-        The right solution for developers
-        <span className="sc-sq-dot">•</span>
-      </h2>
+      <h2 className="sc-sq-header2">The right solution for developers</h2>
       <ul className="sc-features-list">
         <li className="sc-feature">
           <img
@@ -327,7 +324,6 @@ function Integrations() {
 function BottomNote() {
   return (
     <div className="sc-bottom-note">
-      <span className="sc-sq-dot spacer-right">•</span>
       Includes all features of SonarSource{' '}
       <a
         className="sc-bottom-note-link link-base-color"

diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQTopNav.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQTopNav.tsx
index 0a6055820b5ce80db789690ddd626a82bfcd62fe..7c0a17b8b790b9476e55d31f7eab465124890400 100644 (file)
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQTopNav.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQTopNav.tsx
@@ -23,11 +23,6 @@ import { Link } from 'react-router';
 export default function SQTopNav() {
   return (
     <ul className="sc-top-nav">
-      <li className="sc-top-nav-item">
-        <Link className="sc-top-nav-link" to="/about/sq">
-          Home
-        </Link>
-      </li>
       <li className="sc-top-nav-item">
         <Link
           activeClassName="sc-top-nav-active"

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 40319514e6e2e68de481c4b4816880a64f1f0d15..7b5ad4ec5591488739efb0bd849b2b8e504d63fb 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
@@ -23,11 +23,44 @@
   font-family: var(--sonarcloudFontFamily);
 }
 
+.sc-page p {
+  font-family: var(--systemFontFamily);
+}
+
 .sc-page *:focus,
 .sc-footer *:focus {
   box-shadow: 0 0 0 3px rgba(230, 92, 0, 0.25);
 }
 
+.sc-white-button {
+  display: inline-block;
+  background-color: var(--sonarcloudBlack100);
+  border: 1px solid var(--sonarcloudBlack300);
+  margin: 10px auto;
+  font-size: 18px;
+  font-weight: 500;
+  padding-right: 15px;
+  color: var(--sonarcloudBlack800);
+  border-radius: 4px;
+  height: 50px;
+  line-height: 50px;
+  padding-left: 15px;
+  transition: all 0.1s ease-in;
+  box-shadow: 0 1px 2px rgba(7, 7, 6, 0.1);
+}
+
+.sc-white-button img {
+  height: 25px;
+  padding-top: 12px;
+  margin-bottom: 5px;
+}
+
+.sc-white-button:hover {
+  box-shadow: 0 10px 20px rgba(7, 7, 6, 0.2);
+  transform: translate(0, -2px);
+  color: var(--sonarcloudBlack800);
+}
+
 .sc-black-button,
 .sc-orange-button {
   display: inline-flex;
@@ -37,7 +70,6 @@
   line-height: 44px;
   border: none;
   border-radius: 4px;
-
   color: #fff;
   font-size: 18px;
   font-weight: 500;
@@ -67,15 +99,15 @@
   line-height: 56px;
   margin-top: 40px;
   margin-bottom: 20px;
-  font-size: 40px;
-  font-weight: 300;
+  font-size: 50px;
+  font-weight: 700;
   text-align: center;
 }
 
 .sc-page-subtitle {
-  line-height: 28px;
-  margin-bottom: 40px;
-  font-size: 20px;
+  line-height: 32px;
+  margin-bottom: 50px;
+  font-size: 22px;
   font-weight: 300;
   text-align: center;
 }
@@ -95,32 +127,31 @@
   flex-direction: column;
   align-items: flex-start;
   width: 30%;
-  margin-bottom: 30px;
+  margin-bottom: 40px;
 }
 
 .sc-feature-title {
   line-height: 28px;
-  margin-bottom: 5px;
-  font-size: 20px;
+  margin-bottom: 13px;
+  font-size: 21px;
   font-weight: 400;
 }
 
 .sc-feature-description {
   flex: 1 1 auto;
   line-height: 22px;
-  font-size: 16px;
-  font-weight: 300;
+  font-size: 15px;
 }
 
 .sc-feature-description + .sc-feature-description {
-  margin-top: 16px;
+  margin-top: 10px;
 }
 
 .sc-feature-link {
   margin-top: 16px;
   color: var(--sonarcloudOrange) !important;
   font-size: 16px;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 .sc-feature-link:hover,
@@ -145,7 +176,7 @@
   width: 330px;
   padding: 20px 20px 30px;
   border: 1px solid var(--sonarcloudBlack300);
-  border-radius: 10px;
+  border-radius: 6px;
   box-sizing: border-box;
   line-height: 20px;
   font-size: 16px;
@@ -173,11 +204,11 @@
 .sc-arrow-link {
   position: relative;
   border: none;
-  color: var(--baseFontColor);
+  color: #444;
 }
 
-.sc-arrow-link::after {
-  content: '→';
+.sc-arrow-link:after {
+  content: '\2192';
   position: absolute;
   top: 0;
   left: calc(100% + 5px);
@@ -246,6 +277,7 @@
 .sc-news-link {
   border-bottom-color: var(--sonarcloudBlack300);
   color: var(--baseFontColor);
+  font-size: 12px;
 }
 
 .sc-news-link:hover,
@@ -376,12 +408,6 @@
   text-align: center;
 }
 
-.sc-sq-dot {
-  vertical-align: super;
-  color: var(--sonarcloudOrange);
-  font-size: 24px;
-}
-
 .sc-languages {
   margin: 60px 0;
   text-align: center;
@@ -394,7 +420,7 @@
 }
 
 .sc-languages-list > li {
-  margin: 11px 22px;
+  margin: 11px 26px;
 }
 
 .sc-integrations {
@@ -417,15 +443,15 @@
 }
 
 .sc-integrations-list > li {
-  width: 170px;
+  width: 200px;
 }
 
 .sc-integrations-list > li + li {
-  border-left: 1px solid var(--sonarcloudBlack300);
+  border-left: 1px solid var(--sonarcloudBorderGray);
 }
 
 .sc-bottom-note {
-  margin: 26px 0 16px;
+  margin: 36px 0 16px;
   font-size: 16px;
   font-weight: 300;
   text-align: center;
@@ -493,6 +519,7 @@ a.sc-top-nav-link:focus {
   line-height: 30px;
   font-size: 21px;
   font-weight: 300;
+  font-family: var(--sonarcloudFontFamily);
 }
 
 .sc-child-lead-link {
@@ -507,7 +534,7 @@ a.sc-top-nav-link:focus {
 }
 
 .sc-child-feature {
-  width: calc(50% - 60px);
+  width: calc(50% - 40px);
 }
 
 .sc-child-start-using {

diff --git a/server/sonar-web/src/main/js/apps/sessions/components/UpdateLogin.tsx b/server/sonar-web/src/main/js/apps/sessions/components/UpdateLogin.tsx
index 82f81c31a642948fc61da7c6a50092efbcb10717..cace627584612c75304bd83040cd111251278da3 100644 (file)
--- a/server/sonar-web/src/main/js/apps/sessions/components/UpdateLogin.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/UpdateLogin.tsx
@@ -107,10 +107,10 @@ export default class UpdateLogin extends React.PureComponent<Props, State> {
           <div className="big-spacer-bottom js-provider-name">
             <p className="little-spacer-bottom">
               <FormattedMessage
-                  defaultMessage={translate('sessions.update_login.1')}
-                  id="sessions.update_login.1"
-                  values={{ providerName: <strong>{query.providerName}</strong> }}
-                />
+                defaultMessage={translate('sessions.update_login.1')}
+                id="sessions.update_login.1"
+                values={{ providerName: <strong>{query.providerName}</strong> }}
+              />
             </p>
           </div>
 
@@ -124,17 +124,17 @@ export default class UpdateLogin extends React.PureComponent<Props, State> {
             <ul className="list-styled">
               <li className="spacer-top js-old-organization-key">
                 <FormattedMessage
-                    defaultMessage={translate('sessions.update_login.4')}
-                    id="sessions.update_login.4"
-                    values={{ organizationKey: <strong>{query.oldOrganizationKey}</strong> }}
-                  />
+                  defaultMessage={translate('sessions.update_login.4')}
+                  id="sessions.update_login.4"
+                  values={{ organizationKey: <strong>{query.oldOrganizationKey}</strong> }}
+                />
               </li>
               <li className="spacer-top js-old-login">
                 <FormattedMessage
-                    defaultMessage={translate('sessions.update_login.5')}
-                    id="sessions.update_login.5"
-                    values={{ login: <strong>{query.oldLogin}</strong> }}
-                  />
+                  defaultMessage={translate('sessions.update_login.5')}
+                  id="sessions.update_login.5"
+                  values={{ login: <strong>{query.oldLogin}</strong> }}
+                />
               </li>
             </ul>
           </div>