fix: Improve onboarding Availability (#10685)

* improve onboarding

* Update Schedule.tsx
pull/10702/head
Anik Dhabal Babu 2023-08-10 20:19:41 +05:30 committed by GitHub
parent 22b4bcdeeb
commit f281131bf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 6 deletions

View File

@ -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"}

View File

@ -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}

View File

@ -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>
);