chore: migrate icons

leather-io · Nov 22, 2023 · fbc6580 · fbc6580
1 parent 0b47dea
commit fbc6580
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 22 deletions.
diff --git a/src/app/features/high-fee-drawer/high-fee-drawer.tsx b/src/app/features/high-fee-drawer/high-fee-drawer.tsx
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
-import { FiAlertTriangle } from 'react-icons/fi';
 
 import { useDrawers } from '@app/common/hooks/use-drawers';
 import { ControlledDrawer } from '@app/components/drawer/controlled-drawer';
+import { ErrorIcon } from '@app/ui/components/icons/error-icon';
 
 import { HighFeeConfirmation } from './components/high-fee-confirmation';
 
@@ -18,8 +18,7 @@ export function HighFeeDrawer(props: { learnMoreUrl: string }) {
 
   return (
     <ControlledDrawer
-      // #4476 FIXME update this icon
-      icon={<FiAlertTriangle color="error.label" size="icon.xl" />}
+      icon={<ErrorIcon color="error.label" size="icon.xl" />}
       isShowing={isShowingHighFeeConfirmation}
       onClose={() => setIsShowingHighFeeConfirmation(false)}
     >

diff --git a/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx b/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx
@@ -1,12 +1,13 @@
 import { useState } from 'react';
-import { FiEye, FiEyeOff } from 'react-icons/fi';
 
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { Flex, styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/ui/components/button';
 import { CopyIcon } from '@app/ui/components/icons/copy-icon';
+import { EyeIcon } from '@app/ui/components/icons/eye-icon';
+import { EyeSlashIcon } from '@app/ui/components/icons/eye-slash-icon';
 
 import { SecretKeyGrid } from '../../components/secret-key/secret-key-grid';
 import { SecretKeyWord } from './components/secret-key-word';
@@ -46,7 +47,7 @@ export function SecretKeyDisplayerLayout(props: SecretKeyDisplayerLayoutProps) {
           data-testid={SettingsSelectors.ShowSecretKeyBtn}
           onClick={() => setShowSecretKey(!showSecretKey)}
         >
-          {showSecretKey ? <FiEyeOff size="20px" /> : <FiEye size="20px" />}
+          {showSecretKey ? <EyeSlashIcon size="20px" /> : <EyeIcon size="20px" />}
           <styled.p textStyle="body.02">{showSecretKey ? 'Hide key' : 'Show key'}</styled.p>
         </LeatherButton>
         <LeatherButton

diff --git a/src/app/features/settings-dropdown/settings-dropdown.tsx b/src/app/features/settings-dropdown/settings-dropdown.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useRef } from 'react';
-import { FiExternalLink } from 'react-icons/fi';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
@@ -19,6 +18,7 @@ import { Divider } from '@app/components/layout/divider';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useHasLedgerKeys, useLedgerDeviceTargetId } from '@app/store/ledger/ledger.selectors';
 import { useCurrentNetworkId } from '@app/store/networks/networks.selectors';
+import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
 import { Caption } from '@app/ui/components/typography/caption';
 
 import { extractDeviceNameFromKnownTargetIds } from '../ledger/utils/generic-ledger-utils';
@@ -101,7 +101,7 @@ export function SettingsDropdown() {
           >
             <HStack>
               <Box>Open in new tab</Box>
-              <FiExternalLink />
+              <ExternalLinkIcon />
             </HStack>
           </MenuItem>
         ),
@@ -115,7 +115,7 @@ export function SettingsDropdown() {
       >
         <HStack>
           <Box>Get support</Box>
-          <FiExternalLink />
+          <ExternalLinkIcon />
         </HStack>
       </MenuItem>
       <MenuItem
@@ -126,7 +126,7 @@ export function SettingsDropdown() {
       >
         <HStack>
           <Box>Request feature</Box>
-          <FiExternalLink />
+          <ExternalLinkIcon />
         </HStack>
       </MenuItem>
       {hasGeneratedWallet ? <Divider /> : null}

diff --git a/src/app/features/stacks-transaction-request/post-conditions/no-post-conditions.tsx b/src/app/features/stacks-transaction-request/post-conditions/no-post-conditions.tsx
@@ -1,13 +1,13 @@
-import { FiLock } from 'react-icons/fi';
-
 import { Box, Circle, HStack } from 'leather-styles/jsx';
 import { styled } from 'leather-styles/jsx';
 
+import { LockIcon } from '@app/ui/components/icons/lock-icon';
+
 export function NoPostConditions(): React.JSX.Element {
   return (
     <HStack alignItems="center" gap="space.04" p="space.04">
       <Circle bg="accent.component-background-hover" flexShrink={0}>
-        <FiLock />
+        <LockIcon />
       </Circle>
       <Box flexGrow={1}>
         <styled.span textStyle="body.02">

diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
@@ -1,11 +1,10 @@
-import { FiCheck } from 'react-icons/fi';
-
 import { Dialog } from '@radix-ui/themes';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { css } from 'leather-styles/css';
 import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/ui/components/button';
+import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
 import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
 
 interface ReasonToAllowDiagnosticsProps {
@@ -15,7 +14,7 @@ function ReasonToAllowDiagnostics({ text }: ReasonToAllowDiagnosticsProps) {
   return (
     <Flex textStyle="body.02">
       <Box mr="space.02" mt="3px">
-        <FiCheck />
+        <CheckmarkIcon />
       </Box>
       <Box>{text}</Box>
     </Flex>

diff --git a/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key.content.tsx b/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key.content.tsx
@@ -1,7 +1,10 @@
-import { FiEyeOff, FiLock, FiRotateCcw } from 'react-icons/fi';
+import { FiRotateCcw } from 'react-icons/fi';
 
 import { HStack, Stack, styled } from 'leather-styles/jsx';
 
+import { EyeSlashIcon } from '@app/ui/components/icons/eye-slash-icon';
+import { LockIcon } from '@app/ui/components/icons/lock-icon';
+
 export function BackUpSecretKeyContent(): React.JSX.Element {
   return (
     <>
@@ -26,11 +29,11 @@ export function BackUpSecretKeyContent(): React.JSX.Element {
           <styled.span textStyle="body.01">Your Secret Key gives access to your wallet</styled.span>
         </HStack>
         <HStack alignItems="center" margin={['auto', 'auto', 'auto', 'unset']}>
-          <FiEyeOff size="16px" />
+          <EyeSlashIcon size="16px" />
           <styled.span textStyle="body.01">Never share your Secret Key with anyone</styled.span>
         </HStack>
         <HStack alignItems="center" margin={['auto', 'auto', 'auto', 'unset']} mb="space.05">
-          <FiLock size="16px" />
+          <LockIcon size="16px" />
           <styled.span textStyle="body.01">Store it somewhere 100% private and secure</styled.span>
         </HStack>
       </Stack>

diff --git a/src/app/pages/select-network/components/network-list-item.layout.tsx b/src/app/pages/select-network/components/network-list-item.layout.tsx
@@ -1,3 +1,4 @@
+// TODO get icons for Trash, Circle, Star, Zap, CloudOff
 import { FiTrash2 } from 'react-icons/fi';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';

diff --git a/src/app/pages/select-network/components/network-status-indicator.tsx b/src/app/pages/select-network/components/network-status-indicator.tsx
@@ -1,3 +1,4 @@
+// TODO get new icon for this / migrate
 import { FiCloudOff as IconCloudOff } from 'react-icons/fi';
 
 import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';

diff --git a/src/app/pages/update-profile-request/components/update-profile-error-msg.tsx b/src/app/pages/update-profile-request/components/update-profile-error-msg.tsx
@@ -1,7 +1,6 @@
-import { FiAlertTriangle } from 'react-icons/fi';
-
 import { HStack } from 'leather-styles/jsx';
 
+import { ErrorIcon } from '@app/ui/components/icons/error-icon';
 import { Caption } from '@app/ui/components/typography/caption';
 
 interface ErrorMessageProps {
@@ -12,9 +11,8 @@ export function ErrorMessage(props: ErrorMessageProps) {
   if (!errorMessage) return null;
 
   return (
-    // #4476 TODO change this colour and migrate FiAlertTriangle
     <HStack alignItems="center" bg="#FCEEED" p="space.04" borderRadius="md">
-      <FiAlertTriangle />
+      <ErrorIcon />
       <Caption color="error.label">{errorMessage}</Caption>
     </HStack>
   );