From 9f86f90a0872f2cd4b3cc7b4df393a3e4b0ce290 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Thu, 16 May 2024 06:04:21 -0700 Subject: [PATCH] Merge pull request #18095 from overleaf/mf-general-contact-form-redesign [web][website-redesign] General contact form redesign GitOrigin-RevId: f5f3a37fea69afb48a37b263695c958e6753e095 --- .../web/frontend/extracted-translations.json | 12 ++++- .../js/features/contact-form/index.js | 12 +++++ .../frontend/stylesheets/app/cms-page.less | 53 +++++++++++++++++++ services/web/locales/en.json | 11 ++++ .../components/help-contact-us.test.jsx | 2 +- 5 files changed, 88 insertions(+), 2 deletions(-) diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index c6d6e90de2..83e3f1e76b 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -212,7 +212,6 @@ "connected_users": "", "connection_lost": "", "contact_group_admin": "", - "contact_message_label": "", "contact_sales": "", "contact_support_to_change_group_subscription": "", "contact_us": "", @@ -443,6 +442,7 @@ "get_full_project_history": "", "get_git_integration": "", "get_github_sync": "", + "get_in_touch": "", "get_more_compile_time": "", "get_most_subscription_by_checking_features": "", "get_symbol_palette": "", @@ -673,6 +673,7 @@ "left": "", "length_unit": "", "let_us_know": "", + "let_us_know_how_we_can_help": "", "library": "", "license_for_educational_purposes": "", "limited_offer": "", @@ -708,6 +709,7 @@ "log_in_with_primary_email_address": "", "log_out_lowercase_dot": "", "log_viewer_error": "", + "logging_in_or_managing_your_account": "", "login_count": "", "login_to_accept_invitation": "", "login_with_service": "", @@ -744,6 +746,7 @@ "managed_users_is_enabled": "", "managed_users_terms": "", "managers_management": "", + "managing_your_subscription": "", "mark_as_resolved": "", "math_display": "", "math_inline": "", @@ -855,6 +858,7 @@ "or": "", "organization_name": "", "organize_projects": "", + "other": "", "other_logs_and_files": "", "other_output_files": "", "out_of_sync": "", @@ -911,6 +915,7 @@ "please_reconfirm_institutional_email": "", "please_reconfirm_your_affiliation_before_making_this_primary": "", "please_refresh": "", + "please_select": "", "please_select_a_file": "", "please_select_a_project": "", "please_select_an_output_file": "", @@ -1142,6 +1147,7 @@ "selected": "", "selection_deleted": "", "send_first_message": "", + "send_message": "", "sending": "", "sent": "", "server_error": "", @@ -1491,6 +1497,9 @@ "user_first_name_attribute": "", "user_last_name_attribute": "", "user_sessions": "", + "using_latex": "", + "using_premium_features": "", + "using_the_overleaf_editor": "", "valid": "", "valid_sso_configuration": "", "validation_issue_entry_description": "", @@ -1526,6 +1535,7 @@ "were_performing_maintenance": "", "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_this_project": "", "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_your_project": "", + "what_do_you_need_help_with": "", "what_does_this_mean": "", "what_does_this_mean_for_you": "", "what_happens_when_sso_is_enabled": "", diff --git a/services/web/frontend/js/features/contact-form/index.js b/services/web/frontend/js/features/contact-form/index.js index df3b307ff5..e1e9e4ac1d 100644 --- a/services/web/frontend/js/features/contact-form/index.js +++ b/services/web/frontend/js/features/contact-form/index.js @@ -21,3 +21,15 @@ document $('[data-ol-contact-form-modal="general"]').modal() }) }) + +document.querySelectorAll('[data-ol-contact-form').forEach(el => { + el.addEventListener('submit', function (e) { + const emailValue = document.querySelector( + '[data-ol-contact-form-email-input]' + ).value + const thankYouEmailEl = document.querySelector( + '[data-ol-contact-form-thank-you-email]' + ) + thankYouEmailEl.textContent = emailValue + }) +}) diff --git a/services/web/frontend/stylesheets/app/cms-page.less b/services/web/frontend/stylesheets/app/cms-page.less index 2c3f5e6dac..7c8622f966 100644 --- a/services/web/frontend/stylesheets/app/cms-page.less +++ b/services/web/frontend/stylesheets/app/cms-page.less @@ -7,6 +7,7 @@ &.website-redesign { h1 { font-size: 2rem; // 32px + line-height: 1.333; } h2 { @@ -455,6 +456,58 @@ padding-bottom: @padding-xxl; } +@media (min-width: @screen-sm-min) { + .desktop-left-margin-sm { + margin-left: @margin-sm; + } + .desktop-left-margin-md { + margin-left: @margin-md; + } + .desktop-left-margin-lg { + margin-left: @margin-lg; + } + .desktop-left-margin-xl { + margin-left: @margin-xl; + } + .desktop-left-margin-xxl { + margin-left: @margin-xxl; + } + + .desktop-right-margin-sm { + margin-right: @margin-sm; + } + .desktop-right-margin-md { + margin-right: @margin-md; + } + .desktop-right-margin-lg { + margin-right: @margin-lg; + } + .desktop-right-margin-xl { + margin-right: @margin-xl; + } + .desktop-right-margin-xxl { + margin-right: @margin-xxl; + } +} + +@media (max-width: @screen-xs-max) { + .mobile-bottom-margin-sm { + margin-bottom: @margin-sm; + } + .mobile-bottom-margin-md { + margin-bottom: @margin-md; + } + .mobile-bottom-margin-lg { + margin-bottom: @margin-lg; + } + .mobile-bottom-margin-xl { + margin-bottom: @margin-xl; + } + .mobile-bottom-margin-xxl { + margin-bottom: @margin-xxl; + } +} + @media (max-width: @screen-sm-min) { .col-xs-padding-sm { .col-xs-12:not(:first-child) { diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 3dd65a46f6..f8016f1c05 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -663,6 +663,7 @@ "get_full_project_history": "Get full project history", "get_git_integration": "Get Git integration", "get_github_sync": "Get GitHub Sync", + "get_in_touch": "Get in touch", "get_in_touch_having_problems": "Get in touch with support if you’re having problems", "get_involved": "Get involved", "get_more_compile_time": "Get more compile time", @@ -984,6 +985,7 @@ "left": "Left", "length_unit": "Length unit", "let_us_know": "Let us know", + "let_us_know_how_we_can_help": "Let us know how we can help", "let_us_know_what_you_think": "Let us know what you think", "library": "Library", "license": "License", @@ -1040,6 +1042,7 @@ "log_viewer_error": "There was a problem displaying this project’s compilation errors and logs.", "logged_in_with_email": "You are currently logged in to __appName__ with the email __email__.", "logging_in": "Logging in", + "logging_in_or_managing_your_account": "Logging in or managing your account", "login": "Login", "login_count": "Login count", "login_error": "Login error", @@ -1090,6 +1093,7 @@ "managers_cannot_remove_admin": "Admins cannot be removed", "managers_cannot_remove_self": "Managers cannot remove themselves", "managers_management": "Managers management", + "managing_your_subscription": "Managing your subscription", "march": "March", "mark_as_resolved": "Mark as resolved", "math_display": "Math Display", @@ -1252,6 +1256,7 @@ "organization_name": "Organization name", "organization_type": "Organization Type", "organize_projects": "Organize Projects", + "other": "Other", "other_actions": "Other Actions", "other_logs_and_files": "Other logs and files", "other_output_files": "Download other output files", @@ -1341,6 +1346,7 @@ "please_reconfirm_your_affiliation_before_making_this_primary": "Please confirm your affiliation before making this the primary.", "please_refresh": "Please refresh the page to continue.", "please_request_a_new_password_reset_email_and_follow_the_link": "Please request a new password reset email and follow the link", + "please_select": "Please select", "please_select_a_file": "Please Select a File", "please_select_a_project": "Please Select a Project", "please_select_an_output_file": "Please Select an Output File", @@ -1648,6 +1654,7 @@ "selection_deleted": "Selection deleted", "send": "Send", "send_first_message": "Send your first message to your collaborators", + "send_message": "Send message", "send_test_email": "Send a test email", "sending": "Sending", "sent": "Sent", @@ -2092,6 +2099,9 @@ "user_not_found": "User not found", "user_sessions": "User Sessions", "user_wants_you_to_see_project": "__username__ would like you to join __projectname__", + "using_latex": "Using LaTeX", + "using_premium_features": "Using premium features", + "using_the_overleaf_editor": "Using the __appName__ Editor", "valid": "Valid", "valid_sso_configuration": "Valid SSO configuration", "validation_issue_entry_description": "A validation issue which prevented this project from compiling", @@ -2132,6 +2142,7 @@ "were_performing_maintenance": "We’re performing maintenance on Overleaf and you need to wait a moment. Sorry for any inconvenience. The editor will refresh automatically in __seconds__ seconds.", "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_this_project": "We’ve recently <0>reduced the compile timeout limit on our free plan, which may have affected this project.", "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_your_project": "We’ve recently <0>reduced the compile timeout limit on our free plan, which may have affected your project.", + "what_do_you_need_help_with": "What do you need help with?", "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?", diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.jsx b/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.jsx index 67a7c0508e..c3c7419424 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.jsx +++ b/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.jsx @@ -25,7 +25,7 @@ describe('', function () { expect(screen.queryByRole('dialog')).to.equal(null) fireEvent.click(screen.getByRole('button', { name: 'Contact Us' })) const modal = screen.getAllByRole('dialog')[0] - within(modal).getAllByText('Contact Us') + within(modal).getAllByText('Get in touch') within(modal).getByText('Subject') }) })