[FIX] chart_scorecard: adjusted title and baseline description colors

Earlier color of the chart title and description in the Scorecard were shades of grey, that's why they appeared too similar upon change of background. A slight tweak in color shades fixed this issue. Task-3216001 closes #2211 X-original-commit: 27d5cdf Signed-off-by: Rémi Rahir (rar) <[email protected]>
odoo · Mar 13, 2023 · 8b1620b · 8b1620b
1 parent c8dd315
commit 8b1620b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/components/figures/chart/scorecard/chart_scorecard.ts b/src/components/figures/chart/scorecard/chart_scorecard.ts
@@ -119,7 +119,7 @@ export class ScorecardChart extends Component<Props, SpreadsheetChildEnv> {
   }
 
   get secondaryFontColor() {
-    return relativeLuminance(this.primaryFontColor) <= 0.3 ? "#757575" : "#bbbbbb";
+    return relativeLuminance(this.backgroundColor) > 0.3 ? "#525252" : "#C8C8C8";
   }
 
   get figure() {

diff --git a/tests/components/__snapshots__/scorecard_chart.test.ts.snap b/tests/components/__snapshots__/scorecard_chart.test.ts.snap
@@ -15,7 +15,7 @@ exports[`Scorecard charts Scorecard snapshot 1`] = `
     >
       <div
         class="o-title-text"
-        style="font-size:18px; display:inline-block; color:#757575;"
+        style="font-size:18px; display:inline-block; color:#525252;"
       >
         hello
       </div>
@@ -58,7 +58,7 @@ exports[`Scorecard charts Scorecard snapshot 1`] = `
           
           <span
             class="o-baseline-text-description"
-            style="font-size:33.55526293945314px; display:inline-block; color:#757575;"
+            style="font-size:33.55526293945314px; display:inline-block; color:#525252;"
           >
              description
           </span>
@@ -119,7 +119,7 @@ exports[`Scorecard charts scorecard text is resized while figure is resized 1`]
     >
       <div
         class="o-title-text"
-        style="font-size:18px; display:inline-block; color:#757575;"
+        style="font-size:18px; display:inline-block; color:#525252;"
       >
         hello
       </div>
@@ -162,7 +162,7 @@ exports[`Scorecard charts scorecard text is resized while figure is resized 1`]
           
           <span
             class="o-baseline-text-description"
-            style="font-size:14.764795898437502px; display:inline-block; color:#757575;"
+            style="font-size:14.764795898437502px; display:inline-block; color:#525252;"
           >
              description
           </span>

diff --git a/tests/components/scorecard_chart.test.ts b/tests/components/scorecard_chart.test.ts
@@ -173,7 +173,7 @@ describe("Scorecard charts", () => {
 
     expect(getChartElement()).toBeTruthy();
     expect(getChartBaselineTextContent()).toEqual("1");
-    expect(toHex(getChartBaselineTextElement()!.style["color"])).toEqual("#757575");
+    expect(toHex(getChartBaselineTextElement()!.style["color"])).toEqual("#525252");
   });
 
   test("Key < baseline display in red with down arrow", async () => {
@@ -199,7 +199,7 @@ describe("Scorecard charts", () => {
 
     const baselineElement = getChartBaselineElement();
     expect(baselineElement.querySelector("svg")).toBeFalsy();
-    expect(toHex(baselineElement.querySelector("span")!.style["color"])).toEqual("#757575");
+    expect(toHex(baselineElement.querySelector("span")!.style["color"])).toEqual("#525252");
     expect(getChartBaselineTextContent()).toEqual("0");
   });
 
@@ -312,9 +312,9 @@ describe("Scorecard charts", () => {
       chartId
     );
 
-    expect(toHex(getChartTitleElement()!.style["color"])).toEqual("#BBBBBB");
-    expect(toHex(getChartBaselineTextElement()!.style["color"])).toEqual("#BBBBBB");
-    expect(toHex(getChartBaselineDescrElement()!.style["color"])).toEqual("#BBBBBB");
+    expect(toHex(getChartTitleElement()!.style["color"])).toEqual("#C8C8C8");
+    expect(toHex(getChartBaselineTextElement()!.style["color"])).toEqual("#C8C8C8");
+    expect(toHex(getChartBaselineDescrElement()!.style["color"])).toEqual("#C8C8C8");
     expect(toHex(getChartKeyElement()!.style["color"])).toEqual("#FFFFFF");
   });