my-app/src/AppRoutes.jsx

@@ -24,7 +24,8 @@ const AppRoutes = () => {
 	return (
 		<>
 			{/* Pass loading as isVisible to FullScreenLoader */}
-			<FullScreenLoader isVisible={loading} />
+			{/*<FullScreenLoader isVisible={loading} />*/}
+
 			
 			<Routes>
 				<Route path="/" element={<Layout />}>

my-app/src/components/BookingFormFields.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Dropdown from './Dropdown';
-import { ComboBox } from '../react-aria-starter/src/ComboBox';
+import { ComboBox } from './ComboBox';
 import { DEFAULT_BOOKING_TITLE, BOOKING_LENGTHS, SMALL_GROUP_ROOMS, PEOPLE } from '../constants/bookingConstants';
 import { useBookingContext } from '../context/BookingContext';
 import styles from './BookingFormFields.module.css';

my-app/src/components/BookingFormFields.module.css

@@ -6,7 +6,8 @@
 	font-size: 16px;
 	background-color: #FAFBFC;
 	padding: 1rem;
-	width: 300px;
+	width: 100%;
+	max-width: 600px;
 	font-family: inherit;
 }
 

my-app/src/components/ComboBox.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  Button,
+  ComboBox as AriaComboBox,
+  FieldError,
+  Input,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Text,
+  ListBoxSection,
+  Header,
+  Collection
+} from 'react-aria-components';
+import styles from './ComboBox.module.css';
+
+export function ComboBox({
+  label,
+  description,
+  errorMessage,
+  children,
+  items,
+  ...props
+}) {
+  return (
+    <AriaComboBox {...props}>
+      <Label className={styles.comboBoxLabel}>{label}</Label>
+      <div className={styles.comboBoxContainer}>
+        <Input className={styles.comboBoxInput} />
+        <Button className={styles.comboBoxButton}>▼</Button>
+      </div>
+      {description && <Text className={styles.comboBoxDescription} slot="description">{description}</Text>}
+      <FieldError className={styles.comboBoxError}>{errorMessage}</FieldError>
+      <Popover className={styles.comboBoxPopover}>
+        <ListBox className={styles.comboBoxList} items={items}>
+          <ListBoxSection id={"Hello"}>
+            <Header className={styles.sectionHeader}>SENASTE SÖKNINGAR</Header>
+            <Collection items={items}>
+              {item => <ListBoxItem className={styles.userItem} id={item.name}>{item.name}</ListBoxItem>}
+            </Collection>
+          </ListBoxSection>
+        </ListBox>
+      </Popover>
+    </AriaComboBox>
+  );
+}
+
+export function ComboBoxItem(props) {
+  return <ListBoxItem {...props} />;
+}
+
+function UserItem({ children, ...props }) {
+  return (
+    <ListBoxItem {...props} className={styles.userItem}>
+      {({ isSelected }) => (
+        <>
+          <span className={styles.userItemContent}>
+            {children}
+          </span>
+          {isSelected && (
+            <span className={styles.userItemCheckIcon}>
+              ✓
+            </span>
+          )}
+        </>
+      )}
+    </ListBoxItem>
+  );
+}

my-app/src/components/ComboBox.module.css

@@ -0,0 +1,150 @@
+.comboBoxLabel {
+  color: var(--text-color);
+}
+
+.comboBoxContainer {
+  display: flex;
+  align-items: center;
+  font-family: inherit;
+}
+
+.comboBoxInput {
+  margin: 0;
+  font-size: 1.2rem;
+  background-color: var(--field-background);
+  color: var(--field-text-color);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 0.286rem 2rem 0.286rem 0.571rem;
+  vertical-align: middle;
+  outline: none;
+  min-width: 0;
+  font-family: inherit;
+  width: 100%;
+  max-width: 600px;
+}
+
+.comboBoxInput[data-focused] {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: -1px;
+}
+
+.comboBoxButton {
+  background: var(--highlight-background);
+  color: var(--highlight-foreground);
+  forced-color-adjust: none;
+  border-radius: 4px;
+  border: none;
+  margin-left: -1.714rem;
+  width: 1.429rem;
+  height: 1.429rem;
+  padding: 0;
+  font-size: 0.857rem;
+  cursor: default;
+  flex-shrink: 0;
+}
+
+.comboBoxButton[data-pressed] {
+  box-shadow: none;
+  background: var(--highlight-background);
+}
+
+.comboBoxDescription {
+  font-size: 12px;
+}
+
+.comboBoxError {
+  font-size: 12px;
+  color: var(--invalid-color);
+}
+
+.comboBoxPopover[data-trigger="ComboBox"] {
+  width: var(--trigger-width);
+}
+
+.comboBoxPopover {
+  box-sizing: border-box;
+  background-color: white;
+}
+
+.comboBoxList {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: unset;
+  max-height: inherit;
+  min-height: unset;
+  border: none;
+  background-color: white;
+}
+
+.userItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: default;
+  outline: none;
+  border-radius: 0.125rem;
+  color: var(--text-color);
+  padding: 0.5rem;
+}
+
+.userItem[data-focused],
+.userItem[data-pressed] {
+  background: var(--highlight-background);
+  color: var(--highlight-foreground);
+}
+
+.userItem[data-selected] {
+  font-weight: 700;
+  background: unset;
+  color: var(--text-color);
+  position: relative;
+}
+
+.userItemContent {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: normal;
+}
+
+.userItem[data-selected] .userItemContent {
+  font-weight: medium;
+}
+
+.userItemCheckIcon {
+  width: 1.25rem;
+  display: flex;
+  align-items: center;
+  color: var(--highlight-background);
+}
+
+.userItem[data-focused] .userItemCheckIcon {
+  color: var(--highlight-foreground);
+}
+
+.comboBoxAvatar {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background-color: lightgray;
+}
+
+.comboBoxName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sectionHeader {
+  font-weight: 700;
+  color: rgb(89, 89, 89);
+  font-size: 0.9rem;
+  margin-bottom: 0.4rem;
+  padding: 0 0.5rem;
+}

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

@@ -1,5 +1,6 @@
 .pageContainer {
 	padding: 1rem;
+	background-color: white;
 }
 
 .formContainer {

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

@@ -27,6 +27,8 @@
   outline: none;
   min-width: 0;
   font-family: inherit;
+  width: 100%;
+  max-width: 600px;
 }
 
 .combo-box-input[data-focused] {