Make consistent style with the second number selection

pages/create.js

@@ -11,6 +11,7 @@ import EditableStringList from '../js/components/EditableStringList';
 import {createTournament} from '../js/api';
 
 import '../static/css/everypage.css';
+import '../static/css/create.css';
 import RequireLogin from '../js/components/RequireLogin';
 
 class CreatePage extends React.Component {
@@ -73,9 +74,10 @@ class CreateTournamentForm extends React.Component {
         this.handleNameInput = this.handleNameInput.bind(this);
         this.handleDescriptionInput = this.handleDescriptionInput.bind(this);
         this.handlePublicInput = this.handlePublicInput.bind(this);
-        this.handleGroupSizeInput = this.handleGroupSizeInput.bind(this);
         this.increaseGroupAdvance = this.increaseGroupAdvance.bind(this);
         this.decreaseGroupAdvance = this.decreaseGroupAdvance.bind(this);
+        this.increaseGroupSize = this.increaseGroupSize.bind(this);
+        this.decreaseGroupSize = this.decreaseGroupSize.bind(this);
         this.generateTournamentCreationObject = this.generateTournamentCreationObject.bind(this);
 
         this.create = this.create.bind(this);
@@ -107,24 +109,32 @@ class CreateTournamentForm extends React.Component {
                     className="groupphasefader">
                     <FormGroup>
                         <Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>
-                        <Input type="number" name="teams-per-group" min="3"
+                        <InputGroup>
-                            value={this.state.groupSize} onChange={this.handleGroupSizeInput}/>
+                            <InputGroupAddon addonType="prepend">
+                                <Button onClick={this.decreaseGroupSize} className="btn-width"
+                                    color='primary' outline>-1</Button>
+                            </InputGroupAddon>
+                            <Input className='font-weight-bold' value={this.state.groupSize}
+                                disabled type='number' step='1' placeholder='0'/>
+                            <InputGroupAddon addonType="append">
+                                <Button onClick={this.increaseGroupSize} className="btn-width"
+                                    color='primary' outline>+1</Button>
+                            </InputGroupAddon>
+                        </InputGroup>
                     </FormGroup>
                     <FormGroup>
                         <Label for="teams-group-to-playoff">Wie viele Teams sollen nach der Gruppenphase
                                 weiterkommen?</Label>
                         <InputGroup>
                             <InputGroupAddon addonType="prepend">
-                                <Button onClick={this.decreaseGroupAdvance} color='primary' outline>
+                                <Button onClick={this.decreaseGroupAdvance} className="btn-width"
-                                    <img src="../static/icons/chevron-left.svg"/>
+                                    color='primary' outline>&#247;2</Button>
-                                </Button>
                             </InputGroupAddon>
                             <Input className='font-weight-bold' value={this.state.groupAdvance}
                                 disabled type='number' step='1' placeholder='0'/>
                             <InputGroupAddon addonType="append">
-                                <Button onClick={this.increaseGroupAdvance} color='primary' outline>
+                                <Button onClick={this.increaseGroupAdvance} className="btn-width"
-                                    <img src="../static/icons/chevron-right.svg"/>
+                                    color='primary' outline>&#215;2</Button>
-                                </Button>
                             </InputGroupAddon>
                         </InputGroup>
                     </FormGroup>
@@ -175,19 +185,22 @@ class CreateTournamentForm extends React.Component {
         }
     }
 
-    handleGroupSizeInput(input) {
+    increaseGroupSize() {
-        const newSize = input.target.value;
+        this.setState({groupSize: this.state.groupSize+1});
+    }
 
-        if (newSize === undefined || newSize < 2) {
+    decreaseGroupSize() {
-            return;
+        const newGroupSize = this.state.groupSize - 1;
-        }
 
-        if (newSize < this.state.groupAdvance) {
+        if (newGroupSize >= 3) {
-            this.setState({
+            if (newGroupSize >= this.state.groupAdvance) {
-                groupSize: newSize, groupAdvance: Math.floor(this.state.groupAdvance / 2)
+                this.setState({groupSize: newGroupSize});
-            });
+            } else {
-        } else {
+                this.setState({
-            this.setState({groupSize: newSize});
+                    groupSize: newGroupSize,
+                    groupAdvance: Math.floor(this.state.groupAdvance / 2)
+                });
+            }
         }
     }
 

static/css/create.css

@@ -0,0 +1,4 @@
+
+.btn-width {
+    width: 48px;
+}

static/icons/chevron-left.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
-  <path d="M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z" transform="translate(1)" />
-</svg>

static/icons/chevron-right.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
-  <path d="M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z" transform="translate(1)" />
-</svg>