mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

added relative position to placeholder parent (#797)

Browse source
This commit is contained in:
Syed Ali Shahbaz 2021-09-27 23:29:50 +05:30 committed by GitHub
parent 35c450d5ef
commit 78c78a6981
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
components/booking/pages/BookingPage.tsx
View file

@ -186,8 +186,8 @@ const BookingPage = (props: BookingPageProps) => {
<main className="max-w-3xl mx-auto my-0 sm:my-24"> <main className="max-w-3xl mx-auto my-0 sm:my-24">
{isReady && ( {isReady && (
<div className="dark:bg-neutral-900 bg-white overflow-hidden border border-gray-200 dark:border-0 sm:rounded-sm"> <div className="overflow-hidden bg-white border border-gray-200 dark:bg-neutral-900 dark:border-0 sm:rounded-sm">
<div className="sm:flex px-4 py-5 sm:p-4"> <div className="px-4 py-5 sm:flex sm:p-4">
<div className="sm:w-1/2 sm:border-r sm:dark:border-black"> <div className="sm:w-1/2 sm:border-r sm:dark:border-black">
<AvatarGroup <AvatarGroup
size={16} size={16}
@ -200,18 +200,18 @@ const BookingPage = (props: BookingPageProps) => {
})) }))
)} )}
/> />
<h2 className="font-cal font-medium dark:text-gray-300 text-gray-500"> <h2 className="font-medium text-gray-500 font-cal dark:text-gray-300">
{props.profile.name} {props.profile.name}
</h2> </h2>
<h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4"> <h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
{props.eventType.title} {props.eventType.title}
</h1> </h1>
<p className="text-gray-500 mb-2"> <p className="mb-2 text-gray-500">
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{props.eventType.length} minutes {props.eventType.length} minutes
</p> </p>
{props.eventType.price > 0 && ( {props.eventType.price > 0 && (
<p className="text-gray-500 mb-1 px-2 py-1 -ml-2"> <p className="px-2 py-1 mb-1 -ml-2 text-gray-500">
<CreditCardIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <CreditCardIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
<IntlProvider locale="en"> <IntlProvider locale="en">
<FormattedNumber <FormattedNumber
@ -223,21 +223,21 @@ const BookingPage = (props: BookingPageProps) => {
</p> </p>
)} )}
{selectedLocation === LocationType.InPerson && ( {selectedLocation === LocationType.InPerson && (
<p className="text-gray-500 mb-2"> <p className="mb-2 text-gray-500">
<LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{locationInfo(selectedLocation).address} {locationInfo(selectedLocation).address}
</p> </p>
)} )}
<p className="text-green-500 mb-4"> <p className="mb-4 text-green-500">
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{parseZone(date).format(timeFormat + ", dddd DD MMMM YYYY")} {parseZone(date).format(timeFormat + ", dddd DD MMMM YYYY")}
</p> </p>
<p className="dark:text-white text-gray-600 mb-8">{props.eventType.description}</p> <p className="mb-8 text-gray-600 dark:text-white">{props.eventType.description}</p>
</div> </div>
<div className="sm:w-1/2 sm:pl-8 sm:pr-4"> <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
<form onSubmit={bookingHandler}> <form onSubmit={bookingHandler}>
<div className="mb-4"> <div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium dark:text-white text-gray-700"> <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">
Your name Your name
</label> </label>
<div className="mt-1"> <div className="mt-1">
@ -246,7 +246,7 @@ const BookingPage = (props: BookingPageProps) => {
name="name" name="name"
id="name" id="name"
required required
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm"
placeholder="John Doe" placeholder="John Doe"
defaultValue={props.booking ? props.booking.attendees[0].name : ""} defaultValue={props.booking ? props.booking.attendees[0].name : ""}
/> />
@ -255,7 +255,7 @@ const BookingPage = (props: BookingPageProps) => {
<div className="mb-4"> <div className="mb-4">
<label <label
htmlFor="email" htmlFor="email"
className="block text-sm font-medium dark:text-white text-gray-700"> className="block text-sm font-medium text-gray-700 dark:text-white">
Email address Email address
</label> </label>
<div className="mt-1"> <div className="mt-1">
@ -264,7 +264,7 @@ const BookingPage = (props: BookingPageProps) => {
name="email" name="email"
id="email" id="email"
required required
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm"
placeholder="you@example.com" placeholder="you@example.com"
defaultValue={props.booking ? props.booking.attendees[0].email : ""} defaultValue={props.booking ? props.booking.attendees[0].email : ""}
/> />
@ -272,7 +272,7 @@ const BookingPage = (props: BookingPageProps) => {
</div> </div>
{locations.length > 1 && ( {locations.length > 1 && (
<div className="mb-4"> <div className="mb-4">
<span className="block text-sm font-medium dark:text-white text-gray-700"> <span className="block text-sm font-medium text-gray-700 dark:text-white">
Location Location
</span> </span>
{locations.map((location) => ( {locations.map((location) => (
@ -281,12 +281,12 @@ const BookingPage = (props: BookingPageProps) => {
type="radio" type="radio"
required required
onChange={(e) => setSelectedLocation(e.target.value)} onChange={(e) => setSelectedLocation(e.target.value)}
className="location focus:ring-black h-4 w-4 text-black border-gray-300 mr-2" className="w-4 h-4 mr-2 text-black border-gray-300 location focus:ring-black"
name="location" name="location"
value={location.type} value={location.type}
checked={selectedLocation === location.type} checked={selectedLocation === location.type}
/> />
<span className="text-sm ml-2 dark:text-gray-500"> <span className="ml-2 text-sm dark:text-gray-500">
{locationLabels[location.type]} {locationLabels[location.type]}
</span> </span>
</label> </label>
@ -297,7 +297,7 @@ const BookingPage = (props: BookingPageProps) => {
<div className="mb-4"> <div className="mb-4">
<label <label
htmlFor="phone" htmlFor="phone"
className="block text-sm font-medium dark:text-white text-gray-700"> className="block text-sm font-medium text-gray-700 dark:text-white">
Phone Number Phone Number
</label> </label>
<div className="mt-1"> <div className="mt-1">
@ -306,7 +306,7 @@ const BookingPage = (props: BookingPageProps) => {
placeholder="Enter phone number" placeholder="Enter phone number"
id="phone" id="phone"
required required
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm"
onChange={() => { onChange={() => {
/* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */ /* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
}} }}
@ -322,7 +322,7 @@ const BookingPage = (props: BookingPageProps) => {
{input.type !== EventTypeCustomInputType.BOOL && ( {input.type !== EventTypeCustomInputType.BOOL && (
<label <label
htmlFor={"custom_" + input.id} htmlFor={"custom_" + input.id}
className="block text-sm font-medium text-gray-700 dark:text-white mb-1"> className="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
{input.label} {input.label}
</label> </label>
)} )}
@ -332,7 +332,7 @@ const BookingPage = (props: BookingPageProps) => {
id={"custom_" + input.id} id={"custom_" + input.id}
required={input.required} required={input.required}
rows={3} rows={3}
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm"
placeholder={input.placeholder} placeholder={input.placeholder}
/> />
)} )}
@ -342,7 +342,7 @@ const BookingPage = (props: BookingPageProps) => {
name={"custom_" + input.id} name={"custom_" + input.id}
id={"custom_" + input.id} id={"custom_" + input.id}
required={input.required} required={input.required}
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm"
placeholder={input.placeholder} placeholder={input.placeholder}
/> />
)} )}
@ -352,7 +352,7 @@ const BookingPage = (props: BookingPageProps) => {
name={"custom_" + input.id} name={"custom_" + input.id}
id={"custom_" + input.id} id={"custom_" + input.id}
required={input.required} required={input.required}
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm"
placeholder="" placeholder=""
/> />
)} )}
@ -362,13 +362,13 @@ const BookingPage = (props: BookingPageProps) => {
type="checkbox" type="checkbox"
name={"custom_" + input.id} name={"custom_" + input.id}
id={"custom_" + input.id} id={"custom_" + input.id}
className="focus:ring-black h-4 w-4 text-black border-gray-300 rounded mr-2" className="w-4 h-4 mr-2 text-black border-gray-300 rounded focus:ring-black"
placeholder="" placeholder=""
required={input.required} required={input.required}
/> />
<label <label
htmlFor={"custom_" + input.id} htmlFor={"custom_" + input.id}
className="block text-sm font-medium text-gray-700 dark:text-white mb-1"> className="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
{input.label} {input.label}
</label> </label>
</div> </div>
@ -381,7 +381,7 @@ const BookingPage = (props: BookingPageProps) => {
<label <label
onClick={toggleGuestEmailInput} onClick={toggleGuestEmailInput}
htmlFor="guests" htmlFor="guests"
className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer"> className="block mb-1 text-sm font-medium text-blue-500 dark:text-white hover:cursor-pointer">
+ Additional Guests + Additional Guests
</label> </label>
)} )}
@ -389,10 +389,11 @@ const BookingPage = (props: BookingPageProps) => {
<div> <div>
<label <label
htmlFor="guests" htmlFor="guests"
className="block text-sm font-medium dark:text-white text-gray-700 mb-1"> className="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
Guests Guests
</label> </label>
<ReactMultiEmail <ReactMultiEmail
className="relative"
placeholder="guest@example.com" placeholder="guest@example.com"
emails={guestEmails} emails={guestEmails}
onChange={(_emails: string[]) => { onChange={(_emails: string[]) => {
@ -420,14 +421,14 @@ const BookingPage = (props: BookingPageProps) => {
<div className="mb-4"> <div className="mb-4">
<label <label
htmlFor="notes" htmlFor="notes"
className="block text-sm font-medium dark:text-white text-gray-700 mb-1"> className="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
Additional notes Additional notes
</label> </label>
<textarea <textarea
name="notes" name="notes"
id="notes" id="notes"
rows={3} rows={3}
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm"
placeholder="Please share anything that will help prepare for our meeting." placeholder="Please share anything that will help prepare for our meeting."
defaultValue={props.booking ? props.booking.description : ""} defaultValue={props.booking ? props.booking.description : ""}
/> />
@ -443,10 +444,10 @@ const BookingPage = (props: BookingPageProps) => {
</div> </div>
</form> </form>
{error && ( {error && (
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-2"> <div className="p-4 mt-2 border-l-4 border-yellow-400 bg-yellow-50">
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" /> <ExclamationIcon className="w-5 h-5 text-yellow-400" aria-hidden="true" />
</div> </div>
<div className="ml-3"> <div className="ml-3">
<p className="text-sm text-yellow-700"> <p className="text-sm text-yellow-700">