chore: use tokens for border radius

leather-io · Nov 22, 2023 · b387903 · b387903
1 parent c44a7bb
commit b387903
Show file tree

Hide file tree

Showing 49 changed files with 54 additions and 52 deletions.
diff --git a/src/app/components/drawer/components/header-action-button.tsx b/src/app/components/drawer/components/header-action-button.tsx
@@ -16,7 +16,7 @@ export function HeaderActionButton(props: HeaderActionButtonProps) {
         cursor: isWaitingOnPerformedAction ? 'unset' : 'pointer',
       }}
       data-testid={HomePageSelectors.DrawerHeaderActionBtn}
-      borderRadius="8px"
+      borderRadius="xs"
       color="accent.action-primary-default"
       height="36px"
       onClick={isWaitingOnPerformedAction ? undefined : onAction}

diff --git a/src/app/components/fees-row/components/custom-fee-field.tsx b/src/app/components/fees-row/components/custom-fee-field.tsx
@@ -51,7 +51,7 @@ export function CustomFeeField({
         </styled.label>
         <styled.input
           autoComplete="off"
-          borderRadius="8px"
+          borderRadius="xs"
           color="accent.text-subdued"
           data-testid={SharedComponentsSelectors.CustomFeeFieldInput}
           display="block"

diff --git a/src/app/components/fees-row/components/fee-estimate-select.layout.tsx b/src/app/components/fees-row/components/fee-estimate-select.layout.tsx
@@ -40,7 +40,7 @@ export function FeeEstimateSelectLayout({
         {isVisible ? (
           <Stack
             bg="accent.background-primary"
-            borderRadius="8px"
+            borderRadius="xs"
             boxShadow="0px 8px 16px rgba(27, 39, 51, 0.08)"
             data-testid={SharedComponentsSelectors.FeeEstimateSelect}
             flexDirection="column"

diff --git a/src/app/components/generic-error/generic-error.layout.tsx b/src/app/components/generic-error/generic-error.layout.tsx
@@ -36,7 +36,7 @@ export function GenericErrorLayout(props: GenericErrorProps) {
       </styled.h2>
       <styled.ul
         border="default"
-        borderRadius="10px"
+        borderRadius="sm"
         fontSize="14px"
         lineHeight="1.6"
         listStyleType="circle"

diff --git a/src/app/components/info-label.tsx b/src/app/components/info-label.tsx
@@ -12,7 +12,7 @@ export function InfoLabel({ children, title, ...rest }: InfoLabelProps) {
       <Stack
         alignItems="start"
         bg="disabled"
-        borderRadius="10px"
+        borderRadius="sm"
         minHeight="48px"
         px="space.04"
         py="space.03"

diff --git a/src/app/components/inscription-preview-card/components/inscription-preview-container.tsx b/src/app/components/inscription-preview-card/components/inscription-preview-container.tsx
@@ -6,7 +6,7 @@ export function InscriptionPreviewContainer({ children, ...props }: HasChildren
   return (
     <Box
       bg="black"
-      borderRadius="8px"
+      borderRadius="xs"
       width="100px"
       height="100px"
       overflow="hidden"

diff --git a/src/app/components/pill.tsx b/src/app/components/pill.tsx
@@ -11,7 +11,7 @@ export function Pill({ hoverLabel, label, ...props }: PillProps) {
     <Tooltip disabled={!hoverLabel} label={hoverLabel} maxWidth="200px" placement="bottom">
       <Box
         border="1px solid"
-        borderRadius="24px"
+        borderRadius="xxl"
         borderColor="#DCDDE2"
         lineHeight="16px"
         ml="space.03"

diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
@@ -84,7 +84,7 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr
                 autoComplete="off"
                 autoFocus
                 border="active"
-                borderRadius="10px"
+                borderRadius="sm"
                 data-testid={SettingsSelectors.EnterPasswordInput}
                 disabled={isRunning}
                 height="64px"

diff --git a/src/app/components/requester-flag.tsx b/src/app/components/requester-flag.tsx
@@ -15,7 +15,7 @@ export function RequesterFlag({ requester }: RequesterFlagProps) {
       justifyContent="center"
       py="space.04"
       px="space.02"
-      borderRadius="10px"
+      borderRadius="sm"
       width="fit-content"
     >
       <styled.span textStyle="label.02">{requester}</styled.span>

diff --git a/src/app/components/secret-key/two-column.layout.tsx b/src/app/components/secret-key/two-column.layout.tsx
@@ -42,7 +42,7 @@ export function TwoColumnLayout({
           pb={['space.02', 'space.05']}
           gap="space.04"
           backgroundColor="accent.background-primary"
-          borderRadius="8px"
+          borderRadius="xs"
           width="100%"
           flex="1"
         >

diff --git a/src/app/components/sponsored-label.tsx b/src/app/components/sponsored-label.tsx
@@ -9,7 +9,7 @@ export function SponsoredLabel(): React.JSX.Element {
       <HStack
         alignItems="center"
         bg="accent.component-background-hover"
-        borderRadius="10px"
+        borderRadius="sm"
         height="48px"
         pl="space.04"
       >

diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx
@@ -57,7 +57,7 @@ export function TextInputField({
           bottom: '-1px',
         }}
         border="default"
-        borderRadius="10px"
+        borderRadius="sm"
         className={css({
           '& :has(:focus)::before': {
             border: '2px solid #bfc6ff',

diff --git a/...activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx b/...activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx
@@ -12,7 +12,7 @@ export function TxTransferIconWrapper({ icon }: TxTransferIconWrapperProps) {
   return (
     <Box
       bg="stacks"
-      borderRadius="50%"
+      borderRadius="lg"
       color="accent.background-primary"
       flexShrink={0}
       height="36px"

diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
@@ -221,7 +221,7 @@ export function AddNetwork() {
               </styled.span>
               <Input
                 autoFocus
-                borderRadius="10px"
+                borderRadius="sm"
                 height="64px"
                 onChange={formikProps.handleChange}
                 name="name"
@@ -263,7 +263,7 @@ export function AddNetwork() {
               </SelectRoot>
               <Title>Stacks API URL</Title>
               <Input
-                borderRadius="10px"
+                borderRadius="sm"
                 height="64px"
                 onChange={formikProps.handleChange}
                 name="stacksUrl"
@@ -274,7 +274,7 @@ export function AddNetwork() {
               />
               <Title>Bitcoin API URL</Title>
               <Input
-                borderRadius="10px"
+                borderRadius="sm"
                 height="64px"
                 onChange={formikProps.handleChange}
                 name="bitcoinUrl"
@@ -284,7 +284,7 @@ export function AddNetwork() {
                 data-testid={NetworkSelectors.NetworkBitcoinAddress}
               />
               <Input
-                borderRadius="10px"
+                borderRadius="sm"
                 height="64px"
                 onChange={formikProps.handleChange}
                 name="key"

diff --git a/src/app/features/collectibles/components/collectible-hover.tsx b/src/app/features/collectibles/components/collectible-hover.tsx
@@ -35,7 +35,7 @@ export function CollectibleHover({
           _hover={{ bg: 'accent.component-background-hover' }}
           alignItems="center"
           bg="accent.background-primary"
-          borderRadius="50%"
+          borderRadius="lg"
           display="flex"
           height="30px"
           justifyContent="center"

diff --git a/src/app/features/collectibles/components/collectible-item.layout.tsx b/src/app/features/collectibles/components/collectible-item.layout.tsx
@@ -36,7 +36,7 @@ export function CollectibleItemLayout({
         outlineOffset: onClickLayout ? '-4px' : 'unset',
       }}
       _hover={{ bg: 'accent.background-secondary' }}
-      borderRadius="20px"
+      borderRadius="xl"
       cursor={onClickLayout ? 'pointer' : 'default'}
       onClick={onClickLayout}
       p="space.01"

diff --git a/src/app/features/hiro-messages/components/in-app-message-item.tsx b/src/app/features/hiro-messages/components/in-app-message-item.tsx
@@ -29,7 +29,7 @@ export function HiroMessageItem(props: HiroMessageItemProps) {
           mt={['space.02', null, 'unset']}
           transform={[null, null, 'translateY(-50%)']}
           right={0}
-          borderRadius="50%"
+          borderRadius="lg"
           _focus={{ outline: '1px solid white' }}
           onClick={() => onDismiss(id)}
         >

diff --git a/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx b/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx
@@ -28,7 +28,7 @@ export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
         flex="1"
         onClick={handleSubmit as any}
         aria-busy={isLoading}
-        borderRadius="10px"
+        borderRadius="sm"
         aria-disabled={isDisabled}
       >
         {actionText}

diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx
@@ -52,7 +52,7 @@ export function ConnectLedgerErrorLayout(props: ConnectLedgerErrorLayoutProps) {
       ) : (
         <ErrorLabel>Unable to connect</ErrorLabel>
       )}
-      <Stack borderRadius="12px" gap="space.01" textAlign="left" py="space.05">
+      <Stack borderRadius="md" gap="space.01" textAlign="left" py="space.05">
         <PossibleReasonUnableToConnect text="Check if Ledger Live is open. Close it and try again" />
         <PossibleReasonUnableToConnect text="Ensure you only have one instance of Leather open" />
         <PossibleReasonUnableToConnect

diff --git a/src/app/features/message-signer/message-preview-box.tsx b/src/app/features/message-signer/message-preview-box.tsx
@@ -13,7 +13,7 @@ export function MessagePreviewBox({ message, hash }: MessageBoxProps) {
       bg="accent.background-primary"
       border="4px solid"
       borderColor="accent.background-primary"
-      borderRadius="20px"
+      borderRadius="xl"
       paddingBottom={hash ? 'space.02' : 0}
     >
       <Stack

diff --git a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
@@ -28,7 +28,7 @@ export function PsbtRequestDetailsHeader() {
         <HStack
           alignItems="center"
           border={isPsbtMutable ? 'warning' : 'subdued'}
-          borderRadius="24px"
+          borderRadius="xxl"
           gap="space.01"
           px="space.02"
           py="space.01"

diff --git a/src/app/features/secret-key-displayer/components/secret-key-word.tsx b/src/app/features/secret-key-displayer/components/secret-key-word.tsx
@@ -13,7 +13,7 @@ export function SecretKeyWord({ word, num }: SecretKeyWordProps) {
       gap="space.01"
       px="space.03"
       backgroundColor="accent.component-background-default"
-      borderRadius="8px"
+      borderRadius="xs"
     >
       {/*  FIXME #4130: need to fix this color color: var(--color-grey-light-8, #BBB); */}
       <styled.span display="flex" alignItems="center" mr="space.01" color="accent.text-subdued">

diff --git a/src/app/features/settings-dropdown/components/settings-menu-wrapper.tsx b/src/app/features/settings-dropdown/components/settings-menu-wrapper.tsx
@@ -10,7 +10,7 @@ export const MenuWrapper = forwardRef<HTMLDivElement, MenuWrapperProps>(
     isShowing ? (
       <Box
         bg="accent.background-primary"
-        borderRadius="10px"
+        borderRadius="sm"
         boxShadow="0px 8px 16px rgba(27, 39, 51, 0.08)"
         cursor={isShowing ? 'all' : 'none'}
         position="absolute"

diff --git a/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx b/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
@@ -22,7 +22,7 @@ function ContractCallDetailsSuspense() {
     <Stack
       border="4px solid"
       borderColor="accent.border-default"
-      borderRadius="12px"
+      borderRadius="md"
       mb="space.05"
       px="space.04"
       py="32px"

diff --git a/...p/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx b/...p/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx
@@ -90,7 +90,7 @@ export function ContractDeployDetails() {
           gap="space.05"
           border="4px solid"
           borderColor="accent.border-default"
-          borderRadius="12px"
+          borderRadius="md"
           py="space.06"
           px="space.04"
         >

diff --git a/src/app/features/stacks-transaction-request/contract-preview.tsx b/src/app/features/stacks-transaction-request/contract-preview.tsx
@@ -22,7 +22,7 @@ export function ContractPreviewLayout({
   return (
     <HStack
       p="space.04"
-      borderRadius="12px"
+      borderRadius="md"
       gap="space.04"
       alignItems="center"
       border="1px solid"

diff --git a/src/app/features/stacks-transaction-request/minimal-error-message.tsx b/src/app/features/stacks-transaction-request/minimal-error-message.tsx
@@ -36,7 +36,7 @@ function MinimalErrorMessageSuspense(props: HstackProps) {
       alignItems="center"
       // #4476 TODO change this colour
       bg="#FCEEED"
-      borderRadius="12px"
+      borderRadius="md"
       color="error.label"
       p="space.04"
       width="100%"

diff --git a/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx b/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx
@@ -32,7 +32,7 @@ function PostConditionsSuspense(): React.JSX.Element | null {
     <Flex
       border="4px solid"
       borderColor="accent.border-default"
-      borderRadius="12px"
+      borderRadius="md"
       flexDirection="column"
       mb="space.05"
       width="100%"

diff --git a/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx b/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
@@ -16,7 +16,7 @@ export function StxTransferDetails(): React.JSX.Element | null {
     <Stack
       border="4px solid"
       borderColor="accent.border-default"
-      borderRadius="12px"
+      borderRadius="md"
       mb="space.05"
       px="space.04"
       py="space.06"

diff --git a/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx b/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx
@@ -18,7 +18,7 @@ export const ErrorMessage = memo(({ border, title, body, actions }: ErrorMessage
       bg="accent.background-primary"
       // #4476 TODO change this colour
       border={border ? border : '4px solid #FCEEED'}
-      borderRadius="12px"
+      borderRadius="md"
       gap="space.06"
       mb="space.05"
       p="space.05"

diff --git a/src/app/pages/fund/components/fast-checkout-badge.tsx b/src/app/pages/fund/components/fast-checkout-badge.tsx
@@ -11,7 +11,7 @@ export function FastCheckoutBadge() {
       alignItems="center"
       border="1px solid"
       borderColor="#D9EDD4"
-      borderRadius="24px"
+      borderRadius="xxl"
       height="24px"
       justifyContent="center"
       paddingX="space.02"

diff --git a/src/app/pages/fund/components/zero-percent-fees-badge.tsx b/src/app/pages/fund/components/zero-percent-fees-badge.tsx
@@ -8,7 +8,7 @@ export function ZeroPercentFeesBadge() {
       alignItems="center"
       border="1px solid"
       borderColor="#FFE0C2"
-      borderRadius="24px"
+      borderRadius="xxl"
       height="24px"
       justifyContent="center"
       paddingX="space.02"

diff --git a/src/app/pages/home/components/home.layout.tsx b/src/app/pages/home/components/home.layout.tsx
@@ -15,7 +15,7 @@ export function HomeLayout({ children }: HomeLayoutProps) {
         px={['space.04', 'space.04', 'space.08']}
         width="100%"
         backgroundColor="brown.1"
-        borderRadius={['space.00', 'space.02']}
+        borderRadius="lg"
       >
         <AccountInfoCard />
         {children}

diff --git a/src/app/pages/onboarding/set-password/components/password-field.tsx b/src/app/pages/onboarding/set-password/components/password-field.tsx
@@ -34,7 +34,7 @@ export function PasswordField({ strengthResult, isDisabled }: PasswordFieldProps
           autoComplete="off"
           autoFocus
           border="active"
-          borderRadius="10px"
+          borderRadius="sm"
           data-testid={OnboardingSelectors.NewPasswordInput}
           disabled={isDisabled}
           height="64px"

diff --git a/src/app/pages/receive/components/address-qr-code.tsx b/src/app/pages/receive/components/address-qr-code.tsx
@@ -23,7 +23,7 @@ export const QrCode = memo(({ principal, ...rest }: { principal: string }) => {
       alignItems="center"
       border="1px solid"
       borderColor="accent.border-default"
-      borderRadius="18px"
+      borderRadius="lg"
       boxShadow="low"
       justifyContent="center"
       mx="auto"

diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-actions.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-actions.tsx
@@ -10,7 +10,7 @@ interface SendTransferActionsProps {
 export function SendTransferActions({ action, isLoading, onApprove }: SendTransferActionsProps) {
   return (
     <SendTransferFooter>
-      <LeatherButton borderRadius="10px" flexGrow={1} aria-busy={isLoading} onClick={onApprove}>
+      <LeatherButton borderRadius="sm" flexGrow={1} aria-busy={isLoading} onClick={onApprove}>
         {action}
       </LeatherButton>
     </SendTransferFooter>

diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx
@@ -18,7 +18,7 @@ export function SendTransferConfirmationDetails({
     <Stack
       border="4px solid"
       borderColor="accent.border-default"
-      borderRadius="16px"
+      borderRadius="lg"
       p="space.05"
       gap="space.04"
       width="100%"

diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
@@ -12,7 +12,7 @@ export function SendTransferDetails({ address, amount, currentAddress }: SendTra
     <Stack
       border="4px solid"
       borderColor="accent.border-default !important"
-      borderRadius="16px"
+      borderRadius="lg"
       gap="space.04"
       p="space.05"
       width="100%"

diff --git a/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx b/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx
@@ -11,7 +11,7 @@ export function CollectibleAsset({ icon, name, symbol }: CollectibleAssetProps)
     <Flex
       alignItems="center"
       border="default"
-      borderRadius="10px"
+      borderRadius="sm"
       minHeight="64px"
       mb="space.04"
       mt="space.05"

diff --git a/...to-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx b/...to-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx
@@ -28,7 +28,7 @@ export function RecipientDropdownLayout({
       {isVisible ? (
         <Stack
           bg="accent.background-primary"
-          borderRadius="8px"
+          borderRadius="xs"
           boxShadow="0px 8px 16px rgba(27, 39, 51, 0.08)"
           flexDirection="column"
           minWidth="100px"

diff --git a/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx
@@ -19,7 +19,7 @@ export function SelectedAssetField({ icon, name, symbol }: SelectedAssetFieldPro
     <Flex
       alignItems="center"
       border="default"
-      borderRadius="10px"
+      borderRadius="sm"
       minHeight="64px"
       mb="space.04"
       mt="space.06"