SONAR-16731 [891515] Sidebar Contrast

17 files changed, 63 insertions, 41 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx
index cf2d6e41163..a93ca431ea0 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx
@@ -63,7 +63,7 @@ function getFacetValueForOption(facet: Facet, option: number): number {
 
 function renderOption(option: number, selected: boolean) {
   return (
-    <span>
+    <div className="display-flex-center">
       {option < 6 && (
         <CoverageRating
           muted={!selected}
@@ -78,6 +78,6 @@ function renderOption(option: number, selected: boolean) {
           <span className="big-spacer-left">{translate('no_data')}</span>
         )}
       </span>
-    </span>
+    </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.tsx
index ec19bb10a1c..c3821b81ed4 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.tsx
@@ -65,7 +65,7 @@ function getFacetValueForOption(facet: Facet, option: number) {
 
 function renderOption(option: number, selected: boolean) {
   return (
-    <span>
+    <div className="display-flex-center">
       {option < 6 && (
         <DuplicationsRating
           muted={!selected}
@@ -80,6 +80,6 @@ function renderOption(option: number, selected: boolean) {
           <span className="big-spacer-left">{translate('no_data')}</span>
         )}
       </span>
-    </span>
+    </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx
index a8b41df5a28..28ec1bbf4cb 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx
@@ -61,6 +61,9 @@ function renderOption(option: number, selected: boolean) {
   return (
     <span>
       <Rating muted={!selected} small={true} value={option} />
+      <span className="spacer-left">
+        {translateWithParameters('projects.facets.rating_x', formatMeasure(option, 'RATING'))}
+      </span>
     </span>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx
index 939eb2f5c07..529d33ce4d2 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx
@@ -62,9 +62,9 @@ function getFacetValueForOption(facet: Facet, option: number) {
 
 function renderOption(option: number, selected: boolean) {
   return (
-    <span>
+    <div className="display-flex-center">
       <SizeRating muted={!selected} small={true} value={getSizeRatingAverageValue(option)} />
       <span className="spacer-left">{getSizeRatingLabel(option)}</span>
-    </span>
+    </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap
index 9c45a22ef8e..a77a3e20f95 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap
@@ -27,7 +27,9 @@ exports[`renders 1`] = `
 `;
 
 exports[`renders 2`] = `
-<span>
+<div
+  className="display-flex-center"
+>
   <CoverageRating
     muted={true}
     size="small"
@@ -38,5 +40,5 @@ exports[`renders 2`] = `
   >
     70% - 80%
   </span>
-</span>
+</div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/DuplicationsFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/DuplicationsFilter-test.tsx.snap
index a0c1acb0b3c..4672e648690 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/DuplicationsFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/DuplicationsFilter-test.tsx.snap
@@ -27,7 +27,9 @@ exports[`renders 1`] = `
 `;
 
 exports[`renders 2`] = `
-<span>
+<div
+  className="display-flex-center"
+>
   <DuplicationsRating
     muted={true}
     size="small"
@@ -38,11 +40,13 @@ exports[`renders 2`] = `
   >
     3% - 5%
   </span>
-</span>
+</div>
 `;
 
 exports[`renders 3`] = `
-<span>
+<div
+  className="display-flex-center"
+>
   <span
     className="spacer-left"
   >
@@ -52,5 +56,5 @@ exports[`renders 3`] = `
       no_data
     </span>
   </span>
-</span>
+</div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap
index 518429562a1..64e83a0b6a2 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap
@@ -30,5 +30,10 @@ exports[`renders 2`] = `
     small={true}
     value={2}
   />
+  <span
+    className="spacer-left"
+  >
+    projects.facets.rating_x.B
+  </span>
 </span>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap
index a950d21b0d1..24fa109ec75 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap
@@ -25,7 +25,9 @@ exports[`renders 1`] = `
 `;
 
 exports[`renders 2`] = `
-<span>
+<div
+  className="display-flex-center"
+>
   <SizeRating
     muted={true}
     small={true}
@@ -36,5 +38,5 @@ exports[`renders 2`] = `
   >
     1k - 10k
   </span>
-</span>
+</div>
 `;
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 e6881bc56a7..6e226a562ed 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -78,7 +78,7 @@
 .projects-facet-bar-inner {
   min-width: 1px;
   height: 10px;
-  background-color: var(--gray71);
+  background-color: var(--gray60);
   transition: width 0.3s ease;
 }
 
diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx
index 3c4f2d3de9e..cad8dfba2f9 100644
--- a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx
@@ -21,14 +21,17 @@ import * as React from 'react';
 import { colors } from '../../app/theme';
 import DonutChart from '../../components/charts/DonutChart';
 
-const SIZE_TO_WIDTH_MAPPING = { small: 16, normal: 24, big: 40, huge: 60 };
+const SIZE_TO_WIDTH_MAPPING = { small: 20, normal: 24, big: 40, huge: 60 };
+const SIZE_TO_THICKNESS_MAPPING = { small: 3, normal: 3, big: 3, huge: 4 };
 
-const SIZE_TO_THICKNESS_MAPPING = { small: 2, normal: 3, big: 3, huge: 4 };
+const FULL_PERCENT = 100;
+
+type SIZE = 'small' | 'normal' | 'big' | 'huge';
 
 export interface CoverageRatingProps {
   muted?: boolean;
-  size?: 'small' | 'normal' | 'big' | 'huge';
-  value: number | string | null | undefined;
+  size?: SIZE;
+  value?: number | string;
 }
 
 export default function CoverageRating({
@@ -36,16 +39,16 @@ export default function CoverageRating({
   size = 'normal',
   value
 }: CoverageRatingProps) {
-  let data = [{ value: 100, fill: '#ccc ' }];
+  let data = [{ value: FULL_PERCENT, fill: colors.gray71 }];
   let padAngle = 0;
 
   if (value != null) {
     const numberValue = Number(value);
     data = [
       { value: numberValue, fill: muted ? colors.gray71 : colors.green },
-      { value: 100 - numberValue, fill: muted ? colors.barBackgroundColor : colors.lineCoverageRed }
+      { value: FULL_PERCENT - numberValue, fill: muted ? 'transparent' : colors.lineCoverageRed }
     ];
-    if (numberValue !== 0 && numberValue < 100) {
+    if (numberValue !== 0 && numberValue < FULL_PERCENT) {
       padAngle = 0.1; // Same for all sizes, because it scales automatically
     }
   }
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
index d126113cd50..d5b24f7c8b1 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
@@ -31,9 +31,9 @@
 }
 
 .duplications-rating-small {
-  width: 16px;
-  height: 16px;
-  border-width: 2px;
+  width: 20px;
+  height: 20px;
+  border-width: 3px;
 }
 
 .duplications-rating-big {
@@ -50,11 +50,11 @@
 }
 
 .duplications-rating-muted {
-  border-color: #bdbdbd !important;
+  border-color: var(--gray71) !important;
 }
 
 .duplications-rating-muted:after {
-  background-color: #bdbdbd !important;
+  background-color: var(--gray71) !important;
 }
 
 .duplications-rating:after {
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx
index 89ddd77af2d..4c7581e0c51 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx
@@ -25,7 +25,7 @@ import './DuplicationsRating.css';
 interface Props {
   muted?: boolean;
   size?: 'small' | 'normal' | 'big' | 'huge';
-  value: number | null | undefined;
+  value?: number;
 }
 
 export default function DuplicationsRating({ muted = false, size = 'normal', value }: Props) {
diff --git a/server/sonar-web/src/main/js/components/ui/Level.css b/server/sonar-web/src/main/js/components/ui/Level.css
index 2974a1f9ffa..f711d858103 100644
--- a/server/sonar-web/src/main/js/components/ui/Level.css
+++ b/server/sonar-web/src/main/js/components/ui/Level.css
@@ -45,10 +45,11 @@
   height: var(--smallControlHeight);
   line-height: var(--smallControlHeight);
   font-size: var(--smallFontSize);
+  font-weight: bold;
 }
 
 .level-muted {
-  background-color: #bdbdbd !important;
+  background-color: var(--gray60) !important;
 }
 
 a > .level {
diff --git a/server/sonar-web/src/main/js/components/ui/Rating.css b/server/sonar-web/src/main/js/components/ui/Rating.css
index 8229a957380..58c687c4ac3 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.css
+++ b/server/sonar-web/src/main/js/components/ui/Rating.css
@@ -32,7 +32,7 @@
 }
 
 .rating-muted {
-  background-color: #bdbdbd !important;
+  background-color: var(--gray71) !important;
   color: #fff !important;
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.35) !important;
 }
@@ -89,10 +89,11 @@ a .rating-E {
 }
 
 .rating-small {
-  width: 18px;
-  height: 18px;
-  line-height: 18px;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
   margin-top: -1px;
   margin-bottom: -1px;
-  font-size: var(--smallFontSize);
+  font-size: var(--mediumFontSize);
+  font-weight: bold;
 }
diff --git a/server/sonar-web/src/main/js/components/ui/SizeRating.css b/server/sonar-web/src/main/js/components/ui/SizeRating.css
index 4f288c22d2f..b6730dba61e 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.css
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.css
@@ -27,19 +27,19 @@
   background-color: var(--blue);
   color: #fff;
   font-size: var(--smallFontSize);
+  font-weight: bold;
   text-align: center;
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
 }
 
 .size-rating-small {
-  width: 18px;
-  height: 18px;
-  line-height: 18px;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
   margin-top: -1px;
   margin-bottom: -1px;
-  font-size: 10px;
 }
 
 .size-rating-muted {
-  background-color: #bdbdbd;
+  background-color: var(--gray71);
 }
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx
index f9ed02d54e4..c2fb9644e56 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx
@@ -32,7 +32,7 @@ it('should render with muted style', () => {
       .prop('data')
   ).toEqual([
     { fill: '#b4b4b4', value: 25 },
-    { fill: '#f3f3f3', value: 75 }
+    { fill: 'transparent', value: 75 }
   ]);
 });
 
@@ -41,7 +41,7 @@ it('should render with small size', () => {
     shallowRender({ size: 'small' })
       .find('DonutChart')
       .props()
-  ).toMatchObject({ height: 16, padAngle: 0.1, thickness: 2, width: 16 });
+  ).toMatchObject({ height: 20, padAngle: 0.1, thickness: 3, width: 20 });
 });
 
 it('should correctly handle padAngle for 0% and 100% coverage', () => {
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 33b62b45f1b..daba2a880ff 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1059,6 +1059,7 @@ projects.worse_of_reliablity_and_security=Worse of Reliability and Security
 projects.limited_set_of_projects=Displayed project set limited to the top {0} projects based on current sort: {1}.
 projects.facets.quality_gate=Quality Gate
 projects.facets.quality_gate.warning_help=Warning status is deprecated. This filter will disappear when no Warning Quality Gate remains.
+projects.facets.rating_x={0} rating
 projects.facets.languages=Languages
 projects.facets.new_lines=New Lines
 projects.facets.tags=Tags