From 49a2a27e4c03e030db5c78da9b88359c07bb7b26 Mon Sep 17 00:00:00 2001
From: Malaber <git@schaedler.rocks>
Date: Mon, 17 Mar 2025 15:26:47 +0100
Subject: [PATCH] Replace "Spiele Ausblenden" with Chevron

---
 js/components/GroupStage.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/js/components/GroupStage.js b/js/components/GroupStage.js
index 6cc4f19..cdbdc29 100644
--- a/js/components/GroupStage.js
+++ b/js/components/GroupStage.js
@@ -4,6 +4,7 @@ import React, {Component} from 'react';
 import {getGroup} from '../redux/tournamentApi';
 import {notify} from 'react-notify-toast';
 import {sortMatchesByPositionAscending} from '../utils/sorting';
+import {FaChevronDown, FaChevronUp} from 'react-icons/fa6';
 
 export default class GroupStage extends Component {
     constructor(props) {
@@ -20,23 +21,27 @@ export default class GroupStage extends Component {
         return (<div className='py-2 px-1'>
             <h1 className='custom-font'>
                 <span className='px-2'>Gruppenphase</span>
-                <ShowMatchesToggleButton show={this.state.showMatches} toggle={this.toggleShowMatches}/>
             </h1>
             <Row className='mt-3'>
-                {this.props.groups.map(group => <Group group={group} key={group.id} isSignedIn={this.props.isSignedIn}
-                    isOwner={this.props.isOwner} showMatches={this.state.showMatches}/>)}
+                {this.props.groups.map(group => <Group
+                    group={group}
+                    key={group.id}
+                    isSignedIn={this.props.isSignedIn}
+                    isOwner={this.props.isOwner}
+                    showMatches={this.state.showMatches}
+                    showMatchesToggle={this.toggleShowMatches}
+                />)}
             </Row>
         </div>);
     }
 }
 
-function ShowMatchesToggleButton(props) {
-    return (<Button onClick={props.toggle} className='float-right default-font-family'>
-        {props.show ? 'Spiele ausblenden' : 'Spiele anzeigen'}
+function ShowMatchesToggleChevron(props) {
+    return (<Button color='link' onClick={props.toggle} className="position-absolute top-0 end-0 m-2">
+        {props.show ? <FaChevronUp /> : <FaChevronDown />}
     </Button>);
 }
 
-
 export class Group extends Component {
     constructor(props) {
         super(props);
@@ -61,8 +66,11 @@ export class Group extends Component {
     render() {
         return (<Col className='minw-25 py-2'>
             <Card>
-                <CardBody>
-                    <h3 className='custom-font'>Gruppe {this.state.number}</h3>
+                <CardBody className="position-relative">
+                    <h3 className='custom-font'>
+                        Gruppe {this.state.number}
+                    </h3>
+                    <ShowMatchesToggleChevron show={this.props.showMatches} toggle={this.props.showMatchesToggle}/>
                     <Collapse isOpen={this.props.showMatches}>
                         {this.state.matches.sort(sortMatchesByPositionAscending()).map((match => (
                             <Match match={match} isSignedIn={this.props.isSignedIn} isOwner={this.props.isOwner}