fix: adjust horizontal spacing on screen components

leather-io · Feb 18, 2020 · 21b481f · 21b481f
1 parent c3a5cbf
commit 21b481f
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/packages/connect/src/react/common/index.ts 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
@@ -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
@@ -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
@@ -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
@@ -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"