Skip to content

Commit

Permalink
refactor: remove remaining old icon libraries
Browse files Browse the repository at this point in the history
  • Loading branch information
Fara Woolf authored and fbwoolf committed Nov 22, 2023
1 parent 98f5ddf commit 1fa4e6c
Show file tree
Hide file tree
Showing 20 changed files with 188 additions and 69 deletions.
15 changes: 8 additions & 7 deletions .dependency-cruiser.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,13 +94,14 @@ module.exports = {
from: { path: '^src/app/features/.*' },
to: { path: '^src/app/pages/.*' },
},
{
name: 'only-allow-react-icons-fi',
comment: 'Ensure only icons from `fi` group are allowed',
severity: 'error',
from: { path: '^src' },
to: { path: 'react-icons.*', pathNot: 'react-icons/fi' },
},
// TODO: Replace in future with new icon library
// {
// name: 'only-allow-react-icons-fi',
// comment: 'Ensure only icons from `fi` group are allowed',
// severity: 'error',
// from: { path: '^src' },
// to: { path: 'react-icons.*', pathNot: 'react-icons/fi' },
// },
{
name: 'no-using-pino-directly',
comment: 'Enforce use of Pino logging library via @logger wrapper',
Expand Down
2 changes: 0 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@
"limiter": "2.1.0",
"lodash.get": "4.4.2",
"lodash.uniqby": "4.7.0",
"mdi-react": "9.2.0",
"micro-packed": "0.3.2",
"object-hash": "3.0.0",
"observable-hooks": "4.2.3",
Expand All @@ -210,7 +209,6 @@
"react-dom-confetti": "0.2.0",
"react-head": "3.4.2",
"react-hot-toast": "2.4.1",
"react-icons": "4.10.1",
"react-intersection-observer": "9.5.2",
"react-lottie": "1.2.3",
"react-redux": "8.1.3",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { TransactionTypeIconWrapper } from '@app/components/transaction/transaction-type-icon-wrapper';
import { MicroblockIcon } from '@app/ui/components/icons/microblock-icon';
import { ZapIcon } from '@app/ui/components/icons/zap-icon';

export function StacksUnanchoredStatusIcon() {
return <TransactionTypeIconWrapper bg="invert" icon={<MicroblockIcon bg="stacks" />} />;
return <TransactionTypeIconWrapper bg="invert" icon={<ZapIcon bg="stacks" size="xs" />} />;
}
5 changes: 3 additions & 2 deletions src/app/components/transaction/token-transfer-icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon';
import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
import { MicroblockIcon } from '@app/ui/components/icons/microblock-icon';
import { ZapIcon } from '@app/ui/components/icons/zap-icon';

import { getColorFromTx } from './transaction-type-icon';

Expand All @@ -14,10 +14,11 @@ export function TokenTransferIcon(props: { tx: StacksTx }) {

if ('is_unanchored' in tx && tx.is_unanchored)
return (
<MicroblockIcon
<ZapIcon
bg={getColorFromTx(tx)}
borderColor="currentColor"
fill="accent.background-primary"
size="xs"
/>
);

Expand Down
3 changes: 1 addition & 2 deletions src/app/components/transaction/transaction-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import FunctionIcon from 'mdi-react/FunctionIcon';

import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';

import { CodeIcon } from '@app/ui/components/icons/code-icon';
import { FunctionIcon } from '@app/ui/components/icons/function-icon';
import { PlusIcon } from '@app/ui/components/icons/plus-icon';

import { TokenTransferIcon } from './token-transfer-icon';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { FiCircle } from 'react-icons/fi';

import { Box, Flex, Stack, styled } from 'leather-styles/jsx';

import { capitalize } from '@app/common/utils';
Expand All @@ -8,6 +6,7 @@ import { ExternalLink } from '@app/components/external-link';
import { WarningLabel } from '@app/components/warning-label';
import { ConnectLedgerErr } from '@app/features/ledger/illustrations/ledger-illu-connect-ledger-error';
import { LeatherButton } from '@app/ui/components/button';
import { CircleIcon } from '@app/ui/components/icons/circle-icon';
import { Caption } from '@app/ui/components/typography/caption';

import { LedgerTitle } from '../../components/ledger-title';
Expand All @@ -23,7 +22,7 @@ function PossibleReasonUnableToConnect(props: PossibleReasonUnableToConnectProps
return (
<Flex alignItems="center">
<Box mr="space.02">
<FiCircle fill="accent.text-primary" size="4px" />
<CircleIcon fill="accent.text-primary" size="4px" />
</Box>
<styled.span textStyle="body.02">{text}</styled.span>
</Flex>
Expand Down
14 changes: 5 additions & 9 deletions src/app/pages/fund/components/fast-checkout-badge.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
import { FiZap } from 'react-icons/fi';

import { HStack, styled } from 'leather-styles/jsx';

import { ZapIcon } from '@app/ui/components/icons/zap-icon';

export function FastCheckoutBadge() {
{
/* #4476 FIXME update icon and colours */
}
return (
<HStack
alignItems="center"
border="1px solid"
borderColor="#D9EDD4"
border="default"
borderRadius="xxl"
height="24px"
justifyContent="center"
paddingX="space.02"
paddingY="space.01"
gap="space.01"
>
<FiZap color="#008051" size="12px" strokeWidth="2.5px" />
<styled.span color="#008051" textStyle="caption.02">
<ZapIcon color="success.label" size="xs" />
<styled.span color="success.label" textStyle="caption.02">
Fast checkout
</styled.span>
</HStack>
Expand Down
12 changes: 5 additions & 7 deletions src/app/pages/fund/components/zero-percent-fees-badge.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
import { FiStar } from 'react-icons/fi';

import { HStack, styled } from 'leather-styles/jsx';

import { StarIcon } from '@app/ui/components/icons/star-icon';

export function ZeroPercentFeesBadge() {
return (
<HStack
alignItems="center"
border="1px solid"
borderColor="#FFE0C2"
border="default"
borderRadius="xxl"
height="24px"
justifyContent="center"
paddingX="space.02"
paddingY="space.01"
gap="space.01"
>
{/* #4476 FIXME update icon and colours */}
<FiStar color="#F59300" size="12px" strokeWidth="2.5px" />
<styled.span color="#FFA953" textStyle="caption.02">
<StarIcon color="warning.label" size="xs" />
<styled.span color="warning.label" textStyle="caption.02">
0 % Fees
</styled.span>
</HStack>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
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';
import { RotateLeftIcon } from '@app/ui/components/icons/rotate-left-icon';

export function BackUpSecretKeyContent(): React.JSX.Element {
return (
Expand All @@ -25,7 +24,7 @@ export function BackUpSecretKeyContent(): React.JSX.Element {

<Stack gap="space.03">
<HStack alignItems="center" margin={['auto', 'auto', 'auto', 'unset']}>
<FiRotateCcw size="16px" />
<RotateLeftIcon />
<styled.span textStyle="body.01">Your Secret Key gives access to your wallet</styled.span>
</HStack>
<HStack alignItems="center" margin={['auto', 'auto', 'auto', 'unset']}>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
// TODO get icons for Trash, Circle, Star, Zap, CloudOff
import { FiTrash2 } from 'react-icons/fi';

import { SettingsSelectors } from '@tests/selectors/settings.selectors';
import { Box, Flex, Stack } from 'leather-styles/jsx';
import { styled } from 'leather-styles/jsx';
Expand All @@ -9,6 +6,7 @@ import { NetworkConfiguration } from '@shared/constants';

import { getUrlHostname } from '@app/common/utils';
import { LeatherButton } from '@app/ui/components/button';
import { TrashIcon } from '@app/ui/components/icons/trash-icon';

import { NetworkStatusIndicator } from './network-status-indicator';

Expand Down Expand Up @@ -75,8 +73,7 @@ export function NetworkListItemLayout({
onRemoveNetwork(network.id);
}}
>
{/* FIXME #4476 icon */}
<FiTrash2 size="14px" />
<TrashIcon />
</LeatherButton>
)}
</Flex>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
// TODO get new icon for this / migrate
import { FiCloudOff as IconCloudOff } from 'react-icons/fi';

import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
import { CloudOffIcon } from '@app/ui/components/icons/cloud-off-icon';

interface NetworkStatusIndicatorProps {
isActive: boolean;
isOnline: boolean;
}
export function NetworkStatusIndicator({ isActive, isOnline }: NetworkStatusIndicatorProps) {
return !isOnline ? <IconCloudOff /> : isActive ? <CheckmarkIcon /> : null;
return !isOnline ? <CloudOffIcon /> : isActive ? <CheckmarkIcon /> : null;
}
23 changes: 23 additions & 0 deletions src/app/ui/components/icons/circle-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Square, SquareProps } from 'leather-styles/jsx';

import { Svg } from '../svg';

export function CircleIcon({ size = 'sm', ...props }: SquareProps) {
return (
<Square size={size} {...props}>
<Svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="square"
strokeLinejoin="arcs"
>
<circle cx="12" cy="12" r="10"></circle>
</Svg>
</Square>
);
}
24 changes: 24 additions & 0 deletions src/app/ui/components/icons/cloud-off-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Square, SquareProps } from 'leather-styles/jsx';

import { Svg } from '../svg';

// TODO: This svg was copied from react-icons temporarily
export function CloudOffIcon({ size = 'sm', ...props }: SquareProps) {
return (
<Square size={size} {...props}>
<Svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3"></path>
<line x1="1" y1="1" x2="23" y2="23"></line>
</Svg>
</Square>
);
}
14 changes: 14 additions & 0 deletions src/app/ui/components/icons/function-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Square } from 'leather-styles/jsx';

import { Svg } from '../svg';

// TODO: This svg was copied from mdi-react temporarily
export function FunctionIcon({ size = 'xs', ...props }) {
return (
<Square size={size} {...props}>
<Svg width="12px" height="12px" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.6,5.29C14.5,5.19 13.53,6 13.43,7.11L13.18,10H16V12H13L12.56,17.07C12.37,19.27 10.43,20.9 8.23,20.7C6.92,20.59 5.82,19.86 5.17,18.83L6.67,17.33C6.91,18.07 7.57,18.64 8.4,18.71C9.5,18.81 10.47,18 10.57,16.89L11,12H8V10H11.17L11.44,6.93C11.63,4.73 13.57,3.1 15.77,3.3C17.08,3.41 18.18,4.14 18.83,5.17L17.33,6.67C17.09,5.93 16.43,5.36 15.6,5.29Z"></path>
</Svg>
</Square>
);
}
13 changes: 0 additions & 13 deletions src/app/ui/components/icons/microblock-icon.tsx

This file was deleted.

23 changes: 23 additions & 0 deletions src/app/ui/components/icons/rotate-left-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Square, SquareProps } from 'leather-styles/jsx';

import { Svg } from '../svg';

export function RotateLeftIcon({ size = 'sm', ...props }: SquareProps) {
return (
<Square size={size} {...props}>
<Svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="square"
strokeLinejoin="arcs"
>
<path d="M2.5 2v6h6M2.66 15.57a10 10 0 1 0 .57-8.38" />
</Svg>
</Square>
);
}
23 changes: 23 additions & 0 deletions src/app/ui/components/icons/star-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Square, SquareProps } from 'leather-styles/jsx';

import { Svg } from '../svg';

export function StarIcon({ size = 'sm', ...props }: SquareProps) {
return (
<Square size={size} {...props}>
<Svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="square"
strokeLinejoin="arcs"
>
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</Svg>
</Square>
);
}
26 changes: 26 additions & 0 deletions src/app/ui/components/icons/trash-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Square, SquareProps } from 'leather-styles/jsx';

import { Svg } from '../svg';

export function TrashIcon({ size = 'sm', ...props }: SquareProps) {
return (
<Square size={size} {...props}>
<Svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="square"
strokeLinejoin="arcs"
>
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</Svg>
</Square>
);
}
23 changes: 23 additions & 0 deletions src/app/ui/components/icons/zap-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Square, SquareProps } from 'leather-styles/jsx';

import { Svg } from '../svg';

// TODO: This svg was copied from react-icons temporarily
export function ZapIcon({ size = 'sm', ...props }: SquareProps) {
return (
<Square size={size} {...props}>
<Svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="2"
fill={props.fill ?? 'none'}
strokeLinecap="round"
strokeLinejoin="round"
>
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</Svg>
</Square>
);
}
Loading

0 comments on commit 1fa4e6c

Please sign in to comment.