kylefang/connect
1
0
Fork 0
mirror of https://github.com/zhigang1992/connect.git synced 2026-04-29 09:55:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust horizontal spacing on screen components

Browse Source
This commit is contained in:
Thomas Osmonson
2020-02-17 22:13:30 -06:00
committed by kyranjamie
parent 3dfd50136b
commit 32d89bef79
5 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/react/common/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export const PX = 6;

3
src/react/components/screen/screen-actions.tsx
View File

@@ -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} />;

3
src/react/components/screen/screen-body.tsx
View File

@@ -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) =>

3
src/react/components/screen/screen-footer.tsx
View File

@@ -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"

4
src/react/components/screen/screen-header.tsx
View File

@@ -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"