Tweak the feedbacks a tad

res/css/_components.scss

@@ -63,6 +63,7 @@
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
+@import "./views/dialogs/_BetaFeedbackDialog.scss";
 @import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";

res/css/structures/_SpaceRoomView.scss

@@ -339,6 +339,15 @@ $SpaceRoomViewInnerWidth: 428px;
         .mx_SearchBox {
             margin: 0 0 20px;
         }
+
+        .mx_SpaceFeedbackPrompt {
+            margin-bottom: 16px;
+
+            // hide the HR as we have our own
+            & + hr {
+                display: none;
+            }
+        }
     }
 
     .mx_SpaceRoomView_privateScope {
@@ -495,7 +504,7 @@ $SpaceRoomViewInnerWidth: 428px;
         }
 
         .mx_AccessibleButton_kind_link {
-            color: $accent-color-alt;
+            color: $accent-color;
             position: relative;
             padding: 0 0 0 24px;
             margin-left: 8px;
@@ -508,7 +517,7 @@ $SpaceRoomViewInnerWidth: 428px;
                 left: 0;
                 height: 16px;
                 width: 16px;
-                background-color: $accent-color-alt;
+                background-color: $accent-color;
                 mask-repeat: no-repeat;
                 mask-size: contain;
                 mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');

res/css/views/dialogs/_BetaFeedbackDialog.scss

@@ -0,0 +1,30 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BetaFeedbackDialog {
+    .mx_BetaFeedbackDialog_subheading {
+        color: $secondary-fg-color;
+        font-size: $font-14px;
+        line-height: $font-20px;
+        margin-bottom: 24px;
+    }
+
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+        font-size: inherit;
+        line-height: inherit;
+    }
+}

src/components/views/dialogs/BetaFeedbackDialog.tsx

@@ -23,6 +23,13 @@ import SdkConfig from "../../../SdkConfig";
 import {IDialogProps} from "./IDialogProps";
 import SettingsStore from "../../../settings/SettingsStore";
 import {submitFeedback} from "../../../rageshake/submit-rageshake";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {USER_LABS_TAB} from "./UserSettingsDialog";
 
 interface IProps extends IDialogProps {
     featureId: string;
@@ -32,25 +39,47 @@ const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
     const info = SettingsStore.getBetaInfo(featureId);
 
     const [comment, setComment] = useState("");
+    const [canContact, setCanContact] = useState(false);
 
     const sendFeedback = async (ok: boolean) => {
         if (!ok) return onFinished(false);
 
-        submitFeedback(SdkConfig.get().bug_report_endpoint_url, info.feedbackLabel, comment);
+        submitFeedback(SdkConfig.get().bug_report_endpoint_url, info.feedbackLabel, comment, canContact);
         onFinished(true);
+
+        Modal.createTrackedDialog("Beta Dialog Sent", featureId, InfoDialog, {
+            title: _t("Beta feedback"),
+            description: _t("Thank you for your feedback, we really appreciate it."),
+            button: _t("Done"),
+            hasCloseButton: false,
+            fixedWidth: false,
+        });
     };
 
     return (<QuestionDialog
-        className="mx_FeedbackDialog"
+        className="mx_BetaFeedbackDialog"
         hasCancelButton={true}
         title={_t("Beta feedback")}
         description={<React.Fragment>
+            <div className="mx_BetaFeedbackDialog_subheading">
                 { _t(info.feedbackSubheading) }
 
+                { _t("Your platform and username will be noted to help us use your feedback as much as we can.")}
+
+                <AccessibleButton kind="link" onClick={() => {
+                    onFinished(false);
+                    defaultDispatcher.dispatch({
+                        action: Action.ViewUserSettings,
+                        initialTabId: USER_LABS_TAB,
+                    });
+                }}>
+                    { _t("To leave the beta, visit your settings.") }
+                </AccessibleButton>
+            </div>
+
             <Field
                 id="feedbackComment"
-                label={_t("Add comment")}
+                label={_t("Feedback")}
-                placeholder={_t("Comment")}
                 type="text"
                 autoComplete="off"
                 value={comment}
@@ -59,6 +88,13 @@ const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
                     setComment(ev.target.value);
                 }}
             />
+
+            <StyledCheckbox
+                checked={canContact}
+                onClick={e => setCanContact((e.target as HTMLInputElement).checked)}
+            >
+                { _t("You may contact me if you have any follow up questions") }
+            </StyledCheckbox>
         </React.Fragment>}
         button={_t("Send feedback")}
         buttonDisabled={!comment}

src/i18n/strings/en_EN.json

@@ -2065,8 +2065,11 @@
     "Invite anyway": "Invite anyway",
     "Close dialog": "Close dialog",
     "Beta feedback": "Beta feedback",
-    "Add comment": "Add comment",
+    "Thank you for your feedback, we really appreciate it.": "Thank you for your feedback, we really appreciate it.",
-    "Comment": "Comment",
+    "Your platform and username will be noted to help us use your feedback as much as we can.": "Your platform and username will be noted to help us use your feedback as much as we can.",
+    "To leave the beta, visit your settings.": "To leave the beta, visit your settings.",
+    "Feedback": "Feedback",
+    "You may contact me if you have any follow up questions": "You may contact me if you have any follow up questions",
     "Send feedback": "Send feedback",
     "Please tell us what went wrong or, better, create a GitHub issue that describes the problem.": "Please tell us what went wrong or, better, create a GitHub issue that describes the problem.",
     "Preparing to send logs": "Preparing to send logs",
@@ -2194,9 +2197,10 @@
     "Rate %(brand)s": "Rate %(brand)s",
     "Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
     "Please go into as much detail as you like, so we can track down the problem.": "Please go into as much detail as you like, so we can track down the problem.",
+    "Add comment": "Add comment",
+    "Comment": "Comment",
     "There are two ways you can provide feedback and help us improve %(brand)s.": "There are two ways you can provide feedback and help us improve %(brand)s.",
     "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.": "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.",
-    "Feedback": "Feedback",
     "Report a bug": "Report a bug",
     "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.": "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.",
     "Confirm abort of host creation": "Confirm abort of host creation",

src/rageshake/submit-rageshake.ts

@@ -269,7 +269,7 @@ function uint8ToString(buf: Buffer) {
     return out;
 }
 
-export async function submitFeedback(endpoint: string, label: string, comment: string) {
+export async function submitFeedback(endpoint: string, label: string, comment: string, canContact = false) {
     let version = "UNKNOWN";
     try {
         version = await PlatformPeg.get().getAppVersion();
@@ -278,10 +278,12 @@ export async function submitFeedback(endpoint: string, label: string, comment: s
     const body = new FormData();
     body.append("label", label);
     body.append("text", comment);
+    body.append("can_contact", canContact ? "yes" : "no");
 
     body.append("app", "element-web");
     body.append("version", version);
     body.append("platform", PlatformPeg.get().getHumanReadableName());
+    body.append("user_id", MatrixClientPeg.get()?.getUserId());
 
     await _submitReport(SdkConfig.get().bug_report_endpoint_url, body, () => {});
 }