SONAR-9842 align project, portfolio and application home pages

server/sonar-web/src/main/js/apps/overview/meta/MetaSize.js

@@ -46,7 +46,7 @@ export default class MetaSize extends React.PureComponent {
       <DrilldownLink branch={this.props.branch} component={this.props.component.key} metric="ncloc">
         {formatMeasure(ncloc.value, 'SHORT_INT')}
       </DrilldownLink>
-      <div className="overview-domain-measure-label text-muted">{getMetricName('ncloc')}</div>
+      <div className="spacer-top text-muted">{getMetricName('ncloc')}</div>
     </div>
   );
 
@@ -55,8 +55,11 @@ export default class MetaSize extends React.PureComponent {
       measure => measure.metric.key === 'ncloc_language_distribution'
     );
 
+    const className =
+      this.props.component.qualifier === 'TRK' ? 'overview-meta-size-lang-dist' : 'big-spacer-top';
+
     return languageDistribution ? (
-      <div id="overview-language-distribution" className="overview-meta-size-lang-dist">
+      <div id="overview-language-distribution" className={className}>
         <LanguageDistributionContainer distribution={languageDistribution.value} width={160} />
       </div>
     ) : null;
@@ -66,16 +69,14 @@ export default class MetaSize extends React.PureComponent {
     const projects = this.props.measures.find(measure => measure.metric.key === 'projects');
 
     return projects ? (
-      <div id="overview-projects" className="overview-meta-size-ncloc is-half-width bordered-left">
+      <div id="overview-projects" className="overview-meta-size-ncloc is-half-width">
         <DrilldownLink
           branch={this.props.branch}
           component={this.props.component.key}
           metric="projects">
           {formatMeasure(projects.value, 'SHORT_INT')}
         </DrilldownLink>
-        <div className="overview-domain-measure-label text-muted">
-          {translate('metric.projects.name')}
-        </div>
+        <div className="spacer-top text-muted">{translate('metric.projects.name')}</div>
       </div>
     ) : null;
   };
@@ -89,12 +90,9 @@ export default class MetaSize extends React.PureComponent {
 
     return (
       <div id="overview-size" className="overview-meta-card">
+        {this.props.component.qualifier === 'APP' && this.renderProjects()}
         {this.renderLoC(ncloc)}
-        {this.props.component.qualifier === 'APP' ? (
-          this.renderProjects()
-        ) : (
-          this.renderLoCDistribution()
-        )}
+        {this.renderLoCDistribution()}
       </div>
     );
   }

server/sonar-web/src/main/js/apps/portfolio/components/Activity.tsx

