Change match hover design

pages/tournament.js

@@ -75,17 +75,11 @@ class Match extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            isHovered: false,
             modal: false
         };
-        this.handleHover = this.handleHover.bind(this);
         this.toggleModal = this.toggleModal.bind(this);
     }
 
-    handleHover() {
-        this.setState({isHovered: !this.state.isHovered});
-    }
-
     toggleModal() {
         this.setState({modal: !this.state.modal})
     }
@@ -128,8 +122,7 @@ class Match extends React.Component {
         }
         return (
             <div className='mb-3'>
-                <Card className={(this.state.isHovered ? 'shadow' : 'shadow-sm')} onMouseEnter={this.handleHover}
+                <Card className='shadow-sm match' onClick={this.toggleModal}>
-                      onMouseLeave={this.handleHover} onClick={this.toggleModal}>
                     <CardBody className={'border py-2 ' + cardClass}>
                         <MatchTable match={this.props.match}/>
                     </CardBody>

static/css/tournament.css

@@ -12,4 +12,13 @@
 
 .minw-25 {
     min-width: 25%;
+}
+
+.match:hover {
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+}
+
+.match:hover > div {
+    border-width: 3px !important;
+    margin: -2px;
 }