ditch boostrap and use tailwind instead

components/contact.js

@@ -2,9 +2,6 @@ import React, { useContext } from 'react'
 import { WizardContext } from '../context/wizardStore'
 import Required from './required'
 
-import Form from 'react-bootstrap/Form'
-import Col from 'react-bootstrap/Col'
-
 export default function Contact() {
   const { state, onChangeEvent } = useContext(WizardContext)
 
@@ -12,68 +9,77 @@ export default function Contact() {
 
   return (
     <>
-      <Form.Group>
-        <Form.Label>
-          Name <Required />
-        </Form.Label>
-        <Form.Control
-          type="text"
-          name="name"
-          value={name}
-          onChange={onChangeEvent}
-          required
-        />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>
-          E-Mail <Required />
-        </Form.Label>
-        <Form.Control
-          type="email"
-          name="email"
-          value={email}
-          onChange={onChangeEvent}
-          required
-        />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>
-          Straße <Required />
-        </Form.Label>
-        <Form.Control
-          type="text"
-          name="street"
-          value={street}
-          onChange={onChangeEvent}
-          required
-        />
-      </Form.Group>
-      <Form.Row>
-        <Form.Group as={Col} xs={4}>
-          <Form.Label>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            Name <Required />
+          </label>
+          <input
+            type="text"
+            name="name"
+            value={name}
+            onChange={onChangeEvent}
+            required
+            className="input-text"
+          />
+        </div>
+      </div>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            E-Mail <Required />
+          </label>
+          <input
+            type="email"
+            name="email"
+            value={email}
+            onChange={onChangeEvent}
+            required
+            className="input-text"
+          />
+        </div>
+      </div>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            Straße <Required />
+          </label>
+          <input
+            type="text"
+            name="street"
+            value={street}
+            onChange={onChangeEvent}
+            required
+            className="input-text"
+          />
+        </div>
+      </div>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
             PLZ <Required />
-          </Form.Label>
-          <Form.Control
+          </label>
+          <input
             type="text"
             name="zip"
             value={zip}
             onChange={onChangeEvent}
             required
+            className="input-text"
           />
-        </Form.Group>
-        <Form.Group as={Col}>
-          <Form.Label>
+          <label className="flabel">
             Stadt <Required />
-          </Form.Label>
-          <Form.Control
+          </label>
+          <input
             type="text"
             name="city"
             value={city}
             onChange={onChangeEvent}
             required
+            className="input-text"
           />
-        </Form.Group>
-      </Form.Row>
+        </div>
+      </div>
     </>
   )
 }

components/dateSelect.js

@@ -3,9 +3,6 @@ import useSWR from 'swr'
 
 import { WizardContext } from '../context/wizardStore'
 
-import Form from 'react-bootstrap/Form'
-import Button from 'react-bootstrap/Button'
-
 import { DateUtils } from 'react-day-picker'
 import DayPickerInput from 'react-day-picker/DayPickerInput'
 
@@ -74,14 +71,14 @@ export default function DateSelect() {
   }
 
   return (
-    <Form.Group>
-      <Form.Label component="legend" style={{ display: 'block' }}>
-        Datum <Required />
-      </Form.Label>
-      <Form.Group>
+    <div className="fsw">
+      <div className="fs">
+        <label className="flabel">
+          Datum <Required />
+        </label>
         <DayPickerInput
           ref={fromRef}
-          component={Form.Control}
+          inputProps={{ className: 'input-text w-32' }}
           value={from}
           placeholder="Von"
           formatDate={dateFormat}
@@ -95,11 +92,10 @@ export default function DateSelect() {
           }}
           onDayChange={(from) => setRange({ ...range, from })}
         />
-        <Form.Label className="px-2">-</Form.Label>
+        <label className="px-2">-</label>
         <DayPickerInput
           ref={toRef}
-          component={Form.Control}
-          inputProps={{ disabled: !from }}
+          inputProps={{ className: 'input-text w-32', disabled: !from }}
           value={to}
           placeholder="Bis"
           formatDate={dateFormat}
@@ -115,14 +111,10 @@ export default function DateSelect() {
           }}
           onDayChange={(to) => setRange({ ...range, to })}
         />
-        <Button
-          className="ml-2"
-          variant="outline-secondary"
-          onClick={() => setRange({})}
-        >
+        <button onClick={() => setRange({})} className="btn btn-gray">
           Zurücksetzen
-        </Button>
-      </Form.Group>
-    </Form.Group>
+        </button>
+      </div>
+    </div>
   )
 }

components/footer.js

@@ -1,19 +1,12 @@
 import React from 'react'
 