@@ -97,10 +97,8 @@ export default class Activity extends React.PureComponent<Props> {
 
   render() {
     return (
-      <div className="huge-spacer-bottom">
-        <header className="page-header">
-          <h3 className="page-title">{translate('project_activity.page')}</h3>
-        </header>
+      <div className="big-spacer-bottom">
+        <h4>{translate('project_activity.page')}</h4>
 
         {this.state.loading ? (
           <i className="spinner" />

server/sonar-web/src/main/js/apps/portfolio/components/Report.tsx

@@ -59,11 +59,7 @@ export default class Report extends React.PureComponent<Props, State> {
     );
   }
 
-  renderHeader = () => (
-    <header className="page-header">
-      <h3 className="page-title">{translate('report.page')}</h3>
-    </header>
-  );
+  renderHeader = () => <h4>{translate('report.page')}</h4>;
 
   render() {
     const { component } = this.props;

server/sonar-web/src/main/js/apps/portfolio/components/Summary.tsx

@@ -35,7 +35,7 @@ export default function Summary({ component, measures }: Props) {
   const nclocDistribution = measures['ncloc_language_distribution'];
 
   return (
-    <section id="portfolio-summary" className="huge-spacer-bottom">
+    <section id="portfolio-summary" className="big-spacer-bottom">
       {component.description && <div className="big-spacer-bottom">{component.description}</div>}
 
       <ul className="portfolio-grid">
@@ -47,7 +47,7 @@ export default function Summary({ component, measures }: Props) {
               />
             </Link>
           </div>
-          {translate('projects')}
+          <div className="spacer-top text-muted">{translate('projects')}</div>
         </li>
         <li>
           <div className="portfolio-measure-secondary-value">
@@ -55,12 +55,12 @@ export default function Summary({ component, measures }: Props) {
               <Measure measure={{ metric: { key: 'ncloc', type: 'SHORT_INT' }, value: ncloc }} />
             </Link>
           </div>
-          {translate('metric.ncloc.name')}
+          <div className="spacer-top text-muted">{translate('metric.ncloc.name')}</div>
         </li>
       </ul>
 
       {nclocDistribution && (
-        <div className="huge-spacer-top">
+        <div className="big-spacer-top">
           <LanguageDistributionContainer distribution={nclocDistribution} width={260} />
         </div>
       )}

server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/Activity-test.tsx.snap

@@ -2,17 +2,11 @@
 
 exports[`renders 1`] = `
 <div
-  className="huge-spacer-bottom"
+  className="big-spacer-bottom"
 >
-  <header
-    className="page-header"
-  >
-    <h3
-      className="page-title"
-    >
-      project_activity.page
-    </h3>
-  </header>
+  <h4>
+    project_activity.page
+  </h4>
   <PreviewGraph
     history={
       Object {

server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/Report-test.tsx.snap

@@ -2,15 +2,9 @@
 
 exports[`renders 1`] = `
 <div>
-  <header
-    className="page-header"
-  >
-    <h3
-      className="page-title"
-    >
-      report.page
-    </h3>
-  </header>
+  <h4>
+    report.page
+  </h4>
   <i
     className="spinner"
   />
@@ -19,15 +13,9 @@ exports[`renders 1`] = `
 
 exports[`renders 2`] = `
 <div>
-  <header
-    className="page-header"
-  >
-    <h3
-      className="page-title"
-    >
-      report.page
-    </h3>
-  </header>
+  <h4>
+    report.page
+  </h4>
   <div
     className="js-report-can-download"
   >

server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/Summary-test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders 1`] = `
 <section
-  className="huge-spacer-bottom"
+  className="big-spacer-bottom"
   id="portfolio-summary"
 >
   <div
@@ -44,7 +44,11 @@ exports[`renders 1`] = `
           />
         </Link>
       </div>
-      projects
+      <div
+        className="spacer-top text-muted"
+      >
+        projects
+      </div>
     </li>
     <li>
       <div
@@ -77,11 +81,15 @@ exports[`renders 1`] = `
           />
         </Link>
       </div>
-      metric.ncloc.name
+      <div
+        className="spacer-top text-muted"
+      >
+        metric.ncloc.name
+      </div>
     </li>
   </ul>
   <div
-    className="huge-spacer-top"
+    className="big-spacer-top"
   >
     <Connect(LanguageDistribution)
       distribution="java=13;js=17"

server/sonar-web/src/main/js/apps/portfolio/styles.css

@@ -1,7 +1,6 @@
 .portfolio-measure-secondary-value {
-  line-height: 1.4;
-  margin-bottom: 4px;
-  font-size: 24px;
+  line-height: 24px;
+  font-size: 18px;
   font-weight: 300;
 }
 
@@ -9,7 +8,6 @@
   position: relative;
   z-index: 10;
   display: flex;
-  height: 80px;
   justify-content: space-around;
   align-items: center;
 }

server/sonar-web/src/main/less/init/misc.less

@@ -83,9 +83,6 @@ th.nowrap {
 .huge-spacer-top {
   margin-top: 40px;
 }
-.huge-spacer-bottom {
-  margin-bottom: 40px;
-}
 .huge-spacer-left {
   margin-left: 40px;
 }