Merge pull request #28160 from overleaf/dp-integration-panel

Add reference managers to integration panel

GitOrigin-RevId: 8e838c33727c985212abd97f7c2fbecc7c439de0

services/web/frontend/extracted-translations.json

@@ -45,6 +45,7 @@
   "accept_terms_and_conditions": "",
   "accepted_invite": "",
   "access_all_premium_features": "",
+  "access_all_premium_features_including_more_collaborators_real_time_track_changes_and_a_longer_compile_time": "",
   "access_denied": "",
   "access_edit_your_projects": "",
   "access_levels_changed": "",
@@ -259,6 +260,9 @@
   "choose_how_you_search_your_references": "",
   "choose_which_experiments": "",
   "citation": "",
+  "cite_a_reference_from_your_reference_manager_to_automatically_add_it_to_your_bib_file": "",
+  "cite_directly_or_import_references": "",
+  "cite_faster": "",
   "clear_cached_files": "",
   "clear_search": "",
   "click_here_to_view_sl_in_lng": "",
@@ -422,6 +426,7 @@
   "disconnected": "",
   "discount": "",
   "discount_of": "",
+  "discover_the_fastest_easiest_way_to_cite_in_app": "",
   "discover_the_fastest_way_to_search_and_cite": "",
   "display": "",
   "display_deleted_user": "",
@@ -962,6 +967,7 @@
   "link_to_mendeley": "",
   "link_to_papers": "",
   "link_to_zotero": "",
+  "link_to_zotero_mendeley_papers_to_see_search_results_from_your_libraries_without_importing_files": "",
   "linked_accounts": "",
   "linked_collabratec_description": "",
   "linked_file": "",
@@ -1031,6 +1037,7 @@
   "maybe_later": "",
   "members_added": "",
   "members_management": "",
+  "mendeley": "",
   "mendeley_dynamic_sync_description": "",
   "mendeley_groups_loading_error": "",
   "mendeley_groups_relink": "",
@@ -1191,6 +1198,7 @@
   "owner": "",
   "page_current": "",
   "pagination_navigation": "",
+  "papers": "",
   "papers_dynamic_sync_description": "",
   "papers_groups_loading_error": "",
   "papers_groups_relink": "",
@@ -1492,6 +1500,7 @@
   "search_all_project_files": "",
   "search_bib_files": "",
   "search_by_author_journal_title_and_more_link_to_zotero_mendeley_papers": "",
+  "search_by_citation_key_author_journal_title_year_and_date": "",
   "search_by_citekey_author_year_title": "",
   "search_command_find": "",
   "search_command_replace": "",
@@ -2230,6 +2239,7 @@
   "zoom_in": "",
   "zoom_out": "",
   "zoom_to": "",
+  "zotero": "",
   "zotero_dynamic_sync_description": "",
   "zotero_groups_loading_error": "",
   "zotero_groups_relink": "",

services/web/frontend/js/features/ide-redesign/components/integrations-panel/integration-card.tsx

