Styling
This commit is contained in:
parent
34923713f5
commit
e50a929d8b
@ -17,4 +17,5 @@ header {
|
|||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: antiquewhite;
|
background-color: antiquewhite;
|
||||||
|
margin-top: 2em;
|
||||||
}
|
}
|
||||||
|
@ -13,6 +13,7 @@ import { Options } from 'components/Options'
|
|||||||
import { TextInput } from 'components/TextInput'
|
import { TextInput } from 'components/TextInput'
|
||||||
import { TextOutput } from 'components/TextOutput'
|
import { TextOutput } from 'components/TextOutput'
|
||||||
import { TotalTime } from 'components/TotalTime'
|
import { TotalTime } from 'components/TotalTime'
|
||||||
|
import { Div } from 'styles/Div'
|
||||||
|
|
||||||
export const App = () => {
|
export const App = () => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
@ -32,13 +33,15 @@ export const App = () => {
|
|||||||
<main>
|
<main>
|
||||||
<Container>
|
<Container>
|
||||||
<h2>Widget</h2>
|
<h2>Widget</h2>
|
||||||
|
<Div maxWidth="600px" margin="0 auto">
|
||||||
<RsvpWidget />
|
<RsvpWidget />
|
||||||
<Flex>
|
</Div>
|
||||||
<FlexMain padding="10px">
|
<Flex flexWrap="wrap">
|
||||||
|
<FlexMain padding="10px" minWidth="300px">
|
||||||
<h2>Options</h2>
|
<h2>Options</h2>
|
||||||
<Options />
|
<Options />
|
||||||
</FlexMain>
|
</FlexMain>
|
||||||
<FlexMain>
|
<FlexMain padding="10px" minWidth="300px">
|
||||||
<h2>Text input</h2>
|
<h2>Text input</h2>
|
||||||
<TextInput />
|
<TextInput />
|
||||||
</FlexMain>
|
</FlexMain>
|
||||||
|
6
src/styles/Div.js
Normal file
6
src/styles/Div.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
/** A generic div. Mainly for development. Try to use as sparse as possible */
|
||||||
|
export const Div = ({ children, ...rest }) => {
|
||||||
|
return <div style={rest}>{children}</div>
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user