From 765d6c1a46a6fcc670e5d555914f34a18df093f7 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Fri, 9 Oct 2020 00:11:35 +0200
Subject: [PATCH] prparation for AWs

---
 components/wizard/calendar.tsx   | 10 +++++-----
 components/wizard/dateSelect.tsx |  2 ++
 components/wizard/index.tsx      |  3 +--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/wizard/calendar.tsx b/components/wizard/calendar.tsx
index 257a3aa..94f5cd3 100644
--- a/components/wizard/calendar.tsx
+++ b/components/wizard/calendar.tsx
@@ -9,7 +9,7 @@ import { WizardContext } from './context/wizardStore'
 
 const fetcher = (path: string) => fetch(path).then((r) => r.json())
 
-export default function MyCalendar() {
+export default function MyCalendar({ ...props }) {
   const { onChange, state } = useContext(WizardContext)
   const { startDate: start, endDate: end } = state.formData
   const startDate = (start && new Date(start)) || null
@@ -66,15 +66,15 @@ export default function MyCalendar() {
   if (fetchBookedOnError) {
     return (
       <div>
-        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
+        Entschuldigen Sie, aber die Buchungszeiten konnten nicht geladen werden.
         Versuchen Sie es später nochmals.
       </div>
     )
   }
 
   return (
-    <div className="mb-12 p-6 bg-blue-100 rounded">
-      <h2 className="text-xl">Buchungsübersicht</h2>
+    <div {...props}>
+      <h2 className="text-xl">Belegungsplan</h2>
       <Calendar
         minDate={new Date()}
         // @ts-ignore
@@ -107,7 +107,7 @@ export default function MyCalendar() {
         tileClassName={tileClassName}
         value={null}
       />
-      <div className="mt-6 flex justify-center">
+      <div className="mt-3 flex justify-center">
         <div>
           <div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>
           <span className="ml-2">Frei</span>
diff --git a/components/wizard/dateSelect.tsx b/components/wizard/dateSelect.tsx
index f7016be..6e21b0b 100644
--- a/components/wizard/dateSelect.tsx
+++ b/components/wizard/dateSelect.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
 import InputWrapper from '../inputWrapper'
+import Calendar from './calendar'
 
 export default function DateSelect() {
   const { onChangeEvent, state } = useContext(WizardContext)
@@ -11,6 +12,7 @@ export default function DateSelect() {
   return (
     <>
       <InputWrapper label="Datum" required>
+        <Calendar className="m-6" />
         <div className="inline-block mr-6">
           <label className="flabel inline-block w-6 mr-3" htmlFor="startDate">
             Von
diff --git a/components/wizard/index.tsx b/components/wizard/index.tsx
index 0f42bd9..3d9cf54 100644
--- a/components/wizard/index.tsx
+++ b/components/wizard/index.tsx
@@ -54,7 +54,6 @@ function WizardInternal() {
 
   return (
     <>
-      <Calendar />
       <form
         className="form"
         onSubmit={(event) => {
@@ -63,7 +62,7 @@ function WizardInternal() {
         }}
       >
         {dataStoredLoaded && (
-          <p className="mb-12">
+          <p className="mb-6">
             Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
             <a className="link" onClick={forgetData} href="">
               Daten wieder vergessen