import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { Button } from '@blueprintjs/core';

class Settings extends PureComponent {
  onCloseClick() {
    this.props.goToMain();
  }

  render() {
    return <Button iconName="cross" onClick={() => this.onCloseClick()} />;
  }
}

Settings.propTypes = {
  goToMain: PropTypes.func.isRequired
};

const mapDispatchToProps = (dispatch) => ({
  goToMain: () => dispatch(push('/'))
});

export default connect(null, mapDispatchToProps)(Settings);

@@ -172,16 +172,36 @@
 %7B Button
+, InputGroup, Intent
  %7D from 
@@ -227,184 +227,1599 @@
 ;%0A%0Ac
-lass Settings extends PureComponent %7B%0A  onCloseClick() %7B%0A    this.props.goToMain();%0A  %7D%0A%0A  render() %7B%0A    return %3CButton iconName=%22cross%22 onClick=%7B() =%3E this.onCloseClick()%7D /%3E
+onst NavBar = (%7B onCloseClick %7D) =%3E (%0A  %3Cnav className=%22pt-navbar%22%3E%0A    %3Cdiv className=%22pt-navbar-group pt-align-left%22%3E%0A      %3Cdiv className=%22pt-navbar-heading%22%3ESettings%3C/div%3E%0A    %3C/div%3E%0A    %3Cdiv className=%22pt-navbar-group pt-align-right%22%3E%0A      %3CButton%0A        iconName=%22cross%22%0A        onClick=%7BonCloseClick%7D%0A        className=%22pt-minimal%22%0A      /%3E%0A    %3C/div%3E%0A  %3C/nav%3E%0A);%0A%0ANavBar.propTypes = %7B%0A  onCloseClick: PropTypes.func.isRequired%0A%7D;%0A%0Aconst Option = (%7B intent, title, value, unit %7D) =%3E (%0A  %3Clabel className=%22pt-label pt-inline%22%3E%0A    %3Cdiv className=%22d-inline-block w-exact-200%22%3E%7Btitle%7D%3C/div%3E%0A    %3CInputGroup%0A      intent=%7Bintent%7D%0A      value=%7Bunit ? %60$%7Bvalue%7D $%7Bunit%7D%60 : value%7D%0A    /%3E%0A  %3C/label%3E%0A);%0A%0AOption.propTypes = %7B%0A  intent: PropTypes.number.isRequired,%0A  title: PropTypes.string.isRequired,%0A  value: PropTypes.oneOfType(%5B%0A    PropTypes.string,%0A    PropTypes.number%0A  %5D).isRequired,%0A  unit: PropTypes.string%0A%7D;%0A%0Aclass Settings extends PureComponent %7B%0A  onCloseClick() %7B%0A    this.props.goToMain();%0A  %7D%0A%0A  render() %7B%0A    return (%0A      %3Cdiv className=%22settings bg-black vh-100%22%3E%0A        %3CNavBar onCloseClick=%7B() =%3E this.onCloseClick()%7D /%3E%0A        %3Cdiv className=%22container-fluid mt-4%22%3E%0A          %3COption intent=%7BIntent.PRIMARY%7D title=%22Focus Length%22 value=%7B25%7D unit=%22minutes%22 /%3E%0A          %3COption intent=%7BIntent.PRIMARY%7D title=%22Short Break Length%22 value=%7B5%7D unit=%22minutes%22 /%3E%0A          %3COption intent=%7BIntent.PRIMARY%7D title=%22Long Break Length%22 value=%7B25%7D unit=%22minutes%22 /%3E%0A          %3COption intent=%7BIntent.PRIMARY%7D title=%22Focus Rounds%22 value=%7B12%7D /%3E%0A        %3C/div%3E%0A      %3C/div%3E%0A    )
 ;%0A  

Update view of settings page