[web] Use icons from `@phosphor-icons/react` for the project-list (DS-Nav) (#22517)

* Use icons from `@phosphor-icons/react`

https://phosphoricons.com/

* Add the phosphor Plus icon to the tag list

* Add SignOut icon

* Use Phosphor icon for tags

* Fix icon color when active

* Add offset to dropdown menus so they're positioned like in Figma

---------

Co-authored-by: Tim Down <158919+timdown@users.noreply.github.com>
GitOrigin-RevId: 039e98063d775d0348d227202d5ecd6a0bfb7b65

package-lock.json

@@ -8646,6 +8646,19 @@
       "resolved": "services/web",
       "link": true
     },
+    "node_modules/@phosphor-icons/react": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.7.tgz",
+      "integrity": "sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8",
+        "react-dom": ">= 16.8"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -41444,6 +41457,7 @@
         "@overleaf/promise-utils": "*",
         "@overleaf/redis-wrapper": "*",
         "@overleaf/settings": "*",
+        "@phosphor-icons/react": "^2.1.7",
         "@slack/webhook": "^7.0.2",
         "@xmldom/xmldom": "^0.7.13",
         "accepts": "^1.3.7",
@@ -51176,6 +51190,7 @@
         "@overleaf/redis-wrapper": "*",
         "@overleaf/settings": "*",
         "@overleaf/stream-utils": "*",
+        "@phosphor-icons/react": "^2.1.7",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
         "@pollyjs/adapter-node-http": "^6.0.6",
         "@pollyjs/core": "^6.0.6",
@@ -53316,6 +53331,12 @@
         }
       }
     },
+    "@phosphor-icons/react": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.7.tgz",
+      "integrity": "sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==",
+      "requires": {}
+    },
     "@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",

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

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import classnames from 'classnames'
+import { Question, User } from '@phosphor-icons/react'
 import NewProjectButton from '../new-project-button'
 import SidebarFilters from './sidebar-filters'
 import AddAffiliation, { useAddAffiliation } from '../add-affiliation'
 import SurveyWidget from '../survey-widget'
-import { usePersistedResize } from '../../../../shared/hooks/use-resize'
-import MaterialIcon from '@/shared/components/material-icon'
+import { usePersistedResize } from '@/shared/hooks/use-resize'
 import { Dropdown } from 'react-bootstrap-5'
 import getMeta from '@/utils/meta'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
@@ -77,11 +77,18 @@ function SidebarDsNav() {
                   }}
                 >
                   <div>
-                    <MaterialIcon type="help" size="2x" />
+                    <Question size={24} />
                   </div>
                 </OLTooltip>
               </Dropdown.Toggle>
-              <Dropdown.Menu as="ul" role="menu" align="end">
+              <Dropdown.Menu
+                as="ul"
+                role="menu"
+                align="end"
+                popperConfig={{
+                  modifiers: [{ name: 'offset', options: { offset: [0, 5] } }],
+                }}
+              >
                 <NavDropdownMenuItems
                   dropdown={helpItem.dropdown}
                   showContactUsModal={showContactUsModal}
@@ -105,11 +112,20 @@ function SidebarDsNav() {
                     }}
                   >
                     <div>
-                      <MaterialIcon type="person" size="2x" />
+                      <User size={24} />
                     </div>
                   </OLTooltip>
                 </Dropdown.Toggle>
-                <Dropdown.Menu as="ul" role="menu" align="end">
+                <Dropdown.Menu
+                  as="ul"
+                  role="menu"
+                  align="end"
+                  popperConfig={{
+                    modifiers: [
+                      { name: 'offset', options: { offset: [-50, 5] } },
+                    ],
+                  }}
+                >
                   <AccountMenuItems
                     sessionUser={sessionUser}
                     showSubscriptionLink={showSubscriptionLink}

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

@@ -1,5 +1,6 @@
 import { sortBy } from 'lodash'
 import { useTranslation } from 'react-i18next'
+import { Plus, TagSimple } from '@phosphor-icons/react'
 import MaterialIcon from '../../../../shared/components/material-icon'
 import {
   UNCATEGORIZED_KEY,
@@ -46,7 +47,12 @@ export default function TagsList() {
       </li>
       <li className="tag">
         <button type="button" className="tag-name" onClick={openCreateTagModal}>
-          <MaterialIcon type="add" className="tag-list-icon" />
+          {isDsNav ? (
+            <Plus weight="bold" />
+          ) : (
+            <MaterialIcon type="add" className="tag-list-icon" />
+          )}
+
           <span className="name">{t('new_tag')}</span>
         </button>
       </li>
@@ -68,7 +74,11 @@ export default function TagsList() {
                   color: getTagColor(tag),
                 }}
               >
-                <MaterialIcon type="label" className="tag-list-icon" />
+                {isDsNav ? (
+                  <TagSimple weight="fill" className="tag-list-icon" />
+                ) : (
+                  <MaterialIcon type="label" className="tag-list-icon" />
+                )}
               </span>
               <span className="name">
                 {tag.name}{' '}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/account-menu-items.tsx

@@ -5,6 +5,8 @@ import type { NavbarSessionUser } from '@/features/ui/components/types/navbar'
 import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 import NavDropdownDivider from './nav-dropdown-divider'
 import NavDropdownLinkItem from './nav-dropdown-link-item'
+import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav'
+import { SignOut } from '@phosphor-icons/react'
 
 export function AccountMenuItems({
   sessionUser,
@@ -15,7 +17,7 @@ export function AccountMenuItems({
 }) {
   const { t } = useTranslation()
   const logOutFormId = 'logOutForm'
-
+  const isDsNav = useIsDsNav()
   return (
     <>
       <Dropdown.Item as="li" disabled role="menuitem">
@@ -43,8 +45,10 @@ export function AccountMenuItems({
           type="submit"
           form={logOutFormId}
           role="menuitem"
+          className="d-flex align-items-center justify-content-between"
         >
-          {t('log_out')}
+          <span>{t('log_out')}</span>
+          {isDsNav && <SignOut size={16} />}
         </Dropdown.Item>
         <form id={logOutFormId} method="POST" action="/logout">
           <input type="hidden" name="_csrf" value={getMeta('ol-csrfToken')} />

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

@@ -239,6 +239,7 @@
 
       &.show {
         background-color: var(--bg-accent-03);
+        color: var(--green-60);
       }
 
       &::after {

services/web/package.json

@@ -85,6 +85,7 @@
     "@overleaf/promise-utils": "*",
     "@overleaf/redis-wrapper": "*",
     "@overleaf/settings": "*",
+    "@phosphor-icons/react": "^2.1.7",
     "@slack/webhook": "^7.0.2",
     "@xmldom/xmldom": "^0.7.13",
     "accepts": "^1.3.7",