SONAR-20814 - Clean up new code on project settings

3 files changed, 16 insertions, 18 deletions

diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/AppHeader.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/AppHeader.tsx
index 832b657ac30..fff02d0ccc1 100644
--- a/server/sonar-web/src/main/js/apps/projectNewCode/components/AppHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/AppHeader.tsx
@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { Link, Title } from 'design-system';
+import { HeadingDark, Link, Title } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDocUrl } from '../../../helpers/docs';
@@ -51,7 +51,6 @@ export default function AppHeader(props: AppHeaderProps) {
           />
         )}
       </p>
-
       <p className="sw-mb-2">
         <FormattedMessage
           defaultMessage={translate('settings.new_code_period.description3')}
@@ -61,10 +60,9 @@ export default function AppHeader(props: AppHeaderProps) {
           }}
         />
       </p>
-
-      <p className="sw-mt-4">
-        <strong>{translate('project_baseline.page.question')}</strong>
-      </p>
+      <HeadingDark className="sw-mt-4" as="h2">
+        {translate('project_baseline.page.question')}
+      </HeadingDark>
     </header>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx
index 448f454a305..94934c50105 100644
--- a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { HeadingDark } from 'design-system';
+import { HeadingDark, LargeCenteredLayout, PageContentFontWrapper, Spinner } from 'design-system';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import withAppStateContext from '../../../app/components/app-state/withAppStateContext';
@@ -27,7 +27,6 @@ import withAvailableFeatures, {
 } from '../../../app/components/available-features/withAvailableFeatures';
 import withComponentContext from '../../../app/components/componentContext/withComponentContext';
 import Suggestions from '../../../components/embed-docs-modal/Suggestions';
-import Spinner from '../../../components/ui/Spinner';
 import { isBranch, sortBranches } from '../../../helpers/branch-like';
 import { translate } from '../../../helpers/l10n';
 import {
@@ -181,16 +180,20 @@ function ProjectNewCodeDefinitionApp(props: Readonly<ProjectNewCodeDefinitionApp
   }, [resetStatesFromProjectNewCodeDefinition]);
 
   return (
-    <>
+    <LargeCenteredLayout id="new-code-rules-page">
       <Suggestions suggestions="project_baseline" />
       <Helmet defer={false} title={translate('project_baseline.page')} />
-      <div className="page page-limited">
+      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
         <AppHeader canAdmin={!!appState.canAdmin} />
         <Spinner loading={isLoading} />
 
         {!isLoading && (
-          <div className="panel-white project-baseline">
-            {branchSupportEnabled && <h2>{translate('project_baseline.default_setting')}</h2>}
+          <div className="it__project-baseline">
+            {branchSupportEnabled && (
+              <HeadingDark as="h3" className="sw-mt-4">
+                {translate('project_baseline.default_setting')}
+              </HeadingDark>
+            )}
 
             {globalNewCodeDefinition && isSpecificNewCodeDefinition !== undefined && (
               <ProjectNewCodeDefinitionSelector
@@ -221,7 +224,7 @@ function ProjectNewCodeDefinitionApp(props: Readonly<ProjectNewCodeDefinitionApp
 
             {globalNewCodeDefinition && branchSupportEnabled && (
               <div className="sw-mt-6">
-                <HeadingDark className="sw-mb-4">
+                <HeadingDark as="h3" className="sw-mb-4">
                   {translate('project_baseline.configure_branches')}
                 </HeadingDark>
                 <BranchList
@@ -234,8 +237,8 @@ function ProjectNewCodeDefinitionApp(props: Readonly<ProjectNewCodeDefinitionApp
             )}
           </div>
         )}
-      </div>
-    </>
+      </PageContentFontWrapper>
+    </LargeCenteredLayout>
   );
 }
 
diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/styles.css b/server/sonar-web/src/main/js/apps/projectNewCode/styles.css
index 665f3fdf466..dc17c4421a0 100644
--- a/server/sonar-web/src/main/js/apps/projectNewCode/styles.css
+++ b/server/sonar-web/src/main/js/apps/projectNewCode/styles.css
@@ -17,9 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-.project-baseline {
-  padding: calc(4 * var(--gridSize));
-}
 
 .branch-baseline-selector > hr {
   margin: 0 calc(-4 * var(--gridSize)) calc(4 * var(--gridSize));