Update booking confirmation text

Change table col-span in checkout

front/src/pages/Booking.svelte

@@ -4,6 +4,20 @@
     import { expandOnTyping } from "../lib/utils";
     import Calendar from "../components/Calendar.svelte";
 
+    const timeSlots = {
+        slot0: "8am to 10am",
+        slot1: "10am to 12am",
+        slot2: "12am to 2pm",
+        slot3: "2pm to 4pm",
+        slot4: "4pm to 6pm",
+        slot5: "6pm to 8pm",
+        slot6: "8pm to 10pm",
+    }
+    const tables = {
+        table1: "Table 1",
+        table2: "Table 2",
+        table3: "Table 3",
+    }
     const specialRequestsMax = 300;
     const today = new Date();
 
@@ -21,6 +35,29 @@
     let dateValid = true;
     let specialRequestsValid = true;
 
+    function formatDate(date: Date) {
+        let formattedDate = new Intl.DateTimeFormat(
+                'en-UK',
+                {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                }
+            ).format(date);
+
+        // Add the ordinal suffix
+        let day = date.getDate();
+        let suffix = 'th';
+        if (day % 10 === 1 && day !== 11) {
+            suffix = 'st';
+        } else if (day % 10 === 2 && day !== 12) {
+            suffix = 'nd';
+        } else if (day % 10 === 3 && day !== 13) {
+            suffix = 'rd';
+        }
+        return formattedDate.replace(`${day}`, day + suffix);
+    }
+
     function validateName() { nameValid = name.length > 1}
     function validateEmail() { emailValid = email.length > 1}
     function validateTelephone() { telephoneValid = telephone.length == 11}
@@ -210,12 +247,22 @@
             <hr>
             <div class="section">
                 <p>
-                    I want to stay at table {tableSlot || "Table 1"}, on {date || "a pleasant day"}, {timeSlot || "during the day"}.
+                    On
-                    <br><br>
+                     <span class="h">{date ? `the ${formatDate(date)}` : "an undecided date"}</span>
-                    I request "{specialRequests || "a nice stay"}".
+                    at
-                    <br><br>
+                     <span class="h">{timeSlot ? timeSlots[timeSlot] : "an undecided time"}</span>,
-                    If I need to be contacted, my name is {name || "Unknown"},
+                    I want to be seated at
-                    email {email || "Missing"} or alternatively call me on {telephone || "nothing"}.
+                     <span class="h">{tableSlot ? tables[tableSlot] : "a table"}</span>.
+                <br><br>
+                    I request
+                     <span class="h">{specialRequests ? specialRequests : "nothing in particular"}</span>.
+                <br><br>
+                    My name is
+                     <span class="h">{name ? name : "Unknown"}</span>,
+                    in the event I need to be contacted by email, you can do that at
+                     <span class="h">{email ? email : "an empty email"}</span>,
+                    or alternatively call me on
+                     <span class="h">{telephone ? telephone : "an empty phone number"}</span>.
                 </p>
             </div>
         </div>
@@ -296,6 +343,13 @@
         }
     }
 
+    .h {
+        padding: 0 $spacing-xsmall;
+        border-radius: $border-radius-normal;
+        background-color: $color-dark;
+        color: $color-on-dark;
+    }
+
     #book-button {
         padding: 0 $spacing-normal;
 

front/src/pages/Checkout.svelte

@@ -244,14 +244,12 @@
                     {/each}
                     <tr class="table-row-border">
                         <td>£{1.50.toFixed(2)}</td>
-                        <td>Online order Fee</td>
+                        <td colspan="2">Online order Fee</td>
-                        <td></td>
                     </tr>
                     {#if CheckoutData.delivery}
                         <tr>
                             <td>£{3.00.toFixed(2)}</td>
-                            <td>Delivery fee</td>
+                            <td colspan="2">Delivery fee</td>
-                            <td></td>
                         </tr>
                     {/if}
                 </table>
@@ -458,7 +456,7 @@
                 }
 
                 &.table-row-border {
-                    border-top: 2px solid rgba($color-dark, 0.4);
+                    border-top: 2px solid rgba($color-dark, 0.2);
                 }
 
                 th, td {