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

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

@ -4,7 +4,7 @@ import React from "react";
import { TextProps } from "../Text";
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>;
};

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

@ -4,7 +4,10 @@ import React from "react";
import { TextProps } from "../Text";
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>;
};

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

35
pages/getting-started.tsx
View file

@ -144,18 +144,21 @@ export default function Onboarding(props: OnboardingProps) {
}
return (
<li onClick={() => handleAddIntegration(integration.type)} key={integration.type} className="flex py-4">
<div className="w-1/12 mr-4 pt-2">
<li
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} />
</div>
<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">
{integration.description}
</Text>
</div>
<div className="w-2/12 text-right pt-2">
<Button color="secondary" onClick={() => handleAddIntegration(integration.type)}>
<div className="w-2/12 text-right">
<Button className="btn-sm" color="secondary" onClick={() => handleAddIntegration(integration.type)}>
Connect
</Button>
</div>
@ -369,8 +372,8 @@ export default function Onboarding(props: OnboardingProps) {
description:
"Tell us what to call you and let us know what timezone you’re in. You’ll be able to edit this later.",
Component: (
<form className="sm:mx-auto sm:w-full sm:max-w-md">
<section className="space-y-4">
<form className="sm:mx-auto sm:w-full">
<section className="space-y-8">
<fieldset>
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
Full name
@ -433,7 +436,7 @@ export default function Onboarding(props: OnboardingProps) {
description:
"Connect your calendar to automatically check for busy times and new events as they’re scheduled.",
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) => {
return <IntegrationGridListItem key={integration.type} integration={integration} />;
})}
@ -467,7 +470,7 @@ export default function Onboarding(props: OnboardingProps) {
}}
/>
</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}>
Continue
</Button>
@ -483,7 +486,7 @@ export default function Onboarding(props: OnboardingProps) {
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.",
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">
<fieldset>
<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"
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.
</Text>
</fieldset>
@ -565,7 +568,7 @@ export default function Onboarding(props: OnboardingProps) {
)}
<div className="mx-auto py-24 px-4">
<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>
<Text className="text-white" variant="largetitle">
{steps[currentStep].title}
@ -574,7 +577,7 @@ export default function Onboarding(props: OnboardingProps) {
{steps[currentStep].description}
</Text>
</header>
<section className="space-y-2">
<section className="space-y-2 pt-4">
<Text variant="footnote">
Step {currentStep + 1} of {steps.length}
</Text>
@ -598,11 +601,11 @@ export default function Onboarding(props: OnboardingProps) {
</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].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
className="justify-center"
disabled={isSubmitting}
@ -613,7 +616,7 @@ export default function Onboarding(props: OnboardingProps) {
</footer>
)}
</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">
<button disabled={isSubmitting} onClick={handleSkipStep}>
<Text variant="caption">Skip Step</Text>

4
styles/globals.css
View file

@ -106,6 +106,10 @@
.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;
}
/* 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 {
@apply relative flex items-center w-40 h-4 select-none;