public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #403 from emrysal/feature/create-first-eventtype-mobile-first 

Improved 'Create your first event type' layouting
pull/406/head
Bailey Pumfleet 2021-08-03 08:11:32 +01:00 committed by GitHub
parent 509206e85f 81bcd021df
commit 874b33ab04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
pages/event-types/index.tsx
View File

@ -20,7 +20,7 @@ import {
PlusIcon, PlusIcon,
UserIcon, UserIcon,
} from "@heroicons/react/solid"; } from "@heroicons/react/solid";
import Loader from '@components/Loader'; import Loader from "@components/Loader";
export default function Availability({ user, types }) { export default function Availability({ user, types }) {
const [session, loading] = useSession(); const [session, loading] = useSession();
@ -42,7 +42,7 @@ export default function Availability({ user, types }) {
// TODO: Add validation // TODO: Add validation
const response = await fetch("/api/availability/eventtype", { await fetch("/api/availability/eventtype", {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
title: enteredTitle, title: enteredTitle,
@ -66,7 +66,7 @@ export default function Availability({ user, types }) {
} }
if (loading) { if (loading) {
return <Loader/>; return <Loader />;
} }
return ( return (
@ -79,12 +79,14 @@ export default function Availability({ user, types }) {
heading="Event Types" heading="Event Types"
subtitle="Create events to share for people to book on your calendar." subtitle="Create events to share for people to book on your calendar."
CTA={ CTA={
types.length !== 0 && (
<button <button
onClick={toggleAddModal} onClick={toggleAddModal}
className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900"> className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
<PlusIcon className="w-5 h-5 mr-1" /> <PlusIcon className="w-5 h-5 mr-1" />
New event type New event type
</button> </button>
)
}> }>
<div className="bg-white shadow overflow-hidden sm:rounded-sm"> <div className="bg-white shadow overflow-hidden sm:rounded-sm">
<ul className="divide-y divide-neutral-200"> <ul className="divide-y divide-neutral-200">
@ -261,9 +263,9 @@ export default function Availability({ user, types }) {
</ul> </ul>
</div> </div>
{types.length === 0 && ( {types.length === 0 && (
<div className="text-center max-w-lg mx-auto"> <div className="md:py-20">
<svg <svg
className="mx-auto mb-4 w-32 h-32" className="w-1/2 md:w-32 mx-auto block mb-4"
viewBox="0 0 132 132" viewBox="0 0 132 132"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -500,12 +502,19 @@ export default function Availability({ user, types }) {
</clipPath> </clipPath>
</defs> </defs>
</svg> </svg>
<div className="text-center block md:max-w-screen-sm mx-auto">
<h3 className="mt-2 text-xl font-bold text-neutral-900">Create your first event type</h3> <h3 className="mt-2 text-xl font-bold text-neutral-900">Create your first event type</h3>
<p className="mt-1 text-md text-neutral-600"> <p className="mt-1 text-md text-neutral-600">
Event types enable you to share links that show available times on your calendar and allow Event types enable you to share links that show available times on your calendar and allow
people to make bookings with you. people to make bookings with you.
</p> </p>
<button
onClick={toggleAddModal}
className="py-2 px-4 mt-6 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
<PlusIcon className="w-5 h-5 mr-1 inline" />
New event type
</button>
</div>
</div> </div>
)} )}
{showAddModal && ( {showAddModal && (