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

Merge pull request #416 from calendso/design-revision

Browse source 
Design revision based on @ciaran feedback
This commit is contained in:
Peer_Rich 2021-08-05 14:28:26 +02:00 committed by GitHub
commit 0ca4482dc9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 141 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/Settings.tsx
View file

@ -35,7 +35,7 @@ export default function SettingsShell(props) {
]; ];
return ( return (
<div className="max-w-6xl"> <div>
<div className="sm:mx-auto"> <div className="sm:mx-auto">
<nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs"> <nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
{tabs.map((tab) => ( {tabs.map((tab) => (
@ -60,8 +60,9 @@ export default function SettingsShell(props) {
</Link> </Link>
))} ))}
</nav> </nav>
<hr />
</div> </div>
<main>{props.children}</main> <main className="max-w-4xl">{props.children}</main>
</div> </div>
); );
} }

11
components/Shell.tsx
View file

@ -20,6 +20,7 @@ import classNames from "@lib/classNames";
export default function Shell(props) { export default function Shell(props) {
const router = useRouter(); const router = useRouter();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession(); const [session, loading] = useSession();
const telemetry = useTelemetry(); const telemetry = useTelemetry();
@ -71,7 +72,7 @@ export default function Shell(props) {
<div className="h-screen flex overflow-hidden bg-gray-100"> <div className="h-screen flex overflow-hidden bg-gray-100">
{/* Static sidebar for desktop */} {/* Static sidebar for desktop */}
<div className="hidden md:flex md:flex-shrink-0"> <div className="hidden md:flex md:flex-shrink-0">
<div className="flex flex-col w-64"> <div className="flex flex-col w-56">
{/* Sidebar component, swap this element with another sidebar if you like */} {/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white"> <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto"> <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
@ -105,7 +106,7 @@ export default function Shell(props) {
))} ))}
</nav> </nav>
</div> </div>
<div className="flex-shrink-0 flex border-t border-gray-200 p-4"> <div className="flex-shrink-0 flex p-4">
<UserDropdown session={session} /> <UserDropdown session={session} />
</div> </div>
</div> </div>
@ -135,10 +136,10 @@ export default function Shell(props) {
</div> </div>
</div> </div>
</nav> </nav>
<div className="py-6"> <div className="py-8">
<div className="block sm:flex justify-between px-4 sm:px-6 md:px-8"> <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
<div className="mb-6"> <div className="mb-8">
<h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1> <h1 className="text-xl font-bold text-gray-900">{props.heading}</h1>
<p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p> <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
</div> </div>
<div className="mb-4 flex-shrink-0">{props.CTA}</div> <div className="mb-4 flex-shrink-0">{props.CTA}</div>

2
components/ui/Scheduler.tsx
View file

@ -91,7 +91,7 @@ export const Scheduler = ({
type="button" type="button"
onClick={() => removeScheduleAt(idx)} onClick={() => removeScheduleAt(idx)}
className="btn-sm bg-transparent px-2 py-1 ml-1"> className="btn-sm bg-transparent px-2 py-1 ml-1">
<TrashIcon className="h-6 w-6 inline text-gray-400 -mt-1" /> <TrashIcon className="h-5 w-5 inline text-gray-400 -mt-1" />
</button> </button>
</li> </li>
); );

2
pages/auth/logout.tsx
View file

@ -29,7 +29,7 @@ export default function Logout() {
</div> </div>
<div className="mt-5 sm:mt-6"> <div className="mt-5 sm:mt-6">
<Link href="/auth/login"> <Link href="/auth/login">
<a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm"> <a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm">
Go back to the login page Go back to the login page
</a> </a>
</Link> </Link>

9
pages/availability/index.tsx
View file

@ -10,6 +10,7 @@ import { ClockIcon } from "@heroicons/react/outline";
import Loader from '@components/Loader'; import Loader from '@components/Loader';
export default function Availability(props) { export default function Availability(props) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession(); const [session, loading] = useSession();
const router = useRouter(); const router = useRouter();
const [showAddModal, setShowAddModal] = useState(false); const [showAddModal, setShowAddModal] = useState(false);
@ -29,7 +30,7 @@ export default function Availability(props) {
const bufferMinsRef = useRef<HTMLInputElement>(); const bufferMinsRef = useRef<HTMLInputElement>();
if (loading) { if (loading) {
return <Loader/>; return <Loader />;
} }
function toggleAddModal() { function toggleAddModal() {
@ -124,7 +125,7 @@ export default function Availability(props) {
"> ">
<div className="flex"> <div className="flex">
<div className="w-1/2 mr-2 bg-white shadow rounded-sm"> <div className="w-1/2 mr-2 bg-white border border-gray-200 rounded-sm">
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<h3 className="text-lg leading-6 font-medium text-gray-900"> <h3 className="text-lg leading-6 font-medium text-gray-900">
Change the start and end times of your day Change the start and end times of your day
@ -143,7 +144,7 @@ export default function Availability(props) {
</div> </div>
</div> </div>
<div className="w-1/2 ml-2 bg-white shadow rounded-sm"> <div className="w-1/2 ml-2 border border-gray-200 rounded-sm">
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<h3 className="text-lg leading-6 font-medium text-gray-900"> <h3 className="text-lg leading-6 font-medium text-gray-900">
Something doesn&apos;t look right? Something doesn&apos;t look right?
@ -153,7 +154,7 @@ export default function Availability(props) {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<Link href="/availability/troubleshoot"> <Link href="/availability/troubleshoot">
<a className="btn btn-primary">Launch troubleshooter</a> <a className="btn btn-white">Launch troubleshooter</a>
</Link> </Link>
</div> </div>
</div> </div>

3
pages/availability/troubleshoot.tsx
View file

@ -10,12 +10,13 @@ import Loader from '@components/Loader';
dayjs.extend(utc); dayjs.extend(utc);
export default function Troubleshoot({ user }) { export default function Troubleshoot({ user }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession(); const [session, loading] = useSession();
const [availability, setAvailability] = useState([]); const [availability, setAvailability] = useState([]);
const [selectedDate, setSelectedDate] = useState(dayjs()); const [selectedDate, setSelectedDate] = useState(dayjs());
if (loading) { if (loading) {
return <Loader/>; return <Loader />;
} }
function convertMinsToHrsMins(mins) { function convertMinsToHrsMins(mins) {

19
pages/bookings/index.tsx
View file

@ -43,25 +43,8 @@ export default function Bookings({ bookings }) {
<div className="-mx-4 sm:mx-auto flex flex-col"> <div className="-mx-4 sm:mx-auto flex flex-col">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-sm"> <div className="border border-gray-200 overflow-hidden border-b rounded-sm">
<table className="min-w-full divide-y divide-gray-200"> <table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Event
</th>
<th
scope="col"
className="hidden sm:table-cell px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Date
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
{bookings {bookings
.filter((booking) => !booking.confirmed && !booking.rejected) .filter((booking) => !booking.confirmed && !booking.rejected)

178
pages/event-types/[type].tsx
View file

@ -388,35 +388,28 @@ export default function EventTypePage({
<title>{eventType.title} | Event Type | Calendso</title> <title>{eventType.title} | Event Type | Calendso</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Shell heading={"Event Type: " + eventType.title} subtitle={eventType.description}> <Shell
heading={
<input
ref={titleRef}
type="text"
name="title"
id="title"
required
className="pl-0 text-xl font-bold text-gray-900 cursor-pointer border-none focus:ring-0 bg-transparent focus:outline-none"
placeholder="Quick Chat"
defaultValue={eventType.title}
/>
}
subtitle={eventType.description}>
<div className="block sm:flex"> <div className="block sm:flex">
<div className="w-full sm:w-10/12 mr-2"> <div className="w-full sm:w-10/12 mr-2">
<div className="bg-white rounded-sm border border-neutral-200 -mx-4 sm:mx-0 p-4 sm:p-8"> <div className="bg-white rounded-sm border border-neutral-200 -mx-4 sm:mx-0 p-4 sm:p-8">
<form onSubmit={updateEventTypeHandler} className="space-y-4"> <form onSubmit={updateEventTypeHandler} className="space-y-4">
<div className="block sm:flex"> <div className="block sm:flex items-center">
<div className="min-w-32 mb-4 sm:mb-0"> <div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="title" className="flex font-medium text-neutral-700 mt-1"> <label htmlFor="slug" className="text-sm flex font-medium text-neutral-700 mt-0">
<PencilIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" /> <LinkIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Title
</label>
</div>
<div className="w-full">
<input
ref={titleRef}
type="text"
name="title"
id="title"
required
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-neutral-300 rounded-sm"
placeholder="Quick Chat"
defaultValue={eventType.title}
/>
</div>
</div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="slug" className="flex font-medium text-neutral-700 mt-1">
<LinkIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
URL URL
</label> </label>
</div> </div>
@ -437,10 +430,41 @@ export default function EventTypePage({
</div> </div>
</div> </div>
</div> </div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0"> <div className="block sm:flex items-center">
<label htmlFor="location" className="flex font-medium text-neutral-700 mt-1"> <div className="min-w-44 mb-4 sm:mb-0">
<LocationMarkerIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" /> <label htmlFor="length" className="text-sm flex font-medium text-neutral-700 mt-0">
<ClockIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Duration
</label>
</div>
<div className="w-full">
<div className="mt-1 relative rounded-sm shadow-sm">
<input
ref={lengthRef}
type="number"
name="length"
id="length"
required
className="focus:ring-primary-500 focus:border-primary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
placeholder="15"
defaultValue={eventType.length}
/>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<span className="text-gray-500 sm:text-sm" id="duration">
mins
</span>
</div>
</div>
</div>
</div>
<hr />
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="location" className="text-sm flex font-medium text-neutral-700 mt-0">
<LocationMarkerIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Location Location
</label> </label>
</div> </div>
@ -468,19 +492,19 @@ export default function EventTypePage({
className="mb-2 p-2 border border-neutral-300 rounded-sm shadow-sm"> className="mb-2 p-2 border border-neutral-300 rounded-sm shadow-sm">
<div className="flex justify-between"> <div className="flex justify-between">
{location.type === LocationType.InPerson && ( {location.type === LocationType.InPerson && (
<div className="flex-grow flex"> <div className="flex-grow flex items-center">
<LocationMarkerIcon className="h-6 w-6" /> <LocationMarkerIcon className="h-6 w-6" />
<span className="ml-2 text-sm">{location.address}</span> <span className="ml-2 text-sm">{location.address}</span>
</div> </div>
)} )}
{location.type === LocationType.Phone && ( {location.type === LocationType.Phone && (
<div className="flex-grow flex"> <div className="flex-grow flex items-center">
<PhoneIcon className="h-6 w-6" /> <PhoneIcon className="h-6 w-6" />
<span className="ml-2 text-sm">Phone call</span> <span className="ml-2 text-sm">Phone call</span>
</div> </div>
)} )}
{location.type === LocationType.GoogleMeet && ( {location.type === LocationType.GoogleMeet && (
<div className="flex-grow flex"> <div className="flex-grow flex items-center">
<svg <svg
className="h-6 w-6" className="h-6 w-6"
viewBox="0 0 64 54" viewBox="0 0 64 54"
@ -511,7 +535,7 @@ export default function EventTypePage({
</div> </div>
)} )}
{location.type === LocationType.Zoom && ( {location.type === LocationType.Zoom && (
<div className="flex-grow flex"> <div className="flex-grow flex items-center">
<svg <svg
className="h-6 w-6" className="h-6 w-6"
viewBox="0 0 64 64" viewBox="0 0 64 64"
@ -555,10 +579,12 @@ export default function EventTypePage({
<li> <li>
<button <button
type="button" type="button"
className="sm:flex sm:items-start text-sm text-primary-600" className="bg-neutral-100 rounded-sm py-2 px-3 flex"
onClick={() => setShowLocationModal(true)}> onClick={() => setShowLocationModal(true)}>
<PlusIcon className="h-5 w-5" /> <PlusIcon className="h-4 w-4 mt-0.5 text-neutral-900" />
<span className="font-medium">Add another location option</span> <span className="ml-1 text-neutral-700 text-sm font-medium">
Add another location
</span>
</button> </button>
</li> </li>
)} )}
@ -566,37 +592,13 @@ export default function EventTypePage({
)} )}
</div> </div>
</div> </div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0"> <hr className="border-neutral-200" />
<label htmlFor="length" className="flex font-medium text-neutral-700 mt-1">
<ClockIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" /> <div className="block sm:flex items-center">
Duration <div className="min-w-44 mb-4 sm:mb-0">
</label> <label htmlFor="description" className="text-sm flex font-medium text-neutral-700 mt-0">
</div> <DocumentIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
<div className="w-full">
<div className="mt-1 relative rounded-sm shadow-sm">
<input
ref={lengthRef}
type="number"
name="length"
id="length"
required
className="focus:ring-primary-500 focus:border-primary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
placeholder="15"
defaultValue={eventType.length}
/>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<span className="text-gray-500 sm:text-sm" id="duration">
mins
</span>
</div>
</div>
</div>
</div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="description" className="flex font-medium text-neutral-700 mt-1">
<DocumentIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
Description Description
</label> </label>
</div> </div>
@ -620,9 +622,11 @@ export default function EventTypePage({
<span className="text-neutral-700 text-sm font-medium">Show advanced settings</span> <span className="text-neutral-700 text-sm font-medium">Show advanced settings</span>
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="space-y-4"> <Disclosure.Panel className="space-y-4">
<div className="block sm:flex"> <div className="block sm:flex items-center">
<div className="min-w-32 mb-4 sm:mb-0"> <div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="eventName" className="flex font-medium text-neutral-700 mt-2"> <label
htmlFor="eventName"
className="text-sm flex font-medium text-neutral-700 mt-2">
Event name Event name
</label> </label>
</div> </div>
@ -640,11 +644,11 @@ export default function EventTypePage({
</div> </div>
</div> </div>
</div> </div>
<div className="block sm:flex"> <div className="block sm:flex items-center">
<div className="min-w-32 mb-4 sm:mb-0"> <div className="min-w-44 mb-4 sm:mb-0">
<label <label
htmlFor="additionalFields" htmlFor="additionalFields"
className="flex font-medium text-neutral-700 mt-2"> className="text-sm flex font-medium text-neutral-700 mt-2">
Additional inputs Additional inputs
</label> </label>
</div> </div>
@ -694,9 +698,9 @@ export default function EventTypePage({
</ul> </ul>
</div> </div>
</div> </div>
<div className="block sm:flex"> <div className="block sm:flex items-center">
<div className="min-w-32 mb-4 sm:mb-0"> <div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="hidden" className="flex font-medium text-neutral-700"> <label htmlFor="hidden" className="text-sm flex font-medium text-neutral-700">
Hide event type Hide event type
</label> </label>
</div> </div>
@ -721,11 +725,11 @@ export default function EventTypePage({
</div> </div>
</div> </div>
</div> </div>
<div className="block sm:flex"> <div className="block sm:flex items-center">
<div className="min-w-32 mb-4 sm:mb-0"> <div className="min-w-44 mb-4 sm:mb-0">
<label <label
htmlFor="requiresConfirmation" htmlFor="requiresConfirmation"
className="flex font-medium text-neutral-700"> className="text-sm flex font-medium text-neutral-700">
Opt-in booking Opt-in booking
</label> </label>
</div> </div>
@ -750,11 +754,14 @@ export default function EventTypePage({
</div> </div>
</div> </div>
</div> </div>
<hr className="border-neutral-200" />
<div className="block sm:flex"> <div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0"> <div className="min-w-44 mb-4 sm:mb-0">
<label <label
htmlFor="inviteesCanSchedule" htmlFor="inviteesCanSchedule"
className="flex font-medium text-neutral-700 mt-2"> className="text-sm flex font-medium text-neutral-700 mt-2">
Invitees can schedule Invitees can schedule
</label> </label>
</div> </div>
@ -849,9 +856,14 @@ export default function EventTypePage({
</RadioGroup> </RadioGroup>
</div> </div>
</div> </div>
<hr className="border-neutral-200" />
<div className="block sm:flex"> <div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0"> <div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="availability" className="flex font-medium text-neutral-700 mt-2"> <label
htmlFor="availability"
className="text-sm flex font-medium text-neutral-700 mt-2">
Availability Availability
</label> </label>
</div> </div>

26
pages/event-types/index.tsx
View file

@ -73,8 +73,8 @@ export default function Availability({ user, types }) {
New event type New event type
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<div className="mb-4"> <div className="mb-8">
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title"> <h3 className="text-lg leading-6 font-bold text-gray-900" id="modal-title">
Add a new event type Add a new event type
</h3> </h3>
<div> <div>
@ -153,7 +153,7 @@ export default function Availability({ user, types }) {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <div className="mt-8 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary"> <button type="submit" className="btn btn-primary">
Continue Continue
</button> </button>
@ -176,7 +176,7 @@ 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={types.length !== 0 && <CreateNewEventDialog />}> CTA={types.length !== 0 && <CreateNewEventDialog />}>
<div className="bg-white shadow overflow-hidden sm:rounded-sm -mx-4 sm:mx-0"> <div className="bg-white border border-gray-200 rounded-sm overflow-hidden -mx-4 sm:mx-0">
<ul className="divide-y divide-neutral-200"> <ul className="divide-y divide-neutral-200">
{types.map((type) => ( {types.map((type) => (
<li key={type.id}> <li key={type.id}>
@ -196,21 +196,21 @@ export default function Availability({ user, types }) {
<div className="mt-2 flex space-x-4"> <div className="mt-2 flex space-x-4">
<div className="flex items-center text-sm text-neutral-500"> <div className="flex items-center text-sm text-neutral-500">
<ClockIcon <ClockIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-neutral-400" className="flex-shrink-0 mr-1.5 h-4 w-4 text-neutral-400"
aria-hidden="true" aria-hidden="true"
/> />
<p>{type.length}m</p> <p>{type.length}m</p>
</div> </div>
<div className="flex items-center text-sm text-neutral-500"> <div className="flex items-center text-sm text-neutral-500">
<UserIcon <UserIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-neutral-400" className="flex-shrink-0 mr-1.5 h-4 w-4 text-neutral-400"
aria-hidden="true" aria-hidden="true"
/> />
<p>1-on-1</p> <p>1-on-1</p>
</div> </div>
<div className="flex items-center text-sm text-neutral-500"> <div className="flex items-center text-sm text-neutral-500">
<InformationCircleIcon <InformationCircleIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-neutral-400" className="flex-shrink-0 mr-1.5 h-4 w-4 text-neutral-400"
aria-hidden="true" aria-hidden="true"
/> />
<p>{type.description.substring(0, 100)}</p> <p>{type.description.substring(0, 100)}</p>
@ -220,7 +220,7 @@ export default function Availability({ user, types }) {
<div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5"> <div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
<div className="flex overflow-hidden space-x-5"> <div className="flex overflow-hidden space-x-5">
<Link href={"/" + session.user.username + "/" + type.slug}> <Link href={"/" + session.user.username + "/" + type.slug}>
<a className="text-neutral-400"> <a className="text-neutral-400 p-2 border border-transparent hover:border-gray-200">
<ExternalLinkIcon className="w-5 h-5" /> <ExternalLinkIcon className="w-5 h-5" />
</a> </a>
</Link> </Link>
@ -230,7 +230,7 @@ export default function Availability({ user, types }) {
window.location.hostname + "/" + session.user.username + "/" + type.slug window.location.hostname + "/" + session.user.username + "/" + type.slug
); );
}} }}
className="text-neutral-400"> className="text-neutral-400 p-2 border border-transparent hover:border-gray-200">
<LinkIcon className="w-5 h-5" /> <LinkIcon className="w-5 h-5" />
</button> </button>
</div> </div>
@ -241,7 +241,7 @@ export default function Availability({ user, types }) {
{({ open }) => ( {({ open }) => (
<> <>
<div> <div>
<Menu.Button className="text-neutral-400 mt-1"> <Menu.Button className="text-neutral-400 mt-1 text-neutral-400 p-2 border border-transparent hover:border-gray-200">
<span className="sr-only">Open options</span> <span className="sr-only">Open options</span>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" /> <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button> </Menu.Button>
@ -271,7 +271,7 @@ export default function Availability({ user, types }) {
"group flex items-center px-4 py-2 text-sm font-medium" "group flex items-center px-4 py-2 text-sm font-medium"
)}> )}>
<ExternalLinkIcon <ExternalLinkIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500" className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true" aria-hidden="true"
/> />
Preview Preview
@ -295,7 +295,7 @@ export default function Availability({ user, types }) {
"group flex items-center px-4 py-2 text-sm w-full font-medium" "group flex items-center px-4 py-2 text-sm w-full font-medium"
)}> )}>
<LinkIcon <LinkIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500" className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true" aria-hidden="true"
/> />
Copy link to event Copy link to event
@ -311,7 +311,7 @@ export default function Availability({ user, types }) {
{/* "group flex items-center px-4 py-2 text-sm font-medium"*/} {/* "group flex items-center px-4 py-2 text-sm font-medium"*/}
{/* )}>*/} {/* )}>*/}
{/* <DuplicateIcon*/} {/* <DuplicateIcon*/}
{/* className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"*/} {/* className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"*/}
{/* aria-hidden="true"*/} {/* aria-hidden="true"*/}
{/* />*/} {/* />*/}
{/* Duplicate*/} {/* Duplicate*/}

8
pages/integrations/[integration].tsx
View file

@ -7,13 +7,15 @@ import { useRouter } from "next/router";
import { useSession, getSession } from "next-auth/client"; import { useSession, getSession } from "next-auth/client";
import Loader from '@components/Loader'; import Loader from '@components/Loader';
export default function integration(props) { export default function Integration(props) {
const router = useRouter(); const router = useRouter();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession(); const [session, loading] = useSession();
const [showAPIKey, setShowAPIKey] = useState(false); const [showAPIKey, setShowAPIKey] = useState(false);
if (loading) { if (loading) {
return <Loader/>; return <Loader />;
} }
function toggleShowAPIKey() { function toggleShowAPIKey() {
@ -23,6 +25,7 @@ export default function integration(props) {
async function deleteIntegrationHandler(event) { async function deleteIntegrationHandler(event) {
event.preventDefault(); event.preventDefault();
/*eslint-disable */
const response = await fetch("/api/integrations", { const response = await fetch("/api/integrations", {
method: "DELETE", method: "DELETE",
body: JSON.stringify({ id: props.integration.id }), body: JSON.stringify({ id: props.integration.id }),
@ -30,6 +33,7 @@ export default function integration(props) {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
}); });
/*eslint-enable */
router.push("/integrations"); router.push("/integrations");
} }

11
pages/integrations/index.tsx
View file

@ -16,7 +16,8 @@ import { Switch } from "@headlessui/react";
import Loader from '@components/Loader'; import Loader from '@components/Loader';
import classNames from "@lib/classNames"; import classNames from "@lib/classNames";
export default function Home({ integrations }) { export default function IntegrationHome({ integrations }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession(); const [session, loading] = useSession();
const [showAddModal, setShowAddModal] = useState(false); const [showAddModal, setShowAddModal] = useState(false);
@ -85,9 +86,7 @@ export default function Home({ integrations }) {
useEffect(loadCalendars, [integrations]); useEffect(loadCalendars, [integrations]);
if (loading) { if (loading) {
return ( return <Loader />;
<Loader/>
);
} }
return ( return (
@ -109,7 +108,7 @@ export default function Home({ integrations }) {
Add new integration Add new integration
</button> </button>
}> }>
<div className="bg-white shadow overflow-hidden rounded-sm mb-8"> <div className="bg-white border border-gray-200 overflow-hidden rounded-sm mb-8">
{integrations.filter((ig) => ig.credential).length !== 0 ? ( {integrations.filter((ig) => ig.credential).length !== 0 ? (
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200">
{integrations {integrations
@ -276,7 +275,7 @@ export default function Home({ integrations }) {
</div> </div>
</div> </div>
)} )}
<div className="bg-white shadow rounded-sm"> <div className="bg-white border border-gray-200 rounded-sm">
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">Select calendars</h3> <h3 className="text-lg leading-6 font-medium text-gray-900">Select calendars</h3>
<div className="mt-2 max-w-xl text-sm text-gray-500"> <div className="mt-2 max-w-xl text-sm text-gray-500">

6
pages/settings/embed.tsx
View file

@ -1,7 +1,4 @@
import Head from "next/head"; import Head from "next/head";
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import prisma from "../../lib/prisma"; import prisma from "../../lib/prisma";
import Shell from "../../components/Shell"; import Shell from "../../components/Shell";
import SettingsShell from "../../components/Settings"; import SettingsShell from "../../components/Settings";
@ -9,10 +6,11 @@ import { useSession, getSession } from "next-auth/client";
import Loader from '@components/Loader'; import Loader from '@components/Loader';
export default function Embed(props) { export default function Embed(props) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession(); const [session, loading] = useSession();
if (loading) { if (loading) {
return <Loader/>; return <Loader />;
} }
return ( return (

1
styles/globals.css
View file

@ -81,6 +81,7 @@
} }
} }
/* add padding bottom to bottom nav on standalone mode */
@media all and (display-mode: standalone) { @media all and (display-mode: standalone) {
.bottom-nav { .bottom-nav {
padding-bottom: 24px; padding-bottom: 24px;