diff --git a/src/index.css b/src/index.css index b8c3f8d..ff71388 100644 --- a/src/index.css +++ b/src/index.css @@ -11,6 +11,13 @@ --secondary-1: #edefee; } +#root { + display: flex; + flex-direction: column; + height: 100vh; + justify-content: space-between; +} + body { margin: 0; } diff --git a/src/routes/BookingPage.jsx b/src/routes/BookingPage.jsx index 515e37f..a543d2b 100644 --- a/src/routes/BookingPage.jsx +++ b/src/routes/BookingPage.jsx @@ -8,13 +8,15 @@ export const BookingPage = ({ reservationError }) => (
-

Book a Table

-
- +
+

Book a Table

+
+ +
) diff --git a/src/routes/ConfirmedBookingPage.jsx b/src/routes/ConfirmedBookingPage.jsx index 5096a06..43508d7 100644 --- a/src/routes/ConfirmedBookingPage.jsx +++ b/src/routes/ConfirmedBookingPage.jsx @@ -4,7 +4,8 @@ import "../styles/ConfirmedBookingPage.css" export const ConfirmedBookingPage = () => (

Booking Confirmed

-

Your booking has been confirmed.

- Back to home +

+ Your booking has been confirmed. Back to home +

) diff --git a/src/styles/BookingForm.css b/src/styles/BookingForm.css index 82580f7..fcff952 100644 --- a/src/styles/BookingForm.css +++ b/src/styles/BookingForm.css @@ -2,7 +2,6 @@ display: flex; flex-direction: column; gap: 0.2rem; - min-width: 20rem; } .booking-form :is(label, .submit) { @@ -18,6 +17,7 @@ } .booking-form .submit { + margin-top: 1.8rem; background-color: #fbdabb; } diff --git a/src/styles/BookingPage.css b/src/styles/BookingPage.css index a53c658..d6478dc 100644 --- a/src/styles/BookingPage.css +++ b/src/styles/BookingPage.css @@ -1,13 +1,16 @@ -.booking { +.booking-container { display: flex; - flex-direction: column; - align-items: center; - background-color: #495e57; - padding: 1rem; - border-radius: 1rem; - gap: 1rem; - width: 70%; margin: auto; + flex-direction: column; + background-color: var(--primary-1); + padding: 1.8rem; + border-radius: 1rem; + max-width: 50rem; +} + +.booking { + width: 100%; + padding: 1rem; } .booking h1 { diff --git a/src/styles/ConfirmedBookingPage.css b/src/styles/ConfirmedBookingPage.css index eb1e3d7..62a296c 100644 --- a/src/styles/ConfirmedBookingPage.css +++ b/src/styles/ConfirmedBookingPage.css @@ -1,7 +1,12 @@ .confirmed { background-color: var(--primary-1); border-radius: 2rem; - margin: auto; - padding: 2rem 3rem; + margin: 2rem; + padding: 2rem 1rem; text-align: center; } + +.confirmed h1 { + font-size: 2rem; + margin: 0; +} diff --git a/src/styles/Specials.css b/src/styles/Specials.css index 343cb92..4b83049 100644 --- a/src/styles/Specials.css +++ b/src/styles/Specials.css @@ -4,7 +4,7 @@ } .specials { - margin: 1rem; + margin: auto; } .specials h2 {