Switch from react-icons to lucide (#3265)

* add lucide * remove unused and use arrow right * remove arrow long * next and back icon * charity icon * check and copy * check circle * chevron down * chevron credit * crop * dash * dashbaord * delete * close * mail * exclamation * extlink * download * fitler * folder * hourglass * pencil * replaced * sizing * file download * fix type errors * use fill * copier test
AngelProtocolFinance · Sep 3, 2024 · 618f912 · 618f912
1 parent eebcedf
commit 618f912
Show file tree

Hide file tree

Showing 89 changed files with 289 additions and 343 deletions.
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "fuse.js": "7.0.0",
     "gsap": "3.12.5",
     "is-mobile": "4.0.0",
+    "lucide-react": "0.436.0",
     "mipd": "0.0.7",
     "nprogress": "0.2.0",
     "qrcode.react": "3.1.0",
@@ -69,7 +70,6 @@
     "react-fast-marquee": "1.6.4",
     "react-helmet": "6.1.0",
     "react-hook-form": "7.51.5",
-    "react-icons": "5.2.1",
     "react-player": "2.16.0",
     "react-redux": "9.1.2",
     "react-router-dom": "6.23.0",

diff --git a/src/App/Footer/Newsletter/SubscriptionForm.tsx b/src/App/Footer/Newsletter/SubscriptionForm.tsx
@@ -71,7 +71,7 @@ export default function SubscriptionForm() {
 function SuccessMessage() {
   return (
     <span className="flex gap-1 w-full text-xs">
-      <Icon type="Check" />
+      <Icon type="Check" size={14} />
       <p>
         The form was sent successfully. By doing so, you have agreed to our
         privacy policy

diff --git a/src/App/Header/NavDropdown.tsx b/src/App/Header/NavDropdown.tsx
@@ -33,7 +33,7 @@ export default function NavDropdown({ links }: Props) {
         />
         <Icon
           type="ChevronDown"
-          size={24}
+          size={20}
           className="text-blue-d7 data-[open]:text-blue-d7/70 max-sm:hidden transition duration-150 ease-in-out group-hover:text-blue-d7/80"
           aria-hidden="true"
         />

diff --git a/src/App/Header/UserMenu/Menu.tsx b/src/App/Header/UserMenu/Menu.tsx
@@ -24,7 +24,7 @@ export default function Menu({ user, signOut, classes }: Props) {
           to={`${appRoutes.user_dashboard}/donations`}
           className=" hover:text-blue-d1 text-sm flex items-center gap-2"
         >
-          <Icon type="Money" className="text-lg" />
+          <Icon type="DollarCircle" size={18} />
           <span>My Donations</span>
         </MenuItem>
         <Organizations userId={user.email} classes="mt-6" />
@@ -37,7 +37,7 @@ export default function Menu({ user, signOut, classes }: Props) {
               to={appRoutes.applications}
               className="hover:text-blue-d1 text-sm flex items-center gap-1"
             >
-              <Icon type="SecurityScan" size={22} />
+              <Icon type="SecurityScan" size={18} />
               <span>Applications Dashboard</span>
             </MenuItem>
           )}
@@ -47,7 +47,7 @@ export default function Menu({ user, signOut, classes }: Props) {
               to={appRoutes.banking_applications}
               className="hover:text-blue-d1 text-sm flex items-center gap-1 mt-1"
             >
-              <Icon type="SecurityScan" size={22} />
+              <Icon type="SecurityScan" size={18} />
               <span>Banking applications</span>
             </MenuItem>
           )}

diff --git a/src/components/BookmarkBtn.tsx b/src/components/BookmarkBtn.tsx
@@ -58,11 +58,13 @@ export default function BookmarkBtn({
         aria-label="Add to favorites button"
         onClick={toogleBookmark}
         disabled={isBookmarksLoading || isTogglingBookmark}
-        className={`flex items-center gap-1 disabled:text-gray-l4 ${
-          isBookmarked ? "text-red" : ""
-        } ${classes}`}
+        className={`flex items-center gap-1 disabled:text-gray-l4 ${classes}`}
       >
-        <Icon type={isBookmarked ? "HeartFill" : "HeartOutline"} size={20} />
+        <Icon
+          type="Heart"
+          size={19}
+          className={isBookmarked ? "fill-red text-red" : ""}
+        />
         {children}
       </button>
     </>

diff --git a/src/components/Copier/Copier.test.tsx b/src/components/Copier/Copier.test.tsx
@@ -33,9 +33,9 @@ describe("Copier component test:", () => {
     );
 
     // Expects the button to change appearance once clicked
-    expect(await screen.findByTitle("Copied!")).toBeInTheDocument();
+    expect(await screen.findByLabelText(/copied/i)).toBeInTheDocument();
 
     // Expects the button to revert back to it's original appearance
-    expect(await screen.findByTitle("Copy Address")).toBeInTheDocument();
+    expect(await screen.findByLabelText(/copy address/i)).toBeInTheDocument();
   });
 });
diff --git a/src/components/Copier/Copier.tsx b/src/components/Copier/Copier.tsx
@@ -16,22 +16,32 @@ export default function Copier({ text, classes, size, children }: Props) {
   const { handleCopy, copied } = useCopier(text);
   const { container, icon } = unpack(classes);
   return (
-    <button className={container} type="button" onClick={handleCopy}>
+    <button
+      className={container + " relative"}
+      type="button"
+      onClick={handleCopy}
+    >
       {(copied && (
         <Icon
           type="Check"
           className={`${icon} cursor-default hover:text-current`}
-          title="Copied!"
           size={size?.check}
+          aria-labelledby="copied"
         />
       )) || (
         <Icon
           type="Copy"
           className={`${icon} cursor-pointer`}
-          title="Copy Address"
           size={size?.copy}
+          aria-labelledby="copy"
         />
       )}
+      <span id="copied" className="invisible absolute">
+        Copied!
+      </span>
+      <span id="copy" className="invisible absolute">
+        Copy Address
+      </span>
       {children}
     </button>
   );

diff --git a/src/components/CountrySelector/CountrySelector.tsx b/src/components/CountrySelector/CountrySelector.tsx
@@ -58,7 +58,7 @@ export default function CountrySelector<
       </span>
 
       <ComboboxButton>
-        {({ open }) => <DrawerIcon isOpen={open} size={25} className="mr-1" />}
+        {({ open }) => <DrawerIcon isOpen={open} size={20} className="mr-1" />}
       </ComboboxButton>
 
       <ComboboxInput

diff --git a/src/components/CurrencySelector/CurrencySelector.tsx b/src/components/CurrencySelector/CurrencySelector.tsx
@@ -81,7 +81,7 @@ export default function CurrencySelector<T extends CurrencyOption>({
             ) : (
               <DrawerIcon
                 isOpen={open}
-                size={25}
+                size={20}
                 className={`${isCurrencyError ? "text-red" : ""}`}
                 aria-hidden
               />

diff --git a/src/components/DonateMethods/DonateMethods.tsx b/src/components/DonateMethods/DonateMethods.tsx
@@ -108,7 +108,7 @@ function Method({
         onPointerDown={(e) => controls.start(e)}
         disabled={value.disabled}
       >
-        <Icon type="Drag" />
+        <Icon type="Drag" size={20} />
       </button>
 
       <div>

diff --git a/src/components/FileDropzone/DropzoneText.tsx b/src/components/FileDropzone/DropzoneText.tsx
@@ -18,7 +18,7 @@ export default function DropzoneText({
   if (isFilesEmpty && isPreviewsEmpty) {
     return (
       <div className="grid justify-items-center text-sm text-navy-l1 dark:text-navy-l2 select-none">
-        <Icon type="FileUpload" size={24} className="mb-[1.125rem]" />
+        <Icon type="Upload" size={20} className="mb-[1.125rem]" />
         <p className="font-semibold mb-1">Upload file</p>
         <span>Click to Browse or Drag &amp; Drop</span>
       </div>

diff --git a/src/components/HeaderButton.tsx b/src/components/HeaderButton.tsx
@@ -26,9 +26,9 @@ export function HeaderButton<T>(
         type={
           _activeSortKey === _sortKey
             ? _sortDirection === "asc"
-              ? "Up"
-              : "Down"
-            : "Unsorted"
+              ? "ChevronUp"
+              : "ChevronDown"
+            : "ChevronsUpDown"
         }
         className={`w-4 h-4 shrink-0 ${
           _activeSortKey === _sortKey

diff --git a/src/components/Icon/DrawerIcon.tsx b/src/components/Icon/DrawerIcon.tsx
@@ -1,11 +1,11 @@
-import type { IconBaseProps } from "react-icons";
+import type { LucideProps } from "lucide-react";
 import Icon from "./Icon";
 
 export function DrawerIcon({
   isOpen,
   className,
   ...props
-}: IconBaseProps & { isOpen: boolean }) {
+}: LucideProps & { isOpen: boolean }) {
   return (
     <Icon
       {...props}

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,7 +1,7 @@
-import type { IconBaseProps } from "react-icons";
+import type { LucideProps } from "lucide-react";
 import { type IconType, icons } from "./icons";
 
-interface IconProps extends IconBaseProps {
+interface IconProps extends LucideProps {
   type: IconType;
 }