Use icons for alert from @tabler/icons-react

thesis · Apr 2, 2024 · 39850ce · 39850ce
1 parent 976a466
commit 39850ce
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 43 deletions.
diff --git a/dapp/src/assets/icons/AlertError.tsx b/dapp/src/assets/icons/AlertError.tsx
diff --git a/dapp/src/assets/icons/AlertInfo.tsx b/dapp/src/assets/icons/AlertInfo.tsx
diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts
@@ -7,8 +7,6 @@ export * from "./ArrowRight"
 export * from "./AcreLogo"
 export * from "./ConnectBTCAccount"
 export * from "./ConnectETHAccount"
-export * from "./AlertInfo"
-export * from "./AlertError"
 export * from "./stBTC"
 export * from "./BTC"
 export * from "./ShieldPlus"

diff --git a/dapp/src/components/shared/TokenBalanceInput/index.tsx b/dapp/src/components/shared/TokenBalanceInput/index.tsx
@@ -17,8 +17,8 @@ import {
   getCurrencyByType,
   userAmountToBigInt,
 } from "#/utils"
-import { AlertInfo } from "#/assets/icons"
 import { CurrencyType } from "#/types"
+import { IconInfoCircle } from "@tabler/icons-react"
 import NumberFormatInput, {
   NumberFormatInputValues,
 } from "../NumberFormatInput"
@@ -48,7 +48,7 @@ function HelperErrorText({
   if (helperText) {
     return (
       <FormHelperText>
-        <Icon as={AlertInfo} />
+        <Icon as={IconInfoCircle} />
         {helperText}
       </FormHelperText>
     )

diff --git a/dapp/src/components/shared/alerts/Alert.tsx b/dapp/src/components/shared/alerts/Alert.tsx
@@ -1,17 +1,16 @@
 import React from "react"
 import {
   Alert as ChakraAlert,
-  AlertIcon,
   AlertProps as ChakraAlertProps,
   Icon,
   CloseButton,
   HStack,
 } from "@chakra-ui/react"
-import { AlertError, AlertInfo } from "#/assets/icons"
+import { IconInfoCircle, IconExclamationCircle } from "@tabler/icons-react"
 
 const ICONS = {
-  info: AlertInfo,
-  error: AlertError,
+  info: IconInfoCircle,
+  error: IconExclamationCircle,
 }
 
 type AlertStatus = keyof typeof ICONS
@@ -37,7 +36,7 @@ export function Alert({
   return (
     <ChakraAlert status={status} {...props}>
       {withIcon && status && (
-        <AlertIcon boxSize={6} as={ICONS[status]} color={colorIcon} />
+        <Icon mr={2} boxSize={6} as={ICONS[status]} color={colorIcon} />
       )}
       <HStack w="100%" justifyContent="space-between">
         {children}