From f87e96b23de07b549a32d5bb0ebe3eb8f4088aa3 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Mon, 17 Jun 2024 08:51:01 -0700 Subject: [PATCH] Merge pull request #18870 from overleaf/mf-new-plans-page-table-individual [web] Create new plans page table for individual plans GitOrigin-RevId: 82bfcf5a5e7886517bab9b67dfb4a712350f8c33 --- .../web/frontend/fonts/material-symbols.css | 4 -- .../app/plans/plans-new-design.less | 72 +++++++++++++++++++ .../stylesheets/components/icons.less | 23 +++++- .../frontend/stylesheets/variables/all.less | 1 + .../stylesheets/variables/border-radius.less | 4 ++ .../stylesheets/variables/css-variables.less | 6 ++ services/web/locales/en.json | 14 ++++ 7 files changed, 118 insertions(+), 6 deletions(-) create mode 100644 services/web/frontend/stylesheets/variables/border-radius.less diff --git a/services/web/frontend/fonts/material-symbols.css b/services/web/frontend/fonts/material-symbols.css index df48c82f46..5fe529c836 100644 --- a/services/web/frontend/fonts/material-symbols.css +++ b/services/web/frontend/fonts/material-symbols.css @@ -30,7 +30,3 @@ font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } - -.material-symbols-xl { - font-size: 56px; -} diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less index 96b78f3c53..84ceff9ced 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -400,6 +400,78 @@ } } + .plans-new-table-heading-row { + // this means min-height, min-height does not work in table layout + // https://stackoverflow.com/questions/7790222 + height: 64px; + } + + .plans-new-table-heading-text { + padding: var(--spacing-05) var(--spacing-08) var(--spacing-05) + var(--spacing-05); + font-weight: 600; + font-size: var(--font-size-04); + line-height: var(--line-height-03); + vertical-align: bottom; + } + + .plans-new-table-feature-row { + &:nth-child(even) { + background-color: var(--neutral-10); + } + } + + .plans-new-table-section-without-header-row { + &:nth-child(odd):not(.plans-new-table-heading-row) { + background-color: var(--neutral-10); + } + &:nth-child(even):not(.plans-new-table-heading-row) { + background-color: white; + } + } + + .plans-new-table-feature-th { + padding: var(--spacing-05) var(--spacing-08) var(--spacing-05) + var(--spacing-05); + + .plans-new-table-feature-th-content { + line-height: var(--line-height-03); + display: flex; + justify-content: space-between; + align-items: center; + + .plans-new-table-feature-tooltip-icon { + cursor: help; + margin-left: var(--spacing-05); + } + + .tooltip.in { + opacity: 1; + } + + .tooltip-inner { + padding: var(--spacing-04) var(--spacing-06); + max-width: 258px; + width: 258px; + font-family: Lato, sans-serif; + font-size: var(--font-size-02); + text-align: left; + background-color: var(--neutral-90); + border-radius: var(--border-radius-base); + } + } + } + + .plans-new-table-feature-td { + padding: var(--spacing-05) var(--spacing-08); + text-align: center; + line-height: var(--line-height-03); + + .green-round-background { + margin-right: 0; + } + } + // ------------------------------------------------------------------ // ------------------------------------------------------------------ // These comments will be deleted before merging this PR diff --git a/services/web/frontend/stylesheets/components/icons.less b/services/web/frontend/stylesheets/components/icons.less index a7dcfc601f..1af9442f61 100644 --- a/services/web/frontend/stylesheets/components/icons.less +++ b/services/web/frontend/stylesheets/components/icons.less @@ -3,7 +3,26 @@ color: @accent-color-secondary!important; } -// Sizes .icon-lg { - font-size: @font-size-h1; + font-size: 32px !important; + width: 32px !important; + height: 32px !important; +} + +.icon-md { + font-size: 24px !important; + width: 24px !important; + height: 24px !important; +} + +.icon-sm { + font-size: 20px !important; + width: 20px !important; + height: 20px !important; +} + +.icon-xs { + font-size: 16px !important; + width: 16px !important; + height: 16px !important; } diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less index 28d7c12bae..df8417464d 100644 --- a/services/web/frontend/stylesheets/variables/all.less +++ b/services/web/frontend/stylesheets/variables/all.less @@ -1,5 +1,6 @@ @import 'colors.less'; @import 'z-index.less'; +@import 'border-radius.less'; // // Variables diff --git a/services/web/frontend/stylesheets/variables/border-radius.less b/services/web/frontend/stylesheets/variables/border-radius.less new file mode 100644 index 0000000000..86e5c86bc7 --- /dev/null +++ b/services/web/frontend/stylesheets/variables/border-radius.less @@ -0,0 +1,4 @@ +@border-radius-base: 4px; +@border-radius-medium: 8px; +@border-radius-large: 16px; +@border-radius-full: 9999px; diff --git a/services/web/frontend/stylesheets/variables/css-variables.less b/services/web/frontend/stylesheets/variables/css-variables.less index 8b16c7a45b..7d52eac22e 100644 --- a/services/web/frontend/stylesheets/variables/css-variables.less +++ b/services/web/frontend/stylesheets/variables/css-variables.less @@ -143,4 +143,10 @@ --line-height-10: @line-height-10; --line-height-11: @line-height-11; --line-height-12: @line-height-12; + + // border-radius + --border-radius-base: @border-radius-base; + --border-radius-medium: @border-radius-medium; + --border-radius-large: @border-radius-large; + --border-radius-full: @border-radius-full; } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index efd535ed0f..4e0dcd471b 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -283,9 +283,11 @@ "compile_mode": "Compile Mode", "compile_servers": "Compile servers", "compile_servers_info": "Compiles for users on premium plans always run on a dedicated pool of the fastest available servers.", + "compile_servers_info_new": "The servers used to compile your project. Compiles for users on paid plans always run on the fastest available servers.", "compile_terminated_by_user": "The compile was cancelled using the ‘Stop Compilation’ button. You can download the raw logs to see where the compile stopped.", "compile_timeout_short": "Compile timeout", "compile_timeout_short_info_basic": "This is how much time you get to compile your project on the Overleaf servers. You may need additional time for longer or more complex projects.", + "compile_timeout_short_info_new": "This is how much time you get to compile your project on Overleaf. You may need additional time for longer or more complex projects.", "compiler": "Compiler", "compiling": "Compiling", "complete": "Complete", @@ -443,6 +445,7 @@ "drag_here": "drag here", "drag_here_paste_an_image_or": "Drag here, paste an image, or ", "drop_files_here_to_upload": "Drop files here to upload", + "dropbox": "Dropbox", "dropbox_already_linked_error": "Your Dropbox account cannot be linked as it is already linked with another Overleaf account.", "dropbox_already_linked_error_with_email": "Your Dropbox account cannot be linked as it is already linked with another Overleaf account using email address __otherUsersEmail__.", "dropbox_checking_sync_status": "Checking Dropbox for updates", @@ -482,6 +485,7 @@ "edit_sso_configuration": "Edit SSO Configuration", "edit_tag": "Edit Tag", "editing": "Editing", + "editing_and_collaboration": "Editing and collaboration", "editing_captions": "Editing captions", "editor_and_pdf": "Editor & PDF", "editor_disconected_click_to_reconnect": "Editor disconnected, click anywhere to reconnect.", @@ -702,6 +706,7 @@ "git_integration_info": "With Git integration, you can clone your Overleaf projects with Git. For full instructions on how to do this, read <0>our help page.", "git_integration_lowercase": "Git integration", "git_integration_lowercase_info": "You can clone your Overleaf project to a local repository, treating your Overleaf project as a remote repository that changes can be pushed to and pulled from.", + "github": "GitHub", "github_commit_message_placeholder": "Commit message for changes made in __appName__...", "github_credentials_expired": "Your GitHub authorization credentials have expired", "github_empty_repository_error": "It looks like your GitHub repository is empty or not yet available. Create a new file on GitHub.com then try again.", @@ -1235,6 +1240,9 @@ "notification_project_invite_accepted_message": "You’ve joined __projectName__", "notification_project_invite_message": "__userName__ would like you to join __projectName__", "november": "November", + "number_collab": "Number of collaborators", + "number_collab_info": "The number of people you can invite to work on a project with you. The limit is per project, so you can invite different people to each project.", + "number_of_projects": "Number of projects", "number_of_users": "Number of users", "number_of_users_info": "The number of users that can upgrade their Overleaf account if you purchase this plan.", "number_of_users_with_colon": "Number of users:", @@ -1247,6 +1255,7 @@ "on_free_plan_upgrade_to_access_features": "You are on the __appName__ Free plan. Upgrade to access these <0>Premium Features", "one_collaborator": "Only one collaborator", "one_free_collab": "One free collaborator", + "one_per_project": "1 per project", "one_step_away_from_professional_features": "You are one step away from accessing <0>Overleaf Professional features!", "one_user": "1 user", "online_latex_editor": "Online LaTeX Editor", @@ -1464,6 +1473,7 @@ "ready_to_join_x": "You’re ready to join __inviterName__", "ready_to_join_x_in_group_y": "You’re ready to join __inviterName__ in __groupName__", "ready_to_set_up": "Ready to set up", + "ready_to_use_templates": "Ready-to-use templates", "real_time_track_changes": "Real-time <0>track-changes", "realtime_track_changes": "Real-time track changes", "realtime_track_changes_info_v2": "Switch on track changes to see who made every change, accept or reject others’ changes, and write comments.", @@ -1489,6 +1499,7 @@ "reference_error_relink_hint": "If this error persists, try re-linking your account here:", "reference_managers": "Reference managers", "reference_search": "Advanced reference search", + "reference_search_info_new": "Find your references easily—search by author, title, year, or journal.", "reference_search_info_v2": "It’s easy to find your references - you can search by author, title, year or journal. You can still search by citation key too.", "reference_sync": "Reference manager sync", "refresh": "Refresh", @@ -1835,6 +1846,7 @@ "success_sso_set_up": "Success! Single sign-on is all set up for you.", "suggested": "Suggested", "suggestion": "Suggestion", + "support": "Support", "sure_you_want_to_cancel_plan_change": "Are you sure you want to revert your scheduled plan change? You will remain subscribed to the <0>__planName__ plan.", "sure_you_want_to_change_plan": "Are you sure you want to change plan to <0>__planName__?", "sure_you_want_to_delete": "Are you sure you want to permanently delete the following files?", @@ -1845,6 +1857,7 @@ "symbol_palette": "Symbol palette", "symbol_palette_highlighted": "<0>Symbol palette", "symbol_palette_info": "A quick and convenient way to insert math symbols into your document.", + "symbol_palette_info_new": "Insert math symbols into your document with the click of a button.", "sync": "Sync", "sync_dropbox_github": "Sync with Dropbox and GitHub", "sync_project_to_github_explanation": "Any changes you have made in __appName__ will be committed and merged with any updates in GitHub.", @@ -1878,6 +1891,7 @@ "templates_admin_source_project": "Admin: Source Project", "templates_page_summary": "Start your projects with quality LaTeX templates for journals, CVs, resumes, papers, presentations, assignments, letters, project reports, and more. Search or browse below.", "templates_page_title": "Templates - Journals, CVs, Presentations, Reports and More", + "ten_per_project": "10 per project", "terminated": "Compilation cancelled", "terms": "Terms", "test": "Test",