Update images

src/components/CustomRoadmap/PersonalRoadmapActionDropdown.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 PersonalRoadmapActionDropdownProps = {
   onDelete?: () => void;
@@ -9,7 +9,9 @@ type PersonalRoadmapActionDropdownProps = {
   onUpdateSharing?: () => void;
 };
 
-export function PersonalRoadmapActionDropdown(props: PersonalRoadmapActionDropdownProps) {
+export function PersonalRoadmapActionDropdown(
+  props: PersonalRoadmapActionDropdownProps,
+) {
   const { onDelete, onUpdateSharing, onCustomize } = props;
 
   const menuRef = useRef<HTMLDivElement>(null);
@@ -26,7 +28,7 @@ export function PersonalRoadmapActionDropdown(props: PersonalRoadmapActionDropdo
         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

src/components/RoadCard/Editor.tsx

@@ -1,5 +1,5 @@
 import { useCopyText } from '../../hooks/use-copy-text';
-import CopyIcon from '../../icons/copy.svg';
+import { CopyIcon } from 'lucide-react';
 
 type EditorProps = {
   title: string;
@@ -20,11 +20,11 @@ export function Editor(props: EditorProps) {
         <button className="flex items-center" onClick={() => copyText(text)}>
           {isCopied && (
             <span className="mr-1 text-xs leading-none text-gray-700">
-              Copied!
+              Copied!&nbsp;
             </span>
           )}
 
-          <img src={CopyIcon.src} alt="Copy" className="inline-block h-4 w-4" />
+          <CopyIcon className="inline-block h-4 w-4" />
         </button>
       </div>
       <textarea

src/components/RoadCard/RoadCardPage.tsx

@@ -2,13 +2,13 @@ import { useState } from 'react';
 
 import { useCopyText } from '../../hooks/use-copy-text';
 import { useAuth } from '../../hooks/use-auth';
-import CopyIcon from '../../icons/copy.svg';
 import { RoadmapSelect } from './RoadmapSelect';
 import { GitHubReadmeBanner } from './GitHubReadmeBanner';
 import { downloadImage } from '../../helper/download-image';
 import { SelectionButton } from './SelectionButton';
 import { StepCounter } from './StepCounter';
 import { Editor } from './Editor';
+import { CopyIcon } from 'lucide-react';
 
 type StepLabelProps = {
   label: string;
@@ -34,7 +34,7 @@ export function RoadCardPage() {
   }
 
   const badgeUrl = new URL(
-    `${import.meta.env.PUBLIC_API_URL}/v1-badge/${version}/${user?.id}`
+    `${import.meta.env.PUBLIC_API_URL}/v1-badge/${version}/${user?.id}`,
   );
 
   badgeUrl.searchParams.set('variant', variant);
@@ -44,7 +44,7 @@ export function RoadCardPage() {
 
   return (
     <>
-      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b pt-2 pb-4">
+      <div className="mx-0 flex items-start gap-4 border-b px-0 pb-4 pt-2 sm:-mx-10 sm:px-10">
         <StepCounter step={1} />
         <div>
           <StepLabel label="Pick progress to show (Max. 4)" />
@@ -58,7 +58,7 @@ export function RoadCardPage() {
         </div>
       </div>
 
-      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
+      <div className="mx-0 flex items-start gap-4 border-b px-0 py-4 sm:-mx-10 sm:px-10">
         <StepCounter step={2} />
         <div>
           <StepLabel label="Select Mode (Dark vs Light)" />
@@ -85,7 +85,7 @@ export function RoadCardPage() {
         </div>
       </div>
 
-      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
+      <div className="mx-0 flex items-start gap-4 border-b px-0 py-4 sm:-mx-10 sm:px-10">
         <StepCounter step={3} />
         <div>
           <StepLabel label="Select Version" />
@@ -111,7 +111,7 @@ export function RoadCardPage() {
         </div>
       </div>
 
-      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
+      <div className="mx-0 flex items-start gap-4 border-b px-0 py-4 sm:-mx-10 sm:px-10">
         <StepCounter step={4} />
         <div className="flex-grow">
           <StepLabel label="Share your #RoadCard with others" />
@@ -146,7 +146,7 @@ export function RoadCardPage() {
               className="flex cursor-pointer items-center justify-center rounded border border-gray-300 p-1.5 px-2 text-sm font-medium disabled:bg-blue-50"
               onClick={() => copyText(badgeUrl.toString())}
             >
-              <img alt="Copy" src={CopyIcon.src} className="mr-1" />
+              <CopyIcon size={16} className="inline-block h-4 w-4 mr-1" />
 
               {isCopied ? 'Copied!' : 'Copy Link'}
             </button>

src/components/TeamMembers/MemberActionDropdown.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import type { TeamMemberDocument } from './TeamMembersPage';
-import MoreIcon from '../../icons/more-vertical.svg';
 import { useOutsideClick } from '../../hooks/use-outside-click';
+import { MoreVerticalIcon } from '../ReactIcons/MoreVerticalIcon.tsx';
 
 export function MemberActionDropdown({
   member,
@@ -79,7 +79,7 @@ export function MemberActionDropdown({
         onClick={() => setIsOpen(!isOpen)}
         className="ml-2 flex items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30"
       >
-        <img alt="menu" src={MoreIcon.src} className="h-4 w-4" />
+        <MoreVerticalIcon className="h-4 w-4" />
       </button>
 
       {isOpen && (