Replace tags-list dropdown icon to Phosphor ThreeDotsVertical (#22562)

GitOrigin-RevId: 50c70aca162e787eb6ab051ac56c6b226a6c6aa6

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"

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);
       }
     }
   }

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;
+          }
         }
       }
     }

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;