diff --git a/src/app/ui/components/icons/alert-octagon-icon.tsx b/src/app/ui/components/icons/alert-octagon-icon.tsx index 7040e1ad2e1..5144d953223 100644 --- a/src/app/ui/components/icons/alert-octagon-icon.tsx +++ b/src/app/ui/components/icons/alert-octagon-icon.tsx @@ -1,25 +1,24 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function AlertOctagonIcon({ size = 'sm', ...props }: SquareProps) { +export function AlertOctagonIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/animated-tick-icon.tsx b/src/app/ui/components/icons/animated-tick-icon.tsx index ac1484d7143..06c8c98a78a 100644 --- a/src/app/ui/components/icons/animated-tick-icon.tsx +++ b/src/app/ui/components/icons/animated-tick-icon.tsx @@ -1,14 +1,10 @@ -import { HTMLStyledProps, styled } from 'leather-styles/jsx'; -import { SizeToken } from 'leather-styles/tokens'; +import { styled } from 'leather-styles/jsx'; -import { LiteralUnion } from '@shared/utils/type-utils'; +import { SvgProps } from '@app/ui/ui-types'; const defaultSize = '20px'; -interface AnimatedTickIconProps extends HTMLStyledProps<'svg'> { - size?: LiteralUnion; -} -export function AnimatedTickIcon({ size = defaultSize, ...props }: AnimatedTickIconProps) { +export function AnimatedTickIcon({ size = defaultSize, ...props }: SvgProps) { return ( - - - - + + + ); } diff --git a/src/app/ui/components/icons/arrow-left-icon.tsx b/src/app/ui/components/icons/arrow-left-icon.tsx index fb48e38983b..3ecfbc8b028 100644 --- a/src/app/ui/components/icons/arrow-left-icon.tsx +++ b/src/app/ui/components/icons/arrow-left-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ArrowLeftIcon({ size = 'sm', ...props }: SquareProps) { +export function ArrowLeftIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/arrow-up-icon.tsx b/src/app/ui/components/icons/arrow-up-icon.tsx index 97e25c24853..3996c5b3954 100644 --- a/src/app/ui/components/icons/arrow-up-icon.tsx +++ b/src/app/ui/components/icons/arrow-up-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ArrowUpIcon({ size = 'sm', ...props }: SquareProps) { +export function ArrowUpIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/bitcoin-contract-icon.tsx b/src/app/ui/components/icons/bitcoin-contract-icon.tsx index 9cdab8f2fc5..3a9ab39fe26 100644 --- a/src/app/ui/components/icons/bitcoin-contract-icon.tsx +++ b/src/app/ui/components/icons/bitcoin-contract-icon.tsx @@ -1,52 +1,51 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function BitcoinContractIcon({ size = 'xl', ...props }: SquareProps) { +export function BitcoinContractIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/brc20-token-icon.tsx b/src/app/ui/components/icons/brc20-token-icon.tsx index 5cdca3b25f5..300696c3326 100644 --- a/src/app/ui/components/icons/brc20-token-icon.tsx +++ b/src/app/ui/components/icons/brc20-token-icon.tsx @@ -1,58 +1,57 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function Brc20TokenIcon({ size = 'xl', ...rest }: SquareProps) { +export function Brc20TokenIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/btc-icon.tsx b/src/app/ui/components/icons/btc-icon.tsx index 2ddd2605f12..fd891f5382c 100644 --- a/src/app/ui/components/icons/btc-icon.tsx +++ b/src/app/ui/components/icons/btc-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function BtcIcon({ size = 'xl', ...props }: SquareProps) { +export function BtcIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/btc-ledger-icon.tsx b/src/app/ui/components/icons/btc-ledger-icon.tsx index 81c337e3c57..553192c63b0 100644 --- a/src/app/ui/components/icons/btc-ledger-icon.tsx +++ b/src/app/ui/components/icons/btc-ledger-icon.tsx @@ -1,22 +1,21 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function BtcLedgerIcon({ size = 'md', ...props }: SquareProps) { +export function BtcLedgerIcon({ size = 'md', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/checkmark-icon.tsx b/src/app/ui/components/icons/checkmark-icon.tsx index 665199d6583..179a8fcc6c7 100644 --- a/src/app/ui/components/icons/checkmark-icon.tsx +++ b/src/app/ui/components/icons/checkmark-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CheckmarkIcon({ size = 'sm', ...props }: SquareProps) { +export function CheckmarkIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/chevron-down-icon.tsx b/src/app/ui/components/icons/chevron-down-icon.tsx index e77e1a17168..f123168a712 100644 --- a/src/app/ui/components/icons/chevron-down-icon.tsx +++ b/src/app/ui/components/icons/chevron-down-icon.tsx @@ -1,19 +1,18 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ChevronDownIcon({ size = 'sm', ...props }: SquareProps) { +export function ChevronDownIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/chevron-up-icon.tsx b/src/app/ui/components/icons/chevron-up-icon.tsx index 283a9494e8c..bcb6c80212b 100644 --- a/src/app/ui/components/icons/chevron-up-icon.tsx +++ b/src/app/ui/components/icons/chevron-up-icon.tsx @@ -1,27 +1,26 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ChevronUpIcon({ size = 'sm', ...props }: SquareProps) { +export function ChevronUpIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/chevrons-right-icon.tsx b/src/app/ui/components/icons/chevrons-right-icon.tsx index b48fc34b41c..3edbf31a05f 100644 --- a/src/app/ui/components/icons/chevrons-right-icon.tsx +++ b/src/app/ui/components/icons/chevrons-right-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ChevronsRightIcon({ size = 'sm', ...props }: SquareProps) { +export function ChevronsRightIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/circle-icon.tsx b/src/app/ui/components/icons/circle-icon.tsx index 4d0fb5e6230..a85081558c0 100644 --- a/src/app/ui/components/icons/circle-icon.tsx +++ b/src/app/ui/components/icons/circle-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CircleIcon({ size = 'sm', ...props }: SquareProps) { +export function CircleIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/close-icon.tsx b/src/app/ui/components/icons/close-icon.tsx index 7da3a42504c..d8bbc4543e1 100644 --- a/src/app/ui/components/icons/close-icon.tsx +++ b/src/app/ui/components/icons/close-icon.tsx @@ -1,20 +1,19 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CloseIcon({ size = 'sm', ...props }: SquareProps) { +export function CloseIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/cloud-off-icon.tsx b/src/app/ui/components/icons/cloud-off-icon.tsx index 470a7eefcb9..82e9ff5aac0 100644 --- a/src/app/ui/components/icons/cloud-off-icon.tsx +++ b/src/app/ui/components/icons/cloud-off-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; // TODO: This svg was copied from react-icons temporarily -export function CloudOffIcon({ size = 'sm', ...props }: SquareProps) { +export function CloudOffIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/code-icon.tsx b/src/app/ui/components/icons/code-icon.tsx index 277b39f3a2a..d08ad3d7e0a 100644 --- a/src/app/ui/components/icons/code-icon.tsx +++ b/src/app/ui/components/icons/code-icon.tsx @@ -1,30 +1,29 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CodeIcon({ size = 'sm', ...props }: SquareProps) { +export function CodeIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/copy-icon.tsx b/src/app/ui/components/icons/copy-icon.tsx index a65b9cc647e..6d4cf2e77db 100644 --- a/src/app/ui/components/icons/copy-icon.tsx +++ b/src/app/ui/components/icons/copy-icon.tsx @@ -1,25 +1,24 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CopyIcon({ size = 'sm', ...props }: SquareProps) { +export function CopyIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/ellipses-h-icon.tsx b/src/app/ui/components/icons/ellipses-h-icon.tsx index ab92b351ec3..4aa228940e5 100644 --- a/src/app/ui/components/icons/ellipses-h-icon.tsx +++ b/src/app/ui/components/icons/ellipses-h-icon.tsx @@ -1,39 +1,38 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function EllipsesHorizontalIcon({ size = 'sm', ...props }: SquareProps) { +export function EllipsesHorizontalIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/error-circle-icon.tsx b/src/app/ui/components/icons/error-circle-icon.tsx index 53a326e04e1..d3e9f421c04 100644 --- a/src/app/ui/components/icons/error-circle-icon.tsx +++ b/src/app/ui/components/icons/error-circle-icon.tsx @@ -1,31 +1,25 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ErrorCircleIcon({ size = 'sm', ...props }: SquareProps) { +export function ErrorCircleIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/error-icon.tsx b/src/app/ui/components/icons/error-icon.tsx index 3529797462d..85afa8b251d 100644 --- a/src/app/ui/components/icons/error-icon.tsx +++ b/src/app/ui/components/icons/error-icon.tsx @@ -1,31 +1,25 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ErrorIcon({ size = 'sm', ...props }: SquareProps) { +export function ErrorIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/external-link-icon.tsx b/src/app/ui/components/icons/external-link-icon.tsx index 3492cab68df..9589bc0d53d 100644 --- a/src/app/ui/components/icons/external-link-icon.tsx +++ b/src/app/ui/components/icons/external-link-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ExternalLinkIcon({ size = 'sm', ...props }: SquareProps) { +export function ExternalLinkIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/eye-icon.tsx b/src/app/ui/components/icons/eye-icon.tsx index 47db9446324..dbb84fe838e 100644 --- a/src/app/ui/components/icons/eye-icon.tsx +++ b/src/app/ui/components/icons/eye-icon.tsx @@ -1,31 +1,30 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function EyeIcon({ size = 'sm', ...props }: SquareProps) { +export function EyeIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/eye-slash-icon.tsx b/src/app/ui/components/icons/eye-slash-icon.tsx index d73d408aa11..3c099fbf7c3 100644 --- a/src/app/ui/components/icons/eye-slash-icon.tsx +++ b/src/app/ui/components/icons/eye-slash-icon.tsx @@ -1,37 +1,36 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function EyeSlashIcon({ size = 'sm', ...props }: SquareProps) { +export function EyeSlashIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/function-icon.tsx b/src/app/ui/components/icons/function-icon.tsx index 8d99b24618d..a79fd06363a 100644 --- a/src/app/ui/components/icons/function-icon.tsx +++ b/src/app/ui/components/icons/function-icon.tsx @@ -1,14 +1,12 @@ -import { Square } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; // TODO: This svg was copied from mdi-react temporarily -export function FunctionIcon({ size = 'xs', ...props }) { +export function FunctionIcon({ size = 'xs', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/hamburger-icon.tsx b/src/app/ui/components/icons/hamburger-icon.tsx index 736d580369f..9c6c00ab7a9 100644 --- a/src/app/ui/components/icons/hamburger-icon.tsx +++ b/src/app/ui/components/icons/hamburger-icon.tsx @@ -1,32 +1,31 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function HamburgerIcon({ size = 'sm', ...props }: SquareProps) { +export function HamburgerIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/info-icon.tsx b/src/app/ui/components/icons/info-icon.tsx index f612c781c61..94f2aa88e3d 100644 --- a/src/app/ui/components/icons/info-icon.tsx +++ b/src/app/ui/components/icons/info-icon.tsx @@ -1,38 +1,37 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function InfoIcon({ size = 'sm', ...props }: SquareProps) { +export function InfoIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - - + + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/leather-icon.tsx b/src/app/ui/components/icons/leather-icon.tsx index 1f2d501e7ec..c64f786ba8c 100644 --- a/src/app/ui/components/icons/leather-icon.tsx +++ b/src/app/ui/components/icons/leather-icon.tsx @@ -1,8 +1,10 @@ -import { Svg, SvgProps } from '../svg'; +import { styled } from 'leather-styles/jsx'; + +import { SvgProps } from '@app/ui/ui-types'; export function LeatherIcon({ ...props }: SvgProps) { return ( - - + ); } diff --git a/src/app/ui/components/icons/leather-l-icon.tsx b/src/app/ui/components/icons/leather-l-icon.tsx index 6b7d22d4376..b1c7d2f17ce 100644 --- a/src/app/ui/components/icons/leather-l-icon.tsx +++ b/src/app/ui/components/icons/leather-l-icon.tsx @@ -1,22 +1,21 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function LeatherLIcon({ size = '18px', ...props }: SquareProps) { +export function LeatherLIcon({ size = '18px', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/leather-lettermark-icon.tsx b/src/app/ui/components/icons/leather-lettermark-icon.tsx index eab79efece9..f109336d35c 100644 --- a/src/app/ui/components/icons/leather-lettermark-icon.tsx +++ b/src/app/ui/components/icons/leather-lettermark-icon.tsx @@ -1,12 +1,14 @@ -import { Svg, SvgProps } from '@app/ui/components/svg'; +import { styled } from 'leather-styles/jsx'; + +import { SvgProps } from '@app/ui/ui-types'; export function LeatherLettermarkIcon(props: SvgProps) { return ( - + - + ); } diff --git a/src/app/ui/components/icons/ledger-icon.tsx b/src/app/ui/components/icons/ledger-icon.tsx index 3c32ad81396..6e1973dccb6 100644 --- a/src/app/ui/components/icons/ledger-icon.tsx +++ b/src/app/ui/components/icons/ledger-icon.tsx @@ -1,22 +1,21 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function LedgerIcon({ size = 'sm', ...props }: SquareProps) { +export function LedgerIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/list-icon.tsx b/src/app/ui/components/icons/list-icon.tsx index 90984a35d70..685e6d811b1 100644 --- a/src/app/ui/components/icons/list-icon.tsx +++ b/src/app/ui/components/icons/list-icon.tsx @@ -1,28 +1,26 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ListIcon({ size = 'sm', ...props }: SquareProps) { +export function ListIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - + + + + + + + + ); } diff --git a/src/app/ui/components/icons/lock-icon.tsx b/src/app/ui/components/icons/lock-icon.tsx index b92958613f6..b9df8a3a5dc 100644 --- a/src/app/ui/components/icons/lock-icon.tsx +++ b/src/app/ui/components/icons/lock-icon.tsx @@ -1,33 +1,32 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function LockIcon({ size = 'sm', ...props }: SquareProps) { +export function LockIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/ordinal-icon.tsx b/src/app/ui/components/icons/ordinal-icon.tsx index 99d61910412..8e7e217ac42 100644 --- a/src/app/ui/components/icons/ordinal-icon.tsx +++ b/src/app/ui/components/icons/ordinal-icon.tsx @@ -1,21 +1,20 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function OrdinalIcon({ size = 'xl', ...props }: SquareProps) { +export function OrdinalIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/plus-icon.tsx b/src/app/ui/components/icons/plus-icon.tsx index 12c4e511ee1..54a6c91ebfb 100644 --- a/src/app/ui/components/icons/plus-icon.tsx +++ b/src/app/ui/components/icons/plus-icon.tsx @@ -1,30 +1,19 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function PlusIcon({ size = 'sm', ...props }: SquareProps) { +export function PlusIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/qr-code-icon.tsx b/src/app/ui/components/icons/qr-code-icon.tsx index b93bbc7be6c..bd49351daba 100644 --- a/src/app/ui/components/icons/qr-code-icon.tsx +++ b/src/app/ui/components/icons/qr-code-icon.tsx @@ -1,27 +1,26 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function QrCodeIcon({ size = 'sm', ...props }: SquareProps) { +export function QrCodeIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/refresh-icon.tsx b/src/app/ui/components/icons/refresh-icon.tsx index f67f76f79ff..98b74d2be3e 100644 --- a/src/app/ui/components/icons/refresh-icon.tsx +++ b/src/app/ui/components/icons/refresh-icon.tsx @@ -1,37 +1,36 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function RefreshIcon({ size = 'sm', ...props }: SquareProps) { +export function RefreshIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/rotate-left-icon.tsx b/src/app/ui/components/icons/rotate-left-icon.tsx index f3d1a981bb8..bd9f60a11b2 100644 --- a/src/app/ui/components/icons/rotate-left-icon.tsx +++ b/src/app/ui/components/icons/rotate-left-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function RotateLeftIcon({ size = 'sm', ...props }: SquareProps) { +export function RotateLeftIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/star-icon.tsx b/src/app/ui/components/icons/star-icon.tsx index 73c59bee940..ea3c790a9e2 100644 --- a/src/app/ui/components/icons/star-icon.tsx +++ b/src/app/ui/components/icons/star-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function StarIcon({ size = 'sm', ...props }: SquareProps) { +export function StarIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/stx-icon.tsx b/src/app/ui/components/icons/stx-icon.tsx index d56c07c0bc6..35fc73b039a 100644 --- a/src/app/ui/components/icons/stx-icon.tsx +++ b/src/app/ui/components/icons/stx-icon.tsx @@ -1,27 +1,26 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function StxIcon({ size = 'xl', ...props }: SquareProps) { +export function StxIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/stx-ledger-icon.tsx b/src/app/ui/components/icons/stx-ledger-icon.tsx index 1f95eb3138c..aecd63f0d15 100644 --- a/src/app/ui/components/icons/stx-ledger-icon.tsx +++ b/src/app/ui/components/icons/stx-ledger-icon.tsx @@ -1,26 +1,25 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function StxLedgerIcon({ size = 'md', ...props }: SquareProps) { +export function StxLedgerIcon({ size = 'md', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/swap-icon.tsx b/src/app/ui/components/icons/swap-icon.tsx index 228a3fe408f..fc9f9d3a4b5 100644 --- a/src/app/ui/components/icons/swap-icon.tsx +++ b/src/app/ui/components/icons/swap-icon.tsx @@ -1,31 +1,30 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function SwapIcon({ size = 'sm', ...props }: SquareProps) { +export function SwapIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/trash-icon.tsx b/src/app/ui/components/icons/trash-icon.tsx index 0014efe57ee..d6242214576 100644 --- a/src/app/ui/components/icons/trash-icon.tsx +++ b/src/app/ui/components/icons/trash-icon.tsx @@ -1,26 +1,25 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function TrashIcon({ size = 'sm', ...props }: SquareProps) { +export function TrashIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - + + + + + + ); } diff --git a/src/app/ui/components/icons/unlock-icon.tsx b/src/app/ui/components/icons/unlock-icon.tsx index 1c839ca0fc5..1ff6db1cc8f 100644 --- a/src/app/ui/components/icons/unlock-icon.tsx +++ b/src/app/ui/components/icons/unlock-icon.tsx @@ -1,33 +1,32 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function UnlockIcon({ size = 'sm', ...props }: SquareProps) { +export function UnlockIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/wallet-type-ledger-icon.tsx b/src/app/ui/components/icons/wallet-type-ledger-icon.tsx index dc52b9eafa5..6635a889f2a 100644 --- a/src/app/ui/components/icons/wallet-type-ledger-icon.tsx +++ b/src/app/ui/components/icons/wallet-type-ledger-icon.tsx @@ -1,54 +1,53 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function WalletTypeLedgerIcon({ size = 'md', ...props }: SquareProps) { +export function WalletTypeLedgerIcon({ size = 'md', ...props }: SvgProps) { return ( - - - - - - - - - - + + + + + + + + ); } diff --git a/src/app/ui/components/icons/zap-icon.tsx b/src/app/ui/components/icons/zap-icon.tsx index ac9aaf8183a..c4af26b7502 100644 --- a/src/app/ui/components/icons/zap-icon.tsx +++ b/src/app/ui/components/icons/zap-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; // TODO: This svg was copied from react-icons temporarily -export function ZapIcon({ size = 'sm', ...props }: SquareProps) { +export function ZapIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/svg.tsx b/src/app/ui/components/svg.tsx deleted file mode 100644 index 9118a4caa10..00000000000 --- a/src/app/ui/components/svg.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { styled } from 'leather-styles/jsx'; -import { HTMLStyledProps } from 'leather-styles/types'; - -export type SvgProps = HTMLStyledProps<'svg'>; - -export function Svg(props: SvgProps) { - return ; -} diff --git a/src/app/ui/ui-types.ts b/src/app/ui/ui-types.ts new file mode 100644 index 00000000000..9caaa9610b0 --- /dev/null +++ b/src/app/ui/ui-types.ts @@ -0,0 +1,9 @@ +import { SizeToken } from 'leather-styles/tokens'; +import type { HTMLStyledProps, LiteralUnion } from 'leather-styles/types'; + +type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; +type Size = LiteralUnion, string>; + +export interface SvgProps extends HTMLStyledProps<'svg'> { + size?: Size; +}