Merge pull request #32939 from overleaf/kh-update-settings-modal-language

[web] update copy & layout for notifications settings

GitOrigin-RevId: 13b6b78b0b2bddd9d0137362a14bfdbdba9d7d20

services/web/frontend/extracted-translations.json

@@ -1105,6 +1105,7 @@
   "manage_institution_managers": "",
   "manage_managers_subtext": "",
   "manage_newsletter": "",
+  "manage_overleaf_email_preferences": "",
   "manage_publisher_managers": "",
   "manage_sessions": "",
   "manage_subscription": "",

services/web/frontend/js/features/settings/components/editor-settings/project-notifications-setting.tsx

@@ -4,6 +4,7 @@ import {
   NotificationLevel,
   useProjectNotificationPreferences,
 } from '../../hooks/use-project-notification-preferences'
+import BetaBadgeIcon from '@/shared/components/beta-badge-icon'
 
 export default function ProjectNotificationsSetting() {
   const { t } = useTranslation()
@@ -36,16 +37,32 @@ export default function ProjectNotificationsSetting() {
         value={isLoading ? undefined : notificationLevel}
         onChange={setNotificationLevel}
       />
-      <div className="project-notifications-beta-note">
-        <span className="beta-note-text">
-          {t('email_notifications_are_currently_in_beta')}{' '}
-          {t('these_settings_might_change_in_the_future')}{' '}
-        </span>
-        {/* TODO: update forms link */}
-        <a target="_blank" rel="noopener noreferrer" href="https://forms.gle/">
-          {t('give_feedback')}
+      <div className="global-notifications-link">
+        <a
+          href="/user/notification-preferences"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t('manage_overleaf_email_preferences')}
         </a>
       </div>
+      <div className="project-notifications-beta-note">
+        <BetaBadgeIcon />
+        <div>
+          <span className="beta-note-text">
+            {t('email_notifications_are_currently_in_beta')}{' '}
+            {t('these_settings_might_change_in_the_future')}{' '}
+          </span>
+          {/* TODO: update forms link */}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://forms.gle/"
+          >
+            {t('give_feedback')}
+          </a>
+        </div>
+      </div>
     </>
   )
 }

services/web/frontend/js/features/settings/components/radio-button-setting.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
 
 export type RadioOption<T extends string = string> = {
   value: T
@@ -26,25 +27,17 @@ export default function RadioButtonSetting<T extends string = string>({
   return (
     <div className="ide-radio-setting-options">
       {options.map(option => (
-        <label key={`${id}-${option.value}`} className="ide-radio-option">
-          <input
-            type="radio"
-            id={`${id}-${option.value}`}
-            name={id}
-            value={option.value}
-            checked={value === option.value}
-            onChange={handleChange}
-            className="ide-radio-input"
-          />
-          <div className="ide-radio-text">
-            <span className="ide-setting-title">{option.label}</span>
-            {option.description && (
-              <span className="ide-setting-description">
-                {option.description}
-              </span>
-            )}
-          </div>
-        </label>
+        <OLFormCheckbox
+          key={`${id}-${option.value}`}
+          type="radio"
+          id={`${id}-${option.value}`}
+          name={id}
+          value={option.value}
+          checked={value === option.value}
+          onChange={handleChange}
+          label={option.label}
+          description={option.description}
+        />
       ))}
     </div>
   )

services/web/frontend/stylesheets/pages/editor/settings.scss

@@ -105,26 +105,16 @@
   gap: var(--spacing-06);
 }
 
-.ide-radio-option {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-04);
-  cursor: pointer;
-}
-
-.ide-radio-input {
-  margin-top: var(--spacing-02);
-}
-
-.ide-radio-text {
-  display: flex;
-  flex-direction: column;
+.global-notifications-link {
+  font-size: var(--font-size-01);
 }
 
 .project-notifications-beta-note {
   margin-top: var(--spacing-06);
-  padding: var(--spacing-04);
   font-size: var(--font-size-02);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-05);
 }
 
 .beta-note-text {

services/web/locales/en.json

@@ -174,7 +174,7 @@
   "all_premium_features_including": "All premium features, including:",
   "all_prices_displayed_are_in_currency": "All prices displayed are in __recommendedCurrency__.",
   "all_project_activity": "All project activity",
-  "all_project_activity_description": "You’ll be notified about all comments and track changes in this project.",
+  "all_project_activity_description": "You’ll be notified about all comments and track changes.",
   "all_projects": "All projects",
   "all_projects_will_be_transferred_immediately": "All projects will be transferred to the new owner immediately.",
   "all_templates": "All templates",
@@ -1468,6 +1468,7 @@
   "manage_institution_managers": "Manage institution managers",
   "manage_managers_subtext": "Assign or remove manager privileges",
   "manage_newsletter": "Manage newsletter preferences",
+  "manage_overleaf_email_preferences": "Manage all __appName__ email notifications",
   "manage_publisher_managers": "Manage publisher managers",
   "manage_sessions": "Manage sessions",
   "manage_subscription": "Manage subscription",
@@ -2062,7 +2063,7 @@
   "replace_from_project_files": "Replace from project files",
   "replace_from_url": "Replace from URL",
   "replies_to_your_activity_only": "Replies to your activity only",
-  "replies_to_your_activity_only_description": "You’ll be notified about direct replies and activity on your track changes only.",
+  "replies_to_your_activity_only_description": "You’ll be notified about replies and activity on your track changes.",
   "reply": "Reply",
   "repository_name": "Repository Name",
   "repository_visibility": "Repository visibility",