ditch boostrap and use tailwind instead

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>
   )
 }