Migrate from using react-icons

trilitech · Mar 11, 2024 · 9d3bb12 · 9d3bb12
1 parent 59aa60a
commit 9d3bb12
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 17 deletions.
diff --git a/src/GoogleAuth/GoogleAuth.tsx b/src/GoogleAuth/GoogleAuth.tsx
@@ -1,7 +1,7 @@
 import { IconButton } from "@chakra-ui/react";
-import { FcGoogle } from "react-icons/fc";
 
 import { getGoogleCredentials } from "./getGoogleCredentials";
+import { GoogleIcon } from "../assets/icons";
 import colors from "../style/colors";
 import { useAsyncActionHandler } from "../utils/hooks/useAsyncActionHandler";
 
@@ -37,7 +37,7 @@ export const GoogleAuth: React.FC<{ onAuth: (secretKey: string, email: string) =
       _disabled={{ bg: colors.gray[900] }}
       aria-label="Google SSO"
       data-testid="google-auth-button"
-      icon={<FcGoogle size="24px" />}
+      icon={<GoogleIcon />}
       isLoading={isLoading}
       onClick={onClick}
       size="lg"

diff --git a/src/assets/icons/Google.tsx b/src/assets/icons/Google.tsx
@@ -0,0 +1,29 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+export const GoogleIcon: React.FC<IconProps> = props => (
+  <Icon
+    width="24px"
+    height="24px"
+    fill="none"
+    viewBox="0 0 48 48"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path // yellow
+      d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
+      fill="#FFC107"
+    />
+    <path // red
+      d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
+      fill="#FF3D00"
+    />
+    <path // green
+      d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
+      fill="#4CAF50"
+    />
+    <path // blue
+      d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
+      fill="#1976D2"
+    />
+  </Icon>
+);
diff --git a/src/assets/icons/Ledger.tsx b/src/assets/icons/Ledger.tsx
@@ -1,14 +1,18 @@
 import { Icon, IconProps } from "@chakra-ui/react";
-import { MdUsb } from "react-icons/md";
+
+import colors from "../../style/colors";
 
 export const LedgerIcon: React.FC<IconProps> = props => (
   <Icon
-    as={MdUsb}
     width="18px"
     height="18px"
+    fill={colors.gray[400]}
     data-testid="ledger-icon"
-    viewBox="0 0 18 18"
+    strokeWidth="0"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
-  />
+  >
+    <path d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93 0-1.21-.99-2.2-2.2-2.2-1.21 0-2.2.99-2.2 2.2 0 .85.5 1.56 1.2 1.93V13c0 1.11.89 2 2 2h3v3.05c-.71.37-1.2 1.1-1.2 1.95a2.2 2.2 0 0 0 4.4 0c0-.85-.49-1.58-1.2-1.95V15h3c1.11 0 2-.89 2-2v-2h1V7h-4z" />
+  </Icon>
 );
diff --git a/src/assets/icons/ThreeDots.tsx b/src/assets/icons/ThreeDots.tsx
@@ -0,0 +1,17 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+import colors from "../../style/colors";
+
+export const ThreeDotsIcon: React.FC<IconProps> = props => (
+  <Icon
+    width="14px"
+    height="14px"
+    fill={colors.white}
+    strokeWidth="0"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
+  </Icon>
+);
diff --git a/src/assets/icons/index.tsx b/src/assets/icons/index.tsx
@@ -31,6 +31,7 @@ export * from "./FileArrowDown";
 export * from "./FileCopy";
 export * from "./FlipForwardEnergy";
 export * from "./Gear";
+export * from "./Google";
 export * from "./Help";
 export * from "./Hourglass";
 export * from "./IncomingArrow";
@@ -50,6 +51,7 @@ export * from "./Slash";
 export * from "./Sliders";
 export * from "./Social";
 export * from "./Tez";
+export * from "./ThreeDots";
 export * from "./Token";
 export * from "./Trash";
 export * from "./UnknownContact";

diff --git a/src/components/AddressTile/AddressTileIcon.tsx b/src/components/AddressTile/AddressTileIcon.tsx
@@ -61,14 +61,7 @@ export const AddressTileIcon: React.FC<{
         />
       );
     case "ledger":
-      return (
-        <LedgerIcon
-          width={sizeInPx}
-          height={sizeInPx}
-          {...baseIconProps}
-          color={colors.gray[400]}
-        />
-      );
+      return <LedgerIcon width={sizeInPx} height={sizeInPx} {...baseIconProps} />;
     case "multisig":
       return <KeyIcon width={sizeInPx} height={sizeInPx} {...baseIconProps} />;
     case "contact":

diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
@@ -1,16 +1,15 @@
 import {
   Button,
   Center,
-  Icon,
   Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
   useDisclosure,
 } from "@chakra-ui/react";
 import { ReactNode } from "react";
-import { BsThreeDots } from "react-icons/bs";
 
+import { ThreeDotsIcon } from "../assets/icons";
 import colors from "../style/colors";
 
 export const PopoverMenu: React.FC<{
@@ -32,7 +31,7 @@ export const PopoverMenu: React.FC<{
           variant="unstyled"
         >
           <Center>
-            <Icon as={BsThreeDots} display="inline" color={colors.white} />
+            <ThreeDotsIcon />
           </Center>
         </Button>
       </PopoverTrigger>