From 6a7d19b73374669aed839bbc597f3e25672d51f7 Mon Sep 17 00:00:00 2001
From: Harhio <sade.harhio@cgi.com>
Date: Tue, 17 Sep 2024 16:27:07 +0300
Subject: [PATCH] DT-6425 matka theme colors

---
 src/App.scss                    | 1 +
 src/defaultConfig.js            | 1 +
 src/monitorConfig.js            | 6 ++++++
 src/ui/Monitor.tsx              | 1 +
 src/ui/MonitorRowContainer.scss | 2 +-
 5 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index b868d20e..f78652f8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -12,6 +12,7 @@ $monitor-background-color: var(--monitor-background-color);
 $monitor-font: var(--monitor-font);
 $monitor-font-weight: var(--monitor-font-weight);
 $monitor-font-weight-bigger: var(--font-weight-bigger);
+$monitor-button-background-color: var(--monitor-button-background-color);
 
 ul,
 li {
diff --git a/src/defaultConfig.js b/src/defaultConfig.js
index 40c18d78..c0f6cd92 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -3,6 +3,7 @@ export default {
     primary: '#026273',
     monitorBackground: '#0057a2',
     alert: '#dc0451',
+    monitorButtonBackground: 'rgba(0, 0, 0, 70%)',
   },
   feedIds: [
     'MATKA',
diff --git a/src/monitorConfig.js b/src/monitorConfig.js
index 150d81c0..0616b253 100644
--- a/src/monitorConfig.js
+++ b/src/monitorConfig.js
@@ -104,6 +104,12 @@ export default {
       }
       return true;
     },
+    colors: {
+      primary: '#000000',
+      monitorBackground: '#000000',
+      alert: '#dc0451',
+      monitorButtonBackground: 'rgba(255, 255, 255, 0.7)',
+    },
   },
   tampere: {
     colors: {
diff --git a/src/ui/Monitor.tsx b/src/ui/Monitor.tsx
index 2967ec89..0d8c0f9f 100644
--- a/src/ui/Monitor.tsx
+++ b/src/ui/Monitor.tsx
@@ -106,6 +106,7 @@ const Monitor: FC<IProps> = ({
     '--font-size': `${fontSize}px`,
     '--tightened-font-size': `${tightenedFontSize}px`,
     '--icon-size': fontSize ? `${iconWidthHeight}px` : '5vh',
+    '--monitor-button-background-color': config.colors.monitorButtonBackground,
   } as React.CSSProperties;
 
   const isLandscapeByLayout = view.layout <= 11 || view.layout === 20;
diff --git a/src/ui/MonitorRowContainer.scss b/src/ui/MonitorRowContainer.scss
index 6187799a..afeb2ecd 100644
--- a/src/ui/MonitorRowContainer.scss
+++ b/src/ui/MonitorRowContainer.scss
@@ -14,7 +14,7 @@ $preview-grid-divider: 2px;
   z-index: 10000;
   width: 60%;
   height: 15%;
-  background-color: rgba(0, 0, 0, 70%);
+  background-color: $monitor-button-background-color;
   display: flex;
   justify-content: center;
   align-items: center;