SONARCLOUD-120 update landing page of just created organization

3 files changed, 38 insertions, 19 deletions

diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.tsx
index 1ed6b84045e..b41edb8e99e 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.tsx
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.tsx
@@ -68,18 +68,24 @@ export class OnboardingModal extends React.PureComponent<Props> {
         </div>
         <div className="modal-simple-body text-center onboarding-choices">
           <Button className="onboarding-choice" onClick={this.props.onOpenProjectOnboarding}>
-            <OnboardingProjectIcon />
-            <span>{translate('onboarding.analyze_public_code')}</span>
+            <OnboardingProjectIcon className="big-spacer-bottom" />
+            <h6 className="onboarding-choice-name">
+              {translate('onboarding.analyze_public_code')}
+            </h6>
             <p className="note">{translate('onboarding.analyze_public_code.note')}</p>
           </Button>
           <Button className="onboarding-choice" onClick={this.props.onOpenOrganizationOnboarding}>
-            <OnboardingPrivateIcon />
-            <span>{translate('onboarding.analyze_private_code')}</span>
+            <OnboardingPrivateIcon className="big-spacer-bottom" />
+            <h6 className="onboarding-choice-name">
+              {translate('onboarding.analyze_private_code')}
+            </h6>
             <p className="note">{translate('onboarding.analyze_private_code.note')}</p>
           </Button>
           <Button className="onboarding-choice" onClick={this.props.onOpenTeamOnboarding}>
-            <OnboardingTeamIcon />
-            <span>{translate('onboarding.contribute_existing_project')}</span>
+            <OnboardingTeamIcon className="big-spacer-bottom" />
+            <h6 className="onboarding-choice-name">
+              {translate('onboarding.contribute_existing_project')}
+            </h6>
             <p className="note">{translate('onboarding.contribute_existing_project.note')}</p>
           </Button>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OnboardingModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OnboardingModal-test.tsx.snap
index 18b2f16f846..1b46fdaca66 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OnboardingModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OnboardingModal-test.tsx.snap
@@ -26,10 +26,14 @@ exports[`renders correctly 1`] = `
       className="onboarding-choice"
       onClick={[MockFunction]}
     >
-      <OnboardingProjectIcon />
-      <span>
+      <OnboardingProjectIcon
+        className="big-spacer-bottom"
+      />
+      <h6
+        className="onboarding-choice-name"
+      >
         onboarding.analyze_public_code
-      </span>
+      </h6>
       <p
         className="note"
       >
@@ -40,10 +44,14 @@ exports[`renders correctly 1`] = `
       className="onboarding-choice"
       onClick={[MockFunction]}
     >
-      <OnboardingPrivateIcon />
-      <span>
+      <OnboardingPrivateIcon
+        className="big-spacer-bottom"
+      />
+      <h6
+        className="onboarding-choice-name"
+      >
         onboarding.analyze_private_code
-      </span>
+      </h6>
       <p
         className="note"
       >
@@ -54,10 +62,14 @@ exports[`renders correctly 1`] = `
       className="onboarding-choice"
       onClick={[MockFunction]}
     >
-      <OnboardingTeamIcon />
-      <span>
+      <OnboardingTeamIcon
+        className="big-spacer-bottom"
+      />
+      <h6
+        className="onboarding-choice-name"
+      >
         onboarding.contribute_existing_project
-      </span>
+      </h6>
       <p
         className="note"
       >
diff --git a/server/sonar-web/src/main/js/apps/tutorials/styles.css b/server/sonar-web/src/main/js/apps/tutorials/styles.css
index da2571a369d..e7cc5a727f6 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/styles.css
+++ b/server/sonar-web/src/main/js/apps/tutorials/styles.css
@@ -65,7 +65,7 @@
 .onboarding-choice {
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+  justify-content: center;
   padding: calc(2 * var(--gridSize));
   width: 190px;
   height: 190px;
@@ -78,12 +78,13 @@
 
 .onboarding-choice svg {
   color: var(--gray40);
-  margin-bottom: calc(3 * var(--gridSize));
 }
 
-.onboarding-choice span {
+.onboarding-choice-name {
+  padding-top: var(--gridSize);
+  padding-bottom: calc(0.5 * var(--gridSize));
+  color: inherit;
   font-size: var(--mediumFontSize);
-  margin-bottom: calc(var(--gridSize) / 2);
 }
 
 .onboarding-choice .note {