From 14ba6013ac6e40b37bfca02432053e8e438d7286 Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Tue, 17 Dec 2024 17:45:10 +0100
Subject: [PATCH] Replace tags-list dropdown icon to Phosphor ThreeDotsVertical
 (#22562)

GitOrigin-RevId: 50c70aca162e787eb6ab051ac56c6b226a6c6aa6
---
 .../project-list/components/sidebar/tags-list.tsx  |  6 ++++--
 .../bootstrap-5/pages/project-list-default.scss    |  4 ++++
 .../bootstrap-5/pages/project-list-ds-nav.scss     | 14 +++++++++++++-
 .../bootstrap-5/pages/project-list.scss            |  4 ----
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
index f1bc00b78f..b149a6b44c 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
@@ -1,6 +1,6 @@
 import { sortBy } from 'lodash'
 import { useTranslation } from 'react-i18next'
-import { Plus, TagSimple } from '@phosphor-icons/react'
+import { DotsThreeVertical, Plus, TagSimple } from '@phosphor-icons/react'
 import MaterialIcon from '../../../../shared/components/material-icon'
 import {
   UNCATEGORIZED_KEY,
@@ -93,7 +93,9 @@ export default function TagsList() {
                 aria-label={t('open_action_menu', { name: tag.name })}
                 id={`${tag._id}-dropdown-toggle`}
                 data-testid="tag-dropdown-toggle"
-              />
+              >
+                {isDsNav && <DotsThreeVertical weight="bold" />}
+              </DropdownToggle>
               <DropdownMenu className="dropdown-menu-sm-width">
                 <DropdownItem
                   as="li"
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-default.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-default.scss
index caa4437773..eba9c43771 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-default.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-default.scss
@@ -116,8 +116,12 @@
 
     .tag-menu {
       button.dropdown-toggle {
+        border-radius: var(--border-radius-base);
         border: 1px solid var(--white);
         color: var(--content-primary-dark);
+        width: 16px;
+        height: 16px;
+        padding: var(--spacing-01) var(--spacing-03);
       }
     }
   }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
index e916f0695b..22b7434b09 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
@@ -177,8 +177,20 @@
 
       .tag-menu {
         button.dropdown-toggle {
-          border: 1px solid var(--content-secondary);
+          border-radius: var(--border-radius-full);
+          border: none;
           color: var(--content-secondary);
+          height: 20px;
+          width: 20px;
+          padding: 0;
+
+          &::after {
+            display: none;
+          }
+
+          &:hover {
+            background-color: var(--neutral-20) !important;
+          }
         }
       }
     }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
index a23189d688..c6e61099c7 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
@@ -285,15 +285,11 @@
 
     .tag-menu {
       button.dropdown-toggle {
-        border-radius: var(--border-radius-base);
         background-color: transparent;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 16px;
-        height: 16px;
         position: relative;
-        padding: var(--spacing-01) var(--spacing-03);
 
         &::after {
           margin: 0;