diff options
| author | eug-vs <eug-vs@keemail.me> | 2021-03-18 12:16:57 +0300 |
|---|---|---|
| committer | eug-vs <eug-vs@keemail.me> | 2021-03-18 12:49:34 +0300 |
| commit | d2988b99143aabec88467212cfca5891bf6f6bd3 (patch) | |
| tree | 7582b24dadd7092c4f52afb8f1d93910e715560e | |
| parent | 080d245283c2c91d890fa2c4d8c5ec4b1514fa7c (diff) | |
| download | commercel-ui-d2988b99143aabec88467212cfca5891bf6f6bd3.tar.gz | |
feat: remove default margin from Paper
| -rw-r--r-- | src/components/Paper.tsx | 5 | ||||
| -rw-r--r-- | src/containers/Home.tsx | 4 | ||||
| -rw-r--r-- | src/containers/Page.tsx | 2 | ||||
| -rw-r--r-- | src/containers/WaybillForm.tsx | 2 |
4 files changed, 7 insertions, 6 deletions
diff --git a/src/components/Paper.tsx b/src/components/Paper.tsx index 5e2604f..f285dab 100644 --- a/src/components/Paper.tsx +++ b/src/components/Paper.tsx @@ -2,6 +2,7 @@ import React from 'react'; interface Props { variant?: 'elevation' | 'outlined'; + className?: string; } const style = { @@ -9,9 +10,9 @@ const style = { outlined: 'bg-gray-50 border border-gray-300', }; -const Paper: React.FC<Props> = ({ variant = 'elevation', children }) => { +const Paper: React.FC<Props> = ({ variant = 'elevation', className, children }) => { return ( - <div className={`p-5 m-5 bg-white rounded-md shadow ${style[variant]}`}> + <div className={`p-5 bg-white rounded-md shadow ${style[variant]} ${className}`}> {children} </div> ); diff --git a/src/containers/Home.tsx b/src/containers/Home.tsx index 697cc66..3af5379 100644 --- a/src/containers/Home.tsx +++ b/src/containers/Home.tsx @@ -29,9 +29,9 @@ const cards = [ const Home: React.FC = () => ( <Page title="Главная" actions={[{ name: 'Связаться с нами', variant: 'outlined' }]}> - <div className="grid grid-flow-row grid-cols-3"> + <div className="grid grid-flow-row lg:grid-cols-3"> {cards.map(card => ( - <Paper key={card.route} variant="outlined"> + <Paper key={card.route} variant="outlined" className="m-5"> <div className="h-full flex flex-col justify-between"> <img className="h-60" src={card.src} alt="Накладная" /> <div className="flex flex-col text-center"> diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx index 879d130..6282748 100644 --- a/src/containers/Page.tsx +++ b/src/containers/Page.tsx @@ -13,7 +13,7 @@ interface Props { } const Page: React.FC<Props> = ({ title, actions, className, children }) => ( - <Paper> + <Paper className="xl:m-5"> <div className="mb-2 flex justify-between items-center"> <span className="text-2xl font-bold">{title}</span> <div> diff --git a/src/containers/WaybillForm.tsx b/src/containers/WaybillForm.tsx index 6976652..4b2e3fa 100644 --- a/src/containers/WaybillForm.tsx +++ b/src/containers/WaybillForm.tsx @@ -34,7 +34,7 @@ const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => { ]} /> {_.times(recordsNumber).map(index => ( - <Paper variant="outlined"> + <Paper variant="outlined" className="m-4"> <Select name={`records.${index}.productId`} label="Товар" |