diff --git a/packages/connect/src/react/common/index.ts b/packages/connect/src/react/common/index.ts new file mode 100644 index 00000000000..2189b54fe14 --- /dev/null +++ b/packages/connect/src/react/common/index.ts @@ -0,0 +1,3 @@ +export const PX = 6; + + diff --git a/packages/connect/src/react/components/screen/screen-actions.tsx b/packages/connect/src/react/components/screen/screen-actions.tsx index 95441a843b0..6fb75dd62ab 100644 --- a/packages/connect/src/react/components/screen/screen-actions.tsx +++ b/packages/connect/src/react/components/screen/screen-actions.tsx @@ -1,4 +1,5 @@ import React from 'react'; import { Flex, FlexProps } from '@blockstack/ui'; +import { PX } from '../../common'; -export const ScreenActions = (props: FlexProps) => <Flex px={8} {...props} />; +export const ScreenActions = (props: FlexProps) => <Flex px={PX} {...props} />; diff --git a/packages/connect/src/react/components/screen/screen-body.tsx b/packages/connect/src/react/components/screen/screen-body.tsx index d906c07d370..9c9b7273cd3 100644 --- a/packages/connect/src/react/components/screen/screen-body.tsx +++ b/packages/connect/src/react/components/screen/screen-body.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Flex, FlexProps } from '@blockstack/ui'; import { Body, Pretitle, Title } from '../typography'; +import { PX } from '../../common'; export interface ScreenBodyProps extends FlexProps { pretitle?: string | React.ElementType; @@ -12,7 +13,7 @@ export interface ScreenBodyProps extends FlexProps { export const ScreenBody = ({ body, pretitle, fullWidth, ...rest }: Omit<ScreenBodyProps, 'title'>) => { return ( - <Flex mx={fullWidth ? 0 : 8} flexDirection="column" {...rest}> + <Flex mx={fullWidth ? 0 : PX} flexDirection="column" {...rest}> {pretitle && <Pretitle>{pretitle}</Pretitle>} {body && body.length ? body.map((child, key) => diff --git a/packages/connect/src/react/components/screen/screen-footer.tsx b/packages/connect/src/react/components/screen/screen-footer.tsx index 2fa345eb137..17ee2370cb9 100644 --- a/packages/connect/src/react/components/screen/screen-footer.tsx +++ b/packages/connect/src/react/components/screen/screen-footer.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { Flex, BoxProps } from '@blockstack/ui'; +import { PX } from '../../common'; interface ScreenFooterProps extends BoxProps {} export const ScreenFooter: React.FC<ScreenFooterProps> = ({ children, ...rest }) => ( <Flex - mx={8} + mx={PX} flex={1} fontSize={['12px', '14px']} color="ink.600" diff --git a/packages/connect/src/react/components/screen/screen-header.tsx b/packages/connect/src/react/components/screen/screen-header.tsx index 708e7d08062..5d0f5b8ade1 100644 --- a/packages/connect/src/react/components/screen/screen-header.tsx +++ b/packages/connect/src/react/components/screen/screen-header.tsx @@ -3,6 +3,7 @@ import { Box, Flex, Text, ChevronIcon } from '@blockstack/ui'; import { useAppDetails } from '../../hooks/use-app-details'; import { Logo } from '../logo'; import { AppIcon } from '../app-icon'; +import { PX } from '../../common'; interface HeaderTitleProps { title?: string | JSX.Element; @@ -48,7 +49,8 @@ export const ScreenHeader = ({ return ( <Flex - p={[4, 5]} + py={[4, 5]} + px={PX} height="56px" borderBottom="1px solid" borderBottomColor="inherit"