Animation for chevron turning

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">
+    const toggleClass = props.show ? 'rotate' : '';
-        {props.show ? <FaChevronUp /> : <FaChevronDown />}
+    return (
-    </Button>);
+        <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 {

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);
+}