fix text areas and bug reporting

ui/js/component/form.js

@@ -109,7 +109,7 @@ export class FormField extends React.Component {
       {this.props.children}
     </this._element>;
 
-    return <div className="form-field">
+    return <div className={"form-field form-field--" + this.props.type}>
       { this.props.prefix ? <span className="form-field__prefix">{this.props.prefix}</span> : '' }
       { renderElementInsideLabel ?
           <label htmlFor={elementId} className={"form-field__label " + (isError ? 'form-field__label--error' : '')}>

ui/js/page/help/index.js

@@ -1,7 +1,14 @@
 import React from 'react'
+import {
+  doNavigate
+} from 'actions/app'
 import {
   connect
 } from 'react-redux'
 import HelpPage from './view'
 
-export default connect(null, null)(HelpPage)
+const perform = (dispatch) => ({
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
+})
+
+export default connect(null, perform)(HelpPage)

ui/js/page/help/view.jsx

@@ -30,6 +30,11 @@ class HelpPage extends React.Component {
 
   render() {
     let ver, osName, platform, newVerLink;
+
+    const {
+      navigate
+    } = this.props
+
     if (this.state.versionInfo) {
       ver = this.state.versionInfo;
 

ui/js/page/report.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'component/link';
+import {FormRow} from 'component/form'
 import Modal from '../component/modal.js';
 import lbry from '../lbry.js';
 
@@ -38,18 +39,22 @@ class ReportPage extends React.Component {
     return (
       <main className="main--single-column">
         <section className="card">
-          <h3>Report an Issue</h3>
+          <div className="card__content">
-          <p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p>
+            <h3>Report an Issue</h3>
-          <div className="form-row">
+            <p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p>
-            <textarea ref={(t) => this._messageArea = t} cols="80" rows="10" name="message" type="text"/>
+            <div className="form-row">
-          </div>
+              <FormRow type="textarea" ref={(t) => this._messageArea = t} rows="10" name="message" placeholder="Description of your issue" />
-          <div className="form-row form-row-submit">
+            </div>
-            <button onClick={(event) => { this.submitMessage(event) }} className={'button-block button-primary ' + (this.state.submitting ? 'disabled' : '')}>{this.state.submitting ? 'Submitting...' : 'Submit Report'}</button>
+            <div className="form-row form-row-submit">
+              <button onClick={(event) => { this.submitMessage(event) }} className={'button-block button-primary ' + (this.state.submitting ? 'disabled' : '')}>{this.state.submitting ? 'Submitting...' : 'Submit Report'}</button>
+            </div>
           </div>
         </section>
         <section className="card">
-          <h3>Developer?</h3>
+          <div className="card__content">
-          You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
+            <h3>Developer?</h3>
+            You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
+          </div>
         </section>
         <Modal isOpen={this.state.modal == 'submitted'} contentLabel="Bug report submitted"
                onConfirmed={(event) => { this.closeModal(event) }}>

ui/scss/component/_form-field.scss

@@ -109,6 +109,7 @@ input[type="text"].input-copyable {
   }
 
   textarea {
+    padding: 2px;
     border: $width-input-border solid $color-form-border;
   }
 }
@@ -140,8 +141,11 @@ input[type="text"].input-copyable {
   text-align: right;
 }
 
+.form-field--textarea {
+  width: 100%;
+}
 .form-field__input-textarea {
-  width: $width-input-text;
+  width: 100%;
 }
 
 .form-field__error, .form-field__helper {