remove loads of styles in favor of inline styles

pages/_app.tsx

@@ -24,7 +24,7 @@ function Auth({ children }) {
 export default function MyApp({ Component, pageProps: { session, ...pageProps } }) {
 
   return (
-    <div className="wrapper">
+    <div className="flex flex-col min-h-screen">
       <SessionProvider session={session}>
         {Component.auth ? (
           <Auth>

pages/admin/bookings/[uuid]/bill.tsx

@@ -138,7 +138,7 @@ export default function BookingBillPage({
       <Header />
       <main className="main">
         {booking && (
-          <form className="form" onSubmit={onSubmit}>
+          <form className="w-full" onSubmit={onSubmit}>
             <div>
               <strong>Buchungszeitraum:</strong>{' '}
               {daysFormatFrontend(booking.days)}

pages/bookings/[uuid]/index.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import Footer from '../../../components/footer'
-import Header from '../../../components/header'
+import Layout from '../../../components/layout'
 import { getServerSideBooking } from '../../../lib/getServerSideProps'
 import { Booking } from '../../../db/booking'
 import { BOOKING_STATUS } from '../../../db/enums'
@@ -41,9 +40,7 @@ export default function ShowBooking({
   }
 
   return (
-    <>
-      <Header />
-      <main className="main">
+    <Layout>
         <div>
           <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
         </div>
@@ -66,9 +63,6 @@ export default function ShowBooking({
             </button>
           </div>
         )}
-      </main>
-
-      <Footer />
-    </>
+      </Layout>
   )
 }

pages/index.tsx

@@ -22,9 +22,9 @@ export default function Home() {
         </p>
         <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
           <Link href="/prices">
-            <a className="link">Preise</a>
+            <a className="underline hover:text-blue-700">Preise</a>
           </Link> und{' '}
-          <Link href="/terms"><a className="link">Mietbedingungen</a></Link>
+          <Link href="/terms"><a className="underline hover:text-blue-700">Mietbedingungen</a></Link>
         </p>
         <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
           <div className="rounded-md shadow">
@@ -38,21 +38,21 @@ export default function Home() {
         <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
           Du hast weiter Fragen melde Dich gerne per
           <br />
-          <a className="link" href="mailto:pfadibussle@tomru.space">
+          <a className="underline hover:text-blue-700" href="mailto:pfadibussle@tomru.space">
             E-Mail
           </a>
           , Telefon{' '}
-          <a className="link" href="tel:+4915121225362">
+          <a className="underline hover:text-blue-700" href="tel:+4915121225362">
             0151 / 21225302
           </a>{' '}
           oder{' '}
           <Link href="https://wa.me/4915121225362">
             <a
-              className="link inline-flex flex-row align-baseline"
+              className="underline inline-flex flex-row items-baseline hover:text-blue-700"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="fill-current h-3 inline hover:text-blue-700"
+                className="fill-current h-4 inline"
                 viewBox="0 0 738 741"
               >
                 <title>Whatsapp</title>