From 3948520eaa8a627653e0d9bc24f54f862179bb77 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 1 Apr 2019 17:39:12 +0100
Subject: [PATCH] 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   | 37 ++-----------
 .../views/dialogs/BugReportDialog.js          | 54 +++++++++----------
 src/i18n/strings/en_EN.json                   |  5 +-
 3 files changed, 32 insertions(+), 64 deletions(-)

diff --git a/res/css/views/dialogs/_BugReportDialog.scss b/res/css/views/dialogs/_BugReportDialog.scss
index e00d446eda..90ef55b945 100644
--- a/res/css/views/dialogs/_BugReportDialog.scss
+++ b/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;
 }
diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
index c874049cc6..4f9b592691 100644
--- a/src/components/views/dialogs/BugReportDialog.js
+++ b/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>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index b40c6aab13..37584dbb9d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",