SONARCLOUD-380 Rework modal styling of SC and SQ

* Update modal-fields
* Update form-fields styling
* Update modal-fields usage in extensions
* Clean css

10 files changed, 51 insertions, 123 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 1163399e78b..3051b630d83 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
@@ -32,18 +32,11 @@ export interface Props {
   currentUser: T.LoggedInUser;
   onClose: () => void;
   onOpenProjectOnboarding: () => void;
-  skipOnboarding: () => void;
   userOrganizations: T.Organization[];
 }
 
 export function OnboardingModal(props: Props) {
-  const {
-    currentUser,
-    onClose,
-    onOpenProjectOnboarding,
-    skipOnboarding,
-    userOrganizations
-  } = props;
+  const { currentUser, onClose, onOpenProjectOnboarding, userOrganizations } = props;
 
   const organizations = userOrganizations.filter(o => o.key !== currentUser.personalOrganization);
 
@@ -51,9 +44,9 @@ export function OnboardingModal(props: Props) {
   return (
     <Modal
       contentLabel={header}
-      medium={true}
       onRequestClose={onClose}
-      shouldCloseOnOverlayClick={false}>
+      shouldCloseOnOverlayClick={false}
+      size={organizations.length > 0 ? 'medium' : 'small'}>
       <div className="modal-head">
         <h2>{translate('onboarding.header')}</h2>
         <p className="spacer-top">{translate('onboarding.header.description')}</p>
@@ -61,9 +54,7 @@ export function OnboardingModal(props: Props) {
       <div className="modal-body text-center display-flex-row huge-spacer-top huge-spacer-bottom">
         <div className="flex-1">
           <OnboardingProjectIcon className="big-spacer-bottom" />
-          <h6 className="onboarding-choice-name big-spacer-bottom">
-            {translate('onboarding.analyze_your_code')}
-          </h6>
+          <h3 className="big-spacer-bottom">{translate('onboarding.analyze_your_code')}</h3>
           <Button onClick={onOpenProjectOnboarding}>
             {translate('onboarding.project.create')}
           </Button>
@@ -75,13 +66,10 @@ export function OnboardingModal(props: Props) {
             </div>
             <div className="flex-1">
               <OnboardingTeamIcon className="big-spacer-bottom" />
-              <h6 className="onboarding-choice-name big-spacer-bottom">
+              <h3 className="big-spacer-bottom">
                 {translate('onboarding.browse_your_organizations')}
-              </h6>
-              <OrganizationsShortList
-                organizations={organizations}
-                skipOnboarding={skipOnboarding}
-              />
+              </h3>
+              <OrganizationsShortList onClick={onClose} organizations={organizations} />
             </div>
           </>
         )}
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingPage.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingPage.tsx
index 5bda42d861b..52644d6b02e 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingPage.tsx
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingPage.tsx
@@ -42,7 +42,6 @@ export class OnboardingPage extends React.PureComponent<Props> {
           <OnboardingModal
             onClose={this.closeOnboarding}
             onOpenProjectOnboarding={openProjectOnboarding}
-            skipOnboarding={this.props.skipOnboarding}
           />
         )}
       </OnboardingContext.Consumer>
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortList.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortList.tsx
index a7eecc85f6f..d7685c0cffb 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortList.tsx
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortList.tsx
@@ -25,10 +25,10 @@ import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 export interface Props {
   organizations: T.Organization[];
-  skipOnboarding: () => void;
+  onClick: () => void;
 }
 
-export default function OrganizationsShortList({ organizations, skipOnboarding }: Props) {
+export default function OrganizationsShortList({ onClick, organizations }: Props) {
   if (organizations.length === 0) {
     return null;
   }
@@ -39,26 +39,27 @@ export default function OrganizationsShortList({ organizations, skipOnboarding }
 
   return (
     <div>
-      <ul className="account-projects-list">
+      <ul>
         {organizationsShown.map(organization => (
           <li key={organization.key}>
-            <OrganizationsShortListItem
-              organization={organization}
-              skipOnboarding={skipOnboarding}
-            />
+            <OrganizationsShortListItem onClick={onClick} organization={organization} />
           </li>
         ))}
       </ul>
-      <div className="big-spacer-top">
-        <span className="big-spacer-right">
-          {translateWithParameters('x_of_y_shown', organizationsShown.length, organizations.length)}
-        </span>
-        {organizations.length > 3 && (
-          <Link className="small" onClick={skipOnboarding} to="/account/organizations">
+      {organizations.length > 3 && (
+        <div className="big-spacer-top">
+          <span className="big-spacer-right">
+            {translateWithParameters(
+              'x_of_y_shown',
+              organizationsShown.length,
+              organizations.length
+            )}
+          </span>
+          <Link className="small" onClick={onClick} to="/account/organizations">
             {translate('see_all')}
           </Link>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortListItem.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortListItem.tsx
index 49be2296cb9..c9740ebd5e8 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortListItem.tsx
@@ -24,15 +24,15 @@ import { withRouter, Router } from '../../../components/hoc/withRouter';
 import { getOrganizationUrl } from '../../../helpers/urls';
 
 interface Props {
+  onClick: () => void;
   organization: T.Organization;
   router: Router;
-  skipOnboarding: () => void;
 }
 
 export class OrganizationsShortListItem extends React.PureComponent<Props> {
   handleClick = () => {
-    const { organization, router, skipOnboarding } = this.props;
-    skipOnboarding();
+    const { onClick, organization, router } = this.props;
+    onClick();
     router.push(getOrganizationUrl(organization.key));
   };
 
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OnboardingModal-test.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OnboardingModal-test.tsx
index 2521fc0cba8..ab03de8c5d3 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OnboardingModal-test.tsx
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OnboardingModal-test.tsx
@@ -59,7 +59,6 @@ function shallowRender(props: Partial<Props> = {}) {
       currentUser={mockCurrentUser()}
       onClose={jest.fn()}
       onOpenProjectOnboarding={jest.fn()}
-      skipOnboarding={jest.fn()}
       userOrganizations={[]}
       {...props}
     />
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortList-test.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortList-test.tsx
index f0e9b24e4d3..f5f46c188c7 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortList-test.tsx
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortList-test.tsx
@@ -50,7 +50,5 @@ it('should limit displayed orgs to the first three', () => {
 });
 
 function shallowRender(props: Partial<Props> = {}) {
-  return shallow(
-    <OrganizationsShortList organizations={[]} skipOnboarding={jest.fn()} {...props} />
-  );
+  return shallow(<OrganizationsShortList onClick={jest.fn()} organizations={[]} {...props} />);
 }
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortListItem-test.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortListItem-test.tsx
index bf84c7895ba..acc2ba83e8f 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortListItem-test.tsx
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortListItem-test.tsx
@@ -27,23 +27,23 @@ it('renders correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });
 
-it('calls skiponboarding and redirects to org page', () => {
-  const skipOnboarding = jest.fn();
+it('calls onClick and redirects to org page', () => {
+  const onClick = jest.fn();
   const push = jest.fn();
-  const wrapper = shallowRender({ skipOnboarding, router: mockRouter({ push }) });
+  const wrapper = shallowRender({ onClick, router: mockRouter({ push }) });
 
   click(wrapper);
 
-  expect(skipOnboarding).toHaveBeenCalledTimes(1);
+  expect(onClick).toHaveBeenCalledTimes(1);
   expect(push).toHaveBeenCalledWith('/organizations/foo');
 });
 
 function shallowRender(props: Partial<OrganizationsShortListItem['props']> = {}) {
   return shallow(
     <OrganizationsShortListItem
+      onClick={jest.fn()}
       organization={mockOrganization()}
       router={mockRouter()}
-      skipOnboarding={jest.fn()}
       {...props}
     />
   );
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 1c9eb96f30e..bd1ed0ad54f 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
@@ -3,9 +3,9 @@
 exports[`renders correctly 1`] = `
 <Modal
   contentLabel="onboarding.header"
-  medium={true}
   onRequestClose={[MockFunction]}
   shouldCloseOnOverlayClick={false}
+  size="small"
 >
   <div
     className="modal-head"
@@ -28,11 +28,11 @@ exports[`renders correctly 1`] = `
       <OnboardingProjectIcon
         className="big-spacer-bottom"
       />
-      <h6
-        className="onboarding-choice-name big-spacer-bottom"
+      <h3
+        className="big-spacer-bottom"
       >
         onboarding.analyze_your_code
-      </h6>
+      </h3>
       <Button
         onClick={[MockFunction]}
       >
@@ -55,9 +55,9 @@ exports[`renders correctly 1`] = `
 exports[`should display organization list if any 1`] = `
 <Modal
   contentLabel="onboarding.header"
-  medium={true}
   onRequestClose={[MockFunction]}
   shouldCloseOnOverlayClick={false}
+  size="medium"
 >
   <div
     className="modal-head"
@@ -80,11 +80,11 @@ exports[`should display organization list if any 1`] = `
       <OnboardingProjectIcon
         className="big-spacer-bottom"
       />
-      <h6
-        className="onboarding-choice-name big-spacer-bottom"
+      <h3
+        className="big-spacer-bottom"
       >
         onboarding.analyze_your_code
-      </h6>
+      </h3>
       <Button
         onClick={[MockFunction]}
       >
@@ -104,12 +104,13 @@ exports[`should display organization list if any 1`] = `
       <OnboardingTeamIcon
         className="big-spacer-bottom"
       />
-      <h6
-        className="onboarding-choice-name big-spacer-bottom"
+      <h3
+        className="big-spacer-bottom"
       >
         onboarding.browse_your_organizations
-      </h6>
+      </h3>
       <OrganizationsShortList
+        onClick={[MockFunction]}
         organizations={
           Array [
             Object {
@@ -122,7 +123,6 @@ exports[`should display organization list if any 1`] = `
             },
           ]
         }
-        skipOnboarding={[MockFunction]}
       />
     </div>
   </div>
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationsShortList-test.tsx.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationsShortList-test.tsx.snap
index 5410482f395..fb1121921b8 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationsShortList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationsShortList-test.tsx.snap
@@ -2,46 +2,44 @@
 
 exports[`should limit displayed orgs to the first three 1`] = `
 <div>
-  <ul
-    className="account-projects-list"
-  >
+  <ul>
     <li
       key="bar"
     >
       <withRouter(OrganizationsShortListItem)
+        onClick={[MockFunction]}
         organization={
           Object {
             "key": "bar",
             "name": "Bar",
           }
         }
-        skipOnboarding={[MockFunction]}
       />
     </li>
     <li
       key="foo"
     >
       <withRouter(OrganizationsShortListItem)
+        onClick={[MockFunction]}
         organization={
           Object {
             "key": "foo",
             "name": "Foo",
           }
         }
-        skipOnboarding={[MockFunction]}
       />
     </li>
     <li
       key="kor"
     >
       <withRouter(OrganizationsShortListItem)
+        onClick={[MockFunction]}
         organization={
           Object {
             "key": "kor",
             "name": "Kor",
           }
         }
-        skipOnboarding={[MockFunction]}
       />
     </li>
   </ul>
@@ -68,44 +66,33 @@ exports[`should limit displayed orgs to the first three 1`] = `
 
 exports[`should render correctly 1`] = `
 <div>
-  <ul
-    className="account-projects-list"
-  >
+  <ul>
     <li
       key="bar"
     >
       <withRouter(OrganizationsShortListItem)
+        onClick={[MockFunction]}
         organization={
           Object {
             "key": "bar",
             "name": "Bar",
           }
         }
-        skipOnboarding={[MockFunction]}
       />
     </li>
     <li
       key="foo"
     >
       <withRouter(OrganizationsShortListItem)
+        onClick={[MockFunction]}
         organization={
           Object {
             "key": "foo",
             "name": "Foo",
           }
         }
-        skipOnboarding={[MockFunction]}
       />
     </li>
   </ul>
-  <div
-    className="big-spacer-top"
-  >
-    <span
-      className="big-spacer-right"
-    >
-      x_of_y_shown.2.2
-    </span>
-  </div>
 </div>
 `;
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 41cf98f083d..2a7946f0f1c 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/styles.css
+++ b/server/sonar-web/src/main/js/apps/tutorials/styles.css
@@ -57,47 +57,3 @@
   cursor: pointer;
   outline: none;
 }
-
-.onboarding-choices {
-  display: flex;
-  justify-content: space-around;
-  padding: 44px 170px;
-  background-color: var(--barBackgroundColor);
-  margin-top: var(--pagePadding);
-}
-
-.onboarding-choice {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: calc(2 * var(--gridSize));
-  width: 190px;
-  height: 190px;
-  background-color: #fff;
-  border: solid 1px #fff;
-  border-radius: 3px;
-  transition: all 0.2s ease;
-  box-shadow: 0 1px 1px 1px var(--barBorderColor);
-}
-
-.onboarding-choice svg {
-  color: var(--gray40);
-}
-
-.onboarding-choice-name {
-  color: inherit;
-  font-size: var(--mediumFontSize);
-}
-
-.onboarding-choice .note {
-  font-weight: 400;
-}
-
-.onboarding-choice:hover,
-.onboarding-choice:focus,
-.onboarding-choice:active {
-  background-color: #fff;
-  color: var(--darkBlue);
-  box-shadow: var(--defaultShadow);
-  transform: translateY(-2px);
-}