const ConfigurationPage = React.createClass({
  setWidth: function (event) {
    let width = event.target.value;

    this.setState(state => {
      return {
        width: width,
        height: state.height,
        showConsole: state.showConsole,
        darkTheme : state.darkTheme,
        layout: state.layout,
      };
    });
  },
  setHeight: function (event) {
    let height = event.target.value;

    this.setState(state => {
      return {
        width: state.width,
        height: height,
        showConsole: state.showConsole,
        darkTheme : state.darkTheme,
        layout: state.layout,
      };
    });
  },
  toggleDarkTheme : function(event) {
    var darkTheme = document.body.classList.toggle('dark')

    this.setState(state => {
      return {
        width: state.width,
        height: state.height,
        showConsole: state.showConsole,
        darkTheme : darkTheme,
        layout: state.layout,
      }
    })
  },
  changeLayout: function(event) {
    let layout = event.target.value;

    if(layout == 'overlay') {
      document.body.classList.add('layout-overlay');
      document.body.classList.remove('layout-sticker');
    }
    else if(layout == 'sticker') {
      document.body.classList.remove('layout-overlay');
      document.body.classList.add('layout-sticker');
    }
    else {
      document.body.classList.remove('layout-overlay');
      document.body.classList.remove('layout-sticker');
    }

    this.setState(state => {
      return {
        width: state.width,
        height: state.height,
        showConsole: state.showConsole,
        darkTheme : state.darkTheme,
        layout: layout,
      };
    })
  },
  getInitialState: () => {
    return {
      width: 1500,
      height: 900,
      showConsole: false,
      darkTheme : document.body.classList.contains('dark'),
      layout: document.body.classList.contains('layout-overlay') ? 'overlay' : (document.body.classList.contains('layout-sticker') ? 'sticker' : 'youtube'),
    };
  },
  render: function () {
    return (
      <div className="text-page">
        <h1>Configuration</h1>
        <form>
          <div className="form-group row">
            <label htmlFor="width" className="col-sm-4 form-control-label">Width</label>
            <div className="col-sm-8">
              <input type="number" className="form-control" id="width" value={this.state.width} onChange={this.setWidth} />
            </div>
          </div>
          <div className="form-group row">
            <label htmlFor="height" className="col-sm-4 form-control-label">Height</label>
            <div className="col-sm-8">
              <input type="number" className="form-control" id="height" value={this.state.height} onChange={this.setHeight} />
            </div>
          </div>
          <div className="form-group row">
            <label className="col-sm-4">Console</label>
            <div className="col-sm-8">
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={this.state.value} /> Show console
                </label>
              </div>
            </div>
          </div>
          <div className="form-group row">
            <label className="col-sm-4">Dark Theme</label>
            <div className="col-sm-8">
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={this.state.darkTheme} onChange={this.toggleDarkTheme} /> Dark theme
                </label>
              </div>
            </div>
          </div>
          <div className="form-group row">
            <label className="col-sm-4">Layout</label>
            <div className="col-sm-8">
              <div className="select">
                <select className="form-control" value={this.state.layout} onChange={this.changeLayout} >
                  <option value="youtube">Youtube</option>  
                  <option value="overlay">Overlay</option>  
                  <option value="sticker">Sticker</option>
                </select>
              </div>
            </div>
          </div>
        </form>
      </div>
    );
  }
});

module.exports = ConfigurationPage;

@@ -43,596 +43,8 @@
 s(%7B%0A
-  setWidth: function (event) %7B%0A    let width = event.target.value;%0A%0A    this.setState(state =%3E %7B%0A      return %7B%0A        width: width,%0A        height: state.height,%0A        showConsole: state.showConsole,%0A        darkTheme : state.darkTheme,%0A        layout: state.layout,%0A      %7D;%0A    %7D);%0A  %7D,%0A  setHeight: function (event) %7B%0A    let height = event.target.value;%0A%0A    this.setState(state =%3E %7B%0A      return %7B%0A        width: state.width,%0A        height: height,%0A        showConsole: state.showConsole,%0A        darkTheme : state.darkTheme,%0A        layout: state.layout,%0A      %7D;%0A    %7D);%0A  %7D,%0A
   to
@@ -73,24 +73,24 @@
 on(event) %7B%0A
+
     var dark
@@ -185,66 +185,8 @@
 n %7B%0A
-        width: state.width,%0A        height: state.height,%0A
     
@@ -289,23 +289,25 @@
 %0A      %7D
+;
 %0A    %7D)
+;
 %0A  %7D,%0A  
@@ -849,66 +849,8 @@
 n %7B%0A
-        width: state.width,%0A        height: state.height,%0A
     
@@ -961,16 +961,17 @@
 ;%0A    %7D)
+;
 %0A  %7D,%0A  
@@ -1012,46 +1012,8 @@
 n %7B%0A
-      width: 1500,%0A      height: 900,%0A
     
@@ -1365,16 +1365,16 @@
 on%3C/h1%3E%0A
+
         
@@ -1427,675 +1427,8 @@
 w%22%3E%0A
-            %3Clabel htmlFor=%22width%22 className=%22col-sm-4 form-control-label%22%3EWidth%3C/label%3E%0A            %3Cdiv className=%22col-sm-8%22%3E%0A              %3Cinput type=%22number%22 className=%22form-control%22 id=%22width%22 value=%7Bthis.state.width%7D onChange=%7Bthis.setWidth%7D /%3E%0A            %3C/div%3E%0A          %3C/div%3E%0A          %3Cdiv className=%22form-group row%22%3E%0A            %3Clabel htmlFor=%22height%22 className=%22col-sm-4 form-control-label%22%3EHeight%3C/label%3E%0A            %3Cdiv className=%22col-sm-8%22%3E%0A              %3Cinput type=%22number%22 className=%22form-control%22 id=%22height%22 value=%7Bthis.state.height%7D onChange=%7Bthis.setHeight%7D /%3E%0A            %3C/div%3E%0A          %3C/div%3E%0A          %3Cdiv className=%22form-group row%22%3E%0A
     

Remove width and height config