feat: replace bitcoin-icons-react with popicons

Signed-off-by: amitamrutiya2210 <[email protected]>
getAlby · Mar 9, 2024 · 9e85fc2 · 9e85fc2
1 parent 0a42b3d
commit 9e85fc2
Show file tree

Hide file tree

Showing 34 changed files with 107 additions and 118 deletions.
diff --git a/src/app/components/AccountDetailLayout/index.tsx b/src/app/components/AccountDetailLayout/index.tsx
@@ -1,6 +1,6 @@
-import { CaretLeftIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Header from "@components/Header";
 import IconButton from "@components/IconButton";
+import { PopiconsChevronLeftLine } from "@popicons/react";
 import { useTranslation } from "react-i18next";
 import { Outlet, useMatch, useNavigate, useParams } from "react-router-dom";
 import Avatar from "~/app/components/Avatar";
@@ -31,7 +31,7 @@ function AccountDetailLayout() {
         headerLeft={
           <IconButton
             onClick={back}
-            icon={<CaretLeftIcon className="w-4 h-4" />}
+            icon={<PopiconsChevronLeftLine className="w-5 h-5" />}
           />
         }
       >

diff --git a/src/app/components/AccountMenu/index.tsx b/src/app/components/AccountMenu/index.tsx
@@ -1,10 +1,12 @@
 import {
   AddressBookIcon,
-  CaretDownIcon,
   GlobeIcon,
-  PlusIcon,
-  WalletIcon,
 } from "@bitcoin-design/bitcoin-icons-react/filled";
+import {
+  PopiconsChevronBottomLine,
+  PopiconsPlusSolid,
+  PopiconsWalletSolid,
+} from "@popicons/react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -88,7 +90,7 @@ function AccountMenu({ showOptions = true }: Props) {
                 )}
               </div>
             </div>
-            <CaretDownIcon className="h-4 w-4 dark:text-white" />
+            <PopiconsChevronBottomLine className="h-5 w-5 dark:text-white" />
             <span className="sr-only">{t("screen_reader")}</span>
           </div>
         </Menu.Button>
@@ -127,7 +129,7 @@ function AccountMenu({ showOptions = true }: Props) {
               openOptions(`accounts/${authAccount?.id}`);
             }}
           >
