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>
+      <div className="fsw">
-        <Form.Label>
+        <div className="fs">
+          <label className="flabel">
             Name <Required />
-        </Form.Label>
+          </label>
-        <Form.Control
+          <input
             type="text"
             name="name"
             value={name}
             onChange={onChangeEvent}
             required
+            className="input-text"
           />
-      </Form.Group>
+        </div>
-      <Form.Group>
+      </div>
-        <Form.Label>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
             E-Mail <Required />
-        </Form.Label>
+          </label>
-        <Form.Control
+          <input
             type="email"
             name="email"
             value={email}
             onChange={onChangeEvent}
             required
+            className="input-text"
           />
-      </Form.Group>
+        </div>
-      <Form.Group>
+      </div>
-        <Form.Label>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
             Straße <Required />
-        </Form.Label>
+          </label>
-        <Form.Control
+          <input
             type="text"
             name="street"
             value={street}
             onChange={onChangeEvent}
             required
+            className="input-text"
           />
-      </Form.Group>
+        </div>
-      <Form.Row>
+      </div>
-        <Form.Group as={Col} xs={4}>
+      <div className="fsw">
-          <Form.Label>
+        <div className="fs">
+          <label className="flabel">
             PLZ <Required />
-          </Form.Label>
+          </label>
-          <Form.Control
+          <input
             type="text"
             name="zip"
             value={zip}
             onChange={onChangeEvent}
             required
+            className="input-text"
           />
-        </Form.Group>
+          <label className="flabel">
-        <Form.Group as={Col}>
-          <Form.Label>
             Stadt <Required />
-          </Form.Label>
+          </label>
-          <Form.Control
+          <input
             type="text"
             name="city"
             value={city}
             onChange={onChangeEvent}
             required
+            className="input-text"
           />
-        </Form.Group>
+        </div>
-      </Form.Row>
+      </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>
+    <div className="fsw">
-      <Form.Label component="legend" style={{ display: 'block' }}>
+      <div className="fs">
+        <label className="flabel">
           Datum <Required />
-      </Form.Label>
+        </label>
-      <Form.Group>
         <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={{ className: 'input-text w-32', disabled: !from }}
-          inputProps={{ disabled: !from }}
           value={to}
           placeholder="Bis"
           formatDate={dateFormat}
@@ -115,14 +111,10 @@ export default function DateSelect() {
           }}
           onDayChange={(to) => setRange({ ...range, to })}
         />
-        <Button
+        <button onClick={() => setRange({})} className="btn btn-gray">
-          className="ml-2"
-          variant="outline-secondary"
-          onClick={() => setRange({})}
-        >
           Zurücksetzen
-        </Button>
+        </button>
-      </Form.Group>
+      </div>
-    </Form.Group>
+    </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>
+      <p>i.A. des Freundeskreis des VCP Rosenfeld</p>
-        <Card.Body>
+      <p>
-          <Card.Title>i.A. des Freundeskreis des VCP Rosenfeld</Card.Title>
+        Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw. geben.
-          <Card.Text>
+      </p>
-            Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw.
-            geben.
-          </Card.Text>
-        </Card.Body>
-      </Card>
     </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>
+      <div className="fsw">
-        <Form.Label>
+        <div className="fs">
+          <label className="flabel">
             Zweck der Fahrt <Required />
-        </Form.Label>
+          </label>
-        <Form.Control
+          <input
             type="text"
             name="purpose"
             value={purpose}
             onChange={onChangeEvent}
             required
+            className={`input-text ${
+              formDataChanged.includes('purpose') && 'input-changed'
+            }`}
           />
-      </Form.Group>
+        </div>
-      <Form.Group>
+      </div>
-        <Form.Label>Verein</Form.Label>
+      <div className="fsw">
-        <Form.Control
+        <div className="fs">
-          type="text"
+          <label className="flabel">
-          name="org"
-          value={org}
-          onChange={onChangeEvent}
-        />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>
             Ziel der Fahrt <Required />
-        </Form.Label>
+          </label>
-        <Form.Control
+          <input
             type="text"
             name="destination"
             value={destination}
             onChange={onChangeEvent}
             required
+            className="input-text"
           />
-      </Form.Group>
+        </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 onClick={() => storeData(true)} className="btn btn-blue">
-            <Button
+              Ja, bitte speichern
+            </button>
+            <button
               onClick={() => storeData(false)}
-              className="ml-2"
+              className="btn btn-grey ml-2"
-              variant="secondary"
             >
               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.{' '}
+          Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
-          <Button size="sm" variant="outline-secondary" onClick={forgetData}>
+          <a onClick={forgetData}>Daten vergessen</a>
-            Daten wieder Vergessen
-          </Button>
         </p>
       )}
       <DateSelect />
       <Reason />
       <Contact />
       <div>{postDataError}</div>
-      <Button type="submit" disabled={postData}>
+      <div>
+        <button type="submit" disabled={postData} className="btn btn-blue">
           {postData ? 'Speichern...' : 'Absenden'}
-      </Button>
+        </button>
-    </Form>
+      </div>
+    </form>
   )
 }
 

context/wizardStore.js

@@ -23,6 +23,10 @@ function reducer(state, action) {
           ...state.formData,
           ...action.payload,
         },