-import Card from 'react-bootstrap/Card'
-
 export default function Footer() {
   return (
     <footer className="mt-5 mb-2">
-      <Card>
-        <Card.Body>
-          <Card.Title>i.A. des Freundeskreis des VCP Rosenfeld</Card.Title>
-          <Card.Text>
-            Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw.
-            geben.
-          </Card.Text>
-        </Card.Body>
-      </Card>
+      <p>i.A. des Freundeskreis des VCP Rosenfeld</p>
+      <p>
+        Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw. geben.
+      </p>
     </footer>
   )
 }

components/reason.js

@@ -2,48 +2,58 @@ import React, { useContext } from 'react'
 import { WizardContext } from '../context/wizardStore'
 import Required from './required'
 
-import Form from 'react-bootstrap/Form'
-
 export default function Contact() {
   const { state, onChangeEvent } = useContext(WizardContext)
 
+  const { formDataChanged } = state
   const { purpose, destination, org } = state.formData
 
   return (
     <>
-      <Form.Group>
-        <Form.Label>
-          Zweck der Fahrt <Required />
-        </Form.Label>
-        <Form.Control
-          type="text"
-          name="purpose"
-          value={purpose}
-          onChange={onChangeEvent}
-          required
-        />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>Verein</Form.Label>
-        <Form.Control
-          type="text"
-          name="org"
-          value={org}
-          onChange={onChangeEvent}
-        />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>
-          Ziel der Fahrt <Required />
-        </Form.Label>
-        <Form.Control
-          type="text"
-          name="destination"
-          value={destination}
-          onChange={onChangeEvent}
-          required
-        />
-      </Form.Group>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            Zweck der Fahrt <Required />
+          </label>
+          <input
+            type="text"
+            name="purpose"
+            value={purpose}
+            onChange={onChangeEvent}
+            required
+            className={`input-text ${
+              formDataChanged.includes('purpose') && 'input-changed'
+            }`}
+          />
+        </div>
+      </div>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            Ziel der Fahrt <Required />
+          </label>
+          <input
+            type="text"
+            name="destination"
+            value={destination}
+            onChange={onChangeEvent}
+            required
+            className="input-text"
+          />
+        </div>
+      </div>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">Verein</label>
+          <input
+            type="text"
+            name="org"
+            value={org}
+            onChange={onChangeEvent}
+            className="input-text"
+          />
+        </div>
+      </div>
     </>
   )
 }

components/wizard.js

@@ -1,8 +1,5 @@
 import React, { useContext } from 'react'
 
-import Button from 'react-bootstrap/Button'
-import Form from 'react-bootstrap/Form'
-
 import WizardStore, { WizardContext } from '../context/wizardStore'
 
 import DateSelect from './dateSelect'
@@ -24,21 +21,22 @@ function WizardInternal() {
     return (
       <>
         <h3>Danke, die Buchung ist in Bearbeitung!</h3>
-        <p>Wir melden uns per E-Mail sobald die Buchung bestätigt ist.</p>
+        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
         {typeof dataStored !== 'boolean' && (
           <>
             <p>
               Sollen die eingegebenen Daten in <strong>Deinem Browser</strong>{' '}
               für die nächste Buchung gespeichert werden?
             </p>
-            <Button onClick={() => storeData(true)}>Ja, bitte speichern</Button>
-            <Button
+            <button onClick={() => storeData(true)} className="btn btn-blue">
+              Ja, bitte speichern
+            </button>
+            <button
               onClick={() => storeData(false)}
-              className="ml-2"
-              variant="secondary"
+              className="btn btn-grey ml-2"
             >
               Nein danke
-            </Button>
+            </button>
           </>
         )}
         {dataStored === true && (
@@ -49,7 +47,8 @@ function WizardInternal() {
   }
 
   return (
-    <Form
+    <form
+      className="w-full max-w-lg"
       onSubmit={(event) => {
         event.preventDefault()
         onSubmit()
@@ -57,20 +56,20 @@ function WizardInternal() {
     >
       {dataStoredLoaded && (
         <p>
-          Gespeicherte Daten aus Deinem Browser geladen.{' '}
-          <Button size="sm" variant="outline-secondary" onClick={forgetData}>
-            Daten wieder Vergessen
-          </Button>
+          Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
+          <a onClick={forgetData}>Daten vergessen</a>
         </p>
       )}
       <DateSelect />
       <Reason />
       <Contact />
       <div>{postDataError}</div>
-      <Button type="submit" disabled={postData}>
-        {postData ? 'Speichern...' : 'Absenden'}
-      </Button>
-    </Form>
+      <div>
+        <button type="submit" disabled={postData} className="btn btn-blue">
+          {postData ? 'Speichern...' : 'Absenden'}
+        </button>
+      </div>
+    </form>
   )
 }