customizable opacity

2 files changed, 8 insertions, 4 deletions

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 0fe2ab1ac..2b4d413dd 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -1044,9 +1044,9 @@ export async function applyBurstHeatmap(): Promise<void> {
 
     const colors = [
       themeColors.colorfulError,
-      Misc.blendTwoHexColors(themeColors.colorfulError, themeColors.text),
+      Misc.blendTwoHexColors(themeColors.colorfulError, themeColors.text, 0.5),
       themeColors.text,
-      Misc.blendTwoHexColors(themeColors.main, themeColors.text),
+      Misc.blendTwoHexColors(themeColors.main, themeColors.text, 0.5),
       themeColors.main,
     ];
 
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
index 7624ffc1f..5f96307d5 100644
--- a/frontend/src/ts/utils/misc.ts
+++ b/frontend/src/ts/utils/misc.ts
@@ -236,7 +236,11 @@ export async function getContributorsList(): Promise<string[]> {
   }
 }
 
-export function blendTwoHexColors(color1: string, color2: string): string {
+export function blendTwoHexColors(
+  color1: string,
+  color2: string,
+  opacity: number
+): string {
   const rgb1 = hexToRgb(color1);
   const rgb2 = hexToRgb(color2);
 
@@ -251,7 +255,7 @@ export function blendTwoHexColors(color1: string, color2: string): string {
       r: rgb2.r,
       g: rgb2.g,
       b: rgb2.b,
-      a: 0.5,
+      a: opacity,
     };
     const blended = normalBlend(rgba1, rgba2);
     return rgbToHex(blended.r, blended.g, blended.b);