-            <WalletIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300 shrink-0" />
+            <PopiconsWalletSolid className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300 shrink-0" />
             {t("options.account.wallet_settings")}
           </Menu.ItemButton>
           {(isAlbyLNDHubAccount(
@@ -192,7 +194,7 @@ function AccountMenu({ showOptions = true }: Props) {
                   openOptions("accounts/new");
                 }}
               >
-                <PlusIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+                <PopiconsPlusSolid className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
                 {t("options.account.add")}
               </Menu.ItemButton>
               <Menu.ItemButton

diff --git a/src/app/components/Enable/AlbyEnable.tsx b/src/app/components/Enable/AlbyEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function AlbyEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/Enable/LiquidEnable.tsx b/src/app/components/Enable/LiquidEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function LiquidEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/Enable/NostrEnable.tsx b/src/app/components/Enable/NostrEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function NostrEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/Enable/WebbtcEnable.tsx b/src/app/components/Enable/WebbtcEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function WebbtcEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/Enable/WeblnEnable.tsx b/src/app/components/Enable/WeblnEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function WeblnEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/IconLinkCard/IconLinkCard.tsx b/src/app/components/IconLinkCard/IconLinkCard.tsx
@@ -1,4 +1,4 @@
-import { CaretRightIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
+import { PopiconsChevronRightLine } from "@popicons/react";
 
 export type IconLinkCardProps = {
   title: string;
@@ -28,7 +28,7 @@ export function IconLinkCard({
         </div>
       </div>
       <div className="flex-shrink-0 flex justify-end text-gray-400 dark:text-neutral-500 ">
-        <CaretRightIcon className="w-8" />
+        <PopiconsChevronRightLine className="w-8" />
       </div>
     </div>
   );

diff --git a/src/app/components/InputCopyButton/index.tsx b/src/app/components/InputCopyButton/index.tsx
@@ -1,5 +1,4 @@
-import { CopyIcon as CopyFilledIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
-import { CopyIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
+import { PopiconsCopyLine, PopiconsCopySolid } from "@popicons/react";
 import { useState } from "react";
 import toast from "~/app/components/Toast";
 import { classNames } from "~/app/utils";
@@ -11,7 +10,7 @@ type Props = {
 
 function InputCopyButton({ value, className }: Props) {
   const [copied, setCopied] = useState(false);
-  const CurrentIcon = copied ? CopyFilledIcon : CopyIcon;
+  const CurrentIcon = copied ? PopiconsCopySolid : PopiconsCopyLine;
   return (
     <button
       type="button"

diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
@@ -1,4 +1,4 @@
-import { CrossIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { PopiconsXLine } from "@popicons/react";
 import ReactModal from "react-modal";
 import { classNames } from "~/app/utils";
 
@@ -42,7 +42,7 @@ export default function Modal({
         onClick={closeModal}
         className="absolute right-5 top-5 text-gray-600 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-300"
       >
-        <CrossIcon className="w-6 h-6" />
+        <PopiconsXLine className="w-6 h-6" />
       </button>
       {children}
     </ReactModal>

diff --git a/src/app/components/PublishersTable/index.tsx b/src/app/components/PublishersTable/index.tsx
@@ -1,4 +1,4 @@
-import { CaretRightIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { PopiconsChevronRightLine } from "@popicons/react";
 import { useTranslation } from "react-i18next";
 import BadgesList from "~/app/components/BadgesList";
 import { useSettings } from "~/app/context/SettingsContext";
@@ -84,7 +84,7 @@ export default function PublishersTable({
                 </div>
               </td>
               <td className="w-10">
-                <CaretRightIcon className="h-6 w-6 text-gray-500" />
+                <PopiconsChevronRightLine className="h-6 w-6 text-gray-500" />
               </td>
             </tr>
           ))}

diff --git a/src/app/components/QrcodeAdornment/index.tsx b/src/app/components/QrcodeAdornment/index.tsx
@@ -1,4 +1,4 @@
-import { QrCodeIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { PopiconsQrCodeMinimalLine } from "@popicons/react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -20,7 +20,7 @@ export default function QrcodeAdornment({ route }: Props) {
         navigate("/scanQRCode", { state: { route: route }, replace: true });
       }}
     >
-      <QrCodeIcon className="h-6 w-6 text-blue-600" />
+      <PopiconsQrCodeMinimalLine className="h-5 w-5 text-blue-600" />
     </button>
   );
 }
diff --git a/src/app/components/QrcodeScanner/index.tsx b/src/app/components/QrcodeScanner/index.tsx
@@ -1,4 +1,4 @@
-import { QrCodeIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { PopiconsQrCodeMinimalLine } from "@popicons/react";
 import { Html5Qrcode, Html5QrcodeScannerState } from "html5-qrcode";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -130,7 +130,7 @@ function QrcodeScanner({
                 onClick={handleRequestCameraPermissions}
               />
             </div>
-            <QrCodeIcon className="h-28 w-28 ml-4 -mr-8 text-blue-600" />
+            <PopiconsQrCodeMinimalLine className="h-28 w-28 ml-4 -mr-8 text-blue-600" />
           </div>
         </>
       )}

diff --git a/src/app/components/Toast/index.tsx b/src/app/components/Toast/index.tsx
@@ -1,4 +1,4 @@
-import { CrossIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
+import { PopiconsXLine } from "@popicons/react";
 import { Transition } from "@headlessui/react";
 import { ReactNode } from "react";
 import {
@@ -47,7 +47,7 @@ const toast: ToastMethods = {
             <div>{children}</div>
             {/* Add close icons for toasts that are displayed for a longer time */}
             {options?.duration && options?.duration > 10_000 && (
-              <CrossIcon
+              <PopiconsXLine
                 className="w-4 h-4 cursor-pointer"
                 onClick={() => hotToast.dismiss(t.id)}
               />

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -1,11 +1,9 @@
 import {
-  CaretDownIcon,
-  CaretUpIcon,
-} from "@bitcoin-design/bitcoin-icons-react/filled";
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-} from "@bitcoin-design/bitcoin-icons-react/outline";
+  PopiconsArrowDownSolid,
+  PopiconsArrowUpSolid,
+  PopiconsChevronBottomLine,
+  PopiconsChevronTopLine,
+} from "@popicons/react";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -59,11 +57,11 @@ export default function TransactionModal({
           <div className="flex items-center justify-center">
             {getTransactionType(transaction) == "outgoing" ? (
               <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full p-4">
-                <ArrowUpIcon className="w-8 h-8 text-orange-400 stroke-[5px]" />
+                <PopiconsArrowUpSolid className="w-11 h-11 text-orange-400 stroke-[1px] stroke-orange-400" />
               </div>
             ) : (
               <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full p-4">
-                <ArrowDownIcon className="w-8 h-8 text-green-400 stroke-[5px]" />
+                <PopiconsArrowDownSolid className="w-11 h-11 text-green-400 stroke-[1px] stroke-green-400" />
               </div>
             )}
           </div>
@@ -182,12 +180,12 @@ export default function TransactionModal({
                   {showMoreFields ? (
                     <>
                       {tCommon("actions.hide")}
-                      <CaretUpIcon className="h-4 w-4 inline-flex" />
+                      <PopiconsChevronTopLine className="h-5 w-5 inline-flex" />
                     </>
                   ) : (
                     <>
                       {tCommon("actions.more")}
-                      <CaretDownIcon className="h-4 w-4 inline-flex" />
+                      <PopiconsChevronBottomLine className="h-5 w-5 inline-flex" />
                     </>
                   )}
                 </Hyperlink>

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
@@ -1,8 +1,5 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-} from "@bitcoin-design/bitcoin-icons-react/outline";
 import Loading from "@components/Loading";
+import { PopiconsArrowDownSolid, PopiconsArrowUpSolid } from "@popicons/react";
 
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -62,11 +59,11 @@ export default function TransactionsTable({
                   <div className="flex items-center">
                     {type == "outgoing" ? (
                       <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full w-8 h-8">
-                        <ArrowUpIcon className="w-4 h-4 text-orange-400 stroke-[4px]" />
+                        <PopiconsArrowUpSolid className="w-5 h-5 stroke-orange-400 text-orange-400 stroke-[1px]" />
                       </div>
                     ) : (
                       <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full w-8 h-8">
-                        <ArrowDownIcon className="w-4 h-4 text-green-400 stroke-[4px]" />
+                        <PopiconsArrowDownSolid className="w-5 h-5 stroke-green-400 text-green-400 stroke-[1px]" />
                       </div>
                     )}
                   </div>

diff --git a/src/app/components/onboard/index.tsx b/src/app/components/onboard/index.tsx
@@ -1,8 +1,8 @@
 import {
-  ClockIcon,
   InfoCircleIcon,
   TwoKeysIcon,
 } from "@bitcoin-design/bitcoin-icons-react/outline";
+import { PopiconsClockLine } from "@popicons/react";
 import { useTranslation } from "react-i18next";
 import ConfirmOrCancel from "~/app/components/ConfirmOrCancel";
 import Container from "~/app/components/Container";
@@ -68,7 +68,7 @@ export default function Onboard() {
               <p>{t("request2")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <ClockIcon className="w-7 h-7 mr-2" />
+              <PopiconsClockLine className="w-7 h-7 mr-2" />
               <p>{t("request3")}</p>
             </div>
           </div>

diff --git a/src/app/screens/Accounts/index.tsx b/src/app/screens/Accounts/index.tsx
@@ -1,9 +1,6 @@
-import {
-  CaretRightIcon,
-  PlusIcon,
-} from "@bitcoin-design/bitcoin-icons-react/filled";
 import Button from "@components/Button";
 import Container from "@components/Container";
+import { PopiconsChevronRightLine, PopiconsPlusSolid } from "@popicons/react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import Avatar from "~/app/components/Avatar";
@@ -23,7 +20,7 @@ function AccountsScreen() {
         <h2 className="text-2xl font-bold dark:text-white">{t("title")}</h2>
         <div>
           <Button
-            icon={<PlusIcon className="w-5 h-5 mr-2" />}
+            icon={<PopiconsPlusSolid className="w-5 h-5 mr-2" />}
             label={t("actions.connect_a_wallet")}
             primary
             onClick={() => navigate(`/accounts/new`)}
@@ -60,7 +57,7 @@ function AccountsScreen() {
                     </div>
                   </td>
                   <td className="w-10">
-                    <CaretRightIcon className="h-6 w-6 text-gray-500" />
+                    <PopiconsChevronRightLine className="h-6 w-6 text-gray-500" />
                   </td>
                 </tr>
               );