maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Apply suggestions from code review (#9839) 

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
This commit is contained in:
GitStart-Cal.com 2023-06-29 06:09:03 +08:00 committed by GitHub
parent 611e109c28
commit 5059723ad1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/web/pages/availability/[schedule].tsx
View File

@ -189,7 +189,11 @@ export default function Availability() {
CTA={
<div className="flex items-center justify-end">
<div className="sm:hover:bg-muted hidden items-center rounded-md px-2 sm:flex">
<Skeleton as={Label} htmlFor="hiddenSwitch" className="mt-2 cursor-pointer self-center pr-2 ">
<Skeleton
as={Label}
htmlFor="hiddenSwitch"
className="mt-2 cursor-pointer self-center pe-2"
loadingClassName="me-4">
{t("set_to_default")}
</Skeleton>
<Switch
@ -315,9 +319,9 @@ export default function Availability() {
<div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
<div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
<div>
<label htmlFor="timeZone" className="text-default block text-sm font-medium">
<Skeleton as={Label} htmlFor="timeZone" className="mb-0 inline-block leading-none">
{t("timezone")}
</label>
</Skeleton>
<Controller
name="timeZone"
render={({ field: { onChange, value } }) =>
@ -328,18 +332,20 @@ export default function Availability() {
onChange={(timezone) => onChange(timezone.value)}
/>
) : (
<SelectSkeletonLoader className="w-72" />
<SelectSkeletonLoader className="mt-1 w-72" />
)
}
/>
</div>
<hr className="border-subtle my-6 mr-8" />
<div className="hidden rounded-md md:block">
<h3 className="text-emphasis text-sm font-medium">{t("something_doesnt_look_right")}</h3>
<Skeleton as="h3" className="mb-0 inline-block text-sm font-medium">
{t("something_doesnt_look_right")}
</Skeleton>
<div className="mt-3 flex">
<Button href="/availability/troubleshoot" color="secondary">
<Skeleton as={Button} href="/availability/troubleshoot" color="secondary">
{t("launch_troubleshooter")}
</Button>
</Skeleton>
</div>
</div>
</div>

21
packages/ui/layouts/WizardLayout.tsx
View File

@ -5,7 +5,7 @@ import { Toaster } from "react-hot-toast";
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { StepCard, Steps, Button } from "@calcom/ui";
import { StepCard, Steps, Button, SkeletonText } from "@calcom/ui";
export function WizardLayout({
children,
@ -15,7 +15,7 @@ export function WizardLayout({
}: {
children: React.ReactNode;
} & { maxSteps?: number; currentStep?: number; isOptionalCallback?: () => void }) {
const { t } = useLocale();
const { t, isLocaleReady } = useLocale();
const [meta, setMeta] = useState({ title: "", subtitle: " " });
const router = useRouter();
const { title, subtitle } = meta;
@ -39,10 +39,19 @@ export function WizardLayout({
<div className="sm:mx-auto sm:w-full sm:max-w-[600px]">
<div className="mx-auto sm:max-w-[520px]">
<header>
<p className="font-cal mb-3 text-[28px] font-medium leading-7">
{title.replace(` | ${APP_NAME}`, "")}&nbsp;
</p>
<p className="text-subtle font-sans text-sm font-normal">{subtitle}&nbsp;</p>
{isLocaleReady ? (
<>
<p className="font-cal mb-3 text-[28px] font-medium leading-7">
{title.replace(` | ${APP_NAME}`, "")}&nbsp;
</p>
<p className="text-subtle font-sans text-sm font-normal">{subtitle}&nbsp;</p>
</>
) : (
<>
<SkeletonText className="h-6 w-1/2" />
<SkeletonText className="mt-4 h-4 w-3/4" />
</>
)}
</header>
<Steps maxSteps={maxSteps} currentStep={currentStep} navigateToStep={noop} />
</div>