diff --git a/components/Logo.tsx b/components/Logo.tsx new file mode 100644 index 00000000..23c26a10 --- /dev/null +++ b/components/Logo.tsx @@ -0,0 +1,14 @@ +export default function Logo({ small }: { small?: boolean }) { + return ( +

+ + Calendso + +

+ ); +} diff --git a/components/Modal.tsx b/components/Modal.tsx index 658bf706..a2f6ab70 100644 --- a/components/Modal.tsx +++ b/components/Modal.tsx @@ -1,66 +1,63 @@ -import { Fragment, useState } from 'react' -import { Dialog, Transition } from '@headlessui/react' -import { CheckIcon } from '@heroicons/react/outline' +import { Fragment } from "react"; +import { Dialog, Transition } from "@headlessui/react"; +import { CheckIcon } from "@heroicons/react/outline"; export default function Modal(props) { - return ( - - -
- - - + return ( + + +
+ + + - {/* This element is to trick the browser into centering the modal contents. */} - - -
-
-
-
-
- - {props.heading} - -
-

- {props.description} -

-
-
-
-
- -
-
- + {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+
+
-
- - ) -} \ No newline at end of file +
+ + {props.heading} + +
+

{props.description}

+
+
+
+
+ +
+ + + + + + ); +} diff --git a/components/Settings.tsx b/components/Settings.tsx index 1969c1ff..d175a563 100644 --- a/components/Settings.tsx +++ b/components/Settings.tsx @@ -1,87 +1,70 @@ -import ActiveLink from '../components/ActiveLink'; -import {CodeIcon, CreditCardIcon, KeyIcon, UserCircleIcon, UserGroupIcon} from '@heroicons/react/outline'; +import Link from "next/link"; +import { CodeIcon, CreditCardIcon, KeyIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid"; +import { useRouter } from "next/router"; + +function classNames(...classes) { + return classes.filter(Boolean).join(" "); +} export default function SettingsShell(props) { - return ( -
-
-
-
-
- - - {props.children} -
-
-
-
-
- ); + return ( +
+
+ +
+
{props.children}
+
+ ); } diff --git a/components/Shell.tsx b/components/Shell.tsx index beafc8ed..914f1fc6 100644 --- a/components/Shell.tsx +++ b/components/Shell.tsx @@ -1,277 +1,332 @@ import Link from "next/link"; -import { useEffect, useState } from "react"; +import React, { Fragment, useEffect } from "react"; import { useRouter } from "next/router"; -import { signOut, useSession } from "next-auth/client"; -import { MenuIcon, XIcon } from "@heroicons/react/outline"; +import { useSession } from "next-auth/client"; +import { Menu, Transition } from "@headlessui/react"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../lib/telemetry"; +import { SelectorIcon } from "@heroicons/react/outline"; +import { + CalendarIcon, + ChatAltIcon, + ClockIcon, + CogIcon, + ExternalLinkIcon, + LinkIcon, + LogoutIcon, + PuzzleIcon, +} from "@heroicons/react/solid"; +import Logo from "./Logo"; + +function classNames(...classes) { + return classes.filter(Boolean).join(" "); +} export default function Shell(props) { const router = useRouter(); const [session, loading] = useSession(); - const [profileDropdownExpanded, setProfileDropdownExpanded] = useState(false); - const [mobileMenuExpanded, setMobileMenuExpanded] = useState(false); const telemetry = useTelemetry(); + const navigation = [ + { + name: "Event Types", + href: "/event-types", + icon: LinkIcon, + current: router.pathname.startsWith("/event-types"), + }, + { + name: "Bookings", + href: "/bookings", + icon: ClockIcon, + current: router.pathname.startsWith("/bookings"), + }, + { + name: "Availability", + href: "/availability", + icon: CalendarIcon, + current: router.pathname.startsWith("/availability"), + }, + { + name: "Integrations", + href: "/integrations", + icon: PuzzleIcon, + current: router.pathname.startsWith("/integrations"), + }, + { + name: "Settings", + href: "/settings/profile", + icon: CogIcon, + current: router.pathname.startsWith("/settings"), + }, + ]; + useEffect(() => { telemetry.withJitsu((jitsu) => { return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.pathname)); }); }, [telemetry]); - const toggleProfileDropdown = () => { - setProfileDropdownExpanded(!profileDropdownExpanded); - }; - - const toggleMobileMenu = () => { - setMobileMenuExpanded(!mobileMenuExpanded); - }; - - const logoutHandler = () => { - signOut({ redirect: false }).then(() => router.push("/auth/logout")); - }; - if (!loading && !session) { router.replace("/auth/login"); } return session ? ( -
-
- +
+
+
- )} - -
-
-

