From e23c73594a7e26fb8f7068b78688c45dd66b04b4 Mon Sep 17 00:00:00 2001
From: Malaber <git@schaedler.rocks>
Date: Mon, 17 Mar 2025 15:31:23 +0100
Subject: [PATCH] Animation for chevron turning

---
 js/components/GroupStage.js      | 13 ++++++++++---
 public/static/css/tournament.css |  7 +++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/js/components/GroupStage.js b/js/components/GroupStage.js
index cdbdc29..51c5614 100644
--- a/js/components/GroupStage.js
+++ b/js/components/GroupStage.js
@@ -37,9 +37,16 @@ export default class GroupStage extends Component {
 }
 
 function ShowMatchesToggleChevron(props) {
-    return (<Button color='link' onClick={props.toggle} className="position-absolute top-0 end-0 m-2">
-        {props.show ? <FaChevronUp /> : <FaChevronDown />}
-    </Button>);
+    const toggleClass = props.show ? 'rotate' : '';
+    return (
+        <Button
+            color='link'
+            onClick={props.toggle}
+            className='position-absolute top-0 end-0 m-2'
+        >
+            <FaChevronDown className={`my-chevron ${toggleClass}`} />
+        </Button>
+    );
 }
 
 export class Group extends Component {
diff --git a/public/static/css/tournament.css b/public/static/css/tournament.css
index 6728a6f..b377cdc 100644
--- a/public/static/css/tournament.css
+++ b/public/static/css/tournament.css
@@ -56,3 +56,10 @@
 .favorite-bar.visible {
     max-height: none;
 }
+
+.my-chevron {
+    transition: transform 0.3s ease;
+}
+.my-chevron.rotate {
+    transform: rotate(180deg);
+}