fix: report page styling

src/renderer/component/common/form-components/form-field.jsx

@@ -56,6 +56,8 @@ export class FormField extends React.PureComponent<Props> {
             />
           </div>
         );
+      } else if (type === 'textarea') {
+        input = <textarea type={type} id={name} {...inputProps} />;
       } else {
         input = <input type={type} id={name} {...inputProps} />;
       }

src/renderer/component/router/view.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import SettingsPage from 'page/settings';
 import HelpPage from 'page/help';
-import ReportPage from 'page/report.js';
+import ReportPage from 'page/report';
 import WalletPage from 'page/wallet';
-import GetCreditsPage from '../../page/getCredits';
+import GetCreditsPage from 'page/getCredits';
 import SendReceivePage from 'page/sendCredits';
 import ShowPage from 'page/show';
 import PublishPage from 'page/publish';

src/renderer/page/report/index.js

@@ -0,0 +1,4 @@
+import { connect } from 'react-redux';
+import ReportPage from './view';
+
+export default connect(null, null)(ReportPage);

src/renderer/page/report/view.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import Button from 'component/button';
-import { FormRow } from 'component/common/form';
+import { FormRow, FormField } from 'component/common/form';
 import { doShowSnackBar } from 'redux/actions/app';
-import lbry from '../lbry.js';
+import lbry from 'lbry';
+import Page from 'component/page';
 
 class ReportPage extends React.Component {
   constructor(props) {
@@ -14,8 +15,14 @@ class ReportPage extends React.Component {
     };
   }
 
+  onMessageChange(event) {
+    this.setState({
+      message: event.target.value,
+    });
+  }
+
   submitMessage() {
-    const message = this.state.message;
+    const { message } = this.state;
     if (message) {
       this.setState({
         submitting: true,
@@ -37,58 +44,55 @@ class ReportPage extends React.Component {
     }
   }
 
-  onMessageChange(event) {
-    this.setState({
-      message: event.target.value,
-    });
-  }
-
   render() {
     return (
-      <main className="main--single-column">
+      <Page>
-        <section className="card">
+        <section className="card card--section">
           <div className="card__content">
-            <h3>{__('Report an Issue')}</h3>
+            <div className="card__title">{__('Report an Issue')}</div>
             <p>
               {__(
                 'Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!'
               )}
             </p>
-            <div className="form-row">
+            <FormRow>
-              <FormRow
+              <FormField
                 type="textarea"
                 rows="10"
                 name="message"
+                stretch
                 value={this.state.message}
                 onChange={event => {
                   this.onMessageChange(event);
                 }}
                 placeholder={__('Description of your issue')}
               />
-            </div>
+            </FormRow>
-            <div className="form-row form-row-submit">
+            <div className="card__actions">
-              <button
+              <Button
+                button="primary"
                 onClick={event => {
                   this.submitMessage(event);
                 }}
                 className={`button-block button-primary ${this.state.submitting ? 'disabled' : ''}`}
               >
                 {this.state.submitting ? __('Submitting...') : __('Submit Report')}
-              </button>
+              </Button>
             </div>
           </div>
         </section>
-        <section className="card">
+        <section className="card card--section">
-          <div className="card__content">
+          <div className="card__title">{__('Developer?')}</div>
-            <h3>{__('Developer?')}</h3>
+          <p>
             {__('You can also')}{' '}
             <Button
+              button="link"
               href="https://github.com/lbryio/lbry/issues"
               label={__('submit an issue on GitHub')}
             />.
-          </div>
+          </p>
         </section>
-      </main>
+      </Page>
     );
   }
 }

src/renderer/scss/_gui.scss

@@ -86,7 +86,6 @@ input {
   &[type='file'] {
     border-bottom: none;
   }
-
   &.input-copyable {
     flex: 1;
     background: var(--input-copyable-bg);
@@ -106,6 +105,14 @@ input {
   }
 }
 
+textarea {
+  font-family: 'metropolis-medium';
+  border: 1px solid var(--color-divider);
+  font-size: 0.8em;
+  width: 100%;
+  padding: $spacing-vertical * 1/3;
+}
+
 input::placeholder {
   opacity: 0.5;
 }