diff --git a/components/header.tsx b/components/header.tsx index cc6b3c9..66e99e7 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,25 +1,40 @@ import React, { useContext } from 'react' +import Head from 'next/head' import Link from 'next/link' import UserContext from './user/context' import Logo from './logo' -export default function Header({ label = 'Pfadi Bussle' }: { label?: string }) { +export default function Header({ label }: { label?: string }) { const { username, role } = useContext(UserContext) return ( <> -
-

- - {label} - -

- -
- {username && ( -
- FYI, you are logged in as {username} + + Pfadi-Bussle {label} + + + +
+
+

+ + Pfadi-Bussle + +

+
- )} + {label && ( +
+ {username === 'admin' && ( +
+ Admin +
+ )} +

+ {label} +

+
+ )} +
) } diff --git a/components/wizard/index.tsx b/components/wizard/index.tsx index 359bf26..302a292 100644 --- a/components/wizard/index.tsx +++ b/components/wizard/index.tsx @@ -22,7 +22,7 @@ function WizardInternal() { {dataStoredLoaded && (

Buchungsdaten wurden aus Deinem Browser geladen und vorausgefüllt.{' '} - + Daten wieder vergessen

diff --git a/pages/admin/booking/[uuid]/bill.tsx b/pages/admin/booking/[uuid]/bill.tsx index 52d343a..590c64e 100644 --- a/pages/admin/booking/[uuid]/bill.tsx +++ b/pages/admin/booking/[uuid]/bill.tsx @@ -173,10 +173,9 @@ export default function BookingBillPage({ } return ( -
-
-
-

Abrechnung

+ <> +
+
{booking && (
@@ -306,6 +305,6 @@ export default function BookingBillPage({
-
+ ) } diff --git a/pages/admin/booking/[uuid]/index.tsx b/pages/admin/booking/[uuid]/index.tsx index 25e85fa..137ad80 100644 --- a/pages/admin/booking/[uuid]/index.tsx +++ b/pages/admin/booking/[uuid]/index.tsx @@ -77,9 +77,9 @@ export default function ShowBookingAdmin({ } return ( -
-
-
+ <> +
+

Buchung {booking.uuid}

@@ -113,6 +113,6 @@ export default function ShowBookingAdmin({
-
+ ) } diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx index a28b231..a61d73d 100644 --- a/pages/admin/index.tsx +++ b/pages/admin/index.tsx @@ -1,5 +1,4 @@ import React from 'react' -import Head from 'next/head' import Link from 'next/link' import Footer from '../../components/footer' import Header from '../../components/header' @@ -30,12 +29,7 @@ export const getServerSideProps = withSession(async (context) => { export default function AdminRecentBookings({ bookings }) { return ( <> - - Pfadi Bussle Admin - - - -
+
{bookings.map((booking: any) => (
- - Pfadi Bussle Admin - - - -
+
- - Pfadi Bussle - - - -
+
diff --git a/pages/booking/[uuid]/index.tsx b/pages/booking/[uuid]/index.tsx index 6f6dad5..d9af635 100644 --- a/pages/booking/[uuid]/index.tsx +++ b/pages/booking/[uuid]/index.tsx @@ -56,10 +56,9 @@ export default function ShowBooking({ } return ( -
-
-
-

Ihre Buchung

+ <> +
+
Buchungsstatus: {getBookingStatus(booking.status)}
@@ -85,6 +84,6 @@ export default function ShowBooking({
-
+ ) } diff --git a/pages/booking/[uuid]/stored.tsx b/pages/booking/[uuid]/stored.tsx index ca546dc..e91d035 100644 --- a/pages/booking/[uuid]/stored.tsx +++ b/pages/booking/[uuid]/stored.tsx @@ -24,15 +24,20 @@ export default function ShowBookingStored({ } return ( -
-
-
-

Vielen Dank für die Buchungsanfrage!

-

Nach Prüfung bestätigen wir die Buchung bald per E-Mail!

+ <> +
+
+

Vielen Dank für die Buchungsanfrage

+

+ Nach Prüfung bestätigen wir die Buchung zeitnah per E-Mail. +

+ Den{' '} - Buchungstatus einsehen - + Link + {' '} + zur Buchung schicken wir Dir auch per E-Mail. Dort kann die Buchung + auch jederzeit storniert werden.

{!storedBookingData && !bookingDataStored && (
@@ -56,6 +61,6 @@ export default function ShowBookingStored({
-
+ ) } diff --git a/pages/index.tsx b/pages/index.tsx index ae35adc..706f62c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,4 @@ import React from 'react' -import Head from 'next/head' import Link from 'next/link' import Footer from '../components/footer' import Header from '../components/header' @@ -7,36 +6,23 @@ import Header from '../components/header' export default function Home() { return ( <> - - Pfadi Bussle - - - -
+
-
+

- - Pfadi-Bussle - {' '} - des VCP Rosenfeld e.V. + Pfadi-Bussle{' '} + + Freundeskreis des VCP Rosenfeld e.V. +

- Der Freundeskreis des VCP Rosenfeld e.V. unterstützt und fördert die - Jugendarbeit des VCP Rosenfeld auch mit der Bereitstellung des - Pfadi-Bussles. -

-

- Für Fahrten & Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. - kann man unser Pfadi-Bussle mieten. -

-

- Abgerechnet wird nach gefahrenen Kilometern und Spritverbrauch. + Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man + unser Pfadi-Bussle mieten.

- + Zur Buchungsanfrage @@ -53,10 +39,13 @@ export default function Home() { 0151 / 21225302 {' '} oder{' '} - + Whatsapp diff --git a/styles/index.css b/styles/index.css index e7bb9dc..513a446 100644 --- a/styles/index.css +++ b/styles/index.css @@ -40,15 +40,15 @@ } .flabel { - @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2; + @apply block uppercase tracking-wide text-gray-500 text-xs font-bold mb-2; } .input-text { - @apply appearance-none bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight w-full; + @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-300 cursor-not-allowed; + @apply bg-gray-200 cursor-not-allowed; } .input-text:focus { @@ -56,11 +56,11 @@ } .ibtn { - @apply p-1 text-gray-400 text-xs w-6 h-6 rounded; + @apply p-1 text-gray-300 text-xs w-6 h-6 rounded; } .ibtn:hover { - @apply text-gray-500; + @apply text-gray-400; } .ibtn:active { @@ -80,11 +80,11 @@ } .btn-blue { - @apply bg-blue-500 text-white; + @apply bg-blue-800 text-white; } .btn-blue:hover { - @apply bg-blue-700; + @apply bg-blue-900; } .btn-red { @@ -96,11 +96,11 @@ } .btn-gray { - @apply bg-gray-500 text-white; + @apply bg-gray-300 text-white; } .btn-gray:hover { - @apply bg-gray-700; + @apply bg-gray-400; } .btn:disabled { @@ -108,15 +108,15 @@ } .link { - @apply font-medium text-blue-500 underline; + @apply font-medium text-blue-400 underline cursor-pointer; } .link:hover { - @apply text-blue-700; + @apply text-blue-600; } .info-message { - @apply flex items-center bg-yellow-200 border-solid border border-yellow-700 rounded text-yellow-700 py-2 px-3; + @apply flex items-center bg-yellow-100 border-solid border border-yellow-500 rounded text-yellow-700 py-2 px-3; } .info-message:before { @@ -125,7 +125,7 @@ } .error-message { - @apply flex items-center bg-red-200 border-solid border border-red-700 rounded text-red-700 py-2 px-3; + @apply flex items-center bg-red-100 border-solid border border-red-700 rounded text-red-700 py-2 px-3; } .error-message:before {