Merge pull request #475 from HSLdevcom/DT-6425

DT-6425 matka theme colors
HSLdevcom · Sep 18, 2024 · c8606a2 · c8606a2
2 parents e3dd548 + 6a7d19b
commit c8606a2
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;