Revised copy for help improve UI on the new onboarding page (#16363)

brave · Dec 15, 2022 · 1e69059 · 1e69059
1 parent 7442d8d
commit 1e69059
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 27 deletions.
diff --git 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
@@ -13,7 +13,7 @@ import { getLocale, splitStringForTag } from '$web-common/locale'
 
 interface InputCheckboxProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  labelText: string
+  children: React.ReactNode
   id?: string
   isChecked: boolean
 }
@@ -27,7 +27,7 @@ function InputCheckbox (props: InputCheckboxProps) {
         onChange={props.onChange}
       />
       <div>
-        {props.labelText}
+        {props.children}
       </div>
     </label>
   )
@@ -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 (
     <S.MainBox>
       <div className="view-header-box">
         <div className="view-details">
           <h1 className="view-title">{getLocale('braveWelcomeHelpImproveBraveTitle')}</h1>
-          <p className="view-desc">{getLocale('braveWelcomeHelpImproveBraveDesc')}</p>
         </div>
       </div>
       <S.Grid>
@@ -73,14 +74,24 @@ function HelpImprove () {
             id="metrics"
             onChange={handleMetricsReportingChange}
             isChecked={isMetricsReportingEnabled}
-            labelText={getLocale('braveWelcomeSendReportsLabel')}
-          />
+          >
+            {diagnosticReportsLabel.beforeTag}
+            <a href="https://support.brave.com/hc/en-us/articles/360017905872-How-do-I-enable-or-disable-automatic-crash-reporting" target="_blank" onClick={handleOpenSettingsPage}>
+              {diagnosticReportsLabel.duringTag}
+            </a>
+            {diagnosticReportsLabel.afterTag}
+          </InputCheckbox>
           <InputCheckbox
             id="p3a"
             onChange={handleP3AChange}
             isChecked={isP3AEnabled}
-            labelText={getLocale('braveWelcomeSendInsightsLabel')}
-          />
+          >
+            {braveProductUsageDataLabel.beforeTag}
+            <a href="https://support.brave.com/hc/en-us/articles/9140465918093-What-is-P3A-in-Brave-" target="_blank" onClick={handleOpenSettingsPage}>
+              {braveProductUsageDataLabel.duringTag}
+            </a>
+            {braveProductUsageDataLabel.afterTag}
+          </InputCheckbox>
         </div>
       </S.Grid>
       <S.ActionBox>

diff --git 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
@@ -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
@@ -57,19 +57,15 @@
 </message>
 
 <message name="IDS_BRAVE_WELCOME_HELP_IMPROVE_BRAVE_TITLE" desc="A title for screen that asks user to opt-in for analytics and reports">
-  Help improve Brave
-</message>
-
-<message name="IDS_BRAVE_WELCOME_HELP_IMPROVE_BRAVE_DESC" desc="A subtitle for screen that asks user to opt-in for analytics and reports">
-  Fine-tuning the product. Protecting your privacy. Every day.
+  Help make Brave better.
 </message>
 
 <message name="IDS_BRAVE_WELCOME_SEND_REPORTS_LABEL" desc="A checkbox label for user to opt-in opt-out to send diagnostic reports">
-  Send diagnostic reports if Brave crashes or freezes.
+  Send diagnostic reports if you experience a crash or freeze. <ph name="LINK_BEFORE">$1</ph>Learn more.<ph name="LINK_AFTER">$2</ph>
 </message>
 
 <message name="IDS_BRAVE_WELCOME_SEND_INSIGHTS_LABEL" desc="A checkbox label for user to opt-in opt-out to share anonymous, product insights information">
-  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. <ph name="LINK_BEFORE">$1</ph>Learn more.<ph name="LINK_AFTER">$2</ph>
 </message>
 
 <message name="IDS_BRAVE_WELCOME_SETUP_COMPLETE_LABEL" desc="A title for screen when user has completed all the steps">