From b29fc0c08e4c462ac0ab59e466a253b6f1069dca Mon Sep 17 00:00:00 2001
From: Thor77 <thor77@thor77.org>
Date: Tue, 14 Jun 2022 20:25:50 +0200
Subject: [PATCH] Fix match background color

---
 js/components/Match.js         | 16 ++++++++--------
 js/components/Match.module.css |  3 +++
 2 files changed, 11 insertions(+), 8 deletions(-)
 create mode 100644 js/components/Match.module.css

diff --git a/js/components/Match.js b/js/components/Match.js
index bded548..a314d40 100644
--- a/js/components/Match.js
+++ b/js/components/Match.js
@@ -5,6 +5,7 @@ import {notify} from 'react-notify-toast';
 import {MatchModal} from './MatchModal';
 import {MatchTable} from './MatchTable';
 
+import styles from './Match.module.css';
 
 export class Match extends React.Component {
     constructor(props) {
@@ -89,23 +90,23 @@ export class Match extends React.Component {
     }
 
     render() {
-        let cardClass;
+        let cardClass = '';
         let smallMessage;
-        let borderClass;
+        let borderClass = '';
         // possible states: single_team not_ready not_started in_progress finished
         switch (this.state.match.state) {
         case 'in_progress':
-            cardClass = 'table-warning';
+            cardClass = 'bg-warning';
             borderClass = 'border-warning';
             smallMessage = 'Spiel läuft';
             break;
         case 'finished':
-            cardClass = 'table-success';
+            cardClass = 'bg-success';
             borderClass = 'border-success';
             smallMessage = this.getMatchFinishedMessage();
             break;
         case 'single_team':
-            cardClass = 'table-success';
+            cardClass = 'bg-success';
             borderClass = 'border-success';
             smallMessage = 'kein Gegner, Team kommt weiter';
             break;
@@ -117,8 +118,8 @@ export class Match extends React.Component {
             break;
         }
         return (<div className='mb-3'>
-            <Card className='shadow-sm match' onClick={this.toggleModal}>
-                <CardBody className={borderClass + ' border py-2 ' + cardClass}>
+            <Card className={'shadow-sm match '} onClick={this.toggleModal}>
+                <CardBody className={borderClass + ' border py-2 ' + cardClass + ' ' + styles.match_bg}>
                     <MatchTable match={this.state.match} borderColor={borderClass}/>
                 </CardBody>
             </Card>
@@ -128,4 +129,3 @@ export class Match extends React.Component {
         </div>);
     }
 }
-
diff --git a/js/components/Match.module.css b/js/components/Match.module.css
new file mode 100644
index 0000000..7618767
--- /dev/null
+++ b/js/components/Match.module.css
@@ -0,0 +1,3 @@
+.match_bg {
+    --bs-bg-opacity: .5;
+}