Merge pull request #27608 from overleaf/mj-beta-colours

[web] Update beta badge colours

GitOrigin-RevId: ffa08940a3133e09f4b14d964ac58443ba5cf4e3

services/web/app/views/beta_program/opt_in.pug

@@ -28,7 +28,7 @@ block content
 											ul
 												li
 													| #{translate("beta_program_badge_description")} 
-													span.badge.bg-warning-light-bg.text-warning(
+													span.beta-badge.badge.bg-beta.bg-beta(
 														aria-label=translate('beta_feature_badge')
 													)
 														span.badge-content β

services/web/frontend/js/shared/components/beta-badge-icon.tsx

@@ -15,7 +15,11 @@ const BetaBadgeIcon: FC<{
       </OLBadge>
     )
   } else {
-    return <OLBadge bg="warning">β</OLBadge>
+    return (
+      <OLBadge className="beta-badge" bg="beta">
+        β
+      </OLBadge>
+    )
   }
 }
 

services/web/frontend/stories/settings/beta-program.stories.jsx

@@ -22,6 +22,6 @@ export const SectionEnrolled = args => {
 }
 
 export default {
-  title: 'Account Settings / Beta Program',
+  title: 'Account Settings / Beta program',
   component: BetaProgramSection,
 }

services/web/frontend/stylesheets/components/beta-badges.scss

@@ -6,6 +6,13 @@
   font-family: $font-family-monospace;
 }
 
+.beta-badge {
+  font-family: $font-family-monospace;
+  background-color: var(--bg-accent-03);
+  outline: 1px solid var(--green-50);
+  color: var(--green-60);
+}
+
 .split-test-badge-tooltip .tooltip-inner {
   white-space: pre-wrap;
 }

services/web/locales/en.json

@@ -232,12 +232,12 @@
   "before_you_use_error_assistant": "Before you use Error Assist",
   "beta": "Beta",
   "beta_feature_badge": "Beta feature badge",
-  "beta_program_already_participating": "You are enrolled in the Beta Program",
+  "beta_program_already_participating": "You are enrolled in the beta program",
   "beta_program_badge_description": "While using __appName__, you will see beta features marked with this badge:",
   "beta_program_benefits": "We’re always improving __appName__. By joining this program you can have <0>early access to new features</0> and help us understand your needs better.",
-  "beta_program_not_participating": "You are not enrolled in the Beta Program",
-  "beta_program_opt_in_action": "Opt-In to Beta Program",
-  "beta_program_opt_out_action": "Opt-Out of Beta Program",
+  "beta_program_not_participating": "You are not enrolled in the beta program",
+  "beta_program_opt_in_action": "Opt-in to beta program",
+  "beta_program_opt_out_action": "Opt-out of beta program",
   "beta_program_the_new_overleaf_editor": "Beta program: the new Overleaf editor",
   "bibliographies": "Bibliographies",
   "billed_annually_at": "Billed annually at <0>__price__</0> <1>(includes plan and any add-ons)</1>",
@@ -1321,7 +1321,7 @@
   "make_owner": "Make owner",
   "make_primary": "Make primary",
   "make_private": "Make private",
-  "manage_beta_program_membership": "Manage Beta Program Membership",
+  "manage_beta_program_membership": "Manage beta program membership",
   "manage_files_from_your_dropbox_folder": "Manage files from your Dropbox folder",
   "manage_group_members_subtext": "Add or remove members from your group subscription",
   "manage_group_settings": "Manage group settings",
@@ -2057,7 +2057,7 @@
   "share": "Share",
   "share_project": "Share Project",
   "shared_with_you": "Shared with you",
-  "sharelatex_beta_program": "__appName__ Beta Program",
+  "sharelatex_beta_program": "__appName__ beta program",
   "shortcut_to_open_advanced_reference_search": "(<strong>__ctrlSpace__</strong> or <strong>__altSpace__</strong>)",
   "show_all_projects": "Show all projects",
   "show_breadcrumbs": "Show breadcrumbs",
@@ -2288,7 +2288,7 @@
   "thank_you": "Thank you!",
   "thank_you_email_confirmed": "Thank you, your email is now confirmed",
   "thank_you_exclamation": "Thank you!",
-  "thank_you_for_being_part_of_our_beta_program": "Thank you for being part of our Beta Program, where you can have <0>early access to new features</0> and help us understand your needs better",
+  "thank_you_for_being_part_of_our_beta_program": "Thank you for being part of our beta program, where you can have <0>early access to new features</0> and help us understand your needs better",
   "thank_you_for_your_feedback": "Thank you for your feedback!",
   "thanks": "Thanks",
   "thanks_for_being_part_of_this_labs_experiment_your_feedback_will_help_us_make_the_new_editor_the_best_yet": "Thanks for being part of this Labs experiment. Your feedback and support will help us make the new editor the best yet! Some features are still in progress, so if you need something that’s missing, you can switch back to the old editor.",

services/web/test/frontend/features/settings/components/beta-program-section.test.tsx

@@ -20,7 +20,7 @@ describe('<BetaProgramSection />', function () {
     renderSectionWithUserProvider()
 
     const link = screen.getByRole('link', {
-      name: 'Manage Beta Program Membership',
+      name: 'Manage beta program membership',
     })
 
     expect(link.getAttribute('href')).to.equal('/beta/participate')
@@ -28,7 +28,7 @@ describe('<BetaProgramSection />', function () {
 
   it('shows enrolled status', async function () {
     renderSectionWithUserProvider()
-    screen.getByText('You are enrolled in the Beta Program')
+    screen.getByText('You are enrolled in the beta program')
   })
 
   it('shows not enrolled status', async function () {
@@ -36,7 +36,7 @@ describe('<BetaProgramSection />', function () {
       betaProgram: false,
     })
     renderSectionWithUserProvider()
-    screen.getByText('You are not enrolled in the Beta Program')
+    screen.getByText('You are not enrolled in the beta program')
     screen.getByText(/By joining this program you can have/)
   })
 })

services/web/test/frontend/features/settings/components/root.test.tsx

@@ -42,7 +42,7 @@ describe('<SettingsPageRoot />', function () {
     screen.getByText('Update account info')
     screen.getByText('Change password')
     screen.getByText('Integrations')
-    screen.getByText('Overleaf Beta Program')
+    screen.getByText('Overleaf beta program')
     screen.getByText('Sessions')
     screen.getByText('Newsletter')
     screen.getByRole('button', {
@@ -64,7 +64,7 @@ describe('<SettingsPageRoot />', function () {
     screen.getByText('Update account info')
     screen.getByText('Change password')
     screen.getByText('Integrations')
-    expect(screen.queryByText('Overleaf Beta Program')).to.not.exist
+    expect(screen.queryByText('Overleaf beta program')).to.not.exist
     screen.getByText('Sessions')
     expect(screen.queryByText('Newsletter')).to.not.exist
     expect(