my-app/src/icons/ChevronLeft.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function ChevronLeft({ className, color, disabled, ...props }) {
+  return (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      width="16" 
+      height="16" 
+      fill={color || "currentColor"} 
+      viewBox="0 0 16 16"
+      className={className}
+      style={{ opacity: disabled ? 0.3 : 1, transition: 'opacity 0.2s' }}
+      {...props}
+    >
+      <path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
+    </svg>
+  );
+}

my-app/src/icons/ChevronRight.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function ChevronRight({ className, color, disabled, ...props }) {
+  return (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      width="16" 
+      height="16" 
+      fill={color || "currentColor"} 
+      viewBox="0 0 16 16"
+      className={className}
+      style={{ opacity: disabled ? 0.3 : 1, transition: 'opacity 0.2s' }}
+      {...props}
+    >
+      <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+    </svg>
+  );
+}

my-app/src/pages/NewBooking.module.css

@@ -17,7 +17,13 @@
 }
 
 .bookingTimesContainer {
-	background-color: red;
+	margin-top: 2rem;
+	padding: 2rem;
+	border-radius: 0.3rem;
+	outline: 1px solid #E7E7E7;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 

my-app/src/react-aria-starter/src/DatePicker.css

@@ -13,16 +13,55 @@
     display: flex;
     width: fit-content;
     align-items: center;
+    width: fit-content
+  }
+
+  .react-aria-Group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .chevron-button {
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    margin: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s, opacity 0.2s;
+  }
+
+  .chevron-button:hover:not(:disabled) {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .chevron-button:active:not(:disabled) {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .chevron-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  .chevron-button:focus-visible {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
   }
 
   .react-aria-Button {
-    background: var(--highlight-background);
-    color: var(--highlight-foreground);
+    /*background: var(--highlight-background);*/
+    /*color: var(--highlight-foreground);*/
     border: 2px solid var(--field-background);
     forced-color-adjust: none;
     border-radius: 4px;
-    border: none;
-    margin-left: -1.929rem;
+    /*border: none;*/
+    border: 1px solid #D4D4D4;
     /*width: 1.429rem;*/
     /*height: 1.429rem;*/
     width: fit-content;

my-app/src/react-aria-starter/src/DatePicker.tsx

@@ -21,24 +21,40 @@ import {
 import './DatePicker.css';
 
 import { convertDateObjectToString } from '../../helpers';
+import ChevronLeft from '../../icons/ChevronLeft';
+import ChevronRight from '../../icons/ChevronRight';
 
 export interface DatePickerProps<T extends DateValue>
   extends AriaDatePickerProps<T> {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
+  chevronColor?: string;
+  canNavigatePrevious?: boolean;
+  canNavigateNext?: boolean;
+  onPreviousClick?: () => void;
+  onNextClick?: () => void;
 }
 
 export function DatePicker<T extends DateValue>(
-  { label, description, errorMessage, firstDayOfWeek, ...props }:
-    DatePickerProps<T>
+  { 
+    label, 
+    description, 
+    errorMessage, 
+    firstDayOfWeek, 
+    chevronColor = "#666",
+    canNavigatePrevious = true,
+    canNavigateNext = true,
+    onPreviousClick,
+    onNextClick,
+    ...props 
+  }: DatePickerProps<T>
 ) {
   
   return (
     (
       <AriaDatePicker {...props}>
         <Label>{label}</Label>
-        <Group>
           {
             /* 
            <DateInput>
@@ -47,8 +63,29 @@ export function DatePicker<T extends DateValue>(
             
             */
           }
-          <Button>{convertDateObjectToString(props.value)} ▼</Button>
-        </Group>
+          <Group>
+            <button 
+              className="chevron-button"
+              onClick={() => onPreviousClick ? onPreviousClick() : console.log('ChevronLeft clicked')}
+              disabled={!canNavigatePrevious}
+            >
+              <ChevronLeft 
+                color={chevronColor} 
+                disabled={!canNavigatePrevious}
+              />
+            </button>
+            <Button>{convertDateObjectToString(props.value)}</Button>
+            <button 
+              className="chevron-button"
+              onClick={() => onNextClick ? onNextClick() : console.log('ChevronRight clicked')}
+              disabled={!canNavigateNext}
+            >
+              <ChevronRight 
+                color={chevronColor} 
+                disabled={!canNavigateNext}
+              />
+            </button>
+          </Group>
         {description && <Text slot="description">{description}</Text>}
         <FieldError>{errorMessage}</FieldError>
         <Popover>

my-app/src/react-aria-starter/src/theme.css

@@ -83,7 +83,7 @@
   --button-background-pressed: var(--background-color);
   /* these colors are the same between light and dark themes
    * to ensure contrast with the foreground color */
-  --highlight-background: #6f46ed; /* purple-300 from dark theme, 3.03:1 against background-color */
+  --highlight-background: #3e70ec; /* purple-300 from dark theme, 3.03:1 against background-color */
   --highlight-background-pressed: #522acd; /* purple-200 from dark theme */
   --highlight-background-invalid: #cc2000; /* red-300 from dark theme */
   --highlight-foreground: white; /* 5.56:1 against highlight-background */