@@ -3,13 +3,15 @@ import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
 
 export default function IntegrationCard({
+  href,
   onClick,
   title,
   description,
   icon,
   showPaywallBadge,
 }: {
-  onClick: () => void
+  href?: string
+  onClick?: () => void
   title: string
   description: string
   icon: React.ReactNode
@@ -17,26 +19,45 @@ export default function IntegrationCard({
 }) {
   const { t } = useTranslation()
 
-  return (
-    <button onClick={onClick} className="integrations-panel-card-button">
-      <div className="integrations-panel-card-contents">
-        {icon}
-        <div className="integrations-panel-card-inner">
-          <div className="integrations-panel-card-header">
-            <div className="integrations-panel-card-title">{title}</div>
-            {showPaywallBadge && (
-              <OLBadge
-                prepend={<MaterialIcon type="star" />}
-                bg="light"
-                className="integrations-panel-card-premium-badge"
-              >
-                {t('premium')}
-              </OLBadge>
-            )}
+  const content = (
+    <div className="integrations-panel-card-contents">
+      <div className="integrations-panel-card-icon">{icon}</div>
+      <div className="integrations-panel-card-inner">
+        <div className="integrations-panel-card-header">
+          <div className="integrations-panel-card-title" translate="no">
+            {title}
           </div>
-          <p className="integrations-panel-card-description">{description}</p>
+          {showPaywallBadge && (
+            <OLBadge
+              prepend={<MaterialIcon type="star" />}
+              bg="light"
+              className="integrations-panel-card-premium-badge"
+            >
+              {t('premium')}
+            </OLBadge>
+          )}
         </div>
+        <p className="integrations-panel-card-description">{description}</p>
       </div>
+    </div>
+  )
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noreferrer"
+        className="integrations-panel-card-button"
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <button onClick={onClick} className="integrations-panel-card-button">
+      {content}
     </button>
   )
 }

services/web/frontend/js/shared/svgs/dropbox-logo.tsx

@@ -7,7 +7,6 @@ function DropboxLogo({ size = 40 }: { size?: number }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="40" height="40" fill="none" />
       <g clipPath="url(#clip0_10_138)">
         <path
           d="M10.8328 4.33334L1.6665 10.1732L10.8328 16.0131L20.0006 10.1732L10.8328 4.33334Z"

services/web/frontend/js/shared/svgs/git-logo-white.tsx

@@ -1,29 +0,0 @@
-function GitLogoWhite({ size = 40 }: { size?: number }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 92 92"
-    >
-      <defs>
-        <clipPath id="a">
-          <path d="M0 .113h91.887V92H0Zm0 0" />
-        </clipPath>
-      </defs>
-      <g clipPath="url(#a)">
-        <path
-          style={{
-            stroke: 'none',
-            fillRule: 'nonzero',
-            fill: '#fff',
-            fillOpacity: 1,
-          }}
-          d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"
-        />
-      </g>
-    </svg>
-  )
-}
-
-export default GitLogoWhite

services/web/frontend/js/shared/svgs/mendeley-logo.tsx

@@ -1,13 +1,12 @@
-function MendeleyLogo() {
+function MendeleyLogo({ size = 40 }: { size?: number }) {
   return (
     <svg
-      width="40"
-      height="40"
+      width={size}
+      height={size}
       viewBox="0 0 40 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="40" height="40" fill="white" />
       <mask
         id="mask0_10_136"
         style={{ maskType: 'alpha' }}

services/web/frontend/js/shared/svgs/papers-logo.tsx

@@ -1,8 +1,8 @@
-function PapersLogo() {
+function PapersLogo({ size = 40 }: { size?: number }) {
   return (
     <svg
-      width="39"
-      height="40"
+      width={size * (47 / 48)}
+      height={size}
       viewBox="0 0 47 48"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

services/web/frontend/stylesheets/components/integrations-panel.scss

@@ -27,6 +27,8 @@
 
 .integrations-panel-card-button {
   all: unset;
+  display: block;
+  cursor: pointer;
   background-color: var(--integrations-panel-card-button-background);
   width: 100%;
 
@@ -34,6 +36,10 @@
     background-color: var(
       --integrations-panel-card-button-hover-background
     ) !important;
+
+    .integrations-panel-card-icon {
+      background-color: var(--bg-light-secondary);
+    }
   }
 }
 
@@ -45,6 +51,17 @@
   border-bottom: 1px solid var(--integrations-panel-card-border);
 }
 
+.integrations-panel-card-icon {
+  background-color: var(--bg-light-primary);
+  color: var(--content-primary);
+  border-radius: var(--border-radius-medium);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .integrations-panel-card-header {
   display: flex;
   justify-content: space-between;

services/web/frontend/stylesheets/pages/editor/references-search.scss

@@ -74,3 +74,35 @@
     }
   }
 }
+
+.write-and-cite-pros-list-wrapper {
+  max-width: 450px;
+  margin: 0 auto;
+}
+
+.write-and-cite-pros-list li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-03);
+  font-size: var(--font-size-03);
+}
+
+.write-and-cite-pros-check-icon {
+  align-self: start;
+
+  & > span {
+    vertical-align: middle;
+  }
+
+  flex: 0 0 auto;
+}
+
+.write-and-cite-pro {
+  flex: 0 1 100%;
+}
+
+.write-and-cite-upgrade-prompt-header {
+  font-size: var(--font-size-05);
+}

services/web/locales/en.json

@@ -49,6 +49,7 @@
   "accepted_invite": "Accepted invite",
   "accepting_invite_as": "You are accepting this invite as",
   "access_all_premium_features": "Access all premium features, including more collaborators, full project history, and a longer compile time.",
+  "access_all_premium_features_including_more_collaborators_real_time_track_changes_and_a_longer_compile_time": "Access all premium features, including more collaborators, real-time track changes, and a longer compile time.",
   "access_denied": "Access Denied",
   "access_edit_your_projects": "Access and edit your projects",
   "access_levels_changed": "Access levels changed",
@@ -331,6 +332,9 @@
   "choose_which_experiments": "Choose which experiments you’d like to try.",
   "choose_your_plan": "Choose your plan",
   "citation": "Citation",
+  "cite_a_reference_from_your_reference_manager_to_automatically_add_it_to_your_bib_file": "Cite a reference from your reference manager to automatically add it to your .bib file",
+  "cite_directly_or_import_references": "Cite directly or import references",
+  "cite_faster": "Cite faster",
   "city": "City",
   "clear_cached_files": "Clear cached files",
   "clear_search": "clear search",
@@ -549,6 +553,7 @@
   "discount": "Discount",
   "discount_of": "Discount of __amount__",
   "discover_latex_templates_and_examples": "Discover LaTeX templates and examples to help with everything from writing a journal article to using a specific LaTeX package.",
+  "discover_the_fastest_easiest_way_to_cite_in_app": "Discover the fastest, easiest way to cite in __appName__",
   "discover_the_fastest_way_to_search_and_cite": "Discover the fastest way to search and cite",
   "discover_why_over_people_worldwide_trust_overleaf": "Discover why over __count__ million people worldwide trust Overleaf with their work.",
   "display": "Display",
@@ -1245,6 +1250,7 @@
   "link_to_mendeley": "Link to Mendeley",
   "link_to_papers": "Link to Papers",
   "link_to_zotero": "Link to Zotero",
+  "link_to_zotero_mendeley_papers_to_see_search_results_from_your_libraries_without_importing_files": "Link to Zotero, Mendeley, and Papers to see search results from your libraries without importing files",
   "link_your_accounts": "Link your accounts",
   "linked_accounts": "Linked accounts",
   "linked_collabratec_description": "Use Collabratec to manage your __appName__ projects.",
@@ -1955,6 +1961,7 @@
   "search_all_project_files": "Search all project files",
   "search_bib_files": "Search by author, title, year",
   "search_by_author_journal_title_and_more_link_to_zotero_mendeley_papers": "Search by author, journal, title, and more. Link to Zotero, Mendeley, or Papers to search and add references from your libraries directly in your project.",
+  "search_by_citation_key_author_journal_title_year_and_date": "Search by citation key, author, journal, title, year, and date.",
   "search_by_citekey_author_year_title": "Search by citation key, author, title, year",
   "search_command_find": "Find",
   "search_command_replace": "Replace",