{props.heading}

-
+
+
+ {/* show top navigation for md and smaller (tablet and phones) */} + -
-
{props.children}
-
+
+
+
+
+

{props.heading}

+

{props.subtitle}

+
+
{props.CTA}
+
+
{props.children}
+ + {/* show bottom navigation for md and smaller (tablet and phones) */} + + + {/* add padding to content for mobile navigation*/} +
+
+
+
) : null; } + +function UserDropdown({ session, small, bottom }: { session: any; small?: boolean; bottom?: boolean }) { + return ( + + {({ open }) => ( + <> +
+ + + + + {!small && ( + + {session.user.name} + + {session.user.username} + + + )} + + {!small && ( + + +
+ + +
+ + View public page + +
+
+ + {({ active }) => ( + + + + + + + + + + Join our Slack + + )} + + + {({ active }) => ( + + + )} + +
+
+ + {({ active }) => ( + + + + + )} + +
+ + + + )} + + ); +} diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx index dc51f486..52023e79 100644 --- a/components/booking/TimeOptions.tsx +++ b/components/booking/TimeOptions.tsx @@ -41,7 +41,7 @@ const TimeOptions = (props) => { onChange={setIs24hClock} className={classNames( is24hClock ? "bg-blue-600" : "dark:bg-gray-600 bg-gray-200", - "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" + "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black" )}> Use setting { id="timeZone" value={selectedTimeZone} onChange={(tz) => setSelectedTimeZone(tz.value)} - className="mb-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" + className="mb-2 shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md" /> ) diff --git a/components/team/EditTeamModal.tsx b/components/team/EditTeamModal.tsx index f32e21a1..28312329 100644 --- a/components/team/EditTeamModal.tsx +++ b/components/team/EditTeamModal.tsx @@ -1,105 +1,129 @@ -import {useEffect, useState} from "react"; -import {UsersIcon,UserRemoveIcon} from "@heroicons/react/outline"; -import {useSession} from "next-auth/client"; +import { useEffect, useState } from "react"; +import { UserRemoveIcon, UsersIcon } from "@heroicons/react/outline"; +import { useSession } from "next-auth/client"; export default function EditTeamModal(props) { + const [session] = useSession(); + const [members, setMembers] = useState([]); + const [checkedDisbandTeam, setCheckedDisbandTeam] = useState(false); - const [ session, loading ] = useSession(); - const [ members, setMembers ] = useState([]); - const [ checkedDisbandTeam, setCheckedDisbandTeam ] = useState(false); + const loadMembers = () => + fetch("/api/teams/" + props.team.id + "/membership") + .then((res: any) => res.json()) + .then((data) => setMembers(data.members)); - const loadMembers = () => fetch('/api/teams/' + props.team.id + '/membership') - .then( (res: any) => res.json() ).then( (data) => setMembers(data.members) ); - - useEffect( () => { + useEffect(() => { loadMembers(); }, []); const deleteTeam = (e) => { e.preventDefault(); - return fetch('/api/teams/' + props.team.id, { - method: 'DELETE', + return fetch("/api/teams/" + props.team.id, { + method: "DELETE", }).then(props.onExit); - } + }; const removeMember = (member) => { - return fetch('/api/teams/' + props.team.id + '/membership', { - method: 'DELETE', + return fetch("/api/teams/" + props.team.id + "/membership", { + method: "DELETE", body: JSON.stringify({ userId: member.id }), headers: { - 'Content-Type': 'application/json' - } + "Content-Type": "application/json", + }, }).then(loadMembers); - } + }; - return (
-
- + return ( +
+
+ - + -
-
-
- +
+
+
+ +
+
+ +
+

Manage and delete your team.

+
+
-
- +
-

- Manage and delete your team. -

+
+ {members.length > 0 && ( +
+
+

Members

+
+ + + {members.map((member) => ( + + + + + + ))} + +
+ {member.name} {member.name && "(" + member.email + ")"} + {!member.name && member.email} + {member.role.toLowerCase()} + {member.email !== session.user.email && ( + + )} +
+
+ )} +
+
+

Tick the box to disband this team.

+ +
-
-
- -
-
- {members.length > 0 &&
-
-

Members

-
- - - {members.map( (member) => - - - - )} - -
{member.name} {member.name && '(' + member.email + ')' }{!member.name && member.email}{member.role.toLowerCase()} - {member.email !== session.user.email && - - } -
-
} -
-
-

Tick the box to disband this team.

- -
-
-
- {/*!checkedDisbandTeam && */} - {checkedDisbandTeam && } - -
- + {checkedDisbandTeam && ( + + )} + +
+ +
-
); -} \ No newline at end of file + ); +} diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx index 2e9a8261..45f226a9 100644 --- a/components/team/MemberInvitationModal.tsx +++ b/components/team/MemberInvitationModal.tsx @@ -2,11 +2,9 @@ import { UsersIcon } from "@heroicons/react/outline"; import { useState } from "react"; export default function MemberInvitationModal(props) { - - const [ errorMessage, setErrorMessage ] = useState(''); + const [errorMessage, setErrorMessage] = useState(""); const handleError = async (res) => { - const responseData = await res.json(); if (res.ok === false) { @@ -18,80 +16,115 @@ export default function MemberInvitationModal(props) { }; const inviteMember = (e) => { - e.preventDefault(); const payload = { - role: e.target.elements['role'].value, - usernameOrEmail: e.target.elements['inviteUser'].value, - sendEmailInvitation: e.target.elements['sendInviteEmail'].checked, - } + role: e.target.elements["role"].value, + usernameOrEmail: e.target.elements["inviteUser"].value, + sendEmailInvitation: e.target.elements["sendInviteEmail"].checked, + }; - return fetch('/api/teams/' + props.team.id + '/invite', { - method: 'POST', + return fetch("/api/teams/" + props.team.id + "/invite", { + method: "POST", body: JSON.stringify(payload), headers: { - 'Content-Type': 'application/json' - } - }).then(handleError).then(props.onExit).catch( (e) => { - // do nothing. - }); + "Content-Type": "application/json", + }, + }) + .then(handleError) + .then(props.onExit) + .catch(() => { + // do nothing. + }); }; - return (
-
- + return ( +
+
+ - + -
-
-
- +
+
+
+ +
+
+ +
+

Invite someone to your team.

+
+
-
- +
-

- Invite someone to your team. +

+ + +
+
+ + +
+
+
+ +
+
+ +
+
+
+ {errorMessage && ( +

+ Error: + {errorMessage}

+ )} +
+ +
-
+
-
-
-
- - -
-
- - -
-
- -
-
- {errorMessage &&

Error: {errorMessage}

} -
- - -
-
-
); -} \ No newline at end of file + ); +} diff --git a/components/team/TeamList.tsx b/components/team/TeamList.tsx index 7f04d322..abeaf733 100644 --- a/components/team/TeamList.tsx +++ b/components/team/TeamList.tsx @@ -1,42 +1,49 @@ -import {useEffect, useState} from "react"; +import { useState } from "react"; import TeamListItem from "./TeamListItem"; import EditTeamModal from "./EditTeamModal"; import MemberInvitationModal from "./MemberInvitationModal"; export default function TeamList(props) { - - const [ showMemberInvitationModal, setShowMemberInvitationModal ] = useState(false); - const [ showEditTeamModal, setShowEditTeamModal ] = useState(false); - const [ team, setTeam ] = useState(null); + const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false); + const [showEditTeamModal, setShowEditTeamModal] = useState(false); + const [team, setTeam] = useState(null); const selectAction = (action: string, team: any) => { setTeam(team); switch (action) { - case 'edit': + case "edit": setShowEditTeamModal(true); break; - case 'invite': + case "invite": setShowMemberInvitationModal(true); break; } }; - return (
-
    - {props.teams.map( - (team: any) => selectAction(action, team) - }> + return ( +
    +
      + {props.teams.map((team: any) => ( + selectAction(action, team)}> + ))} +
    + {showEditTeamModal && ( + { + props.onChange(); + setShowEditTeamModal(false); + }}> )} -
- {showEditTeamModal && { - props.onChange(); - setShowEditTeamModal(false); - }}>} - {showMemberInvitationModal && - setShowMemberInvitationModal(false)}> - } -
); -} \ No newline at end of file + {showMemberInvitationModal && ( + setShowMemberInvitationModal(false)}> + )} +
+ ); +} diff --git a/components/team/TeamListItem.tsx b/components/team/TeamListItem.tsx index a7413d72..ebfac5fe 100644 --- a/components/team/TeamListItem.tsx +++ b/components/team/TeamListItem.tsx @@ -1,61 +1,89 @@ -import {CogIcon, TrashIcon, UserAddIcon, UsersIcon} from "@heroicons/react/outline"; +import { CogIcon, TrashIcon, UsersIcon } from "@heroicons/react/outline"; import Dropdown from "../ui/Dropdown"; -import {useState} from "react"; +import { useState } from "react"; export default function TeamListItem(props) { - - const [ team, setTeam ] = useState(props.team); + const [team, setTeam] = useState(props.team); const acceptInvite = () => invitationResponse(true); const declineInvite = () => invitationResponse(false); - const invitationResponse = (accept: boolean) => fetch('/api/user/membership', { - method: accept ? 'PATCH' : 'DELETE', - body: JSON.stringify({ teamId: props.team.id }), - headers: { - 'Content-Type': 'application/json' - } - }).then( () => { - // success - setTeam(null); - props.onChange(); - }); + const invitationResponse = (accept: boolean) => + fetch("/api/user/membership", { + method: accept ? "PATCH" : "DELETE", + body: JSON.stringify({ teamId: props.team.id }), + headers: { + "Content-Type": "application/json", + }, + }).then(() => { + // success + setTeam(null); + props.onChange(); + }); - return (team &&
  • -
    -
    - -
    - {props.team.name} - {props.team.role.toLowerCase()} + return ( + team && ( +
  • +
    +
    + +
    + {props.team.name} + + {props.team.role.toLowerCase()} + +
    +
    + {props.team.role === "INVITEE" && ( +
    + + +
    + )} + {props.team.role === "MEMBER" && ( +
    + +
    + )} + {props.team.role === "OWNER" && ( +
    + + +
      +
    • + +
      • +
    • + +
      • +
    +     +
    + )}
    -
    • - {props.team.role === 'INVITEE' &&
    - - -
    } - {props.team.role === 'MEMBER' &&
    - -
    } - {props.team.role === 'OWNER' && } -
    - {/*{props.team.userRole === 'Owner' && expanded &&
    + {/*{props.team.userRole === 'Owner' && expanded &&
    {props.team.members.length > 0 &&

    Members

    @@ -64,14 +92,16 @@ export default function TeamListItem(props) { )}
    Alex van Andel ({ member.email }) Owner - +
    } - - + +
    }*/} - ); -} \ No newline at end of file + + ) + ); +} diff --git a/components/ui/Scheduler.tsx b/components/ui/Scheduler.tsx index fcb4688c..a10fe998 100644 --- a/components/ui/Scheduler.tsx +++ b/components/ui/Scheduler.tsx @@ -69,10 +69,13 @@ export const Scheduler = ({ }; const OpeningHours = ({ idx, item }) => ( -
  • -
    +
  • +
    (item.days = selected)} /> -
    diff --git a/components/ui/UsernameInput.tsx b/components/ui/UsernameInput.tsx index bc611937..61aa858e 100644 --- a/components/ui/UsernameInput.tsx +++ b/components/ui/UsernameInput.tsx @@ -7,7 +7,7 @@ const UsernameInput = React.forwardRef((props, ref) => ( Username
    - + {typeof window !== "undefined" && window.location.hostname}/ ( autoComplete="username" required {...props} - className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300 lowercase" + className="focus:ring-black focus:border-black flex-grow block w-full min-w-0 rounded-none rounded-r-sm sm:text-sm border-gray-300 lowercase" />
    • diff --git a/components/ui/WeekdaySelect.tsx b/components/ui/WeekdaySelect.tsx index a9f371d8..24ee655e 100644 --- a/components/ui/WeekdaySelect.tsx +++ b/components/ui/WeekdaySelect.tsx @@ -25,9 +25,9 @@ export const WeekdaySelect = (props) => { @@ -107,7 +106,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) { @@ -151,7 +150,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) { type="password" autoComplete="password" required - className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" + className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-black focus:border-black sm:text-sm" />
    @@ -160,7 +159,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
    @@ -113,7 +113,7 @@ export default function Page({ csrfToken }) { diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx index 76514aa4..bf83b392 100644 --- a/pages/auth/login.tsx +++ b/pages/auth/login.tsx @@ -4,21 +4,22 @@ import { getCsrfToken } from "next-auth/client"; export default function Login({ csrfToken }) { return ( -
    +
    Login
    -

    Sign in to your account

    + Calendso Logo +

    Sign in to your account

    -
    +
    -
    - +
    +
    + +
    +
    + + Forgot? + +
    +
    @@ -54,19 +62,18 @@ export default function Login({ csrfToken }) {
    - - -
    +
    + Don't have an account? {/* replace this with your account creation flow */} + + Create an account + +
    ); diff --git a/pages/auth/logout.tsx b/pages/auth/logout.tsx index ed3bf12c..7597d9af 100644 --- a/pages/auth/logout.tsx +++ b/pages/auth/logout.tsx @@ -33,7 +33,7 @@ export default function Logout() {
    - + Go back to the login page diff --git a/pages/auth/signup.tsx b/pages/auth/signup.tsx index 7527e45c..c446fc85 100644 --- a/pages/auth/signup.tsx +++ b/pages/auth/signup.tsx @@ -1,27 +1,25 @@ -import Head from 'next/head'; -import {useRouter} from "next/router"; -import {signIn} from 'next-auth/client' +import Head from "next/head"; +import { useRouter } from "next/router"; +import { signIn } from "next-auth/client"; import ErrorAlert from "../../components/ui/alerts/Error"; -import {useState} from "react"; -import {UsernameInput} from "../../components/ui/UsernameInput"; +import { useState } from "react"; +import { UsernameInput } from "../../components/ui/UsernameInput"; import prisma from "../../lib/prisma"; export default function Signup(props) { - const router = useRouter(); - const [ hasErrors, setHasErrors ] = useState(false); - const [ errorMessage, setErrorMessage ] = useState(''); + const [hasErrors, setHasErrors] = useState(false); + const [errorMessage, setErrorMessage] = useState(""); const handleErrors = async (resp) => { if (!resp.ok) { const err = await resp.json(); throw new Error(err.message); } - } + }; const signUp = (e) => { - e.preventDefault(); if (e.target.password.value !== e.target.passwordcheck.value) { @@ -31,39 +29,37 @@ export default function Signup(props) { const email: string = e.target.email.value; const password: string = e.target.password.value; - fetch('/api/auth/signup', - { - body: JSON.stringify({ - username: e.target.username.value, - password, - email, - }), - headers: { - 'Content-Type': 'application/json', - }, - method: 'POST' - } - ) + fetch("/api/auth/signup", { + body: JSON.stringify({ + username: e.target.username.value, + password, + email, + }), + headers: { + "Content-Type": "application/json", + }, + method: "POST", + }) .then(handleErrors) - .then( - () => signIn('Calendso', { callbackUrl: (router.query.callbackUrl || '') as string }) - ) - .catch( (err) => { + .then(() => signIn("Calendso", { callbackUrl: (router.query.callbackUrl || "") as string })) + .catch((err) => { setHasErrors(true); setErrorMessage(err.message); }); }; return ( -
    +
    Sign up
    -

    - Create your account -

    +

    Create your account

    @@ -74,23 +70,60 @@ export default function Signup(props) {
    - - + +
    - - + +
    - - + +
    @@ -103,39 +136,41 @@ export async function getServerSideProps(ctx) { if (!ctx.query.token) { return { notFound: true, - } + }; } const verificationRequest = await prisma.verificationRequest.findUnique({ where: { token: ctx.query.token, - } + }, }); // for now, disable if no verificationRequestToken given or token expired - if ( ! verificationRequest || verificationRequest.expires < new Date() ) { + if (!verificationRequest || verificationRequest.expires < new Date()) { return { notFound: true, - } + }; } const existingUser = await prisma.user.findFirst({ where: { AND: [ { - email: verificationRequest.identifier + email: verificationRequest.identifier, }, { emailVerified: { not: null, }, - } - ] - } + }, + ], + }, }); if (existingUser) { - return { redirect: { permanent: false, destination: '/auth/login?callbackUrl=' + ctx.query.callbackUrl } }; + return { + redirect: { permanent: false, destination: "/auth/login?callbackUrl=" + ctx.query.callbackUrl }, + }; } return { props: { email: verificationRequest.identifier } }; -} \ No newline at end of file +} diff --git a/pages/availability/event/[type].tsx b/pages/availability/event/[type].tsx index 1fec9038..0aad0665 100644 --- a/pages/availability/event/[type].tsx +++ b/pages/availability/event/[type].tsx @@ -316,7 +316,7 @@ export default function EventTypePage({ name="address" id="address" required - className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" + className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" defaultValue={locations.find((location) => location.type === LocationType.InPerson)?.address} />
    @@ -390,7 +390,7 @@ export default function EventTypePage({ name="title" id="title" required - className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" + className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" defaultValue={eventType.title} /> @@ -411,7 +411,7 @@ export default function EventTypePage({ name="slug" id="slug" required - className="flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" + className="flex-1 block w-full focus:ring-black focus:border-black min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" defaultValue={eventType.slug} />
    @@ -429,7 +429,8 @@ export default function EventTypePage({ id="location" options={locationOptions} isSearchable="false" - className="flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" + classNamePrefix="react-select" + className="react-select-container rounded-sm border border-gray-300 flex-1 block w-full focus:ring-primary-500 focus:border-primary-500 min-w-0 sm:text-sm" onChange={(e) => openLocationModal(e.value)} />
    @@ -551,7 +552,7 @@ export default function EventTypePage({ ref={descriptionRef} name="description" id="description" - className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" + className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" placeholder="A quick video meeting." defaultValue={eventType.description}> @@ -566,7 +567,7 @@ export default function EventTypePage({ type="text" name="title" id="title" - className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" + className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Meeting with {USER}" defaultValue={eventType.eventName} /> @@ -626,7 +627,7 @@ export default function EventTypePage({ id="ishidden" name="ishidden" type="checkbox" - className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" + className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded" defaultChecked={eventType.hidden} /> @@ -648,7 +649,7 @@ export default function EventTypePage({ id="requiresConfirmation" name="requiresConfirmation" type="checkbox" - className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" + className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded" defaultChecked={eventType.requiresConfirmation} /> @@ -677,7 +678,7 @@ export default function EventTypePage({ name="minimumAdvance" id="minimumAdvance" required - className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" + className="focus:ring-black focus:border-black block w-full pr-20 sm:text-sm border-gray-300 rounded-md" defaultValue={eventType.minimumBookingNotice} />
    @@ -734,7 +735,7 @@ export default function EventTypePage({ type="text" name="periodDays" id="" - className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-12 sm:text-sm border-gray-300 rounded-md" + className="shadow-sm focus:ring-black focus:border-indigo-500 block w-12 sm:text-sm border-gray-300 rounded-md" placeholder="30" defaultValue={eventType.periodDays || 30} /> @@ -742,7 +743,7 @@ export default function EventTypePage({ ref={periodDaysTypeRef} id="" name="periodDaysType" - className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" + className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-black focus:border-indigo-500 sm:text-sm rounded-md" defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}> @@ -793,7 +794,7 @@ export default function EventTypePage({ name="length" id="length" required - className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" + className="focus:ring-black focus:border-black block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" defaultValue={eventType.length} /> @@ -863,7 +864,7 @@ export default function EventTypePage({
    - +