Revert "changed optics."

This reverts commit f84328fb1175b956f3670287091c0ed113ec376d.

src/App.js

@@ -134,7 +134,7 @@ class App extends React.Component {
     worksheets['Calendar'] = worksheet
     this.setState({ worksheets })
 
-    if (worksheet[2].length < 8 | worksheet[2].length > 9) {
+    if (worksheet[2].length < 8  | worksheet[2].length > 9) {
       throw Error('Wrong file structure.')
     }
     const matches = worksheet.slice(2, worksheet.length).map((matchData) => new Match.MatchClass(matchData))
@@ -317,51 +317,44 @@ class App extends React.Component {
     return (
       <div className='container'>
         <form>
-          <fieldset>
-            <legend>Input Files</legend>
-            <label htmlFor='PlayerList'>Swisstennis PlayerList.xls</label>
-            <input type='file' id='PlayerList' ref={(input) => { this.playerList = input }} accept='.xls' placeholder='PlayerList File' onChange={this.handlePlayerList} />
-            <label htmlFor='Calendar'>Swisstennis Calendar.xls</label>
-            <input type='file' id='Calendar' ref={(input) => { this.calendar = input }} accept='.xls' placeholder='Calendar File' onChange={this.handleCalendar} />
-          </fieldset>
-          <fieldset><legend>Filter</legend>
-            <label htmlFor='Date'>Datum</label>
-            <select id='Date' ref={(input) => { this.matchDate = input }} onChange={this.filterMatches}>
-              <option>{FILTER_OFF}</option>
-              {Object.keys(dates).map((key) => (
-                <option key={key} value={dates[key]}>{key}</option>
+          <label htmlFor='PlayerList'>Swisstennis PlayerList.xls</label>
+          <input type='file' id='PlayerList' ref={(input) => { this.playerList = input }} accept='.xls' placeholder='PlayerList File' onChange={this.handlePlayerList} />
+          <label htmlFor='Calendar'>Swisstennis Calendar.xls</label>
+          <input type='file' id='Calendar' ref={(input) => { this.calendar = input }} accept='.xls' placeholder='Calendar File' onChange={this.handleCalendar} />
+          <label htmlFor='Date'>Datum</label>
+          <select id='Date' ref={(input) => { this.matchDate = input }} onChange={this.filterMatches}>
+            <option>{FILTER_OFF}</option>
+            {Object.keys(dates).map((key) => (
+              <option key={key} value={dates[key]}>{key}</option>
             ))}
-            </select>
-            <label htmlFor='Place'>Ort</label>
-            <select id='Place' ref={(input) => { this.matchPlace = input }} onChange={this.filterMatches}>
-              <option>{FILTER_OFF}</option>
-              {places.map((place, key) => (
-                <option key={key}>{place}</option>
+          </select>
+          <label htmlFor='Place'>Ort</label>
+          <select id='Place' ref={(input) => { this.matchPlace = input }} onChange={this.filterMatches}>
+            <option>{FILTER_OFF}</option>
+            {places.map((place, key) => (
+              <option key={key}>{place}</option>
             ))}
-            </select>
-            <label htmlFor='MatchCategory'>Match Konkurrenz</label>
-            <select id='MatchCategory' ref={(input) => { this.matchCategory = input }} onChange={this.filterMatches}>
-              <option>{FILTER_OFF}</option>
-              {matchCategories.map((category, key) => (
-                <option key={key}>{category}</option>
+          </select>
+          <label htmlFor='MatchCategory'>Match Konkurrenz</label>
+          <select id='MatchCategory' ref={(input) => { this.matchCategory = input }} onChange={this.filterMatches}>
+            <option>{FILTER_OFF}</option>
+            {matchCategories.map((category, key) => (
+              <option key={key}>{category}</option>
             ))}
-            </select>
-            <label htmlFor='Junior'>Junior</label>
-            <input id='Junior' ref={(input) => { this.playerJunior = input }} type='checkbox' onChange={this.filterPlayers} />
-            <label htmlFor='Paid'>Bezahlt</label>
-            <input id='Paid' ref={(input) => { this.playerPaid = input }} type='checkbox' onChange={this.filterPlayers} />
-            <label htmlFor='PlayerCategory'>Spieler Konkurrenz</label>
-            <select id='PlayerCategory' ref={(input) => { this.playerCategory = input }} onChange={this.filterPlayers}>
-              <option>{FILTER_OFF}</option>
-              {playerCategories.map((category, key) => (
-                <option key={key}>{category}</option>
+          </select>
+          <label htmlFor='Junior'>Junior</label>
+          <input id='Junior' ref={(input) => { this.playerJunior = input }} type='checkbox' onChange={this.filterPlayers} />
+          <label htmlFor='Paid'>Bezahlt</label>
+          <input id='Paid' ref={(input) => { this.playerPaid = input }} type='checkbox' onChange={this.filterPlayers} />
+          <label htmlFor='PlayerCategory'>Spieler Konkurrenz</label>
+          <select id='PlayerCategory' ref={(input) => { this.playerCategory = input }} onChange={this.filterPlayers}>
+            <option>{FILTER_OFF}</option>
+            {playerCategories.map((category, key) => (
+              <option key={key}>{category}</option>
             ))}
-            </select>
-          </fieldset>
-          <fieldset><legend>Output Files</legend>
-            <button onClick={this.generateSchedule} disabled={!this.state.match.filtered.length}>Spielliste generieren</button>
-            <button onClick={this.generatePayTable} disabled={(!this.state.match.filtered.length | !this.state.player.filtered.length)}>Zahlliste generieren</button>
-          </fieldset>
+          </select>
+          <button onClick={this.generateSchedule} disabled={!this.state.match.filtered.length}>Spielliste generieren</button>
+          <button onClick={this.generatePayTable} disabled={(!this.state.match.filtered.length | !this.state.player.filtered.length)}>Zahlliste generieren</button>
         </form>
         <PlayerList player={this.state.player} />
         <MatchList match={this.state.match} />

src/match/components/match-list.js

@@ -9,17 +9,7 @@ class MatchList extends React.Component {
     return (
       <div>
         <h2>Matches ({filtered.length}/{matches.length})</h2>
-        <table className='table table-bordered table-striped'>
-          <thead>
-            <tr>
-              <th>Ort</th>
-              <th>Datum</th>
-              <th>Zeit</th>
-              <th>Konkurrenz</th>
-              <th>Spieler 1</th>
-              <th>Spieler 2</th>
-            </tr>
-          </thead>
+        <table>
           <tbody>
             {filtered.map((match, key) =>
               <MatchDisp key={key} match={match} />

src/player/components/player-list.js

@@ -8,7 +8,7 @@ class PlayerList extends React.Component {
     return (
       <div>
         <h2>Spielerliste ({filtered.length})</h2>
-        <table className='table table-bordered table-striped'>
+        <table>
           <thead>
             <tr>
               <th><i>Konkurrenz</i></th>