From 26e467982758ad18269358ebdbd6183684629fc1 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <truoff@brandwatch.com>
Date: Wed, 10 Nov 2021 23:45:17 +0100
Subject: [PATCH] remove loads of styles in favor of inline styles

---
 components/book/dateSelect.tsx       | 27 ++++++++--------
 components/book/index.tsx            |  4 +--
 components/book/reason.tsx           |  2 ++
 components/footer.tsx                |  6 ++--
 components/input.tsx                 |  7 +++--
 components/inputWrapper.tsx          |  6 ++--
 components/layout.tsx                |  2 +-
 pages/_app.tsx                       |  2 +-
 pages/admin/bookings/[uuid]/bill.tsx |  2 +-
 pages/bookings/[uuid]/index.tsx      | 12 ++------
 pages/index.tsx                      | 12 ++++----
 styles/index.css                     | 46 ----------------------------
 12 files changed, 39 insertions(+), 89 deletions(-)

diff --git a/components/book/dateSelect.tsx b/components/book/dateSelect.tsx
index a95f87b..51cc056 100644
--- a/components/book/dateSelect.tsx
+++ b/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>
     </>
   )
 }
diff --git a/components/book/index.tsx b/components/book/index.tsx
index 60cb52a..b6466ea 100644
--- a/components/book/index.tsx
+++ b/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>
diff --git a/components/book/reason.tsx b/components/book/reason.tsx
index 14a6d4c..14cd237 100644
--- a/components/book/reason.tsx
+++ b/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=""
       />
     </>
   )
diff --git a/components/footer.tsx b/components/footer.tsx
index 358c37b..ef7da38 100644
--- a/components/footer.tsx
+++ b/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>
diff --git a/components/input.tsx b/components/input.tsx
index dee9518..e926298 100644
--- a/components/input.tsx
+++ b/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}
diff --git a/components/inputWrapper.tsx b/components/inputWrapper.tsx
index b6200b8..2061df5 100644
--- a/components/inputWrapper.tsx
+++ b/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}
diff --git a/components/layout.tsx b/components/layout.tsx
index ad6319e..cab4947 100644
--- a/components/layout.tsx
+++ b/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 />
     </>
   )
diff --git a/pages/_app.tsx b/pages/_app.tsx
index e51fa96..009a532 100644
--- a/pages/_app.tsx
+++ b/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>
diff --git a/pages/admin/bookings/[uuid]/bill.tsx b/pages/admin/bookings/[uuid]/bill.tsx
index 537cd8f..7d2da8d 100644
--- a/pages/admin/bookings/[uuid]/bill.tsx
+++ b/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)}
diff --git a/pages/bookings/[uuid]/index.tsx b/pages/bookings/[uuid]/index.tsx
index 0491468..f515ecd 100644
--- a/pages/bookings/[uuid]/index.tsx
+++ b/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>
   )
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index c5cc6a6..4a0e95d 100644
--- a/pages/index.tsx
+++ b/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>
diff --git a/styles/index.css b/styles/index.css
index e2b716e..4c6d2c8 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -8,44 +8,6 @@
 
 /* Your own custom utilities */
 
-.wrapper {
-  @apply flex flex-col min-h-screen;
-  min-width: 300px;
-}
-
-.main {
-  @apply flex-grow;
-  hyphens: auto;
-}
-
-.form {
-  @apply w-full;
-}
-
-.fsw {
-  @apply flex flex-wrap -mx-3 mb-2;
-}
-
-.fs {
-  @apply w-full px-3 mb-2;
-}
-
-.flabel {
-  @apply block uppercase tracking-wide text-gray-500 text-xs font-bold mb-2;
-}
-
-.input-text {
-  @apply appearance-none bg-gray-50 text-gray-500 border rounded py-2 px-3 mb-3 leading-tight w-full;
-}
-
-.input-text:disabled {
-  @apply bg-gray-200 cursor-not-allowed;
-}
-
-.input-text:focus {
-  @apply outline-none bg-white;
-}
-
 .ibtn {
   @apply p-1 text-gray-300 text-xs w-6 h-6 rounded;
 }
@@ -98,14 +60,6 @@
   @apply opacity-50 cursor-wait;
 }
 
-.link {
-  @apply font-medium text-blue-400 underline cursor-pointer;
-}
-
-.link:hover {
-  @apply text-blue-600;
-}
-
 .info-message {
   @apply flex items-center bg-yellow-100 border-solid border border-yellow-500 rounded text-yellow-700 py-2 px-3;
 }