diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 3525aa2ba0f8..7ff0d60c5dd5 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -324,6 +324,7 @@ @import "./views/toasts/_IncomingCallToast.pcss"; @import "./views/toasts/_NonUrgentEchoFailureToast.pcss"; @import "./views/typography/_Heading.pcss"; +@import "./views/user-onboarding/_UserOnboardingFeedback.pcss"; @import "./views/user-onboarding/_UserOnboardingHeader.pcss"; @import "./views/user-onboarding/_UserOnboardingList.pcss"; @import "./views/user-onboarding/_UserOnboardingPage.pcss"; diff --git a/res/css/views/user-onboarding/_UserOnboardingFeedback.pcss b/res/css/views/user-onboarding/_UserOnboardingFeedback.pcss new file mode 100644 index 000000000000..92aaac2cbd84 --- /dev/null +++ b/res/css/views/user-onboarding/_UserOnboardingFeedback.pcss @@ -0,0 +1,41 @@ +/* +Copyright 2022 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_UserOnboardingFeedback { + display: flex; + flex-direction: row; + padding: $spacing-32; + border-radius: 8px; + background: $system; + gap: $spacing-64; + + .mx_UserOnboardingFeedback_content { + display: flex; + flex-direction: column; + margin-right: auto; + gap: 6px; + + .mx_UserOnboardingFeedback_text { + color: $secondary-content; + } + } + + .mx_UserOnboardingFeedback_action.mx_AccessibleButton { + background: transparent; + min-width: 180px; + align-self: center; + } +} diff --git a/src/components/views/user-onboarding/UserOnboardingFeedback.tsx b/src/components/views/user-onboarding/UserOnboardingFeedback.tsx new file mode 100644 index 000000000000..6aabb50f2a9f --- /dev/null +++ b/src/components/views/user-onboarding/UserOnboardingFeedback.tsx @@ -0,0 +1,54 @@ +/* +Copyright 2022 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. +*/ + +import React from "react"; + +import { _t } from "../../../languageHandler"; +import Modal from "../../../Modal"; +import SdkConfig from "../../../SdkConfig"; +import AccessibleButton from "../../views/elements/AccessibleButton"; +import Heading from "../../views/typography/Heading"; +import FeedbackDialog from "../dialogs/FeedbackDialog"; + +export function UserOnboardingFeedback() { + if (!SdkConfig.get().bug_report_endpoint_url) { + return null; + } + + return ( +
+
+ + { _t("How are you finding Element so far?") } + +
+ { _t("We’d appreciate any feedback on how you’re finding Element.") } +
+
+ { + Modal.createDialog(FeedbackDialog, { + feature: "use-case-selection", + }); + }} + > + { _t("Feedback") } + +
+ ); +} diff --git a/src/components/views/user-onboarding/UserOnboardingList.tsx b/src/components/views/user-onboarding/UserOnboardingList.tsx index 6fb52e69b359..6f84b7fcb465 100644 --- a/src/components/views/user-onboarding/UserOnboardingList.tsx +++ b/src/components/views/user-onboarding/UserOnboardingList.tsx @@ -22,6 +22,7 @@ import { _t } from "../../../languageHandler"; import SdkConfig from "../../../SdkConfig"; import ProgressBar from "../../views/elements/ProgressBar"; import Heading from "../../views/typography/Heading"; +import { UserOnboardingFeedback } from "./UserOnboardingFeedback"; import { UserOnboardingTask } from "./UserOnboardingTask"; export function UserOnboardingList() { @@ -52,6 +53,9 @@ export function UserOnboardingList() {
+ { waiting === 0 && ( + + ) }
    { tasks.map(([task, completed]) => ( diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f95e91ab4f29..11646891b79d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1147,6 +1147,9 @@ "Anchor": "Anchor", "Headphones": "Headphones", "Folder": "Folder", + "How are you finding Element so far?": "How are you finding Element so far?", + "We’d appreciate any feedback on how you’re finding Element.": "We’d appreciate any feedback on how you’re finding Element.", + "Feedback": "Feedback", "Secure messaging for friends and family.": "Secure messaging for friends and family.", "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.": "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.", "Start your first chat": "Start your first chat", @@ -2582,7 +2585,6 @@ "Feedback sent": "Feedback sent", "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.", - "Feedback": "Feedback", "You may contact me if you want to follow up or to let me test out upcoming ideas": "You may contact me if you want to follow up or to let me test out upcoming ideas", "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.": "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.", "Report a bug": "Report a bug",