From 1e690593da49ca5ac1fa16977e6de33c8c18d871 Mon Sep 17 00:00:00 2001 From: Taher <8665427+nullhook@users.noreply.github.com> Date: Wed, 14 Dec 2022 18:02:13 -0800 Subject: [PATCH] Revised copy for help improve UI on the new onboarding page (#16363) --- browser/ui/webui/brave_welcome_ui.cc | 2 -- .../components/help-improve/index.tsx | 25 +++++++++++++------ .../components/help-improve/style.ts | 13 +++++----- components/brave_welcome_ui/stories/locale.ts | 7 +++--- .../resources/brave_welcome_strings.grdp | 10 +++----- 5 files changed, 30 insertions(+), 27 deletions(-) diff --git a/browser/ui/webui/brave_welcome_ui.cc b/browser/ui/webui/brave_welcome_ui.cc index e863dedcc691..2e62f9a46adf 100644 --- a/browser/ui/webui/brave_welcome_ui.cc +++ b/browser/ui/webui/brave_welcome_ui.cc @@ -69,8 +69,6 @@ constexpr webui::LocalizedString kLocalizedStrings[] = { IDS_BRAVE_WELCOME_SELECT_ALL_BUTTON_LABEL}, {"braveWelcomeHelpImproveBraveTitle", IDS_BRAVE_WELCOME_HELP_IMPROVE_BRAVE_TITLE}, - {"braveWelcomeHelpImproveBraveDesc", - IDS_BRAVE_WELCOME_HELP_IMPROVE_BRAVE_DESC}, {"braveWelcomeSendReportsLabel", IDS_BRAVE_WELCOME_SEND_REPORTS_LABEL}, {"braveWelcomeSendInsightsLabel", IDS_BRAVE_WELCOME_SEND_INSIGHTS_LABEL}, {"braveWelcomeSetupCompleteLabel", IDS_BRAVE_WELCOME_SETUP_COMPLETE_LABEL}, diff --git a/components/brave_welcome_ui/components/help-improve/index.tsx b/components/brave_welcome_ui/components/help-improve/index.tsx index b4d575b76e97..1e5f4f8b7d48 100644 --- a/components/brave_welcome_ui/components/help-improve/index.tsx +++ b/components/brave_welcome_ui/components/help-improve/index.tsx @@ -13,7 +13,7 @@ import { getLocale, splitStringForTag } from '$web-common/locale' interface InputCheckboxProps { onChange?: (e: React.ChangeEvent) => void - labelText: string + children: React.ReactNode id?: string isChecked: boolean } @@ -27,7 +27,7 @@ function InputCheckbox (props: InputCheckboxProps) { onChange={props.onChange} />
- {props.labelText} + {props.children}
) @@ -58,13 +58,14 @@ function HelpImprove () { const changeSettingsNote = splitStringForTag(getLocale('braveWelcomeChangeSettingsNote')) const readPrivacyPolicy = splitStringForTag(getLocale('braveWelcomePrivacyPolicyNote')) + const diagnosticReportsLabel = splitStringForTag(getLocale('braveWelcomeSendReportsLabel')) + const braveProductUsageDataLabel = splitStringForTag(getLocale('braveWelcomeSendInsightsLabel')) return (

{getLocale('braveWelcomeHelpImproveBraveTitle')}

-

{getLocale('braveWelcomeHelpImproveBraveDesc')}

@@ -73,14 +74,24 @@ function HelpImprove () { id="metrics" onChange={handleMetricsReportingChange} isChecked={isMetricsReportingEnabled} - labelText={getLocale('braveWelcomeSendReportsLabel')} - /> + > + {diagnosticReportsLabel.beforeTag} + + {diagnosticReportsLabel.duringTag} + + {diagnosticReportsLabel.afterTag} + + > + {braveProductUsageDataLabel.beforeTag} + + {braveProductUsageDataLabel.duringTag} + + {braveProductUsageDataLabel.afterTag} + diff --git a/components/brave_welcome_ui/components/help-improve/style.ts b/components/brave_welcome_ui/components/help-improve/style.ts index 6e8046c05a52..8f03f6f045e9 100644 --- a/components/brave_welcome_ui/components/help-improve/style.ts +++ b/components/brave_welcome_ui/components/help-improve/style.ts @@ -19,7 +19,7 @@ export const MainBox = styled.div` .view-header-box { display: grid; - grid-template-columns: 0.5fr 1fr 0.5fr; + grid-template-columns: 0.2fr 1fr 0.2fr; padding: 40px 40px 50px 40px; } @@ -30,12 +30,6 @@ export const MainBox = styled.div` .view-title { font-weight: 600; font-size: 36px; - margin: 0 0 18px 0; - } - - .view-desc { - font-weight: 400; - font-size: 20px; margin: 0; } ` @@ -58,6 +52,11 @@ export const Grid = styled.div` gap: 10px; margin-bottom: 20px; line-height: 20px; + + a { + text-decoration: none; + color: rgba(160, 165, 235, 1); + } } input[type="checkbox"] { diff --git a/components/brave_welcome_ui/stories/locale.ts b/components/brave_welcome_ui/stories/locale.ts index 20a548f257ab..035b897d02fa 100644 --- a/components/brave_welcome_ui/stories/locale.ts +++ b/components/brave_welcome_ui/stories/locale.ts @@ -20,10 +20,9 @@ provideStrings({ braveWelcomeFinishButtonLabel: 'Finish', braveWelcomeSetDefaultButtonLabel: 'Set Brave as default browser', braveWelcomeSelectAllButtonLabel: 'Select All', - braveWelcomeHelpImproveBraveTitle: 'Help improve Brave', - braveWelcomeHelpImproveBraveDesc: 'Fine-tuning the product. Protecting your privacy. Every day.', - braveWelcomeSendReportsLabel: 'Send dianogstic reports if Brave crashes or freezes.', - braveWelcomeSendInsightsLabel: 'Share anonymous, private product insights. This helps us learn what Brave features are used most often.', + braveWelcomeHelpImproveBraveTitle: 'Help make Brave better.', + braveWelcomeSendReportsLabel: 'Send diagnostic reports if you experience a crash or freeze. $1Learn more.$2', + braveWelcomeSendInsightsLabel: 'Share completely private and anonymous product insights about what features are being used by Brave\'s users. $1Learn more.$2', braveWelcomeSetupCompleteLabel: 'Setup complete', braveWelcomeChangeSettingsNote: ' Change these choices at any time in Brave at $1brave://settings/privacy$2.', braveWelcomePrivacyPolicyNote: 'Read our full $1Privacy Policy$2' diff --git a/components/resources/brave_welcome_strings.grdp b/components/resources/brave_welcome_strings.grdp index 5dc3a1b3c735..e9bfc9fb1e09 100644 --- a/components/resources/brave_welcome_strings.grdp +++ b/components/resources/brave_welcome_strings.grdp @@ -57,19 +57,15 @@ - Help improve Brave - - - - Fine-tuning the product. Protecting your privacy. Every day. + Help make Brave better. - Send diagnostic reports if Brave crashes or freezes. + Send diagnostic reports if you experience a crash or freeze. $1Learn more.$2 - Share anonymous, private product insights. This helps us learn what Brave features are used most often. + Share completely private and anonymous product insights about what features are being used by Brave's users. $1Learn more.$2