diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 37d1e635e4..62da017cce 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -687,6 +687,7 @@ "n_more_updates_below": "", "n_more_updates_below_plural": "", "name": "", + "name_usage_explanation": "", "navigate_log_source": "", "navigation": "", "need_anything_contact_us_at": "", @@ -708,6 +709,7 @@ "new_tag_name": "", "new_to_latex_look_at": "", "newsletter": "", + "newsletter_onboarding_accept": "", "next_payment_of_x_collectected_on_y": "", "no_actions": "", "no_borders": "", @@ -1273,6 +1275,10 @@ "url_to_fetch_the_file_from": "", "use_a_different_password": "", "use_your_own_machine": "", + "used_latex_before": "", + "used_latex_response_never": "", + "used_latex_response_occasionally": "", + "used_latex_response_often": "", "used_when_referring_to_the_figure_elsewhere_in_the_document": "", "user_deletion_error": "", "user_deletion_password_reset_tip": "", @@ -1302,18 +1308,21 @@ "visual_editor_is_only_available_for_tex_files": "", "want_change_to_apply_before_plan_end": "", "we_cant_find_any_sections_or_subsections_in_this_file": "", + "we_do_not_share_personal_information": "", "we_logged_you_in": "", "wed_love_you_to_stay": "", "welcome_to_sl": "", "what_does_this_mean": "", "what_does_this_mean_for_you": "", "what_happens_when_sso_is_enabled": "", + "what_should_we_call_you": "", "when_you_tick_the_include_caption_box": "", "wide": "", "with_premium_subscription_you_also_get": "", "word_count": "", "work_offline": "", "work_with_non_overleaf_users": "", + "would_you_like_to_receive_newsletter": "", "x_changes_in": "", "x_changes_in_plural": "", "x_price_for_first_month": "", diff --git a/services/web/frontend/js/shared/components/stepper.tsx b/services/web/frontend/js/shared/components/stepper.tsx new file mode 100644 index 0000000000..2013d7e30f --- /dev/null +++ b/services/web/frontend/js/shared/components/stepper.tsx @@ -0,0 +1,23 @@ +import classNames from 'classnames' + +export function Stepper({ steps, active }: { steps: number; active: number }) { + return ( +
+ {Array.from({ length: steps }).map((_, i) => ( +
+ ))} +
+ ) +} diff --git a/services/web/frontend/stylesheets/_style_includes.less b/services/web/frontend/stylesheets/_style_includes.less index e4f1dc285d..7f085d7f14 100644 --- a/services/web/frontend/stylesheets/_style_includes.less +++ b/services/web/frontend/stylesheets/_style_includes.less @@ -65,6 +65,7 @@ @import 'components/divider.less'; @import 'components/split-menu.less'; @import 'components/group-members.less'; +@import 'components/stepper.less'; // Components w/ JavaScript @import 'components/modals.less'; @@ -118,3 +119,4 @@ @import 'modules/managed-users.less'; @import 'modules/admin-panel.less'; +@import 'modules/overleaf-integration.less'; diff --git a/services/web/frontend/stylesheets/components/stepper.less b/services/web/frontend/stylesheets/components/stepper.less new file mode 100644 index 0000000000..147f438565 --- /dev/null +++ b/services/web/frontend/stylesheets/components/stepper.less @@ -0,0 +1,18 @@ +.stepper { + display: flex; + gap: 12px; + width: 100%; + height: 6px; + + .step { + width: 100%; + border-radius: 6px; + background: @neutral-20; + } + .step.completed { + background: @green; + } + .step.active { + background: @green-20; + } +} diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index 219b35a15d..f8d284558c 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/services/web/frontend/stylesheets/main-style.less @@ -76,6 +76,7 @@ @import 'components/select.less'; @import 'components/switch.less'; @import 'components/switcher.less'; +@import 'components/stepper.less'; // Components w/ JavaScript @import 'components/modals.less'; @@ -148,3 +149,4 @@ @import 'modules/symbol-palette.less'; @import 'modules/admin-panel.less'; @import 'modules/managed-users.less'; +@import 'modules/overleaf-integration.less'; diff --git a/services/web/frontend/stylesheets/modules/overleaf-integration.less b/services/web/frontend/stylesheets/modules/overleaf-integration.less new file mode 100644 index 0000000000..b99d98feec --- /dev/null +++ b/services/web/frontend/stylesheets/modules/overleaf-integration.less @@ -0,0 +1,70 @@ +#onboarding-data-collection { + width: 720px; + padding: 24px; + margin: 0 auto; + background: #fff; + display: flex; + flex-direction: column; + gap: 24px; + + p { + font-size: 20px; + margin-bottom: 5px; + } + + .logo { + width: 130px; + margin: 0 auto; + } + + form { + display: flex; + flex-direction: column; + gap: 24px; + + .group-horizontal { + display: flex; + justify-content: stretch; + gap: 24px; + + .form-group { + flex-grow: 1; + } + } + + .form-actions { + display: flex; + justify-content: space-between; + + > div { + display: flex; + align-items: center; + gap: 8px; + + button.btn-info-ghost { + color: @gray-dark; + } + } + } + } + + .onboarding-step-2 { + .checkbox { + margin: 0; + + p { + margin-bottom: 0; + } + + label { + display: flex; + align-items: center; + gap: 8px; + + input { + margin-right: 4px; + } + } + } + } +} diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 671a4e242a..a85d1910bf 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1083,6 +1083,7 @@ "n_more_updates_below": "__count__ more update below", "n_more_updates_below_plural": "__count__ more updates below", "name": "Name", + "name_usage_explanation": "Your name will be displayed to your collaborators (so they know who they’re working with).", "native": "Native", "navigate_log_source": "Navigate to log position in source code: __location__", "navigation": "Navigation", @@ -1114,6 +1115,7 @@ "newsletter_info_summary": "Every few months we send a newsletter out summarizing the new features available.", "newsletter_info_title": "Newsletter Preferences", "newsletter_info_unsubscribed": "You are currently <0>unsubscribed to the __appName__ newsletter.", + "newsletter_onboarding_accept": "Yes, I’d like to get relevant help resources, news, and feature updates.", "next_payment_of_x_collectected_on_y": "The next payment of <0>__paymentAmmount__ will be collected on <1>__collectionDate__.", "nl": "Dutch", "no": "Norwegian", @@ -1926,6 +1928,10 @@ "usage_metrics_info": "Metrics that show how many users are accessing the licence, how many projects are being created and worked on, and how much collaboration is happening in Overleaf.", "use_a_different_password": "Please use a different password", "use_your_own_machine": "Use your own machine, with your own setup", + "used_latex_before": "Have you ever used LaTeX before?", + "used_latex_response_never": "No, never", + "used_latex_response_occasionally": "Yes, occasionally", + "used_latex_response_often": "Yes, very often", "used_when_referring_to_the_figure_elsewhere_in_the_document": "Used when referring to the figure elsewhere in the document", "user_already_added": "User already added", "user_deletion_error": "Sorry, something went wrong deleting your account. Please try again in a minute.", @@ -1967,6 +1973,7 @@ "visual_editor_is_only_available_for_tex_files": "Visual Editor is only available for TeX files", "want_change_to_apply_before_plan_end": "If you wish this change to apply before the end of your current billing period, please contact us.", "we_cant_find_any_sections_or_subsections_in_this_file": "We can’t find any sections or subsections in this file", + "we_do_not_share_personal_information": "We do not share or sell any personal information.", "we_logged_you_in": "We have logged you in.", "we_may_also_contact_you_from_time_to_time_by_email_with_a_survey": "<0>We may also contact you from time to time by email with a survey, or to see if you would like to participate in other user research initiatives", "webinars": "Webinars", @@ -1976,6 +1983,7 @@ "what_does_this_mean": "What does this mean?", "what_does_this_mean_for_you": "This means:", "what_happens_when_sso_is_enabled": "What happens when SSO is enabled?", + "what_should_we_call_you": "What should we call you?", "when_you_tick_the_include_caption_box": "When you tick the box “Include caption” the image will be inserted into your document with a placeholder caption. To edit it, you simply select the placeholder text and type to replace it with your own.", "wide": "Wide", "will_need_to_log_out_from_and_in_with": "You will need to log out from your __email1__ account and then log in with __email2__.", @@ -1989,6 +1997,7 @@ "work_with_non_overleaf_users": "Work with non Overleaf users", "work_with_word_users": "Work with Word users", "work_with_word_users_blurb": "__appName__ is so easy to get started with that you’ll be able to invite your non-LaTeX colleagues to contribute directly to your LaTeX documents. They’ll be productive from day one and be able to pick up small amounts of LaTeX as they go.", + "would_you_like_to_receive_newsletter": "Would you like to receive tailored content from Overleaf?", "would_you_like_to_see_a_university_subscription": "Would you like to see a university-wide __appName__ subscription at your university?", "x_changes_in": "__count__ change in", "x_changes_in_plural": "__count__ changes in",