Use Field component in bug report dialog

This uses the field component in the bug report dialog, which generally improves
the styling to fit in more naturally with the rest of the app so that it feels
more trustworthy.

Fixes https://github.com/vector-im/riot-web/issues/9343

res/css/views/dialogs/_BugReportDialog.scss

@@ -14,39 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_BugReportDialog_field_container {
-    display: flex;
-}
-
-.mx_BugReportDialog_field_label {
-    flex-basis: 150px;
-
-    text-align: right;
-
-    padding-top: 9px;
-    padding-right: 4px;
-
-    line-height: 18px;
+.mx_BugReportDialog .mx_Field {
+    flex: 1;
 }
 
 .mx_BugReportDialog_field_input {
-    flex-grow: 1;
-
-    /* taken from mx_ChatInviteDialog_inputContainer */
-    border-radius: 3px;
-    border: solid 1px $input-border-color;
-
-    font-size: 14px;
-
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 7px;
-    padding-bottom: 7px;
-
-    margin-bottom: 4px;
-}
-
-.mx_BugReportDialog_field_input[type="text" i] {
-    padding-top: 9px;
-    padding-bottom: 9px;
+    // TODO: We should really apply this to all .mx_Field inputs.
+    // See https://github.com/vector-im/riot-web/issues/9344.
+    flex: 1;
 }

src/components/views/dialogs/BugReportDialog.js

@@ -108,6 +108,7 @@ export default class BugReportDialog extends React.Component {
         const Loader = sdk.getComponent("elements.Spinner");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Field = sdk.getComponent('elements.Field');
 
         let error = null;
         if (this.state.err) {
@@ -154,36 +155,29 @@ export default class BugReportDialog extends React.Component {
                             },
                         ) }
                     </b></p>
-                    <div className="mx_BugReportDialog_field_container">
-                        <label
-                            htmlFor="mx_BugReportDialog_issueUrl"
-                            className="mx_BugReportDialog_field_label"
-                        >
-                            { _t("What GitHub issue are these logs for?") }
-                        </label>
-                        <input
-                            id="mx_BugReportDialog_issueUrl"
-                            type="text"
-                            className="mx_BugReportDialog_field_input"
-                            onChange={this._onIssueUrlChange}
-                            value={this.state.issueUrl}
-                            placeholder="https://github.com/vector-im/riot-web/issues/..."
-                        />
-                    </div>
-                    <div className="mx_BugReportDialog_field_container">
-                        <label
-                            htmlFor="mx_BugReportDialog_notes_label"
-                            className="mx_BugReportDialog_field_label"
-                        >
-                            { _t("Notes:") }
-                        </label>
-                        <textarea
-                            className="mx_BugReportDialog_field_input"
-                            rows={5}
-                            onChange={this._onTextChange}
-                            value={this.state.text}
-                        />
-                    </div>
+                    <Field
+                        id="mx_BugReportDialog_issueUrl"
+                        type="text"
+                        className="mx_BugReportDialog_field_input"
+                        label={_t("GitHub issue")}
+                        onChange={this._onIssueUrlChange}
+                        value={this.state.issueUrl}
+                        placeholder="https://github.com/vector-im/riot-web/issues/..."
+                    />
+                    <Field
+                        className="mx_BugReportDialog_field_input"
+                        element="textarea"
+                        label={_t("Notes")}
+                        rows={5}
+                        onChange={this._onTextChange}
+                        value={this.state.text}
+                        placeholder={_t(
+                            "If there is additional context that would help in " +
+                            "analysing the issue, such as what you were doing at " +
+                            "the time, room IDs, user IDs, etc., " +
+                            "please include those things here.",
+                        )}
+                    />
                     {progress}
                     {error}
                 </div>

src/i18n/strings/en_EN.json

@@ -1042,8 +1042,9 @@
     "Failed to send logs: ": "Failed to send logs: ",
     "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.",
     "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.": "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.",
-    "What GitHub issue are these logs for?": "What GitHub issue are these logs for?",
-    "Notes:": "Notes:",
+    "GitHub issue": "GitHub issue",
+    "Notes": "Notes",
+    "If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here.": "If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here.",
     "Send logs": "Send logs",
     "Unable to load commit detail: %(msg)s": "Unable to load commit detail: %(msg)s",
     "Unavailable": "Unavailable",