From f281131bf6c2e953e59c6b07cc346a14f02e7e89 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Thu, 10 Aug 2023 20:19:41 +0530
Subject: [PATCH] fix: Improve onboarding Availability (#10685)

* improve onboarding

* Update Schedule.tsx
---
 apps/web/pages/getting-started/[[...step]].tsx      | 4 ++--
 packages/features/schedules/components/Schedule.tsx | 5 ++---
 packages/ui/components/card/StepCard.tsx            | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index 35c413a29f..ea562ceb84 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -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"}
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 463735f083..aef2960e6c 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -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}
diff --git a/packages/ui/components/card/StepCard.tsx b/packages/ui/components/card/StepCard.tsx
index 270be89c04..349d9997cf 100644
--- a/packages/ui/components/card/StepCard.tsx
+++ b/packages/ui/components/card/StepCard.tsx
@@ -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>
   );