SONAR-15301 Ease project creation page comprehension

server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx

@@ -21,7 +21,6 @@ import * as classNames from 'classnames';
 import * as React from 'react';
 import { withAppState } from '../../../components/hoc/withAppState';
 import ChevronsIcon from '../../../components/icons/ChevronsIcon';
-import { Alert } from '../../../components/ui/Alert';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { getBaseUrl } from '../../../helpers/system';
 import { AlmKeys } from '../../../types/alm-settings';
@@ -37,7 +36,7 @@ export interface CreateProjectModeSelectionProps {
   onConfigMode: (mode: AlmKeys) => void;
 }
 
-const DEFAULT_ICON_SIZE = 80;
+const DEFAULT_ICON_SIZE = 50;
 
 function renderAlmOption(
   props: CreateProjectModeSelectionProps,
@@ -133,44 +132,35 @@ export function CreateProjectModeSelection(props: CreateProjectModeSelectionProp
 
   return (
     <>
-      <header className="padded huge-spacer-top display-flex-column display-flex-center">
-        <div className="abs-width-800 huge-spacer-bottom">
-          <h1 className="text-center big-spacer-bottom">
-            {translate('onboarding.create_project.select_method')}
-          </h1>
-          <p className="text-center spacer-bottom">
-            {translate('onboarding.create_project.select_method.description1')}
-          </p>
-          <p className="text-center">
-            {translate('onboarding.create_project.select_method.description2')}
-          </p>
-        </div>
-      </header>
-
-      <div className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center">
-        <div className="display-flex-column">
-          {almTotalCount === 0 && canAdmin && (
-            <Alert variant="info" className="big-spacer-bottom">
-              {translate('onboarding.create_project.select_method.no_alm_yet.admin')}
-            </Alert>
-          )}
-          <div className="display-flex-center display-flex-space-between">
-            {renderAlmOption(props, AlmKeys.Azure, CreateProjectModes.AzureDevOps)}
-            {renderAlmOption(props, AlmKeys.BitbucketServer, CreateProjectModes.BitbucketServer)}
-            {renderAlmOption(props, AlmKeys.GitHub, CreateProjectModes.GitHub)}
-            {renderAlmOption(props, AlmKeys.GitLab, CreateProjectModes.GitLab, true)}
-          </div>
-        </div>
-        <button
-          className="button button-huge big-spacer-left display-flex-column create-project-mode-type-manual"
-          onClick={() => props.onSelectMode(CreateProjectModes.Manual)}
-          type="button">
-          <ChevronsIcon size={DEFAULT_ICON_SIZE} />
-          <div className="medium big-spacer-top">
-            {translate('onboarding.create_project.select_method.manual')}
-          </div>
-        </button>
+      <h1 className="huge-spacer-top huge-spacer-bottom">
+        {translate('onboarding.create_project.select_method')}
+      </h1>
+
+      <p>{translate('onboarding.create_project.select_method.devops_platform')}</p>
+      {almTotalCount === 0 && canAdmin && (
+        <p className="spacer-top">
+          {translate('onboarding.create_project.select_method.no_alm_yet.admin')}
+        </p>
+      )}
+      <div className="big-spacer-top huge-spacer-bottom display-flex-center">
+        {renderAlmOption(props, AlmKeys.Azure, CreateProjectModes.AzureDevOps)}
+        {renderAlmOption(props, AlmKeys.BitbucketServer, CreateProjectModes.BitbucketServer)}
+        {renderAlmOption(props, AlmKeys.GitHub, CreateProjectModes.GitHub)}
+        {renderAlmOption(props, AlmKeys.GitLab, CreateProjectModes.GitLab, true)}
       </div>
+
+      <p className="big-spacer-bottom">
+        {translate('onboarding.create_project.select_method.manually')}
+      </p>
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-manual"
+        onClick={() => props.onSelectMode(CreateProjectModes.Manual)}
+        type="button">
+        <ChevronsIcon size={DEFAULT_ICON_SIZE} />
+        <div className="medium big-spacer-top">
+          {translate('onboarding.create_project.select_method.manual')}
+        </div>
+      </button>
     </>
   );
 }

server/sonar-web/src/main/js/components/controls/buttons.css

@@ -180,9 +180,9 @@
 
 .button-huge {
   flex-direction: column;
-  padding: calc(2 * var(--gridSize));
-  width: 200px;
-  height: 200px;
+  padding: calc(2 * var(--gridSize)) var(--gridSize);
+  width: 180px;
+  height: 180px;
   background-color: var(--white);
   border: solid 1px var(--white);
   border-radius: 3px;

server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx

@@ -42,8 +42,8 @@ export interface TutorialSelectionRendererProps {
   willRefreshAutomatically?: boolean;
 }
 
-const DEFAULT_ICON_SIZE = 80;
-const GH_ACTION_ICON_SIZE = 64;
+const DEFAULT_ICON_SIZE = 60;
+const GH_ACTION_ICON_SIZE = 46;
 
 function renderButton(
   mode: TutorialModes,
@@ -52,7 +52,7 @@ function renderButton(
 ) {
   return (
     <button
-      className={`button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-${mode}`}
+      className={`button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-${mode}`}
       // Currently, OtherCI is the same tutorial as Manual. We might update it to its own stand-alone
       // tutorial in the future.
       onClick={() => onSelectTutorial(mode === TutorialModes.OtherCI ? TutorialModes.Manual : mode)}
@@ -103,87 +103,95 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
   return (
     <>
       {selectedTutorial === undefined && (
-        <div className="tutorial-selection">
-          <header className="spacer-top spacer-bottom padded">
-            <h1 className="text-center big-spacer-bottom">
-              {translate('onboarding.tutorial.choose_method')}
-            </h1>
-          </header>
-
-          <div className="display-flex-justify-center display-flex-wrap">
-            {renderButton(
-              TutorialModes.Manual,
-              props.onSelectTutorial,
-              <img
-                alt="" // Should be ignored by screen readers
-                height={DEFAULT_ICON_SIZE}
-                src={`${getBaseUrl()}/images/tutorials/manual.svg`}
-              />
-            )}
-
-            {showAzurePipelines &&
-              renderButton(
-                TutorialModes.AzurePipelines,
+        <>
+          <h1 className="spacer-top huge-spacer-bottom">
+            {translate('onboarding.tutorial.choose_method')}
+          </h1>
+
+          <div className="tutorial-selection">
+            <p className="big-spacer-bottom">
+              {translate('onboarding.tutorial.choose_method.devops_platform.description')}
+            </p>
+            <div className="display-flex-start display-flex-wrap">
+              {showJenkins &&
+                renderButton(
+                  TutorialModes.Jenkins,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={DEFAULT_ICON_SIZE}
+                    src={`${getBaseUrl()}/images/tutorials/jenkins.svg`}
+                  />
+                )}
+
+              {showGitHubActions &&
+                renderButton(
+                  TutorialModes.GitHubActions,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={GH_ACTION_ICON_SIZE}
+                    className="spacer-bottom spacer-top"
+                    src={`${getBaseUrl()}/images/tutorials/github-actions.svg`}
+                  />
+                )}
+
+              {showBitbucketPipelines &&
+                renderButton(
+                  TutorialModes.BitbucketPipelines,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={DEFAULT_ICON_SIZE}
+                    src={`${getBaseUrl()}/images/alm/bitbucket.svg`}
+                  />
+                )}
+
+              {showGitLabCICD &&
+                renderButton(
+                  TutorialModes.GitLabCI,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={DEFAULT_ICON_SIZE}
+                    src={`${getBaseUrl()}/images/alm/gitlab.svg`}
+                  />
+                )}
+
+              {showAzurePipelines &&
+                renderButton(
+                  TutorialModes.AzurePipelines,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={DEFAULT_ICON_SIZE}
+                    src={`${getBaseUrl()}/images/tutorials/azure-pipelines.svg`}
+                  />
+                )}
+
+              {renderButton(
+                TutorialModes.OtherCI,
                 props.onSelectTutorial,
-                <img
-                  alt="" // Should be ignored by screen readers
-                  height={DEFAULT_ICON_SIZE}
-                  src={`${getBaseUrl()}/images/tutorials/azure-pipelines.svg`}
-                />
-              )}
-
-            {showBitbucketPipelines &&
-              renderButton(
-                TutorialModes.BitbucketPipelines,
-                props.onSelectTutorial,
-                <img
-                  alt="" // Should be ignored by screen readers
-                  height={DEFAULT_ICON_SIZE}
-                  src={`${getBaseUrl()}/images/alm/bitbucket.svg`}
-                />
-              )}
-
-            {showGitHubActions &&
-              renderButton(
-                TutorialModes.GitHubActions,
-                props.onSelectTutorial,
-                <img
-                  alt="" // Should be ignored by screen readers
-                  height={GH_ACTION_ICON_SIZE}
-                  className="spacer-bottom spacer-top"
-                  src={`${getBaseUrl()}/images/tutorials/github-actions.svg`}
-                />
+                <EllipsisIcon size={DEFAULT_ICON_SIZE} />
               )}
-
-            {showGitLabCICD &&
-              renderButton(
-                TutorialModes.GitLabCI,
+            </div>
+
+            <p className="big-spacer-bottom spacer-top">
+              {translate('onboarding.tutorial.choose_method.locally.description')}
+            </p>
+            <div>
+              {renderButton(
+                TutorialModes.Manual,
                 props.onSelectTutorial,
                 <img
                   alt="" // Should be ignored by screen readers
                   height={DEFAULT_ICON_SIZE}
-                  src={`${getBaseUrl()}/images/alm/gitlab.svg`}
+                  src={`${getBaseUrl()}/images/tutorials/manual.svg`}
                 />
               )}
-
-            {showJenkins &&
-              renderButton(
-                TutorialModes.Jenkins,
-                props.onSelectTutorial,
-                <img
-                  alt="" // Should be ignored by screen readers
-                  height={DEFAULT_ICON_SIZE}
-                  src={`${getBaseUrl()}/images/tutorials/jenkins.svg`}
-                />
-              )}
-
-            {renderButton(
-              TutorialModes.OtherCI,
-              props.onSelectTutorial,
-              <EllipsisIcon size={DEFAULT_ICON_SIZE / 2} />
-            )}
+            </div>
           </div>
-        </div>
+        </>
       )}
 
       {selectedTutorial === TutorialModes.Manual && (

server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap

@@ -2,65 +2,73 @@
 
 exports[`should render correctly for azure 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-azure-pipelines"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/azure-pipelines.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.azure-pipelines
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-azure-pipelines"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/azure-pipelines.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.azure-pipelines
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>
@@ -70,65 +78,73 @@ exports[`should render correctly for azure 1`] = `
 
 exports[`should render correctly for bitbucket server 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-jenkins"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/jenkins.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.jenkins
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-jenkins"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/jenkins.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.jenkins
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>
@@ -138,98 +154,106 @@ exports[`should render correctly for bitbucket server 1`] = `
 
 exports[`should render correctly for github 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-jenkins"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/jenkins.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.jenkins
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-azure-pipelines"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-github-actions"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/azure-pipelines.svg"
+          className="spacer-bottom spacer-top"
+          height={46}
+          src="/images/tutorials/github-actions.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.azure-pipelines
+          onboarding.tutorial.choose_method.github-actions
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-github-actions"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-azure-pipelines"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          className="spacer-bottom spacer-top"
-          height={64}
-          src="/images/tutorials/github-actions.svg"
+          height={60}
+          src="/images/tutorials/azure-pipelines.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.github-actions
+          onboarding.tutorial.choose_method.azure-pipelines
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-jenkins"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/jenkins.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.jenkins
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>
@@ -239,45 +263,46 @@ exports[`should render correctly for github 1`] = `
 
 exports[`should render correctly for gitlab 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-jenkins"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/jenkins.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.jenkins
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-gitlab-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-gitlab-ci"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
+          height={60}
           src="/images/alm/gitlab.svg"
         />
         <div
@@ -287,33 +312,40 @@ exports[`should render correctly for gitlab 1`] = `
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-jenkins"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/jenkins.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.jenkins
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>
@@ -544,61 +576,63 @@ exports[`should render correctly: manual tutorial 1`] = `
 
 exports[`should render correctly: selection 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-jenkins"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/jenkins.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.jenkins
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-azure-pipelines"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-github-actions"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/azure-pipelines.svg"
+          className="spacer-bottom spacer-top"
+          height={46}
+          src="/images/tutorials/github-actions.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.azure-pipelines
+          onboarding.tutorial.choose_method.github-actions
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-bitbucket-pipelines"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-bitbucket-pipelines"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
+          height={60}
           src="/images/alm/bitbucket.svg"
         />
         <div
@@ -608,66 +642,72 @@ exports[`should render correctly: selection 1`] = `
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-github-actions"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-gitlab-ci"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          className="spacer-bottom spacer-top"
-          height={64}
-          src="/images/tutorials/github-actions.svg"
+          height={60}
+          src="/images/alm/gitlab.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.github-actions
+          onboarding.tutorial.choose_method.gitlab-ci
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-gitlab-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-azure-pipelines"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/alm/gitlab.svg"
+          height={60}
+          src="/images/tutorials/azure-pipelines.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.gitlab-ci
+          onboarding.tutorial.choose_method.azure-pipelines
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-jenkins"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/jenkins.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.jenkins
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -3291,16 +3291,16 @@ onboarding.project_analysis.guide_to_integrate_pipelines=follow the guide to int
 
 onboarding.create_project.setup_manually=Create a project
 onboarding.create_project.select_method=How do you want to create your project?
-onboarding.create_project.select_method.description1=Are you just testing or have an advanced use-case? Create a project manually.
-onboarding.create_project.select_method.description2=Do you want to benefit from all of SonarQube's features (like repository import and Pull Request decoration)? Create your project from your favorite DevOps platform.
-onboarding.create_project.select_method.no_alm_yet.admin=We recommend setting up a DevOps platform configuration so you and your team can benefit from more SonarQube features.
+onboarding.create_project.select_method.manually=Are you just testing or have an advanced use-case? Create a project manually.
+onboarding.create_project.select_method.devops_platform=Do you want to benefit from all of SonarQube's features (like repository import and Pull Request decoration)? Create your project from your favorite DevOps platform.
+onboarding.create_project.select_method.no_alm_yet.admin=First, you need to set up a DevOps platform configuration.
 onboarding.create_project.select_method.manual=Manually
 onboarding.create_project.select_method.azure=From Azure DevOps
 onboarding.create_project.select_method.bitbucket=From Bitbucket
 onboarding.create_project.select_method.github=From GitHub
 onboarding.create_project.select_method.gitlab=From GitLab
-onboarding.create_project.alm_not_configured=Contact admin for global configuration
-onboarding.create_project.alm_not_configured.admin=Global configuration not set
+onboarding.create_project.alm_not_configured=Contact admin to set up global configuration
+onboarding.create_project.alm_not_configured.admin=Set up global configuration
 onboarding.create_project.check_alm_supported=Checking if available
 onboarding.create_project.project_key=Project key
 onboarding.create_project.project_key.description=The project key is a unique identifier for your project. It may contain up to 400 characters. Allowed characters are alphanumeric, '-' (dash), '_' (underscore), '.' (period) and ':' (colon), with at least one non-digit.
@@ -3522,6 +3522,8 @@ onboarding.tutorial.cfamilly.speed_caching=You can also speed up your analysis b
 onboarding.tutorial.cfamilly.speed_caching.link=multi-threading and caching
 
 onboarding.tutorial.choose_method=How do you want to analyze your repository?
+onboarding.tutorial.choose_method.devops_platform.description=Do you want to integrate with your favorite CI? Choose one of the following tutorials.
+onboarding.tutorial.choose_method.locally.description=Are you just testing or have an advanced use-case? Analyze your project locally.
 onboarding.tutorial.choose_method.manual=Locally
 onboarding.tutorial.choose_method.other-ci=Other CI
 onboarding.tutorial.choose_method.jenkins=With Jenkins