remove loads of styles in favor of inline styles

components/book/dateSelect.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import { BookContext } from '../../context/book'
 import InputWrapper from '../inputWrapper'
+import Input from '../input'
 import Calendar from '../calendar'
 
 export default function DateSelect() {
@@ -18,29 +19,26 @@ export default function DateSelect() {
           onChange={onChange}
           className="my-6 max-w-lg"
         />
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <div className="">
-            <label className="flabel inline-block mr-3" htmlFor="startDate">
-              Von
-            </label>
-            <input
-              required
+        </InputWrapper>
+        <div className="flex flex-wrap -mx-3 mb-2">
+          <div className="w-full md:w-1/3 px-3 mb-2 md:mb-0">
+            <Input
+              label="Von"
               type="date"
-              className="input-text"
+              className=""
               name="startDate"
               value={startDate || ''}
               onChange={onChangeEvent}
               min={today}
+              required
             />
           </div>
-          <div className="">
-            <label className="flabel inline-block mr-3" htmlFor="endDate">
-              Bis
-            </label>
-            <input
+          <div className="w-full md:w-1/3 px-3 mb-2 md:mb-0">
+            <Input
               required
+              label="Bis"
               type="date"
-              className="input-text"
+              className=""
               name="endDate"
               value={endDate || ''}
               placeholder="Von"
@@ -49,7 +47,6 @@ export default function DateSelect() {
             />
           </div>
         </div>
-      </InputWrapper>
     </>
   )
 }

components/book/index.tsx

@@ -11,7 +11,7 @@ function BookForm() {
   return (
     <>
       <form
-        className="form"
+        className="w-full"
         onSubmit={(event) => {
           event.preventDefault()
           onSubmit()
@@ -22,7 +22,7 @@ function BookForm() {
         {dataStoredLoaded && (
           <p className="mb-6 info-message">
             Buchungsdaten wurden aus Deinem Browser geladen und vorausgefüllt.{' '}
-            <a className="link" onClick={forgetData}>
+            <a className="font-medium text-blue-400 underline cursor-pointer hover:text-blue-600" onClick={forgetData}>
               Daten wieder vergessen
             </a>
           </p>

components/book/reason.tsx

@@ -14,12 +14,14 @@ export default function Contact() {
         name="purpose"
         value={purpose}
         onChange={onChangeEvent}
+        className=""
       />
       <Input
         label="Ziel der Fahrt"
         name="destination"
         value={destination}
         onChange={onChangeEvent}
+        className=""
       />
     </>
   )

components/footer.tsx

@@ -8,7 +8,7 @@ export default function Footer() {
       <div className="flex flex-col sm:flex-row max-w-7xl mx-auto px-4 sm:px-6 my-5">
         <div className="flex-grow">
           <Link href="/">
-            <a>
+            <a className="underline">
               <Logo className="h-12 w-auto sm:h-14" />
             </a>
           </Link>
@@ -16,12 +16,12 @@ export default function Footer() {
         <ul className="flex flex-col gap-2 sm:flex-row sm:items-end ">
           <li>
             <Link href="/privacy">
-              <a className="link">Datenschutzerklärung</a>
+              <a className="underline">Datenschutzerklärung</a>
             </Link>
           </li>
           <li>
             <Link href="/impressum">
-              <a className="link">Impressum</a>
+              <a className="underline">Impressum</a>
             </Link>
           </li>
         </ul>

components/input.tsx

@@ -7,14 +7,17 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
 }
 
 export default function Input(props: InputProps) {
-  const { label, name, required, type = 'text', ...rest } = props
+  const { label, name, required, type = 'text', className = "", ...rest } = props
+
+  const defaultClasses = "appearance-none bg-gray-50 text-gray-500 border rounded py-2 px-3 mb-3 leading-tight disabled:bg-gray-200 disabled:cursor-not-allowed focus: outline-none focus:bg-white w-full"
+  const classes = `${defaultClasses} ${className}`;
 
   return (
     <InputWrapper label={label} name={name} required={required}>
       <input
         type={type}
         required={required}
-        className="input-text"
+        className={classes}
         id={name}
         name={name}
         {...rest}

components/inputWrapper.tsx

@@ -11,9 +11,9 @@ export default function Input(props: {
 
   return (
     <>
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel" htmlFor={name}>
+      <div className="flex flex-wrap -mx-3 mb-2">
+        <div className="w-full px-3 mb-2">
+          <label className="block uppercase tracking-wide text-gray-500 text-xs font-bold mb-2" htmlFor={name}>
             {label} {required && <Required />}
           </label>
           {children}

components/layout.tsx

@@ -6,7 +6,7 @@ export default function Home({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Header />
-      <main className="main max-w-7xl mx-auto px-4 sm:px-6">{children}</main>
+      <main className="max-w-7xl mx-auto px-4 sm:px-6">{children}</main>
       <Footer />
     </>
   )