Merge pull request #22547 from overleaf/revert-22517-ac-ds-nav-phosphor-icons

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

GitOrigin-RevId: 350f5d69a8f575d8ee4e3bd6af46e4e5f7137c7d

package-lock.json

@@ -8659,19 +8659,6 @@
       "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",
@@ -41470,7 +41457,6 @@
         "@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",
@@ -51212,7 +51198,6 @@
         "@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",
@@ -53353,12 +53338,6 @@
         }
       }
     },
-    "@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 { usePersistedResize } from '../../../../shared/hooks/use-resize'
+import MaterialIcon from '@/shared/components/material-icon'
 import { Dropdown } from 'react-bootstrap-5'
 import getMeta from '@/utils/meta'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
@@ -77,18 +77,11 @@ function SidebarDsNav() {
                   }}
                 >
                   <div>
-                    <Question size={24} />
+                    <MaterialIcon type="help" size="2x" />
                   </div>
                 </OLTooltip>
               </Dropdown.Toggle>
-              <Dropdown.Menu
-                as="ul"
-                role="menu"
-                align="end"
-                popperConfig={{
-                  modifiers: [{ name: 'offset', options: { offset: [0, 5] } }],
-                }}
-              >
+              <Dropdown.Menu as="ul" role="menu" align="end">
                 <NavDropdownMenuItems
                   dropdown={helpItem.dropdown}
                   showContactUsModal={showContactUsModal}
@@ -112,20 +105,11 @@ function SidebarDsNav() {
                     }}
                   >
                     <div>
-                      <User size={24} />
+                      <MaterialIcon type="person" size="2x" />
                     </div>
                   </OLTooltip>
                 </Dropdown.Toggle>
-                <Dropdown.Menu
-                  as="ul"
-                  role="menu"
-                  align="end"
-                  popperConfig={{
-                    modifiers: [
-                      { name: 'offset', options: { offset: [-50, 5] } },
-                    ],
-                  }}
-                >
+                <Dropdown.Menu as="ul" role="menu" align="end">
                   <AccountMenuItems
                     sessionUser={sessionUser}
                     showSubscriptionLink={showSubscriptionLink}

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

@@ -1,6 +1,5 @@
 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,
@@ -47,12 +46,7 @@ export default function TagsList() {
       </li>
       <li className="tag">
         <button type="button" className="tag-name" onClick={openCreateTagModal}>
-          {isDsNav ? (
-            <Plus weight="bold" />
-          ) : (
-            <MaterialIcon type="add" className="tag-list-icon" />
-          )}
-
+          <MaterialIcon type="add" className="tag-list-icon" />
           <span className="name">{t('new_tag')}</span>
         </button>
       </li>
@@ -74,11 +68,7 @@ export default function TagsList() {
                   color: getTagColor(tag),
                 }}
               >
-                {isDsNav ? (
-                  <TagSimple weight="fill" className="tag-list-icon" />
-                ) : (
-                  <MaterialIcon type="label" 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,8 +5,6 @@ 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,
@@ -17,7 +15,7 @@ export function AccountMenuItems({
 }) {
   const { t } = useTranslation()
   const logOutFormId = 'logOutForm'
-  const isDsNav = useIsDsNav()
+
   return (
     <>
       <Dropdown.Item as="li" disabled role="menuitem">
@@ -45,10 +43,8 @@ export function AccountMenuItems({
           type="submit"
           form={logOutFormId}
           role="menuitem"
-          className="d-flex align-items-center justify-content-between"
         >
-          <span>{t('log_out')}</span>
-          {isDsNav && <SignOut size={16} />}
+          {t('log_out')}
         </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,7 +239,6 @@
 
       &.show {
         background-color: var(--bg-accent-03);
-        color: var(--green-60);
       }
 
       &::after {

services/web/package.json

@@ -85,7 +85,6 @@
     "@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",