From 24e6729bba8cb746eaf6ea774fa6f6ed3bc6c02b Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Thu, 7 Aug 2025 12:39:58 +0100 Subject: [PATCH] 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 | 2 +- .../js/shared/components/beta-badge-icon.tsx | 6 +++++- .../stories/settings/beta-program.stories.jsx | 2 +- .../stylesheets/components/beta-badges.scss | 7 +++++++ services/web/locales/en.json | 14 +++++++------- .../components/beta-program-section.test.tsx | 6 +++--- .../features/settings/components/root.test.tsx | 4 ++-- 7 files changed, 26 insertions(+), 15 deletions(-) diff --git a/services/web/app/views/beta_program/opt_in.pug b/services/web/app/views/beta_program/opt_in.pug index c30cb78d9a..9975692e67 100644 --- a/services/web/app/views/beta_program/opt_in.pug +++ b/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 β diff --git a/services/web/frontend/js/shared/components/beta-badge-icon.tsx b/services/web/frontend/js/shared/components/beta-badge-icon.tsx index b331c90175..65f2b4d14c 100644 --- a/services/web/frontend/js/shared/components/beta-badge-icon.tsx +++ b/services/web/frontend/js/shared/components/beta-badge-icon.tsx @@ -15,7 +15,11 @@ const BetaBadgeIcon: FC<{ ) } else { - return β + return ( + + β + + ) } } diff --git a/services/web/frontend/stories/settings/beta-program.stories.jsx b/services/web/frontend/stories/settings/beta-program.stories.jsx index 7097af424e..38f42cbd66 100644 --- a/services/web/frontend/stories/settings/beta-program.stories.jsx +++ b/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, } diff --git a/services/web/frontend/stylesheets/components/beta-badges.scss b/services/web/frontend/stylesheets/components/beta-badges.scss index 67a0740ca4..4835ec6751 100644 --- a/services/web/frontend/stylesheets/components/beta-badges.scss +++ b/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; } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 47d1847b0e..0f694d0572 100644 --- a/services/web/locales/en.json +++ b/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 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__ <1>(includes plan and any add-ons)", @@ -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": "(__ctrlSpace__ or __altSpace__)", "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 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 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.", diff --git a/services/web/test/frontend/features/settings/components/beta-program-section.test.tsx b/services/web/test/frontend/features/settings/components/beta-program-section.test.tsx index 6cfe6e4e6f..b2372845da 100644 --- a/services/web/test/frontend/features/settings/components/beta-program-section.test.tsx +++ b/services/web/test/frontend/features/settings/components/beta-program-section.test.tsx @@ -20,7 +20,7 @@ describe('', 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('', 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('', 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/) }) }) diff --git a/services/web/test/frontend/features/settings/components/root.test.tsx b/services/web/test/frontend/features/settings/components/root.test.tsx index f3f2f80639..97f96da276 100644 --- a/services/web/test/frontend/features/settings/components/root.test.tsx +++ b/services/web/test/frontend/features/settings/components/root.test.tsx @@ -42,7 +42,7 @@ describe('', 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('', 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(