From 40357f79568aaea6f65bfc5cdc9e575c7d09cebc Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Nov 2023 21:17:22 +0000
Subject: [PATCH] Roadmap action dropdown fix

---
 .../ReactIcons/MoreVerticalIcon.tsx           | 21 +++++++++++++++++++
 src/components/TeamDropdown/TeamDropdown.tsx  |  8 +++----
 .../RoadmapActionDropdown.tsx                 |  4 ++--
 3 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ReactIcons/MoreVerticalIcon.tsx

diff --git a/src/components/ReactIcons/MoreVerticalIcon.tsx b/src/components/ReactIcons/MoreVerticalIcon.tsx
new file mode 100644
index 000000000..9f162bd51
--- /dev/null
+++ b/src/components/ReactIcons/MoreVerticalIcon.tsx
@@ -0,0 +1,21 @@
+type MoreVerticalIconProps = {
+  className?: string;
+};
+
+export function MoreVerticalIcon(props: MoreVerticalIconProps) {
+  const { className } = props;
+
+  return (
+    <svg
+      clipRule="evenodd"
+      fillRule="evenodd"
+      strokeLinejoin="round"
+      strokeMiterlimit="2"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="m12 16.495c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25zm0-6.75c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25zm0-6.75c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25z" />
+    </svg>
+  );
+}
diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx
index 1e93c126d..4b6edf3f9 100644
--- a/src/components/TeamDropdown/TeamDropdown.tsx
+++ b/src/components/TeamDropdown/TeamDropdown.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import ChevronDown from '../../icons/dropdown.svg';
 import { httpGet } from '../../lib/http';
 import { useAuth } from '../../hooks/use-auth';
 import { useOutsideClick } from '../../hooks/use-outside-click';
@@ -10,6 +9,7 @@ import { useStore } from '@nanostores/react';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useToast } from '../../hooks/use-toast';
 import type { ValidTeamType } from '../CreateTeam/Step0';
+import { DropdownIcon } from '../ReactIcons/DropdownIcon.tsx';
 
 const allowedStatus = ['invited', 'joined', 'rejected'] as const;
 export type AllowedMemberStatus = (typeof allowedStatus)[number];
@@ -44,7 +44,7 @@ export function TeamDropdown() {
     if (shouldShowTeamIndicator) {
       localStorage.setItem(
         'viewedTeamsCount',
-        (viewedTeamsCountNumber + 1).toString()
+        (viewedTeamsCountNumber + 1).toString(),
       );
     }
   }, []);
@@ -67,7 +67,7 @@ export function TeamDropdown() {
 
   async function getAllTeams() {
     const { response, error } = await httpGet<TeamListResponse>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams`
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams`,
     );
     if (error || !response) {
       toast.error(error?.message || 'Something went wrong');
@@ -140,7 +140,7 @@ export function TeamDropdown() {
               {isLoading && 'Loading ..'}
             </span>
           </div>
-          <img alt={'show dropdown'} src={ChevronDown.src} className="h-4 w-4" />
+          <DropdownIcon className={'h-4 w-4'} />
         </button>
 
         {showDropdown && (
diff --git a/src/components/TeamRoadmapsList/RoadmapActionDropdown.tsx b/src/components/TeamRoadmapsList/RoadmapActionDropdown.tsx
index f1d4d487d..c8561859d 100644
--- a/src/components/TeamRoadmapsList/RoadmapActionDropdown.tsx
+++ b/src/components/TeamRoadmapsList/RoadmapActionDropdown.tsx
@@ -1,7 +1,7 @@
-import MoreIcon from '../../icons/more-vertical.svg';
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react';
+import { MoreVerticalIcon } from '../ReactIcons/MoreVerticalIcon.tsx';
 
 type RoadmapActionDropdownProps = {
   onDelete?: () => void;
@@ -26,7 +26,7 @@ export function RoadmapActionDropdown(props: RoadmapActionDropdownProps) {
         onClick={() => setIsOpen(!isOpen)}
         className="hidden items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30 sm:flex"
       >
-        <img alt="menu" src={MoreIcon.src} className="h-4 w-4" />
+        <MoreVerticalIcon className={'h-4 w-4'} />
       </button>
       <button
         disabled={false}