SONAR-9245 Update leak project cards style on projects page

7 files changed, 34 insertions, 39 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.js
index 9e38e2bcb2d..ac47c003b7a 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.js
@@ -86,14 +86,14 @@ export default function ProjectCardLeak({ measures, organization, project }: Pro
           hasLeakPeriodStart &&
           <div className="project-card-dates note text-right pull-right">
             {hasLeakPeriodStart &&
-              <span>
+              <span className="project-card-leak-date pull-right">
                 {translateWithParameters(
                   'projects.leak_period_x',
                   moment(project.leakPeriodDate).fromNow()
                 )}
               </span>}
             {isProjectAnalyzed &&
-              <span className="big-spacer-left">
+              <span>
                 {translateWithParameters(
                   'projects.last_analysis_on_x',
                   moment(project.analysisDate).format('LLL')
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js
index 2b9698e7c19..db61abdf13a 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js
@@ -49,7 +49,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
           </div>
           <div className="project-card-measure-label-with-icon">
             <BugIcon className="little-spacer-right vertical-bottom" />
-            {translate('metric.new_bugs.name')}
+            {translate('metric.bugs.name')}
           </div>
         </div>
       </div>
@@ -66,7 +66,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
           </div>
           <div className="project-card-measure-label-with-icon">
             <VulnerabilityIcon className="little-spacer-right vertical-bottom" />
-            {translate('metric.new_vulnerabilities.name')}
+            {translate('metric.vulnerabilities.name')}
           </div>
         </div>
       </div>
@@ -83,7 +83,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
           </div>
           <div className="project-card-measure-label-with-icon">
             <CodeSmellIcon className="little-spacer-right vertical-bottom" />
-            {translate('metric.new_code_smells.name')}
+            {translate('metric.code_smells.name')}
           </div>
         </div>
       </div>
@@ -97,7 +97,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
             />
           </div>
           <div className="project-card-measure-label">
-            {translate('metric.new_coverage.name')}
+            {translate('metric.coverage.name')}
           </div>
         </div>
       </div>
@@ -111,7 +111,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
             />
           </div>
           <div className="project-card-measure-label">
-            {translate('metric.new_duplicated_lines_density.short_name')}
+            {translate('metric.duplicated_lines_density.short_name')}
           </div>
         </div>
       </div>
@@ -126,7 +126,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
               />
             </div>
             <div className="project-card-measure-label">
-              {translate('metric.new_lines.short_name')}
+              {translate('metric.lines.name')}
             </div>
           </div>
         </div>}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.js
index 8ef49b49179..72bbccbd7ae 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.js
@@ -82,7 +82,7 @@ export default function ProjectCardOverall({ measures, organization, project }:
           {hasTags && <TagsList tags={project.tags} customClass="spacer-left" />}
         </div>
         {isProjectAnalyzed &&
-          <div className="project-card-dates note text-right pull-right">
+          <div className="project-card-dates note text-right">
             <span className="big-spacer-left">
               {translateWithParameters(
                 'projects.last_analysis_on_x',
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.js.snap
index 101ba723485..cb539fbafe6 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.js.snap
@@ -35,12 +35,12 @@ exports[`should display the leak measures and quality gate 1`] = `
     <div
       className="project-card-dates note text-right pull-right"
     >
-      <span>
-        projects.leak_period_x.a month ago
-      </span>
       <span
-        className="big-spacer-left"
+        className="project-card-leak-date pull-right"
       >
+        projects.leak_period_x.a month ago
+      </span>
+      <span>
         projects.last_analysis_on_x.March 1, 2017 9:36 AM
       </span>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.js.snap
index 964ff49ff68..fa740a935fe 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.js.snap
@@ -28,7 +28,7 @@ exports[`should not render new coverage 1`] = `
     <div
       className="project-card-measure-label"
     >
-      metric.new_coverage.name
+      metric.coverage.name
     </div>
   </div>
 </div>
@@ -62,7 +62,7 @@ exports[`should not render new duplications 1`] = `
     <div
       className="project-card-measure-label"
     >
-      metric.new_duplicated_lines_density.short_name
+      metric.duplicated_lines_density.short_name
     </div>
   </div>
 </div>
@@ -110,7 +110,7 @@ exports[`should render correctly with all data 1`] = `
         <BugIcon
           className="little-spacer-right vertical-bottom"
         />
-        metric.new_bugs.name
+        metric.bugs.name
       </div>
     </div>
   </div>
@@ -150,7 +150,7 @@ exports[`should render correctly with all data 1`] = `
         <VulnerabilityIcon
           className="little-spacer-right vertical-bottom"
         />
-        metric.new_vulnerabilities.name
+        metric.vulnerabilities.name
       </div>
     </div>
   </div>
@@ -190,7 +190,7 @@ exports[`should render correctly with all data 1`] = `
         <CodeSmellIcon
           className="little-spacer-right vertical-bottom"
         />
-        metric.new_code_smells.name
+        metric.code_smells.name
       </div>
     </div>
   </div>
@@ -221,7 +221,7 @@ exports[`should render correctly with all data 1`] = `
       <div
         className="project-card-measure-label"
       >
-        metric.new_coverage.name
+        metric.coverage.name
       </div>
     </div>
   </div>
@@ -252,7 +252,7 @@ exports[`should render correctly with all data 1`] = `
       <div
         className="project-card-measure-label"
       >
-        metric.new_duplicated_lines_density.short_name
+        metric.duplicated_lines_density.short_name
       </div>
     </div>
   </div>
@@ -283,7 +283,7 @@ exports[`should render correctly with all data 1`] = `
       <div
         className="project-card-measure-label"
       >
-        metric.new_lines.short_name
+        metric.lines.name
       </div>
     </div>
   </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.js.snap
index 1e666cc1854..b93bf252c31 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.js.snap
@@ -33,7 +33,7 @@ exports[`should display the overall measures and quality gate 1`] = `
       className="pull-right text-right"
     />
     <div
-      className="project-card-dates note text-right pull-right"
+      className="project-card-dates note text-right"
     >
       <span
         className="big-spacer-left"
diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css
index 2243200772e..aeffc580da6 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -89,8 +89,15 @@
 
 .project-card-dates {
   width: 100%;
-  margin-top: 4px;
-  margin-bottom: -16px;
+  margin-top: 10px;
+  margin-bottom: -10px;
+}
+
+.project-card-leak-date {
+  padding: 4px 8px;
+  margin: -5px -4px -5px 24px;
+  background-color: #fbf3d5;
+  border: 1px solid #eae3c7;
 }
 
 .project-card-measures {
@@ -108,35 +115,23 @@
 
 .project-card-measures .project-card-measure {
   width: 120px;
-  box-sizing: border-box;
-  padding: 0 15px;
 }
 
 .project-card-leak-measures .project-card-measure {
-  width: 144px;
-  box-sizing: border-box;
-  padding: 0 5px;
+  width: 130px;
 }
 
 .project-card-measure.smaller-card {
   width: 90px;
 }
 
-@media (max-width: 1150px) {
-  .project-card-leak-measures .project-card-measure {
-    width: 136px;
-    padding: 0 2px;
-  }
-  .project-card-measure.smaller-card {
-    width: 80px;
-  }
-}
-
 .project-card-measure {
   position: relative;
   display: inline-block;
   vertical-align: top;
   text-align: center;
+  box-sizing: border-box;
+  padding: 0 15px;
 }
 
 .project-card-measure + .project-card-measure:before {