fix: Improve onboarding Availability (#10685)
* improve onboarding * Update Schedule.tsxpull/10702/head
parent
22b4bcdeeb
commit
f281131bf6
|
@ -121,10 +121,10 @@ const OnboardingPage = () => {
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<div className="mx-auto px-4 py-6 md:py-24">
|
||||
<div className="mx-auto py-6 sm:px-4 md:py-24">
|
||||
<div className="relative">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-[600px]">
|
||||
<div className="mx-auto sm:max-w-[520px]">
|
||||
<div className="mx-auto px-4 sm:max-w-[520px]">
|
||||
<header>
|
||||
<p className="font-cal mb-3 text-[28px] font-medium leading-7">
|
||||
{headers[currentStepIndex]?.title || "Undefined title"}
|
||||
|
|
|
@ -69,7 +69,6 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
|
|||
/>
|
||||
</div>
|
||||
<span className="inline-block min-w-[88px] text-sm capitalize">{weekday}</span>
|
||||
{watchDayRange && !!watchDayRange.length && <div className="sm:hidden">{CopyButton}</div>}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -77,7 +76,7 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
|
|||
{watchDayRange ? (
|
||||
<div className="flex sm:ml-2">
|
||||
<DayRanges control={control} name={name} />
|
||||
{!!watchDayRange.length && <div className="hidden sm:block">{CopyButton}</div>}
|
||||
{!!watchDayRange.length && <div className="block">{CopyButton}</div>}
|
||||
</div>
|
||||
) : (
|
||||
<SkeletonText className="ml-1 mt-2.5 h-6 w-48" />
|
||||
|
@ -244,7 +243,7 @@ const RemoveTimeButton = ({
|
|||
const TimeRangeField = ({ className, value, onChange }: { className?: string } & ControllerRenderProps) => {
|
||||
// this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className={classNames("flex flex-row gap-1",className)}>
|
||||
<LazySelect
|
||||
className="inline-block w-[100px]"
|
||||
value={value.start}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
const StepCard: React.FC<{ children: React.ReactNode }> = (props) => {
|
||||
return (
|
||||
<div className="border-subtle bg-default mt-10 rounded-md border p-4 dark:bg-black sm:p-8">
|
||||
<div className="sm:border-subtle bg-default mt-10 border p-4 dark:bg-black sm:rounded-md sm:p-8">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue