From e50a929d8b9bc95f375fe2bee9ffe87bc36e2cc4 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sat, 14 Mar 2020 08:23:15 +0100
Subject: [PATCH] Styling

---
 src/App.css       |  1 +
 src/App.js        | 11 +++++++----
 src/styles/Div.js |  6 ++++++
 3 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/Div.js

diff --git a/src/App.css b/src/App.css
index efc012f..da12eef 100644
--- a/src/App.css
+++ b/src/App.css
@@ -17,4 +17,5 @@ header {
 
 footer {
   background-color: antiquewhite;
+  margin-top: 2em;
 }
diff --git a/src/App.js b/src/App.js
index d472817..6475a11 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,7 @@ import { Options } from 'components/Options'
 import { TextInput } from 'components/TextInput'
 import { TextOutput } from 'components/TextOutput'
 import { TotalTime } from 'components/TotalTime'
+import { Div } from 'styles/Div'
 
 export const App = () => {
   const { t } = useTranslation()
@@ -32,13 +33,15 @@ export const App = () => {
       <main>
         <Container>
           <h2>Widget</h2>
-          <RsvpWidget />
-          <Flex>
-            <FlexMain padding="10px">
+          <Div maxWidth="600px" margin="0 auto">
+            <RsvpWidget />
+          </Div>
+          <Flex flexWrap="wrap">
+            <FlexMain padding="10px" minWidth="300px">
               <h2>Options</h2>
               <Options />
             </FlexMain>
-            <FlexMain>
+            <FlexMain padding="10px" minWidth="300px">
               <h2>Text input</h2>
               <TextInput />
             </FlexMain>
diff --git a/src/styles/Div.js b/src/styles/Div.js
new file mode 100644
index 0000000..f125031
--- /dev/null
+++ b/src/styles/Div.js
@@ -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>
+}