+        formDataChanged: [
+          ...state.formDataChanged,
+          ...Object.keys(action.payload),
+        ],
       }
     case ACTIONS.POST_DATA:
       return {
@@ -98,6 +102,7 @@ const initialState = {
     zip: '',
     city: '',
   },
+  formDataChanged: [],
 }
 
 async function createBooking(formData) {

package.json

@@ -10,12 +10,10 @@
     "test:ci": "jest"
   },
   "dependencies": {
-    "bootstrap": "^4.5.0",
     "moment": "^2.27.0",
     "mongoose": "^5.9.25",
     "next": "^9.5.0",
     "react": "16.13.1",
-    "react-bootstrap": "^1.3.0",
     "react-day-picker": "^7.4.8",
     "react-dom": "16.13.1",
     "rebass": "^4.0.7",
@@ -25,6 +23,9 @@
     "babel-jest": "^26.2.2",
     "eslint": "^7.5.0",
     "eslint-plugin-react": "^7.20.5",
-    "jest": "^26.2.2"
+    "jest": "^26.2.2",
+    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss-preset-env": "^6.7.0",
+    "tailwindcss": "^1.6.2"
   }
 }

pages/_app.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import 'bootstrap/dist/css/bootstrap.min.css'
+import '../styles/index.css'
+
 import 'react-day-picker/lib/style.css'
 
 import 'moment'

pages/index.js

@@ -7,67 +7,23 @@ import Footer from '../components/footer'
 
 export default function Home() {
   return (
-    <div className="container">
+    <div className="mx-3 flex flex-col min-h-screen">
       <Head>
         <title>Pfadi Bussle Buchen</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className="main">
+      <main className="flex-grow">
-        <h1>Pfadi Bussle Buchen</h1>
+        <h1 className="text-3xl">Pfadi Bussle Buchen</h1>
 
-        <p>Du willst das Pfadi Bussle buchen? Hier bist du richtig!</p>
+        <p className="mb-8">
+          Du willst das Pfadi Bussle buchen? Hier bist du richtig!
+        </p>
 
         <Wizard />
       </main>
 
       <Footer />
-
-      <style jsx global>{`
-        html,
-        body {
-          padding: 0;
-          margin: 0;
-          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
-            sans-serif;
-        }
-
-        * {
-          box-sizing: border-box;
-        }
-
-        .container {
-          display: flex;
-          min-height: 100vh;
-          flex-direction: column;
-        }
-
-        .main {
-          flex: 1;
-        }
-
-        .datepicker
-          .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
-          background-color: #f0f8ff !important;
-          color: #4a90e2;
-        }
-        .datepicker .DayPicker-Day {
-          border-radius: 0 !important;
-        }
-        .datepicker .DayPicker-Day--start {
-          border-top-left-radius: 50% !important;
-          border-bottom-left-radius: 50% !important;
-        }
-        .datepicker .DayPicker-Day--end {
-          border-top-right-radius: 50% !important;
-          border-bottom-right-radius: 50% !important;
-        }
-        .datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
-          color: #505050;
-          background-color: #fcc;
-        }
-      `}</style>
     </div>
   )
 }

postcss.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  plugins: [
+    'tailwindcss',
+    'postcss-flexbugs-fixes',
+    [
+      'postcss-preset-env',
+      {
+        autoprefixer: {
+          flexbox: 'no-2009',
+        },
+        stage: 3,
+        features: {
+          'custom-properties': false,
+        },
+      },
+    ],
+  ],
+}

styles/index.css

@@ -0,0 +1,92 @@
+@tailwind base;
+
+/* Write your own custom base styles here */
+
+/* Start purging... */
+@tailwind components;
+/* Stop purging. */
+
+/* Start purging... */
+@tailwind utilities;
+/* Stop purging. */
+
+/* Your own custom utilities */
+
+.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-700 text-xs font-bold mb-2;
+}
+
+.input-text {
+  @apply appearance-none block bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight;
+}
+
+.input-text:disabled {
+  @apply bg-gray-300 cursor-not-allowed;
+}
+
+.input-text:focus {
+  @apply outline-none bg-white;
+}
+
+.input-text.input-changed:invalid {
+  @apply border-red-500;
+}
+
+.btn {
+  @apply font-bold py-2 px-4 rounded mx-2;
+}
+
+.btn:first-child {
+  @apply ml-0;
+}
+
+.btn-blue {
+  @apply bg-blue-500 text-white;
+}
+
+.btn-blue:hover {
+  @apply bg-blue-700;
+}
+
+.btn-gray {
+  @apply bg-gray-500 text-white;
+}
+
+.btn-gray:hover {
+  @apply bg-gray-700;
+}
+
+/*@screen md {
+  .fs {
+    @apply w-1/2 mb-0;
+  }
+}*/
+
+.datepicker
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  background-color: #f0f8ff !important;
+  color: #4a90e2;
+}
+.datepicker .DayPicker-Day {
+  border-radius: 0 !important;
+}
+.datepicker .DayPicker-Day--start {
+  border-top-left-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+}
+.datepicker .DayPicker-Day--end {
+  border-top-right-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+}
+.datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
+  color: #505050;
+  background-color: #fcc;
+}

tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        'accent-1': '#333',
+      },
+    },
+  },
+  variants: {},
+  plugins: [],
+}