Implement bookers page overhaul

[davinotdavid]

Description of the Change

Refactored the styling of the Booker's Page / Booking Page according to the Zeplin file:
https://app.zeplin.io/project/66dd0f2b2fe8f1b63cda36f1/screen/68cd9bb8f41b5541ea14f7ad

Note

If you Availability settings has Automatically confirm bookings if time is available set, you will see an extra helper text under the Book Appointment button

Screenshots

Light mode / Empty state

Light mode / Event selected

Dark mode / Empty state

Dark mode / Event selected

Benefits

• Better UI/UX consistency with the other parts of the application.

Known issues / Things to improve

• There's a section in Zeplin called "+ Add Note" but we don't have that functionality just yet, so it is not present in this PR.
• We have a field in the schedules table in the DB called location_type which is defaulting to inperson instead of online. Since we don't have the option to change this in the UI anywhere yet, we can't rely on this field to hide / show the related text so the "Virtual" text is hardcoded as of now.
• Headers / Footer are unchanged yet but I've created a new issue to track those changes here: Update the Header / Footer to match latest UI revisions #1408

Applicable Issues

Fixes #1285
Fixes #1385

[devmount]

Looking great so far, thanks for this! One German correction below. And one question: Didn't we automatically fill in name and email address, when an Appointment user was accessing the bookers page from another person when already logged in?

[davinotdavid]

@devmount thank you so much for the review! Great catch, I've asked the Design team on Matrix and, as you suggested, they decided to leave the name and email inputs but pre-fill it.

Applied the change and flipping it to ready for review!

[devmount]

lgtm, thank you Davi!

[rwood-moz]

The new booking page looks awesome! 🥇
I created #1412 to update the E2E tests accordingly and will take this on now.

[davinotdavid]

Thank you so much @rwood-moz !