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

onboarding changes (#889)

Browse source
This commit is contained in:
Ciarán Hanrahan 2021-10-09 14:34:13 +01:00 committed by GitHub
parent 35dd3f088c
commit f03a2c2a1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 35 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/ui/Schedule/Schedule.tsx
View file

@ -223,7 +223,7 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
</option> </option>
)); ));
return ( return (
<div key={`${day}-range-${index}`} className="flex items-center justify-between space-x-2"> <div key={`${day}-range-${index}`} className="flex items-center space-x-2">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<select <select
id={`${day}.${index}.start`} id={`${day}.${index}.start`}
@ -252,9 +252,9 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
const Actions = () => { const Actions = () => {
return ( return (
<div className="flex items-center space-x-2"> <div className="flex items-center">
<button type="button" onClick={() => handleAddRange()}> <button className="btn-icon" type="button" onClick={() => handleAddRange()}>
<PlusIcon className="h-5 w-5 text-neutral-400 hover:text-neutral-500" /> <PlusIcon className="h-5 w-5" />
</button> </button>
</div> </div>
); );
@ -262,8 +262,8 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
const DeleteAction = ({ range }: { range: TimeRange }) => { const DeleteAction = ({ range }: { range: TimeRange }) => {
return ( return (
<button type="button" onClick={() => handleDeleteRange(range)}> <button className="btn-icon" type="button" onClick={() => handleDeleteRange(range)}>
<TrashIcon className="h-5 w-5 text-neutral-400 hover:text-neutral-500" /> <TrashIcon className="h-5 w-5" />
</button> </button>
); );
}; };

2
components/ui/Text/Body/Body.tsx
View file

@ -4,7 +4,7 @@ import React from "react";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
const Body: React.FunctionComponent<TextProps> = (props: TextProps) => { const Body: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text-lg leading-relaxed text-gray-900 dark:text-white", props?.className); const classes = classnames("text-gray-900 dark:text-white", props?.className);
return <p className={classes}>{props?.text || props.children}</p>; return <p className={classes}>{props?.text || props.children}</p>;
}; };

5
components/ui/Text/Largetitle/Largetitle.tsx
View file

@ -4,7 +4,10 @@ import React from "react";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => { const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text-3xl font-extrabold text-gray-900 dark:text-white", props?.className); const classes = classnames(
"font-cal tracking-wider text-3xl text-gray-900 dark:text-white mb-2",
props?.className
);
return <p className={classes}>{props?.text || props.children}</p>; return <p className={classes}>{props?.text || props.children}</p>;
}; };

2
components/ui/Text/Overline/Overline.tsx
View file

@ -5,7 +5,7 @@ import { TextProps } from "../Text";
const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => { const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames( const classes = classnames(
"text-sm uppercase font-semibold leading-snug tracking-wide text-gray-900 dark:text-white", "text-sm capitalize font-medium text-gray-900 dark:text-white",
props?.className props?.className
); );

35
pages/getting-started.tsx
View file

@ -144,18 +144,21 @@ export default function Onboarding(props: OnboardingProps) {
} }
return ( return (
<li onClick={() => handleAddIntegration(integration.type)} key={integration.type} className="flex py-4"> <li
<div className="w-1/12 mr-4 pt-2"> onClick={() => handleAddIntegration(integration.type)}
key={integration.type}
className="flex px-4 py-3 items-center">
<div className="w-1/12 mr-4">
<img className="h-8 w-8 mr-2" src={integration.imageSrc} alt={integration.title} /> <img className="h-8 w-8 mr-2" src={integration.imageSrc} alt={integration.title} />
</div> </div>
<div className="w-10/12"> <div className="w-10/12">
<Text className="text-gray-800 font-medium">{integration.title}</Text> <Text className="text-gray-900 text-sm font-medium">{integration.title}</Text>
<Text className="text-gray-400" variant="subtitle"> <Text className="text-gray-400" variant="subtitle">
{integration.description} {integration.description}
</Text> </Text>
</div> </div>
<div className="w-2/12 text-right pt-2"> <div className="w-2/12 text-right">
<Button color="secondary" onClick={() => handleAddIntegration(integration.type)}> <Button className="btn-sm" color="secondary" onClick={() => handleAddIntegration(integration.type)}>
Connect Connect
</Button> </Button>
</div> </div>
@ -369,8 +372,8 @@ export default function Onboarding(props: OnboardingProps) {
description: description:
"Tell us what to call you and let us know what timezone you’re in. You’ll be able to edit this later.", "Tell us what to call you and let us know what timezone you’re in. You’ll be able to edit this later.",
Component: ( Component: (
<form className="sm:mx-auto sm:w-full sm:max-w-md"> <form className="sm:mx-auto sm:w-full">
<section className="space-y-4"> <section className="space-y-8">
<fieldset> <fieldset>
<label htmlFor="name" className="block text-sm font-medium text-gray-700"> <label htmlFor="name" className="block text-sm font-medium text-gray-700">
Full name Full name
@ -433,7 +436,7 @@ export default function Onboarding(props: OnboardingProps) {
description: description:
"Connect your calendar to automatically check for busy times and new events as they’re scheduled.", "Connect your calendar to automatically check for busy times and new events as they’re scheduled.",
Component: ( Component: (
<ul className="divide-y divide-gray-200 sm:mx-auto sm:w-full sm:max-w-md"> <ul className="divide-y divide-gray-200 sm:mx-auto sm:w-full border border-gray-200 rounded-sm">
{props.integrations.map((integration) => { {props.integrations.map((integration) => {
return <IntegrationGridListItem key={integration.type} integration={integration} />; return <IntegrationGridListItem key={integration.type} integration={integration} />;
})} })}
@ -467,7 +470,7 @@ export default function Onboarding(props: OnboardingProps) {
}} }}
/> />
</section> </section>
<footer className="py-6 sm:mx-auto sm:w-full sm:max-w-md flex flex-col space-y-6"> <footer className="py-6 sm:mx-auto sm:w-full flex flex-col space-y-6">
<Button className="justify-center" EndIcon={ArrowRightIcon} type="submit" form={SCHEDULE_FORM_ID}> <Button className="justify-center" EndIcon={ArrowRightIcon} type="submit" form={SCHEDULE_FORM_ID}>
Continue Continue
</Button> </Button>
@ -483,7 +486,7 @@ export default function Onboarding(props: OnboardingProps) {
description: description:
"Last thing, a brief description about you and a photo really help you get bookings and let people know who they’re booking with.", "Last thing, a brief description about you and a photo really help you get bookings and let people know who they’re booking with.",
Component: ( Component: (
<form className="sm:mx-auto sm:w-full sm:max-w-md" id="ONBOARDING_STEP_4"> <form className="sm:mx-auto sm:w-full" id="ONBOARDING_STEP_4">
<section className="space-y-4"> <section className="space-y-4">
<fieldset> <fieldset>
<label htmlFor="name" className="block text-sm font-medium text-gray-700"> <label htmlFor="name" className="block text-sm font-medium text-gray-700">
@ -514,7 +517,7 @@ export default function Onboarding(props: OnboardingProps) {
className="mt-1 block w-full border border-gray-300 rounded-sm shadow-sm py-2 px-3 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm" className="mt-1 block w-full border border-gray-300 rounded-sm shadow-sm py-2 px-3 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
defaultValue={props.user.bio} defaultValue={props.user.bio}
/> />
<Text variant="caption"> <Text variant="caption" className="mt-2">
A few sentences about yourself. This will appear on your personal url page. A few sentences about yourself. This will appear on your personal url page.
</Text> </Text>
</fieldset> </fieldset>
@ -565,7 +568,7 @@ export default function Onboarding(props: OnboardingProps) {
)} )}
<div className="mx-auto py-24 px-4"> <div className="mx-auto py-24 px-4">
<article className="relative"> <article className="relative">
<section className="sm:mx-auto sm:w-full sm:max-w-md space-y-4"> <section className="sm:mx-auto sm:w-full sm:max-w-lg space-y-4">
<header> <header>
<Text className="text-white" variant="largetitle"> <Text className="text-white" variant="largetitle">
{steps[currentStep].title} {steps[currentStep].title}
@ -574,7 +577,7 @@ export default function Onboarding(props: OnboardingProps) {
{steps[currentStep].description} {steps[currentStep].description}
</Text> </Text>
</header> </header>
<section className="space-y-2"> <section className="space-y-2 pt-4">
<Text variant="footnote"> <Text variant="footnote">
Step {currentStep + 1} of {steps.length} Step {currentStep + 1} of {steps.length}
</Text> </Text>
@ -598,11 +601,11 @@ export default function Onboarding(props: OnboardingProps) {
</section> </section>
</section> </section>
</section> </section>
<section className="py-6 mt-10 mx-auto max-w-xl bg-white p-10 rounded-sm"> <section className="mt-10 mx-auto max-w-xl bg-white p-10 rounded-sm">
{steps[currentStep].Component} {steps[currentStep].Component}
{!steps[currentStep].hideConfirm && ( {!steps[currentStep].hideConfirm && (
<footer className="py-6 sm:mx-auto sm:w-full sm:max-w-md flex flex-col space-y-6 mt-8"> <footer className="sm:mx-auto sm:w-full flex flex-col space-y-6 mt-8">
<Button <Button
className="justify-center" className="justify-center"
disabled={isSubmitting} disabled={isSubmitting}
@ -613,7 +616,7 @@ export default function Onboarding(props: OnboardingProps) {
</footer> </footer>
)} )}
</section> </section>
<section className="py-6 mt-8 mx-auto max-w-xl"> <section className="py-8 mx-auto max-w-xl">
<div className="flex justify-between flex-row-reverse"> <div className="flex justify-between flex-row-reverse">
<button disabled={isSubmitting} onClick={handleSkipStep}> <button disabled={isSubmitting} onClick={handleSkipStep}>
<Text variant="caption">Skip Step</Text> <Text variant="caption">Skip Step</Text>

4
styles/globals.css
View file

@ -106,6 +106,10 @@
.btn-wide.btn-white { .btn-wide.btn-white {
@apply w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500; @apply w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
} }
/* btn icon */
.btn-icon {
@apply p-2 border border-transparent hover:border-gray-300 rounded-sm text-neutral-500 hover:text-neutral-900;
}
/* slider */ /* slider */
.slider { .slider {
@apply relative flex items-center w-40 h-4 select-none; @apply relative flex items-center w-40 h-4 select-none;