fixed layout for react-select
This commit is contained in:
Peer Richelsen
parent
64961cada1
commit
bd7443017a
20 changed files with 154 additions and 117 deletions
|
|
@ -123,7 +123,7 @@ export default function Shell(props) {
|
|||
</a>
|
||||
</Link>
|
||||
<div className="flex gap-3 items-center self-center">
|
||||
<button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
|
||||
<span className="sr-only">View notifications</span>
|
||||
<Link href="/settings/profile">
|
||||
<a>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
)}>
|
||||
<span className="sr-only">Use setting</span>
|
||||
<span
|
||||
|
|
@ -62,7 +62,7 @@ const TimeOptions = (props) => {
|
|||
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"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export default function EditTeamModal(props) {
|
|||
<div className="mb-4 border border-red-400 rounded p-2 px-4">
|
||||
<p className="block text-sm font-medium text-gray-700">Tick the box to disband this team.</p>
|
||||
<label className="mt-1">
|
||||
<input type="checkbox" onChange={(e) => setCheckedDisbandTeam(e.target.checked)} className="shadow-sm mr-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md" />
|
||||
<input type="checkbox" onChange={(e) => setCheckedDisbandTeam(e.target.checked)} className="shadow-sm mr-2 focus:ring-black focus:border-black sm:text-sm border-gray-300 rounded-md" />
|
||||
Disband this team
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,21 +62,21 @@ export default function MemberInvitationModal(props) {
|
|||
<div>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="inviteUser" className="block text-sm font-medium text-gray-700">Email or Username</label>
|
||||
<input type="text" name="inviteUser" id="inviteUser" placeholder="email@example.com" required className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
|
||||
<input type="text" name="inviteUser" id="inviteUser" placeholder="email@example.com" required className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm" />
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block tracking-wide text-gray-700 text-sm font-medium mb-2"
|
||||
htmlFor="role">
|
||||
Role
|
||||
</label>
|
||||
<select id="role" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
|
||||
<select id="role" className="shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
|
||||
<option value="MEMBER">Member</option>
|
||||
<option value="OWNER">Owner</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="mt-1 text-gray-600">
|
||||
<input type="checkbox" name="sendInviteEmail" defaultChecked id="sendInviteEmail" className="shadow-sm mr-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md" />
|
||||
<input type="checkbox" name="sendInviteEmail" defaultChecked id="sendInviteEmail" className="shadow-sm mr-2 focus:ring-black focus:border-black sm:text-sm border-gray-300 rounded-md" />
|
||||
Send an invite email
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -69,10 +69,13 @@ export const Scheduler = ({
|
|||
};
|
||||
|
||||
const OpeningHours = ({ idx, item }) => (
|
||||
<li className="py-2 flex justify-between border-t">
|
||||
<div className="flex flex-col space-y-4 lg:inline-flex ml-2 ">
|
||||
<li className="py-2 flex justify-between border-b">
|
||||
<div className="flex flex-col space-y-4 lg:inline-flex">
|
||||
<WeekdaySelect defaultValue={item.days} onSelect={(selected: number[]) => (item.days = selected)} />
|
||||
<button className="ml-2 text-sm px-2" type="button" onClick={() => setEditSchedule(idx)}>
|
||||
<button
|
||||
className="text-sm bg-neutral-100 rounded-sm py-2 px-3"
|
||||
type="button"
|
||||
onClick={() => setEditSchedule(idx)}>
|
||||
{dayjs()
|
||||
.startOf("day")
|
||||
.add(item.startTime, "minutes")
|
||||
|
|
@ -106,7 +109,7 @@ export const Scheduler = ({
|
|||
id="timeZone"
|
||||
value={selectedTimeZone}
|
||||
onChange={(tz) => setTimeZone(tz.value)}
|
||||
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -115,8 +118,7 @@ export const Scheduler = ({
|
|||
<OpeningHours key={idx} idx={idx} item={item} />
|
||||
))}
|
||||
</ul>
|
||||
<hr />
|
||||
<button type="button" onClick={addNewSchedule} className="btn-white btn-sm m-2">
|
||||
<button type="button" onClick={addNewSchedule} className="btn-white btn-sm mt-2">
|
||||
Add another
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const UsernameInput = React.forwardRef((props, ref) => (
|
|||
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-sm 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@ export const WeekdaySelect = (props) => {
|
|||
<button
|
||||
key={idx}
|
||||
onClick={(e) => toggleDay(e, idx)}
|
||||
style={{ marginLeft: "-2px" }}
|
||||
className={`
|
||||
active focus:outline-none border-2 border-blue-500 px-2 py-1 rounded
|
||||
w-10 h-10
|
||||
bg-black text-white focus:outline-none px-3 py-1 rounded
|
||||
${activeDays[idx + 1] ? "rounded-r-none" : ""}
|
||||
${activeDays[idx - 1] ? "rounded-l-none" : ""}
|
||||
${idx === 0 ? "rounded-l" : ""}
|
||||
|
|
@ -40,7 +40,7 @@ export const WeekdaySelect = (props) => {
|
|||
key={idx}
|
||||
onClick={(e) => toggleDay(e, idx)}
|
||||
style={{ marginTop: "1px", marginBottom: "1px" }}
|
||||
className={`border focus:outline-none px-2 py-1 rounded-none ${
|
||||
className={`w-10 h-10 bg-gray-50 focus:outline-none px-3 py-1 rounded-none ${
|
||||
idx === 0 ? "rounded-l" : "border-l-0"
|
||||
} ${idx === days.length - 1 ? "rounded-r" : ""}`}>
|
||||
{day}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export default function SetTimesModal(props) {
|
|||
maxLength="2"
|
||||
name="hours"
|
||||
id="startHours"
|
||||
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="9"
|
||||
defaultValue={startHours}
|
||||
/>
|
||||
|
|
@ -86,7 +86,7 @@ export default function SetTimesModal(props) {
|
|||
maxLength="2"
|
||||
name="minutes"
|
||||
id="startMinutes"
|
||||
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="30"
|
||||
defaultValue={startMinutes}
|
||||
/>
|
||||
|
|
@ -106,7 +106,7 @@ export default function SetTimesModal(props) {
|
|||
maxLength="2"
|
||||
name="hours"
|
||||
id="endHours"
|
||||
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="17"
|
||||
defaultValue={endHours}
|
||||
/>
|
||||
|
|
@ -125,7 +125,7 @@ export default function SetTimesModal(props) {
|
|||
step="15"
|
||||
name="minutes"
|
||||
id="endMinutes"
|
||||
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="30"
|
||||
defaultValue={endMinutes}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@ export default function Book(props: any): JSX.Element {
|
|||
name="name"
|
||||
id="name"
|
||||
required
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="John Doe"
|
||||
defaultValue={props.booking ? props.booking.attendees[0].name : ""}
|
||||
/>
|
||||
|
|
@ -210,7 +210,7 @@ export default function Book(props: any): JSX.Element {
|
|||
name="email"
|
||||
id="email"
|
||||
required
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="you@example.com"
|
||||
defaultValue={props.booking ? props.booking.attendees[0].email : ""}
|
||||
/>
|
||||
|
|
@ -248,7 +248,7 @@ export default function Book(props: any): JSX.Element {
|
|||
placeholder="Enter phone number"
|
||||
id="phone"
|
||||
required
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
onChange={() => {
|
||||
/* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
|
||||
}}
|
||||
|
|
@ -274,7 +274,7 @@ export default function Book(props: any): JSX.Element {
|
|||
id={"custom_" + input.id}
|
||||
required={input.required}
|
||||
rows={3}
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder=""
|
||||
/>
|
||||
)}
|
||||
|
|
@ -284,7 +284,7 @@ export default function Book(props: any): JSX.Element {
|
|||
name={"custom_" + input.id}
|
||||
id={"custom_" + input.id}
|
||||
required={input.required}
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder=""
|
||||
/>
|
||||
)}
|
||||
|
|
@ -294,7 +294,7 @@ export default function Book(props: any): JSX.Element {
|
|||
name={"custom_" + input.id}
|
||||
id={"custom_" + input.id}
|
||||
required={input.required}
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder=""
|
||||
/>
|
||||
)}
|
||||
|
|
@ -304,7 +304,7 @@ export default function Book(props: any): JSX.Element {
|
|||
type="checkbox"
|
||||
name={"custom_" + input.id}
|
||||
id={"custom_" + input.id}
|
||||
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
|
||||
className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
|
||||
placeholder=""
|
||||
/>
|
||||
<label
|
||||
|
|
@ -326,7 +326,7 @@ export default function Book(props: any): JSX.Element {
|
|||
name="notes"
|
||||
id="notes"
|
||||
rows={3}
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="Please share anything that will help prepare for our meeting."
|
||||
defaultValue={props.booking ? props.booking.description : ""}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
|
|||
<Link href="/auth/login">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
|
||||
Login
|
||||
</button>
|
||||
</Link>
|
||||
|
|
@ -107,7 +107,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
|
|||
<Link href="/auth/forgot-password">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
|
||||
Try Again
|
||||
</button>
|
||||
</Link>
|
||||
|
|
@ -151,7 +151,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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -160,7 +160,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
|
|||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
|
||||
className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
|
||||
loading ? "cursor-not-allowed" : ""
|
||||
}`}>
|
||||
{loading && (
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export default function Page({ csrfToken }) {
|
|||
autoComplete="email"
|
||||
placeholder="john.doe@example.com"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,7 +113,7 @@ export default function Page({ csrfToken }) {
|
|||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
|
||||
className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
|
||||
loading ? "cursor-not-allowed" : ""
|
||||
}`}>
|
||||
{loading && (
|
||||
|
|
@ -142,7 +142,7 @@ export default function Page({ csrfToken }) {
|
|||
<Link href="/auth/login">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
|
||||
Login
|
||||
</button>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export default function Login({ csrfToken }) {
|
|||
<div className="space-y-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full 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-blue-500">
|
||||
className="w-full 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-black">
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function Logout() {
|
|||
</div>
|
||||
<div className="mt-5 sm:mt-6">
|
||||
<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-blue-500 sm:text-sm">
|
||||
<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">
|
||||
Go back to the login page
|
||||
</a>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -75,20 +75,20 @@ export default function Signup(props) {
|
|||
</div>
|
||||
<div className="mb-2">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
|
||||
<input type="email" name="email" id="email" placeholder="jdoe@example.com" disabled={!!props.email} readOnly={!!props.email} value={props.email} className="bg-gray-100 mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
|
||||
<input type="email" name="email" id="email" placeholder="jdoe@example.com" disabled={!!props.email} readOnly={!!props.email} value={props.email} className="bg-gray-100 mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm" />
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
|
||||
<input type="password" name="password" id="password" required placeholder="•••••••••••••" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
|
||||
<input type="password" name="password" id="password" required placeholder="•••••••••••••" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="passwordcheck" className="block text-sm font-medium text-gray-700">Confirm password</label>
|
||||
<input type="password" name="passwordcheck" id="passwordcheck" required placeholder="•••••••••••••" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
|
||||
<input type="password" name="passwordcheck" id="passwordcheck" required placeholder="•••••••••••••" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 sm:mt-4 flex">
|
||||
<input type="submit" value="Create Account"
|
||||
className="btn btn-primary w-7/12 mr-2 inline-flex justify-center rounded-md border border-transparent cursor-pointer 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-blue-500 sm:text-sm" />
|
||||
className="btn btn-primary w-7/12 mr-2 inline-flex justify-center rounded-md border border-transparent cursor-pointer 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 onClick={() => signIn('Calendso', { callbackUrl: (router.query.callbackUrl || '') as string })}
|
||||
className="w-5/12 inline-flex justify-center text-sm text-gray-500 font-medium border px-4 py-2 rounded btn cursor-pointer">Login instead</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -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}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -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)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -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}></textarea>
|
||||
</div>
|
||||
|
|
@ -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}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -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}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -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}
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm">
|
||||
|
|
@ -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"}>
|
||||
<option value="1">calendar days</option>
|
||||
<option value="0">business days</option>
|
||||
|
|
@ -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}
|
||||
/>
|
||||
|
|
@ -877,7 +878,7 @@ export default function EventTypePage({
|
|||
defaultValue={selectedLocation}
|
||||
options={locationOptions}
|
||||
isSearchable="false"
|
||||
className="mb-2 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="mb-2 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"
|
||||
onChange={setSelectedLocation}
|
||||
/>
|
||||
<LocationOptions />
|
||||
|
|
@ -937,7 +938,7 @@ export default function EventTypePage({
|
|||
options={inputOptions}
|
||||
isSearchable="false"
|
||||
required
|
||||
className="mb-2 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 mt-1"
|
||||
className="react-select-container border rounded-sm border-gray-300 mb-2 flex-1 block w-full focus:ring-black focus:border-black min-w-0 sm:text-sm mt-1"
|
||||
onChange={setSelectedInputOption}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -951,7 +952,7 @@ export default function EventTypePage({
|
|||
name="label"
|
||||
id="label"
|
||||
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={selectedCustomInput?.label}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -961,7 +962,7 @@ export default function EventTypePage({
|
|||
id="required"
|
||||
name="required"
|
||||
type="checkbox"
|
||||
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
|
||||
className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
|
||||
defaultChecked={selectedCustomInput?.required ?? true}
|
||||
/>
|
||||
<label htmlFor="required" className="block text-sm font-medium text-gray-700">
|
||||
|
|
|
|||
|
|
@ -90,12 +90,12 @@ export default function Bookings({ bookings }) {
|
|||
<>
|
||||
<a
|
||||
href={window.location.href + "/../cancel/" + booking.uid}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-2">
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
|
||||
Cancel
|
||||
</a>
|
||||
<a
|
||||
href={window.location.href + "/../reschedule/" + booking.uid}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-2">
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
|
||||
Reschedule
|
||||
</a>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { getSession, useSession } from "next-auth/client";
|
|||
import { Scheduler } from "@components/ui/Scheduler";
|
||||
import { Disclosure } from "@headlessui/react";
|
||||
|
||||
import { PhoneIcon, PlusCircleIcon, XIcon } from "@heroicons/react/outline";
|
||||
import { PhoneIcon, XIcon } from "@heroicons/react/outline";
|
||||
import { EventTypeCustomInput, EventTypeCustomInputType } from "@lib/eventTypeInput";
|
||||
import {
|
||||
LocationMarkerIcon,
|
||||
|
|
@ -333,7 +333,7 @@ export default function EventTypePage({
|
|||
name="address"
|
||||
id="address"
|
||||
required
|
||||
className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
defaultValue={locations.find((location) => location.type === LocationType.InPerson)?.address}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -390,13 +390,8 @@ export default function EventTypePage({
|
|||
<title>{eventType.title} | Event Type | Calendso</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Shell heading={"Event Type - " + eventType.title}>
|
||||
<div className="flex mb-8">
|
||||
<p className="text-sm text-neutral-500">
|
||||
{eventType.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-8 flex">
|
||||
<Shell heading={"Event Type: " + eventType.title} subtitle={eventType.description}>
|
||||
<div className="flex">
|
||||
<div className="w-10/12 mr-2">
|
||||
<div className="bg-white rounded-sm border border-neutral-200 p-8">
|
||||
<form onSubmit={updateEventTypeHandler} className="space-y-4">
|
||||
|
|
@ -414,7 +409,7 @@ export default function EventTypePage({
|
|||
name="title"
|
||||
id="title"
|
||||
required
|
||||
className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-neutral-300 rounded-sm"
|
||||
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}
|
||||
/>
|
||||
|
|
@ -438,7 +433,7 @@ export default function EventTypePage({
|
|||
name="slug"
|
||||
id="slug"
|
||||
required
|
||||
className="flex-1 block w-full focus:ring-secondary-500 focus:border-secondary-500 min-w-0 rounded-none rounded-r-sm sm:text-sm border-gray-300"
|
||||
className="flex-1 block w-full focus:ring-primary-500 focus:border-primary-500 min-w-0 rounded-none rounded-r-sm sm:text-sm border-gray-300"
|
||||
defaultValue={eventType.slug}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -454,13 +449,14 @@ export default function EventTypePage({
|
|||
<div className="w-3/4">
|
||||
{locations.length === 0 && (
|
||||
<div className="mt-1 mb-2">
|
||||
<div className="flex rounded-sm shadow-sm">
|
||||
<div className="flex">
|
||||
<Select
|
||||
name="location"
|
||||
id="location"
|
||||
options={locationOptions}
|
||||
isSearchable="false"
|
||||
className="flex-1 block w-full focus:ring-secondary-500 focus:border-secondary-500 min-w-0 rounded-none rounded-r-sm 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)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -547,7 +543,7 @@ export default function EventTypePage({
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => openLocationModal(location.type)}
|
||||
className="mr-2 text-sm text-secondary-600">
|
||||
className="mr-2 text-sm text-primary-600">
|
||||
Edit
|
||||
</button>
|
||||
<button onClick={() => removeLocation(location)}>
|
||||
|
|
@ -561,7 +557,7 @@ export default function EventTypePage({
|
|||
<li>
|
||||
<button
|
||||
type="button"
|
||||
className="sm:flex sm:items-start text-sm text-secondary-600"
|
||||
className="sm:flex sm:items-start text-sm text-primary-600"
|
||||
onClick={() => setShowLocationModal(true)}>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
<span className="font-medium">Add another location option</span>
|
||||
|
|
@ -587,7 +583,7 @@ export default function EventTypePage({
|
|||
name="length"
|
||||
id="length"
|
||||
required
|
||||
className="focus:ring-secondary-500 focus:border-secondary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
|
||||
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}
|
||||
/>
|
||||
|
|
@ -611,12 +607,11 @@ export default function EventTypePage({
|
|||
ref={descriptionRef}
|
||||
name="description"
|
||||
id="description"
|
||||
className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
placeholder="A quick video meeting."
|
||||
defaultValue={eventType.description}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="border-b border-neutral-200" />
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<>
|
||||
|
|
@ -640,7 +635,7 @@ export default function EventTypePage({
|
|||
type="text"
|
||||
name="title"
|
||||
id="title"
|
||||
className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
placeholder="Meeting with {USER}"
|
||||
defaultValue={eventType.eventName}
|
||||
/>
|
||||
|
|
@ -677,7 +672,7 @@ export default function EventTypePage({
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => openEditCustomModel(customInput)}
|
||||
className="mr-2 text-sm text-secondary-600">
|
||||
className="mr-2 text-sm text-primary-600">
|
||||
Edit
|
||||
</button>
|
||||
<button onClick={(e) => removeCustom(customInput, e)}>
|
||||
|
|
@ -715,7 +710,7 @@ export default function EventTypePage({
|
|||
id="ishidden"
|
||||
name="ishidden"
|
||||
type="checkbox"
|
||||
className="focus:ring-secondary-500 h-4 w-4 text-secondary-600 border-gray-300 rounded"
|
||||
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
|
||||
defaultChecked={eventType.hidden}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -744,7 +739,7 @@ export default function EventTypePage({
|
|||
id="requiresConfirmation"
|
||||
name="requiresConfirmation"
|
||||
type="checkbox"
|
||||
className="focus:ring-secondary-500 h-4 w-4 text-secondary-600 border-gray-300 rounded"
|
||||
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
|
||||
defaultChecked={eventType.requiresConfirmation}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -784,9 +779,9 @@ export default function EventTypePage({
|
|||
<span
|
||||
className={classnames(
|
||||
checked
|
||||
? "bg-secondary-600 border-transparent"
|
||||
? "bg-primary-600 border-transparent"
|
||||
: "bg-white border-gray-300",
|
||||
active ? "ring-2 ring-offset-2 ring-secondary-500" : "",
|
||||
active ? "ring-2 ring-offset-2 ring-primary-500" : "",
|
||||
"h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center"
|
||||
)}
|
||||
aria-hidden="true">
|
||||
|
|
@ -807,7 +802,7 @@ export default function EventTypePage({
|
|||
type="text"
|
||||
name="periodDays"
|
||||
id=""
|
||||
className="mr-2 shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-12 sm:text-sm border-gray-300 rounded-sm"
|
||||
className="mr-2 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-12 sm:text-sm border-gray-300 rounded-sm"
|
||||
placeholder="30"
|
||||
defaultValue={eventType.periodDays || 30}
|
||||
/>
|
||||
|
|
@ -815,7 +810,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-secondary-500 focus:border-secondary-500 sm:text-sm rounded-sm"
|
||||
className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-sm"
|
||||
defaultValue={
|
||||
eventType.periodCountCalendarDays ? "1" : "0"
|
||||
}>
|
||||
|
|
@ -877,13 +872,13 @@ export default function EventTypePage({
|
|||
</Disclosure>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<Link href="/event-types">
|
||||
<a className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-2">
|
||||
<a className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
|
||||
Cancel
|
||||
</a>
|
||||
</Link>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -939,7 +934,7 @@ export default function EventTypePage({
|
|||
<div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
|
||||
<div className="sm:flex sm:items-start mb-4">
|
||||
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<LocationMarkerIcon className="h-6 w-6 text-secondary-600" />
|
||||
<LocationMarkerIcon className="h-6 w-6 text-primary-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
|
||||
|
|
@ -953,7 +948,8 @@ export default function EventTypePage({
|
|||
defaultValue={selectedLocation}
|
||||
options={locationOptions}
|
||||
isSearchable="false"
|
||||
className="mb-2 flex-1 block w-full focus:ring-secondary-500 focus:border-secondary-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 my-4"
|
||||
onChange={setSelectedLocation}
|
||||
/>
|
||||
<LocationOptions />
|
||||
|
|
@ -989,7 +985,7 @@ export default function EventTypePage({
|
|||
<div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
|
||||
<div className="sm:flex sm:items-start mb-4">
|
||||
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<PlusIcon className="h-6 w-6 text-secondary-600" />
|
||||
<PlusIcon className="h-6 w-6 text-primary-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
|
||||
|
|
@ -1013,7 +1009,7 @@ export default function EventTypePage({
|
|||
options={inputOptions}
|
||||
isSearchable="false"
|
||||
required
|
||||
className="mb-2 flex-1 block w-full focus:ring-secondary-500 focus:border-secondary-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300 mt-1"
|
||||
className="mb-2 flex-1 block w-full focus:ring-primary-500 focus:border-primary-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300 mt-1"
|
||||
onChange={setSelectedInputOption}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1027,7 +1023,7 @@ export default function EventTypePage({
|
|||
name="label"
|
||||
id="label"
|
||||
required
|
||||
className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
defaultValue={selectedCustomInput?.label}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1037,7 +1033,7 @@ export default function EventTypePage({
|
|||
id="required"
|
||||
name="required"
|
||||
type="checkbox"
|
||||
className="focus:ring-secondary-500 h-4 w-4 text-secondary-600 border-gray-300 rounded mr-2"
|
||||
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded mr-2"
|
||||
defaultChecked={selectedCustomInput?.required ?? true}
|
||||
/>
|
||||
<label htmlFor="required" className="block text-sm font-medium text-gray-700">
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default function Embed(props) {
|
|||
<div className="mt-1">
|
||||
<textarea
|
||||
id="iframe"
|
||||
className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="h-32 shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
placeholder="Loading..."
|
||||
defaultValue={
|
||||
'<iframe src="' +
|
||||
|
|
@ -55,7 +55,7 @@ export default function Embed(props) {
|
|||
<div className="mt-1">
|
||||
<textarea
|
||||
id="fullscreen"
|
||||
className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="h-32 shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
placeholder="Loading..."
|
||||
defaultValue={
|
||||
'<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Schedule a meeting</title><style>body {margin: 0;}iframe {height: calc(100vh - 4px);width: calc(100vw - 4px);box-sizing: border-box;}</style></head><body><iframe src="' +
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export default function Settings(props) {
|
|||
name="current_password"
|
||||
id="current_password"
|
||||
required
|
||||
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
placeholder="Your old password"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -77,7 +77,7 @@ export default function Settings(props) {
|
|||
name="new_password"
|
||||
id="new_password"
|
||||
required
|
||||
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
placeholder="Your super secure new password"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -87,7 +87,7 @@ export default function Settings(props) {
|
|||
<div className="py-4 flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="ml-2 bg-neutral-900 border border-transparent rounded-sm shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
className="ml-2 bg-neutral-900 border border-transparent rounded-sm shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -81,6 +81,59 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* !important to override react-select */
|
||||
.react-select__value-container{
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.react-select__input input {
|
||||
border: 0 !important; box-shadow: none !important;
|
||||
}
|
||||
|
||||
.react-select__option--is-focused{
|
||||
background: #000 !important;
|
||||
color: #fff !important
|
||||
}
|
||||
|
||||
.react-select__control{
|
||||
border: 2px solid transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.react-select__control.react-select__control--is-focused{
|
||||
border: 2px solid #000 !important;
|
||||
border-color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
|
||||
}
|
||||
|
||||
/* !important to override react-dates */
|
||||
.DateRangePickerInput__withBorder{
|
||||
border: 0 !important
|
||||
}
|
||||
.DateInput_input{
|
||||
border: 1px solid #D1D5DB !important;
|
||||
border-radius: 2px !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
color: #000;
|
||||
padding: 11px 11px 9px !important;
|
||||
line-height: 16px !important;
|
||||
}
|
||||
|
||||
.DateInput_input__focused{
|
||||
border: 2px solid #000 !important;
|
||||
border-radius: 2px !important;
|
||||
box-shadow: none !important;
|
||||
padding: 10px 10px 9px !important;
|
||||
}
|
||||
|
||||
.DateRangePickerInput_arrow{
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: block;
|
||||
width: 30px;
|
||||
|
|
@ -184,22 +237,7 @@ body {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.weekdaySelect {
|
||||
font-family: "Courier New", sans-serif;
|
||||
}
|
||||
|
||||
.weekdaySelect button.active:first-child {
|
||||
margin-left: -1px !important;
|
||||
}
|
||||
|
||||
.weekdaySelect button:not(.active) {
|
||||
padding-left: calc(0.5rem + 0px);
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.weekdaySelect button.active + button.active {
|
||||
border-color: rgba(3, 169, 244, var(--tw-border-opacity))
|
||||
rgba(3, 169, 244, var(--tw-border-opacity))
|
||||
rgba(3, 169, 244, var(--tw-border-opacity))
|
||||
white;
|
||||
.weekdaySelect button.active {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue