SONAR-9245 Update leak project cards style on projects page

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')

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>}

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',

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>

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>

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"

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 {

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -861,8 +861,8 @@ projects.no_favorite_projects.engagement=Discover and mark as favorites projects
 projects.explore_projects=Explore Projects
 projects.not_analyzed=Project is not analyzed yet.
 projects.no_leak_period=Project has no leak data yet.
-projects.leak_period_x=Leak Period started {0}
-projects.last_analysis_on_x=Last analysis on {0}
+projects.leak_period_x=Leak Period started: {0}
+projects.last_analysis_on_x=Last analysis: {0}
 projects.search=Search by project name or key
 projects.sort_list=Sort list by
 projects.perspective=Perspective
@@ -2193,12 +2193,15 @@ metric.new_branch_coverage.description=Condition coverage of new/changed code
 metric.new_branch_coverage.name=Condition Coverage on New Code
 metric.new_bugs.description=New Bugs
 metric.new_bugs.name=New Bugs
+metric.new_bugs.short_name=Bugs
 metric.new_code_smells.description=New Code Smells
 metric.new_code_smells.name=New Code Smells
+metric.new_code_smells.short_name=Code Smells
 metric.new_conditions_to_cover.description=Conditions to cover on new code
 metric.new_conditions_to_cover.name=Conditions to Cover on New Code
 metric.new_coverage.description=Coverage of new/changed code
 metric.new_coverage.name=Coverage on New Code
+metric.new_coverage.short_name=Coverage
 metric.new_critical_violations.description=New Critical issues
 metric.new_critical_violations.name=New Critical Issues
 metric.new_duplicated_blocks.name=Duplicated Blocks on New Code
@@ -2207,7 +2210,7 @@ metric.new_duplicated_lines.name=Duplicated Lines on New Code
 metric.new_duplicated_lines.description=Duplicated Lines on New Code
 metric.new_duplicated_lines_density.description=Duplicated lines on new code balanced by statements
 metric.new_duplicated_lines_density.name=Duplicated Lines on New Code (%)
-metric.new_duplicated_lines_density.short_name=New Lines Duplication
+metric.new_duplicated_lines_density.short_name=Duplications
 metric.new_info_violations.description=New Info issues
 metric.new_info_violations.name=New Info Issues
 metric.new_it_branch_coverage.description=Integration tests condition coverage of new/changed code
@@ -2236,7 +2239,7 @@ metric.new_minor_violations.description=New Minor issues
 metric.new_minor_violations.name=New Minor Issues
 metric.new_lines.name=Lines on New Code
 metric.new_lines.description=Non commenting lines on new code
-metric.new_lines.short_name=New Lines
+metric.new_lines.short_name=Lines
 metric.new_overall_branch_coverage.description=Condition coverage of new/changed code by all tests
 metric.new_overall_branch_coverage.name=Overall Condition Coverage on New Code
 metric.new_overall_conditions_to_cover.description=New conditions to cover by all tests
@@ -2273,6 +2276,7 @@ metric.new_violations.description=New issues
 metric.new_violations.name=New Issues
 metric.new_vulnerabilities.description=New Vulnerabilities
 metric.new_vulnerabilities.name=New Vulnerabilities
+metric.new_vulnerabilities.short_name=Vulnerabilities
 metric.noc.description=Number of Children
 metric.noc.name=Number of Children
 metric.open_issues.description=Open issues