Merge branch 'TUR-23' into 'master'

TUR-23: Dependency update

Closes TUR-23

See merge request turniere/turniere-frontend!29

docker/production/Dockerfile

@@ -1,10 +1,10 @@
 ### STAGE 1: Build ###
-FROM node:8-alpine as build
+FROM node:16-alpine as build
 WORKDIR /srv
 COPY js /srv/js
 COPY pages /srv/pages
-COPY static /srv/static
+COPY public /srv/public
-COPY next.config.js package.json package-lock.json server.js yarn.lock /srv/
+COPY next.config.js package.json server.js yarn.lock /srv/
 RUN yarn install
 RUN yarn build
 RUN yarn cache clean

js/components/EditableMatchTable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Input, InputGroup, InputGroupAddon, Table} from 'reactstrap';
+import {Button, Input, InputGroup, Table} from 'reactstrap';
 
 export function EditableMatchTable(props) {
     return (<Table className='mb-0'>
@@ -49,12 +49,10 @@ class ScoreInput extends React.Component {
 
     render() {
         return (<InputGroup>
-            <InputGroupAddon addonType="prepend"><Button onClick={this.decreaseScore} color='danger'
+            <Button onClick={this.decreaseScore} color='danger' outline={true}>-1</Button>
-                outline={true}>-1</Button></InputGroupAddon>
             <Input className='font-weight-bold' value={this.state.score} onChange={this.inputScore} type='number'
                 step='1' placeholder='0'/>
-            <InputGroupAddon addonType="append"><Button onClick={this.increaseScore}
+            <Button onClick={this.increaseScore} color='success'>+1</Button>
-                color='success'>+1</Button></InputGroupAddon>
         </InputGroup>);
     }
 }

js/components/EditableStringList.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {
-    Alert, Button, Card, CardBody, CardTitle, Input, InputGroup, InputGroupAddon
+    Alert, Button, Card, CardBody, CardTitle, Input, InputGroup
 } from 'reactstrap';
 
-import '../../static/css/editablestringlist.css';
+import styles from './EditableStringList.module.css';
 
 export default class EditableStringList extends React.Component {
     constructor(props) {
@@ -173,11 +173,11 @@ class GroupView extends React.Component {
 
     render() {
         return (<div>
-            {this.props.groups.map((group, groupindex) => (<Card className="group-card" key={groupindex}>
+            {this.props.groups.map((group, groupindex) => (<Card className={styles.group_card} key={groupindex}>
                 <CardBody>
                     <CardTitle>Group {groupindex + 1}</CardTitle>
                     {group.map((team, teamindex) => (<div key={team} draggable droppable="droppable"
-                        className="grouped-team-item"
+                        className={styles.grouped_team_item}
                         onDragStart={e => this.onDragStart(e, groupindex, teamindex)}
                         onDragOver={e => this.onDragOver(e)}
                         onDrop={e => this.onDrop(e, groupindex, teamindex)}>
@@ -225,7 +225,7 @@ class StringInput extends React.Component {
     }
 
     render() {
-        return (<InputGroup className="mb-3">
+        return (<InputGroup>
             <Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required
                 onChange={this.handleChange} onKeyPress={e => {
                     if (e.key === 'Enter') {
@@ -233,10 +233,8 @@ class StringInput extends React.Component {
                         return false;
                     }
                 }}/>
-            <InputGroupAddon addonType="append">
             <Button color="success" outline={true}
                 onClick={() => this.submit()}>{this.props.addButtonText}</Button>
-            </InputGroupAddon>
         </InputGroup>);
     }
 
@@ -262,7 +260,9 @@ class Item extends React.Component {
     }
 
     render() {
-        return (<Alert className="team-item m-2" color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
+        return (<Alert
+            className={styles.team_item} color="info" isOpen={this.state.visible} toggle={this.onDismiss}
+        >
             {this.props.text}
         </Alert>);
     }

js/components/EditableStringList.module.css

@@ -1,25 +1,17 @@
-
+.group_card {
-.group-card {
     margin-top: 15px;
     margin-right: 15px;
     display: inline-block;
     vertical-align: top;
 }
 
-.team-item {
+.team_item {
     display: inline-block;
+    margin: .5rem;
 }
 
-.grouped-team-item {
+.grouped_team_item {
     display: block;
     margin-bottom: .5rem;
     border-radius: .25rem;
 }
-
-.grouped-team-item:last-child {
-    margin-bottom: 0px;
-}
-
-.grouped-team-item > .m-2 {
-    margin: 0 !important;
-}

js/components/ErrorComponents.js

@@ -7,9 +7,6 @@ import {Footer} from './Footer';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-import '../../static/css/everypage.css';
-import '../../static/css/error.css';
-
 export class ErrorPageComponent extends React.Component {
     static getInitialProps({statusCode}) {
         return {statusCode};

js/components/LinkButton.js

@@ -0,0 +1,38 @@
+import {Button} from 'reactstrap';
+import {useRouter} from 'next/router';
+import React from 'react';
+
+class LinkButtonComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.defaultProps = {
+            outline: true,
+            color: 'secondary'
+        };
+    }
+
+    handleClick(e) {
+        e.preventDefault();
+        this.props.router.push(this.props.href);
+    }
+
+    render() {
+        return (
+            <Button outline={this.props.outline} color={this.props.color} onClick={e => this.handleClick(e)}>
+                {this.props.children}
+            </Button>
+        );
+    }
+}
+
+LinkButtonComponent.defaultProps = {
+    outline: true,
+    color: 'secondary'
+};
+
+// export default withRouter(LinkButton);
+
+export function LinkButton(props) {
+    const router = useRouter();
+    return (<LinkButtonComponent {...props} router={router} />);
+}

js/components/Login.js

@@ -5,7 +5,6 @@ import Router from 'next/router';
 
 import {login} from '../api';
 
-import '../../static/css/errormessages.css';
 import {notify} from 'react-notify-toast';
 
 export function Login(props) {
@@ -16,7 +15,7 @@ export function Login(props) {
                 <Hint hint={props.hint}/>
                 <LoginForm/>
                 <div className="mt-3">
-                    <a href="/register" className="mr-3">Account anlegen</a>
+                    <a href="/register" className="me-3">Account anlegen</a>
                     <a href="/register#account-requirement">Warum ist ein Account nötig?</a>
                 </div>
             </CardBody>

js/components/Match.js

@@ -5,6 +5,7 @@ import {notify} from 'react-notify-toast';
 import {MatchModal} from './MatchModal';
 import {MatchTable} from './MatchTable';
 
+import styles from './Match.module.css';
 
 export class Match extends React.Component {
     constructor(props) {
@@ -89,23 +90,23 @@ export class Match extends React.Component {
     }
 
     render() {
-        let cardClass;
+        let cardClass = '';
         let smallMessage;
-        let borderClass;
+        let borderClass = '';
         // possible states: single_team not_ready not_started in_progress finished
         switch (this.state.match.state) {
         case 'in_progress':
-            cardClass = 'table-warning';
+            cardClass = 'bg-warning';
             borderClass = 'border-warning';
             smallMessage = 'Spiel läuft';
             break;
         case 'finished':
-            cardClass = 'table-success';
+            cardClass = 'bg-success';
             borderClass = 'border-success';
             smallMessage = this.getMatchFinishedMessage();
             break;
         case 'single_team':
-            cardClass = 'table-success';
+            cardClass = 'bg-success';
             borderClass = 'border-success';
             smallMessage = 'kein Gegner, Team kommt weiter';
             break;
@@ -117,8 +118,8 @@ export class Match extends React.Component {
             break;
         }
         return (<div className='mb-3'>
-            <Card className='shadow-sm match' onClick={this.toggleModal}>
+            <Card className={'shadow-sm match '} onClick={this.toggleModal}>
-                <CardBody className={borderClass + ' border py-2 ' + cardClass}>
+                <CardBody className={borderClass + ' border py-2 ' + cardClass + ' ' + styles.match_bg}>
                     <MatchTable match={this.state.match} borderColor={borderClass}/>
                 </CardBody>
             </Card>
@@ -128,4 +129,3 @@ export class Match extends React.Component {
         </div>);
     }
 }
-

js/components/Match.module.css

@@ -0,0 +1,3 @@
+.match_bg {
+    --bs-bg-opacity: .5;
+}

js/components/MatchTable.js

@@ -36,7 +36,7 @@ export function MatchTable(props) {
                     <td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
                 </tr>
                 <tr>
-                    <td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
+                    <td className={'border-bottom-0 ' + props.borderColor + ' ' + team2Class}>kein Gegner</td>
                 </tr>
             </tbody>
         </Table>);
@@ -48,8 +48,10 @@ export function MatchTable(props) {
                     <td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
                 </tr>
                 <tr>
-                    <th className={'stage ' + props.borderColor}>{props.match.team2.score}</th>
+                    <th className={'stage border-bottom-0 ' + props.borderColor}>{props.match.team2.score}</th>
-                    <td className={props.borderColor + ' ' + team2Class}>{props.match.team2.name}</td>
+                    <td className={'border-bottom-0 ' + props.borderColor + ' ' + team2Class}>
+                        {props.match.team2.name}
+                    </td>
                 </tr>
             </tbody>
         </Table>);

js/components/Navigation.js

@@ -1,5 +1,5 @@
 import {
-    Badge, Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink
+    Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink
 } from 'reactstrap';
 import {connect} from 'react-redux';
 import React from 'react';
@@ -27,11 +27,12 @@ export class TurniereNavigation extends React.Component {
     render() {
         return (<Navbar color="light" light expand="lg">
             <NavbarBrand href="/">turnie.re</NavbarBrand>
-            <Betabadge/>
             <NavbarToggler onClick={this.toggle}/>
             <Collapse isOpen={!this.state.collapsed} navbar>
                 <NavLinks/>
+                <div className='ms-auto me-0'>
                     <LoginLogoutButtons/>
+                </div>
             </Collapse>
         </Navbar>);
     }
@@ -54,10 +55,6 @@ class SmartNavLinks extends React.Component {
     }
 }
 
-function Betabadge() {
-    return (<Badge color="danger" className="mr-2">BETA</Badge>);
-}
-
 class InvisibleLoginLogoutButtons extends React.Component {
     logout() {
         logout(() => notify.show('Du bist jetzt abgemeldet.', 'success', 2500));

js/components/NumericInput.js

@@ -1,21 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button, InputGroup, InputGroupAddon, Input} from 'reactstrap';
+import {Button, InputGroup, Input} from 'reactstrap';
-import '../../static/css/numericinput.css';
 
 export default class NumericInput extends React.Component {
     render() {
         return (<InputGroup>
-            <InputGroupAddon addonType="prepend">
             <Button onClick={this.props.decrementCallback} className="btn-width" color={this.props.decrementColor}
                 outline={this.props.decrementOutline}>{this.props.decrementText}</Button>
-            </InputGroupAddon>
             <Input className='font-weight-bold' value={this.props.value}
                 disabled type='number'/>
-            <InputGroupAddon addonType="append">
             <Button onClick={this.props.incrementCallback} className="btn-width" color={this.props.incrementColor}
                 outline={this.props.incrementOutline}>{this.props.incrementText}</Button>
-            </InputGroupAddon>
         </InputGroup>);
     }
 }

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/TournamentList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {requestTournamentList} from '../api';
-import {Spinner} from 'react-bootstrap';
+import {Spinner} from 'reactstrap';
 
 export default class TournamentList extends React.Component {
     constructor(props) {
@@ -25,7 +25,7 @@ export default class TournamentList extends React.Component {
     render() {
         if (!this.state.loaded) {
             return (<EmptyList>
-                <Spinner animation='border' role='status' size='sm'/>
+                <Spinner size='sm'/>
                 <span className='ml-3'>lade Turnier-Liste</span>
             </EmptyList>);
         }

js/components/TournamentStatusBar.js

@@ -1,28 +1,23 @@
-import Navbar from 'react-bootstrap/Navbar';
-import {Container} from 'reactstrap';
 import React from 'react';
+import {Container, Navbar} from 'reactstrap';
+
+import {LinkButton} from './LinkButton';
 
 export function TournamentStatusBar(props) {
-    return (<Navbar sticky='top' bg='light' className='border-bottom border-top'>
+    return (<Navbar color='light' light className='border-bottom border-top'>
-        <Container className='px-3'>
+        <Container>
             {props.children}
         </Container>
     </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;
     }

next.config.js

@@ -1,6 +1,3 @@
-
-const withCSS = require('@zeit/next-css');
-module.exports = withCSS();
 module.exports.publicRuntimeConfig = {
     api_url: process.env.TURNIERE_API_URL
 };

package.json

@@ -14,27 +14,25 @@
   "license": "ISC",
   "dependencies": {
     "@zeit/next-css": "^1.0.1",
-    "axios": "^0.18.0",
+    "axios": "^0.27.2",
-    "bootstrap": "^4.1.3",
+    "bootstrap": "^5.1.3",
-    "eslint-config-google": "^0.12.0",
+    "eslint-config-google": "^0.14.0",
-    "express": "^4.16.4",
+    "express": "^4.18.1",
-    "next": "^7.0.2",
+    "next": "^12.1.6",
-    "react": "^16.6.1",
+    "react": "^18.1.0",
-    "react-bootstrap": "^1.0.0-beta.9",
+    "react-dom": "^18.1.0",
-    "react-dom": "^16.6.1",
+    "react-notify-toast": "^0.5.1",
-    "react-favicon": "^0.0.14",
+    "react-pose": "^4.0.10",
-    "react-notify-toast": "^0.5.0",
+    "react-redux": "^8.0.2",
-    "react-pose": "^4.0.8",
+    "reactstrap": "^9.1.1",
-    "react-redux": "^5.1.1",
+    "redux": "^4.2.0",
-    "reactstrap": "^6.5.0",
-    "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.7",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.4.1"
   },
   "devDependencies": {
-    "eslint": "^5.16.0",
+    "eslint": "^8.17.0",
-    "eslint-config-google": "^0.12.0",
+    "eslint-config-google": "^0.14.0",
-    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-react": "^7.30.0",
     "react-editable-list": "0.0.3"
   }
 }

pages/_app.js

@@ -1,12 +1,22 @@
-import App, {Container} from 'next/app';
+import App from 'next/app';
 import React from 'react';
 import {Provider} from 'react-redux';
 import Notifications from 'react-notify-toast';
-import Favicon from 'react-favicon';
+import Head from 'next/head';
 
 import withReduxStore from '../js/redux/reduxStoreBinder';
 import {verifyCredentials} from '../js/api.js';
 
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import '../public/static/css/errormessages.css';
+import '../public/static/css/everypage.css';
+import '../public/static/css/error.css';
+import '../public/static/css/numericinput.css';
+import '../public/static/css/index.css';
+import '../public/static/css/profile.css';
+import '../public/static/css/tournament.css';
+
 class TurniereApp extends App {
     componentDidMount() {
         verifyCredentials();
@@ -14,13 +24,17 @@ class TurniereApp extends App {
 
     render() {
         const {Component, pageProps, reduxStore} = this.props;
-        return (<Container>
+        return (
+            <>
+                <Head>
+                    <link rel="shortcut icon" href="/static/icons/favicon.ico" />
+                </Head>
                 <Notifications />
-            <Favicon url="/static/icons/favicon.ico"/>
                 <Provider store={reduxStore}>
                     <Component {...pageProps} />
                 </Provider>
-        </Container>);
+            </>
+        );
     }
 }
 

pages/create.js

@@ -9,7 +9,6 @@ import {
     Col,
     Collapse,
     Container,
-    CustomInput,
     Form,
     FormGroup,
     Input,
@@ -23,7 +22,6 @@ import {createTournament} from '../js/api';
 import {WarningPopup} from '../js/components/WarningPopup';
 import Router from 'next/router';
 
-import '../static/css/everypage.css';
 import RequireLogin from '../js/components/RequireLogin';
 import NumericInput from '../js/components/NumericInput';
 
@@ -102,15 +100,24 @@ class CreateTournamentForm extends React.Component {
                     <Input type="text" name="description" size="255" value={this.state.description}
                         onChange={this.handleDescriptionInput}/>
                 </FormGroup>
-                <FormGroup>
+                <FormGroup tag="fieldset">
-                    <CustomInput type="checkbox" id="public"
+                    <FormGroup check>
-                        label="Turnier öffentlich anzeigen (schreibgeschützt)" checked={this.state.public}
+                        <Label for="public" check>Turnier öffentlich anzeigen (schreibgeschützt)</Label>
+                        <Input type="checkbox" id="public"
+                            checked={this.state.public}
                             onChange={this.handlePublicInput}/>
-                    <CustomInput type="checkbox" id="mix-teams" label="Teams mischen"/>
+                    </FormGroup>
-                    <CustomInput type="checkbox" id="group-phase" label="Gruppenphase"
+                    <FormGroup check>
+                        <Label for="mix-teams" check>Teams mischen</Label>
+                        <Input type="checkbox" id="mix-teams"/>
+                    </FormGroup>
+                    <FormGroup check>
+                        <Label for="group-phase" check>Gruppenphase</Label>
+                        <Input type="checkbox" id="group-phase"
                             checked={this.state.groupPhaseEnabled}
                             onChange={this.handleGroupPhaseEnabledInput}/>
                     </FormGroup>
+                </FormGroup>
                 <Collapse isOpen={this.state.groupPhaseEnabled}>
                     <FormGroup>
                         <Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>

pages/faq.js

@@ -6,10 +6,6 @@ import {TurniereNavigation} from '../js/components/Navigation';
 import {BigImage} from '../js/components/BigImage';
 import {Footer} from '../js/components/Footer';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-import '../static/css/everypage.css';
-
 function Main() {
     return (<div className="main">
         <Container className="pb-5">

pages/imprint.js

@@ -6,9 +6,6 @@ import {TurniereNavigation} from '../js/components/Navigation';
 import {BigImage} from '../js/components/BigImage';
 import {Footer} from '../js/components/Footer';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-import '../static/css/everypage.css';
-
 function Main() {
     return (<div className="main running-text">
         <ImprintText/>

pages/index.js

@@ -9,11 +9,6 @@ import {TurniereNavigation} from '../js/components/Navigation';
 import {BigImage} from '../js/components/BigImage';
 import {Footer} from '../js/components/Footer';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-import '../static/css/everypage.css';
-import '../static/css/index.css';
-
 function Main() {
     return (<div className="main">
         <Marketing/>

pages/list.js

@@ -1,13 +1,13 @@
 import Head from 'next/head';
 import React from 'react';
-import {Card, CardBody, Container} from 'reactstrap';
+import {ButtonGroup, Card, CardBody, Container} from 'reactstrap';
 
 import {TurniereNavigation} from '../js/components/Navigation';
 import {Footer} from '../js/components/Footer';
 
-import '../static/css/everypage.css';
 import TournamentList from '../js/components/TournamentList';
 import {connect} from 'react-redux';
+import {LinkButton} from '../js/components/LinkButton';
 
 export default class PublicTournamentsPage extends React.Component {
     render() {
@@ -38,8 +38,10 @@ function PublicTournaments(props) {
                 <PublicTournamentsCard/>
             </Container>
             <Container className="pb-5 pt-3">
-                <a href='/private' className="btn btn-primary shadow">zu den privaten Turnieren</a>
+                <ButtonGroup>
-                <a href='/create' className="ml-3 btn btn-success shadow">neues Turnier erstellen</a>
+                    <LinkButton href="/private" outline={false} color='primary'>zu den privaten Turnieren</LinkButton>
+                    <LinkButton href="/private" outline={false} color='success'>neues Turnier erstellen</LinkButton>
+                </ButtonGroup>
             </Container>
         </div>);
     } else {

pages/login.js

@@ -5,8 +5,6 @@ import {TurniereNavigation} from '../js/components/Navigation';
 import {Footer} from '../js/components/Footer';
 import {Login} from '../js/components/Login';
 
-import '../static/css/everypage.css';
-
 export default class LoginPage extends React.Component {
     render() {
         return (<div className="main generic-fullpage-bg">

pages/privacy.js

@@ -6,10 +6,6 @@ import {TurniereNavigation} from '../js/components/Navigation';
 import {BigImage} from '../js/components/BigImage';
 import {Footer} from '../js/components/Footer';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-import '../static/css/everypage.css';
-
 function Main() {
     return (<div className="main running-text">
         <PrivacyText/>

pages/private.js

@@ -2,14 +2,14 @@ import Head from 'next/head';
 import React from 'react';
 import {connect} from 'react-redux';
 
-import {Card, CardBody, Container} from 'reactstrap';
+import {ButtonGroup, Card, CardBody, Container} from 'reactstrap';
 
 import {TurniereNavigation} from '../js/components/Navigation';
 import {Footer} from '../js/components/Footer';
 
-import '../static/css/everypage.css';
 import TournamentList from '../js/components/TournamentList';
 import RequireLogin from '../js/components/RequireLogin';
+import { LinkButton } from '../js/components/LinkButton';
 
 class PrivateTournamentsPage extends React.Component {
     render() {
@@ -41,8 +41,13 @@ function PrivateTournamentsPageContent(props) {
             <PrivateTournamentsCard/>
         </Container>
         <Container className="pb-5 pt-3">
-            <a href='/list' className="btn btn-primary shadow">zu den öffentlichen Turnieren</a>
+            <ButtonGroup>
-            {props.isSignedIn && <a href='/create' className="ml-3 btn btn-success shadow">neues Turnier erstellen</a>}
+                <LinkButton href="/list" outline={false} color='primary'>zu den öffentlichen Turnieren</LinkButton>
+                {
+                    props.isSignedIn &&
+                    <LinkButton href="/create" outline={false} color='success'>neues Turnier erstellen</LinkButton>
+                }
+            </ButtonGroup>
         </Container>
     </div>);
 }

pages/profile.js

@@ -1,15 +1,11 @@
 import Head from 'next/head';
 import React, {Component} from 'react';
-import {Button, Container, Form, Input, InputGroup, InputGroupAddon, Table} from 'reactstrap';
+import {Button, Container, Form, Input, InputGroup, Table} from 'reactstrap';
 
 import {TurniereNavigation} from '../js/components/Navigation';
 import {BigImage} from '../js/components/BigImage';
 import {Footer} from '../js/components/Footer';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-import '../static/css/everypage.css';
-import '../static/css/profile.css';
 import {connect} from 'react-redux';
 import {changeMail} from '../js/api';
 import {notify} from 'react-notify-toast';
@@ -91,9 +87,7 @@ class NewMailAddressInput extends Component {
             <InputGroup>
                 <Input type='email' placeholder={this.props.email} onChange={this.onChange} value={this.state.email}
                     required/>
-                <InputGroupAddon addonType='append'>
                 <Button color='primary' type='submit'>eintragen</Button>
-                </InputGroupAddon>
             </InputGroup>
         </Form>);
     }

pages/register.js

@@ -13,9 +13,6 @@ import {TurniereNavigation} from '../js/components/Navigation';
 import {Footer} from '../js/components/Footer';
 import {register} from '../js/api';
 
-import '../static/css/errormessages.css';
-import '../static/css/everypage.css';
-
 export default class RegisterPage extends React.Component {
     render() {
         return (<div className="main generic-fullpage-bg">

pages/tournament-edit.js

@@ -15,10 +15,6 @@ import {Login} from '../js/components/Login';
 import {ErrorPageComponent} from '../js/components/ErrorComponents';
 import {updateTeamName} from '../js/api';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-import '../static/css/everypage.css';
-import '../static/css/index.css';
 import {LoadingPage} from '../js/components/LoadingPage';
 
 class EditTournamentPage extends React.Component {

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 {EditButton, TournamentStatusBar} from '../js/components/TournamentStatusBar';
-import Navbar from 'react-bootstrap/Navbar';
+import {LinkButton} from '../js/components/LinkButton';
 import {TournamentBigImage} from '../js/components/TournamentBigImage';
 import {LoadingPage} from '../js/components/LoadingPage';
 
@@ -37,15 +37,14 @@ class StatisticsTournamentPage extends React.Component {
                 <TurniereNavigation/>
                 <TournamentBigImage {...tournamentStatistics}/>
                 <TournamentStatusBar>
-                    <Navbar.Brand>
+                    <ButtonGroup className='me-auto'>
-                        {tournamentStatistics.name}
                         <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>
+                        </LinkButton>
-                    </Navbar.Brand>
+                    </ButtonGroup>
                 </TournamentStatusBar>
                 <div className='pb-5'>
                     <StatisticsView tournamentStatistics={tournamentStatistics} />

pages/tournament.js

@@ -1,21 +1,18 @@
 import Head from 'next/head';
 import React from 'react';
 import {connect} from 'react-redux';
-import Navbar from 'react-bootstrap/Navbar';
+import {ButtonGroup} from 'reactstrap';
 
 
 import {ErrorPageComponent} from '../js/components/ErrorComponents';
 import {Footer} from '../js/components/Footer';
 import {TurniereNavigation} from '../js/components/Navigation';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-import '../static/css/everypage.css';
-import '../static/css/tournament.css';
 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';
 
@@ -41,18 +38,17 @@ class PrivateTournamentPage extends React.Component {
 
 function StatusBar(props) {
     return (<TournamentStatusBar>
-        <Navbar.Brand>
+        <ButtonGroup className='me-auto'>
-            {props.tournament.name}
             <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>);
 }
 
 

server.js

@@ -41,6 +41,7 @@ app.prepare()
             if (err) throw err;
         });
     })
-    .catch(() => {
+    .catch(err => {
+        console.log(err);
         process.exit(1);
     });