SONAR-17433 Iterate on the colors used for Rating badges and Quality Gate badges

diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js
index 1a40c03103481f47bf6dafa5d153019e6dba4e0c..4864a61b476d7a9a9bf45d27b8306501ba458a5f 100644 (file)
--- a/server/sonar-web/src/main/js/app/theme.js
+++ b/server/sonar-web/src/main/js/app/theme.js
@@ -153,21 +153,26 @@ module.exports = {
     info400: '#4B9FD5',
     info500: '#0271B9',
 
-    success500: '#008A25',
+    success300: '#6CD46C',
+    success300a20: 'rgba(108, 212, 108, 0.2)',
+    success500: '#008223',
     success500a20: 'rgba(0, 138, 37, 0.20)',
-    successVariant: '#B0D513',
-    successVarianta20: 'rgba(177, 213, 19, 0.20)',
+    successVariant: '#C6E056',
+    successVarianta20: 'rgba(198, 224, 86, 0.2)',
     successVariantDark: '#809E00',
 
     warning: '#B95E04',
-    warningVariant: '#EABE06',
-    warningVarianta20: 'rgba(234, 188, 6, 0.20)',
+    warningVariant: '#F4D348',
+    warningVarianta20: 'rgba(244, 211, 72, 0.2)',
     warningVariantDark: '#B18F00',
-    warningAccent: '#ED7D20',
-    warningAccenta20: 'rgba(237, 124, 32, 0.20)',
+    warningAccent: '#F69D53',
+    warningAccenta20: 'rgba(246, 157, 83, 0.2)',
 
+    error400: '#F0878E',
+    error400a20: 'rgba(240, 135, 142, 0.2)',
     error500: '#D02F3A',
     error500a20: 'rgba(208, 47, 58, 0.20)',
+    error700: '#B81723',
 
     neutral50: '#F3F3F3',
     neutral200: '#CCCCCC',
@@ -179,6 +184,7 @@ module.exports = {
     black: '#000000',
     blacka38: 'rgba(0, 0, 0, 0.38)',
     blacka60: 'rgba(0, 0, 0, 0.60)',
+    blacka75: 'rgba(0, 0, 0, 0.75)',
     blacka87: 'rgba(0, 0, 0, 0.87)'
   },
 

diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap
index 75d26dc717f2ff7d3af34b9727d5e0ab9d131408..446441971e0356d9fe959b33614d6f7169c22234 100644 (file)
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap
@@ -277,9 +277,9 @@ exports[`should render correctly: default 1`] = `
         Array [
           Object {
             "color": Object {
-              "fill": "#B0D513",
-              "fillTransparent": "rgba(177, 213, 19, 0.20)",
-              "stroke": "#B0D513",
+              "fill": "#C6E056",
+              "fillTransparent": "rgba(198, 224, 86, 0.2)",
+              "stroke": "#809E00",
             },
             "data": Object {
               "key": "foo:src/index.tsx",
@@ -490,9 +490,9 @@ exports[`should render correctly: only showing first 500 files 1`] = `
         Array [
           Object {
             "color": Object {
-              "fill": "#B0D513",
-              "fillTransparent": "rgba(177, 213, 19, 0.20)",
-              "stroke": "#B0D513",
+              "fill": "#C6E056",
+              "fillTransparent": "rgba(198, 224, 86, 0.2)",
+              "stroke": "#809E00",
             },
             "data": Object {
               "key": "foo:src/index.tsx",

diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index e84c466a44c5ae9fec48f69001c235d0c9619de7..dff179b258734d6d00d41029063ad57993afe903 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -103,7 +103,7 @@
 }
 
 .overview-quality-gate-badge-large.failed {
-  background: var(--red);
+  background: var(--error700);
 }
 
 .overview-quality-gate-badge-large.success {

diff --git a/server/sonar-web/src/main/js/components/charts/DonutChart.tsx b/server/sonar-web/src/main/js/components/charts/DonutChart.tsx
index df0345b515f3f3c610b3d0dc1bd09162292a063e..cee0f656c9e649c62522e8c03083558e5578a84d 100644 (file)
--- a/server/sonar-web/src/main/js/components/charts/DonutChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/DonutChart.tsx
@@ -35,7 +35,7 @@ export interface DonutChartProps {
 }
 
 export default function DonutChart(props: DonutChartProps) {
-  const { height, padding = [0, 0, 0, 0], width } = props;
+  const { height, padding = [0, 0, 0, 0], width, padAngle, data, thickness } = props;
 
   const availableWidth = width - padding[1] - padding[3];
   const availableHeight = height - padding[0] - padding[2];
@@ -47,19 +47,19 @@ export default function DonutChart(props: DonutChartProps) {
     .sort(null)
     .value(d => d.value);
 
-  if (props.padAngle !== undefined) {
-    pie.padAngle(props.padAngle);
+  if (padAngle !== undefined) {
+    pie.padAngle(padAngle);
   }
 
-  const sectors = pie(props.data).map((d, i) => {
+  const sectors = pie(data).map((d, i) => {
     return (
       <Sector
         data={d}
-        fill={props.data[i].fill}
+        fill={data[i].fill}
         // eslint-disable-next-line react/no-array-index-key
         key={i}
         radius={radius}
-        thickness={props.thickness}
+        thickness={thickness}
       />
     );
   });

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 c8f8b8a290023eac5d299a8e98f346b51289ec97..74758d6b9bd3356bcea706cdfe34fd978c88f4e4 100644 (file)
--- a/server/sonar-web/src/main/js/components/ui/Level.css
+++ b/server/sonar-web/src/main/js/components/ui/Level.css
@@ -26,7 +26,6 @@
   padding-left: 9px;
   padding-right: 9px;
   height: var(--controlHeight);
-  border: 1px solid var(--blacka38);
   border-radius: var(--controlHeight);
   box-sizing: border-box;
   color: #fff;
@@ -70,7 +69,7 @@ a > .level:hover {
 }
 
 .level-ERROR {
-  background-color: var(--error500);
+  background-color: var(--error700);
 }
 
 .level-NONE {

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 ca0471320e2561f2e4713b4f009bd940d902b06a..db35cb8ab9070228d3573ae9fdfee5822de53455 100644 (file)
--- a/server/sonar-web/src/main/js/components/ui/Rating.css
+++ b/server/sonar-web/src/main/js/components/ui/Rating.css
@@ -22,7 +22,6 @@
   width: var(--controlHeight);
   height: var(--controlHeight);
   border-radius: var(--controlHeight);
-  border: 1px solid var(--blacka38);
   box-sizing: border-box;
   font-size: var(--bigFontSize);
   font-weight: 400;
@@ -45,30 +44,30 @@
 
 a > .rating-A,
 .rating-A {
-  color: var(--white);
-  background-color: var(--success500);
+  color: var(--blacka75);
+  background-color: var(--success300);
 }
 
 a > .rating-B,
 .rating-B {
-  color: var(--blacka87);
+  color: var(--blacka75);
   background-color: var(--successVariant);
 }
 
 a > .rating-C,
 .rating-C {
-  color: var(--blacka87);
+  color: var(--blacka75);
   background-color: var(--warningVariant);
 }
 
 a > .rating-D,
 .rating-D {
-  color: var(--blacka87);
+  color: var(--blacka75);
   background-color: var(--warningAccent);
 }
 
 a > .rating-E,
 .rating-E {
-  color: var(--white);
-  background-color: var(--error500);
+  color: var(--blacka75);
+  background-color: var(--error400);
 }

diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/CoverageRating-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/CoverageRating-test.tsx.snap
index 1da133e8db5b05e60752c7c8141dcc025c3b014a..df6f832df4f02532099008ce1903842a1a9af0b3 100644 (file)
--- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/CoverageRating-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/CoverageRating-test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should render correctly 1`] = `
   data={
     Array [
       Object {
-        "fill": "#008A25",
+        "fill": "#008223",
         "value": 25,
       },
       Object {

diff --git a/server/sonar-web/src/main/js/helpers/constants.ts b/server/sonar-web/src/main/js/helpers/constants.ts
index 568d943c5e0eea5a63e7fe15a4bc2abb543b1c54..9da9a03c8e9af2cce4a481adafa2b80296bf94f2 100644 (file)
--- a/server/sonar-web/src/main/js/helpers/constants.ts
+++ b/server/sonar-web/src/main/js/helpers/constants.ts
@@ -39,11 +39,11 @@ export const RULE_TYPES: RuleType[] = ['BUG', 'VULNERABILITY', 'CODE_SMELL', 'SE
 export const RULE_STATUSES = ['READY', 'BETA', 'DEPRECATED'];
 
 export const RATING_COLORS = [
-  { fill: colors.success500, fillTransparent: colors.success500a20, stroke: colors.success500 },
+  { fill: colors.success300, fillTransparent: colors.success300a20, stroke: colors.success500 },
   {
     fill: colors.successVariant,
     fillTransparent: colors.successVarianta20,
-    stroke: colors.successVariant
+    stroke: colors.successVariantDark
   },
   {
     fill: colors.warningVariant,
@@ -51,7 +51,7 @@ export const RATING_COLORS = [
     stroke: colors.warningVariantDark
   },
   { fill: colors.warningAccent, fillTransparent: colors.warningAccenta20, stroke: colors.warning },
-  { fill: colors.error500, fillTransparent: colors.error500a20, stroke: colors.error500 }
+  { fill: colors.error400, fillTransparent: colors.error400a20, stroke: colors.error700 }
 ];
 
 export const PROJECT_KEY_MAX_LEN = 400;