Merge pull request #36345 from overleaf/em-library-design-review

[web] Library design review fixes

GitOrigin-RevId: dfd1846d275eb975906a2fe8a8c4dee057c51d1f

services/web/frontend/extracted-translations.json

@@ -24,8 +24,6 @@
   "about_to_archive_projects": "",
   "about_to_delete_cert": "",
   "about_to_delete_projects": "",
-  "about_to_delete_references_permanently": "",
-  "about_to_delete_references_permanently_plural": "",
   "about_to_delete_tag": "",
   "about_to_delete_the_following_project": "",
   "about_to_delete_the_following_projects": "",
@@ -470,6 +468,8 @@
   "delete_message_confirmation": "",
   "delete_permanently": "",
   "delete_projects": "",
+  "delete_references_permanently_question": "",
+  "delete_references_permanently_question_plural": "",
   "delete_row_or_column": "",
   "delete_sso_config": "",
   "delete_table": "",
@@ -1673,6 +1673,8 @@
   "references_moved_to_trash": "",
   "references_moved_to_trash_plural": "",
   "references_permanently_deleted_after_30_days": "",
+  "references_will_be_gone_for_good": "",
+  "references_will_be_gone_for_good_plural": "",
   "refresh": "",
   "refresh_page_after_linking_dropbox": "",
   "refresh_page_after_starting_free_trial": "",

services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx

@@ -97,7 +97,7 @@ function SidebarDsNav({
                 aria-current={isTrashActive ? 'page' : undefined}
                 onClick={() => selectFilter('trashed')}
               >
-                <Trash size={24} />
+                <Trash size={20} />
                 <span className="ds-nav-page-switcher-item-label">
                   {t('trash')}
                 </span>

services/web/frontend/js/features/project-list/components/sidebar/sidebar-filters.tsx

@@ -58,7 +58,7 @@ export default function SidebarFilters({
         activePage={activePage}
         filter="all"
         text={isLibraryEnabled ? t('projects') : t('all_projects')}
-        icon={isLibraryEnabled && <Folder size={24} />}
+        icon={isLibraryEnabled && <Folder size={20} />}
       />
       <SidebarFilter
         activePage={activePage}

services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx

@@ -57,7 +57,7 @@ export function SidebarLowerSection({
                 role="menuitem"
                 className="ds-nav-page-switcher-item"
               >
-                <Question size={24} />
+                <Question size={20} />
                 <span className="ds-nav-page-switcher-item-label">
                   {t('help')}
                 </span>
@@ -97,7 +97,7 @@ export function SidebarLowerSection({
                 role="menuitem"
                 className="ds-nav-page-switcher-item"
               >
-                <User size={24} />
+                <User size={20} />
                 <span className="ds-nav-page-switcher-item-label">
                   {t('Account')}
                 </span>

services/web/frontend/stylesheets/pages/project-list-ds-nav.scss

@@ -125,11 +125,22 @@ body {
         .sidebar-filter-button {
           display: flex;
           align-items: center;
-          padding-left: calc(var(--spacing-05) + 24px + var(--spacing-05));
+          padding-left: calc(var(--spacing-05) + 20px + var(--spacing-05));
         }
 
         .sidebar-filter-button-with-icon {
-          padding-left: var(--spacing-05);
+          // Only the items with an icon are 44px tall: 20px of content between
+          // 12px paddings. The rest of the filters stay at 40px.
+          line-height: var(--line-height-02);
+          padding: var(--spacing-05);
+
+          // Without this the icon is an inline box sitting on the text
+          // baseline, which leaves descender space below it and stops
+          // align-items from centring it against the label.
+          .icon {
+            display: flex;
+            align-items: center;
+          }
 
           svg {
             margin-right: var(--spacing-05);
@@ -137,11 +148,11 @@ body {
         }
 
         .dropdown-header {
-          padding-left: calc(var(--spacing-06) + 24px + var(--spacing-05));
+          padding-left: calc(var(--spacing-06) + 20px + var(--spacing-05));
         }
 
         > li.tag button.tag-name {
-          padding-left: calc(var(--spacing-06) + 24px + var(--spacing-05));
+          padding-left: calc(var(--spacing-06) + 20px + var(--spacing-05));
         }
       }
     }
@@ -245,7 +256,10 @@ body {
         align-items: center;
         width: 100%;
         gap: var(--spacing-05);
-        padding: var(--spacing-04) var(--spacing-05);
+
+        // 20px of text between 12px paddings makes the item 44px tall.
+        line-height: var(--line-height-02);
+        padding: var(--spacing-05);
         border: none;
         border-radius: var(--border-radius-medium);
         background: none;

services/web/locales/en.json

@@ -28,8 +28,6 @@
   "about_to_archive_projects": "You are about to archive the following projects:",
   "about_to_delete_cert": "You are about to delete the following certificate:",
   "about_to_delete_projects": "You are about to delete the following projects:",
-  "about_to_delete_references_permanently": "You are about to permanently delete __count__ reference",
-  "about_to_delete_references_permanently_plural": "You are about to permanently delete __count__ references",
   "about_to_delete_tag": "You are about to delete the following tag (any projects in them will not be deleted):",
   "about_to_delete_the_following_project": "You are about to delete the following project",
   "about_to_delete_the_following_projects": "You are about to delete the following projects",
@@ -612,6 +610,8 @@
   "delete_message_confirmation": "Are you sure you want to delete this message? This can’t be undone.",
   "delete_permanently": "Delete permanently",
   "delete_projects": "Delete Projects",
+  "delete_references_permanently_question": "Permanently delete this reference?",
+  "delete_references_permanently_question_plural": "Delete __count__ references permanently?",
   "delete_row_or_column": "Delete row or column",
   "delete_sso_config": "Delete SSO configuration",
   "delete_table": "Delete table",
@@ -2158,6 +2158,8 @@
   "references_moved_to_trash": "__count__ reference moved to Trash",
   "references_moved_to_trash_plural": "__count__ references moved to Trash",
   "references_permanently_deleted_after_30_days": "References are permanently deleted after 30 days.",
+  "references_will_be_gone_for_good": "<strong>__citationKey__</strong> will be gone for good. This can’t be undone.",
+  "references_will_be_gone_for_good_plural": "These references will be gone for good. This can’t be undone.",
   "refresh": "Refresh",
   "refresh_page_after_linking_dropbox": "Please refresh this page after linking your account to Dropbox.",
   "refresh_page_after_starting_free_trial": "Please refresh this page after starting your free trial.",