/** @jsx React.DOM */

define([
  'react'
], function (React) {

  return React.createClass({
    displayName: 'ConfigOptionField',

    propTypes: {
      handleChange: React.PropTypes.func.isRequired,
      name: React.PropTypes.string.isRequired,
      type: React.PropTypes.string.isRequired,
      value: React.PropTypes.any,
      required: React.PropTypes.bool,
      description: React.PropTypes.string.isRequired
    },

    checkbox() {
      return (
        <div className="grid-row">
          <div className="col-xs-12">
            <label className="checkbox text-left">
              <input type="checkbox" data-rel={this.props.name} onChange={this.props.handleChange} /> {this.props.description}
            </label>
          </div>
        </div>
      );
    },

    text() {
      return (
        <div className="grid-row">
          <div className="col-xs-12">
            <label className="text-left">{this.props.description}</label>
            <input type="text"
              className="form-control input-block-level"
              placeholder={this.props.description}
              defaultValue={this.props.value}
              required={this.props.required}
              data-rel={this.props.name}
              onChange={this.props.handleChange} />
          </div>
        </div>
      );
    },

    render() {
      return (
        <div className="form-group">
          {this.props.type === 'checkbox' ? this.checkbox() : this.text()}
        </div>
      )
    }
  });

});
/** @jsx React.DOM */

define([
  'react'
], function (React) {

  return React.createClass({
    displayName: 'ConfigOptionField',

    propTypes: {
      handleChange: React.PropTypes.func.isRequired,
      name: React.PropTypes.string.isRequired,
      type: React.PropTypes.string.isRequired,
      value: React.PropTypes.any,
      required: React.PropTypes.bool,
      description: React.PropTypes.string.isRequired
    },

    checkbox() {
      return (
        <div className="grid-row">
          <div className="col-xs-12">
            <label className="checkbox">
              <input type="checkbox" data-rel={this.props.name} onChange={this.props.handleChange} /> {this.props.description}
            </label>
          </div>
        </div>
      );
    },

    text() {
      return (
        <div className="grid-row">
          <div className="col-xs-12">
            <label>
              {this.props.description}
              <input type="text"
                className="form-control input-block-level"
                placeholder={this.props.description}
                defaultValue={this.props.value}
                required={this.props.required}
                data-rel={this.props.name}
                onChange={this.props.handleChange} />
            </label>
          </div>
        </div>
      );
    },

    render() {
      return (
        <div className="form-group">
          {this.props.type === 'checkbox' ? this.checkbox() : this.text()}
        </div>
      )
    }
  });

});
Fix style on add app form in app center
Fix style on add app form in app center

fixes PLAT-834

Test steps:
- The best app to test the form (has the most fields) is
  Blackboard Collaborate

Change-Id: I28ea6866fea7af357aac2958ec44f74f93f0eeb4
Reviewed-on: https://gerrit.instructure.com/47312
Tested-by: Jenkins <d95b56ce41a2e1ac4cecdd398defd7414407cc08@instructure.com>
Reviewed-by: Brad Humphrey <9233b6f5388d6867a2a7be14d8b4ba53c86cfde2@instructure.com>
QA-Review: August Thornton <9adc7a1161ddf32ff608de792a7e50179545f026@instructure.com>
Product-Review: Eric Berry <b4e131942074b4e4dafdcc14a63e85b7d8e18577@instructure.com>
