Use icons from @tabler/icons-react

thesis · Apr 2, 2024 · d56e30f · d56e30f
1 parent b55448f
commit d56e30f
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 83 deletions.
diff --git a/dapp/src/assets/icons/DiscordIcon.tsx b/dapp/src/assets/icons/DiscordIcon.tsx
diff --git a/dapp/src/assets/icons/ReloadIcon.tsx b/dapp/src/assets/icons/ReloadIcon.tsx
diff --git a/dapp/src/assets/icons/SecurityCheckIcon.tsx b/dapp/src/assets/icons/SecurityCheckIcon.tsx
diff --git a/dapp/src/assets/icons/ServerIcon.tsx b/dapp/src/assets/icons/ServerIcon.tsx
diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts
@@ -18,7 +18,3 @@ export * from "./LoadingSpinnerSuccessIcon"
 export * from "./BitcoinIcon"
 export * from "./EthereumIcon"
 export * from "./CableWithPlugIcon"
-export * from "./DiscordIcon"
-export * from "./ServerIcon"
-export * from "./SecurityCheckIcon"
-export * from "./ReloadIcon"
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
@@ -4,16 +4,18 @@ import {
   Button,
   CloseButton,
   HStack,
+  Icon,
   ModalBody,
   ModalFooter,
   ModalHeader,
 } from "@chakra-ui/react"
-import { CableWithPlugIcon, SecurityCheckIcon } from "#/assets/icons"
+import { CableWithPlugIcon } from "#/assets/icons"
 import { TextMd, TextSm } from "#/components/shared/Typography"
 import IconWrapper from "#/components/shared/IconWrapper"
 import { dateToUnixTimestamp } from "#/utils"
 import { useCountdown } from "#/hooks"
 import { ONE_MINUTE_IN_SECONDS, ONE_SEC_IN_MILLISECONDS } from "#/constants"
+import { IconShieldCheckFilled } from "@tabler/icons-react"
 
 const getRetryTimestamp = () => {
   const today = new Date()
@@ -68,10 +70,10 @@ export default function RetryModal({ retry }: { retry: () => void }) {
         <Button size="lg" width="100%" onClick={retry}>
           Retry
         </Button>
-        <TextSm color="grey.700">
-          <SecurityCheckIcon boxSize={5} color="gold.700" mr={2} />
-          Your funds are secure.
-        </TextSm>
+        <HStack>
+          <Icon as={IconShieldCheckFilled} boxSize={5} color="gold.700" />
+          <TextSm color="grey.700">Your funds are secure.</TextSm>
+        </HStack>
       </ModalFooter>
     </>
   )

diff --git a/.../src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/.../src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
@@ -11,17 +11,16 @@ import {
   ModalHeader,
   Tooltip,
 } from "@chakra-ui/react"
-import {
-  CableWithPlugIcon,
-  DiscordIcon,
-  Info,
-  ReloadIcon,
-  ServerIcon,
-} from "#/assets/icons"
+import { CableWithPlugIcon, Info } from "#/assets/icons"
 import { TextMd } from "#/components/shared/Typography"
 import { EXTERNAL_HREF } from "#/constants"
 import IconWrapper from "#/components/shared/IconWrapper"
 import { MODAL_BASE_SIZE } from "#/components/shared/ModalBase"
+import {
+  IconBrandDiscordFilled,
+  IconReload,
+  IconServerBolt,
+} from "@tabler/icons-react"
 
 export default function ServerErrorModal({
   isLoading,
@@ -38,7 +37,7 @@ export default function ServerErrorModal({
       </ModalHeader>
       <ModalBody gap={10} pt={4}>
         <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.400">
-          <ServerIcon boxSize={14} />
+          <Icon as={IconServerBolt} boxSize={14} />
         </IconWrapper>
         <TextMd>
           Your deposit didn&apos;t go through but no worries, your funds are
@@ -49,7 +48,7 @@ export default function ServerErrorModal({
           size="lg"
           width="100%"
           variant="outline"
-          rightIcon={<DiscordIcon />}
+          rightIcon={<Icon as={IconBrandDiscordFilled} boxSize={5} />}
           href={EXTERNAL_HREF.DISCORD}
           isExternal
         >
@@ -85,7 +84,7 @@ export default function ServerErrorModal({
         <Button
           // TODO: Use a loading button
           isLoading={isLoading}
-          leftIcon={<ReloadIcon boxSize={5} color="brand.400" />}
+          leftIcon={<Icon as={IconReload} boxSize={5} color="brand.400" />}
           variant="outline"
           onClick={retry}
         >