Improve modal boxes

This commit is contained in:
Itay Mizeretz 2017-10-17 11:17:41 +03:00
parent 085f0d2d69
commit 1011e731af
2 changed files with 29 additions and 25 deletions

View File

@ -134,21 +134,23 @@ class MapPageComponent extends React.Component {
return (
<ModalContainer onClose={() => this.setState({showKillDialog: false})}>
<ModalDialog onClose={() => this.setState({showKillDialog: false})}>
<h1>Kill all monkeys</h1>
<h2>Are you sure you want to kill all monkeys?</h2>
<p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
Are you sure you want to kill all monkeys?
This might take a few moments...
</p>
<button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
onClick={() => {
this.killAllMonkeys();
this.setState({showKillDialog: false});
}}>
Kill all monkeys
</button>
<button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
onClick={() => this.setState({showKillDialog: false})}>
Cancel
</button>
<div className="text-center">
<button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
onClick={() => {
this.killAllMonkeys();
this.setState({showKillDialog: false});
}}>
Kill all monkeys
</button>
<button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
onClick={() => this.setState({showKillDialog: false})}>
Cancel
</button>
</div>
</ModalDialog>
</ModalContainer>
)

View File

@ -33,7 +33,7 @@ class StartOverPageComponent extends React.Component {
return (
<ModalContainer onClose={() => this.setState({showCleanDialog: false})}>
<ModalDialog onClose={() => this.setState({showCleanDialog: false})}>
<h1>Reset environment</h1>
<h2>Reset environment</h2>
<p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
Are you sure you want to reset the environment?
</p>
@ -46,17 +46,19 @@ class StartOverPageComponent extends React.Component {
:
<div />
}
<button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
onClick={() => {
this.cleanup();
this.setState({showCleanDialog: false});
}}>
Reset environment
</button>
<button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
onClick={() => this.setState({showCleanDialog: false})}>
Cancel
</button>
<div className="text-center">
<button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
onClick={() => {
this.cleanup();
this.setState({showCleanDialog: false});
}}>
Reset environment
</button>
<button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
onClick={() => this.setState({showCleanDialog: false})}>
Cancel
</button>
</div>
</ModalDialog>
</ModalContainer>
)