Fix buttons in tournament view

js/components/LinkButton.js

@@ -0,0 +1,14 @@
+import {Button} from 'reactstrap';
+import {useRouter} from 'next/router';
+import React from 'react';
+
+export function LinkButton(props) {
+    const router = useRouter();
+
+    const handleClick = e => {
+        e.preventDefault();
+        router.push(props.href);
+    };
+
+    return (<Button outline='true' onClick={handleClick}>{props.children}</Button>);
+}

js/components/TournamentBigImage.js

@@ -11,7 +11,7 @@ export function TournamentBigImage(props) {
 }
 
 function TournamentProperties(props) {
-    return (<ListGroup className='text-dark text-left shadow'>
+    return (<ListGroup className='text-dark text-start shadow'>
         {props.description && <ListGroupItem>{props.description}</ListGroupItem>}
         <ListGroupItem>
             {props.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}

js/components/TournamentStatusBar.js

@@ -1,6 +1,8 @@
+import React from 'react';
 import Navbar from 'react-bootstrap/Navbar';
 import {Container} from 'reactstrap';
-import React from 'react';
+
+import {LinkButton} from './LinkButton';
 
 export function TournamentStatusBar(props) {
     return (<Navbar sticky='top' bg='light' className='border-bottom border-top'>
@@ -10,19 +12,13 @@ export function TournamentStatusBar(props) {
     </Navbar>);
 }
 
-export function TournamentStatusBarButton(props) {
-    return (<a href={props.href} className='ml-3 btn btn-outline-secondary default-font-family'>
-        {props.children}
-    </a>);
-}
-
 export function EditButton(props) {
     const {tournamentId, isOwner, isSignedIn} = props;
 
     if (isSignedIn && isOwner) {
-        return (<TournamentStatusBarButton href={'/t/' + tournamentId + '/edit'}>
+        return (<LinkButton href={'/t/' + tournamentId + '/edit'}>
             Turnier bearbeiten
-        </TournamentStatusBarButton>);
+        </LinkButton>);
     } else {
         return null;
     }

pages/tournament-statistics.js

@@ -1,15 +1,15 @@
 import Head from 'next/head';
 import React from 'react';
 import {connect} from 'react-redux';
-import {Col, Container, Row} from 'reactstrap';
+import {ButtonGroup, Col, Container, Row, NavbarBrand} from 'reactstrap';
 
 import {TurniereNavigation} from '../js/components/Navigation';
 import {StandingsTable} from '../js/components/StandingsTable';
 import {DominanceShower} from '../js/components/DominanceShower';
 import {Footer} from '../js/components/Footer';
 import {requestTournamentStatistics} from '../js/api';
-import {EditButton, TournamentStatusBar, TournamentStatusBarButton} from '../js/components/TournamentStatusBar';
-import Navbar from 'react-bootstrap/Navbar';
+import {EditButton, TournamentStatusBar} from '../js/components/TournamentStatusBar';
+import {LinkButton} from '../js/components/LinkButton';
 import {TournamentBigImage} from '../js/components/TournamentBigImage';
 import {LoadingPage} from '../js/components/LoadingPage';
 
@@ -37,15 +37,15 @@ class StatisticsTournamentPage extends React.Component {
                 <TurniereNavigation/>
                 <TournamentBigImage {...tournamentStatistics}/>
                 <TournamentStatusBar>
-                    <Navbar.Brand>
-                        {tournamentStatistics.name}
+                    <NavbarBrand>{tournamentStatistics.name}</NavbarBrand>
+                    <ButtonGroup className='me-auto'>
                         <EditButton tournamentId={tournamentStatistics.id}
                             isOwner={this.props.username === tournamentStatistics.ownerUsername}
                             isSignedIn={this.props.isSignedIn}/>
-                        <TournamentStatusBarButton href={'/t/' + tournamentStatistics.id}>
+                        <LinkButton href={'/t/' + tournamentStatistics.id}>
                             zurück zum Turnier
-                        </TournamentStatusBarButton>
-                    </Navbar.Brand>
+                        </LinkButton>
+                    </ButtonGroup>
                 </TournamentStatusBar>
                 <div className='pb-5'>
                     <StatisticsView tournamentStatistics={tournamentStatistics} />

pages/tournament.js

@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import React from 'react';
 import {connect} from 'react-redux';
-import Navbar from 'react-bootstrap/Navbar';
+import {ButtonGroup, NavbarBrand} from 'reactstrap';
 
 
 import {ErrorPageComponent} from '../js/components/ErrorComponents';
@@ -11,7 +11,8 @@ import {TurniereNavigation} from '../js/components/Navigation';
 import {PlayoffStages} from '../js/components/PlayoffStages';
 import GroupStage from '../js/components/GroupStage';
 import {TournamentBigImage} from '../js/components/TournamentBigImage';
-import {EditButton, TournamentStatusBar, TournamentStatusBarButton} from '../js/components/TournamentStatusBar';
+import {EditButton, TournamentStatusBar} from '../js/components/TournamentStatusBar';
+import {LinkButton} from '../js/components/LinkButton';
 import {LoadingPage} from '../js/components/LoadingPage';
 import {getTournament} from '../js/redux/tournamentApi';
 
@@ -37,18 +38,18 @@ class PrivateTournamentPage extends React.Component {
 
 function StatusBar(props) {
     return (<TournamentStatusBar>
-        <Navbar.Brand>
-            {props.tournament.name}
+        <NavbarBrand>{props.tournament.name}</NavbarBrand>
+        <ButtonGroup className='me-auto'>
             <EditButton tournamentId={props.tournament.id} isOwner={props.isOwner} isSignedIn={props.isSignedIn}/>
             <StatisticsButton tournamentId={props.tournament.id}/>
-        </Navbar.Brand>
+        </ButtonGroup>
     </TournamentStatusBar>);
 }
 
 function StatisticsButton(props) {
-    return (<TournamentStatusBarButton href={'/t/' + props.tournamentId + '/statistics'}>
+    return (<LinkButton href={'/t/' + props.tournamentId + '/statistics'}>
         Statistiken
-    </TournamentStatusBarButton>);
+    </LinkButton>);
 }