replaced btn-primary, btn-secondary, btn-white with respective Button equivalents (#1218)
* replaced btn primary, secondary, white with Button * removed unused Link var * replaced <button> in settings/security Co-authored-by: Bailey Pumfleet <pumfleet@hey.com> Co-authored-by: Peer Richelsen <peeroke@richelsen.net>
This commit is contained in:
parent
20cbab1c15
commit
529f3027cd
|
@ -444,7 +444,6 @@ const BookingPage = (props: BookingPageProps) => {
|
|||
/>
|
||||
</div>
|
||||
<div className="flex items-start space-x-2">
|
||||
{/* TODO: add styling props to <Button variant="" color="" /> and get rid of btn-primary */}
|
||||
<Button type="submit" loading={loading}>
|
||||
{rescheduleUid ? t("reschedule") : t("confirm")}
|
||||
</Button>
|
||||
|
|
|
@ -5,6 +5,8 @@ import Select, { OptionTypeBase } from "react-select";
|
|||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
import Button from "@components/ui/Button";
|
||||
|
||||
interface Props {
|
||||
onSubmit: SubmitHandler<IFormInput>;
|
||||
onCancel: () => void;
|
||||
|
@ -82,7 +84,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
|
|||
<input
|
||||
type="text"
|
||||
id="placeholder"
|
||||
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
||||
className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
|
||||
defaultValue={selectedCustomInput?.placeholder}
|
||||
{...register("placeholder")}
|
||||
/>
|
||||
|
@ -114,12 +116,10 @@ const CustomInputTypeForm: FC<Props> = (props) => {
|
|||
{...register("id", { valueAsNumber: true })}
|
||||
/>
|
||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("save")}
|
||||
</button>
|
||||
<button onClick={onCancel} type="button" className="mr-2 btn btn-white">
|
||||
<Button type="submit">{t("save")}</Button>
|
||||
<Button onClick={onCancel} type="button" color="secondary" className="mr-2">
|
||||
{t("cancel")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
|
|
@ -4,6 +4,8 @@ import { ErrorCode } from "@lib/auth";
|
|||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import showToast from "@lib/notification";
|
||||
|
||||
import Button from "@components/ui/Button";
|
||||
|
||||
const ChangePasswordSection = () => {
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
|
@ -97,11 +99,7 @@ const ChangePasswordSection = () => {
|
|||
</div>
|
||||
{errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
|
||||
<div className="py-8 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-black">
|
||||
{t("save")}
|
||||
</button>
|
||||
<Button type="submit">{t("save")}</Button>
|
||||
</div>
|
||||
<hr className="mt-4" />
|
||||
</div>
|
||||
|
|
|
@ -141,7 +141,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
|
|||
</div>
|
||||
</div>
|
||||
<hr className="mt-2" />
|
||||
<h3 className="font-cal font-bold leading-6 text-gray-900 mt-7 text-md">{t("profile")}</h3>
|
||||
<h3 className="font-bold leading-6 text-gray-900 font-cal mt-7 text-md">{t("profile")}</h3>
|
||||
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={updateTeamHandler}>
|
||||
{hasErrors && <ErrorAlert message={errorMessage} />}
|
||||
<div className="py-6 lg:pb-8">
|
||||
|
@ -213,7 +213,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
|
|||
<hr className="mt-6" />
|
||||
</div>
|
||||
<div className="flex justify-between mt-7">
|
||||
<h3 className="font-cal font-bold leading-6 text-gray-900 text-md">{t("members")}</h3>
|
||||
<h3 className="font-bold leading-6 text-gray-900 font-cal text-md">{t("members")}</h3>
|
||||
<div className="relative flex items-center">
|
||||
<Button
|
||||
type="button"
|
||||
|
@ -255,13 +255,10 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
|
|||
<div>
|
||||
<div className="relative flex items-start">
|
||||
<Dialog>
|
||||
<DialogTrigger
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="btn-sm btn-white">
|
||||
<TrashIcon className="group-hover:text-red text-gray-700 w-3.5 h-3.5 mr-2 inline-block" />
|
||||
{t("disband_team")}
|
||||
<DialogTrigger asChild>
|
||||
<Button type="button" color="secondary" StartIcon={TrashIcon}>
|
||||
{t("disband_team")}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<ConfirmationDialogContent
|
||||
variety="danger"
|
||||
|
|
|
@ -9,6 +9,8 @@ import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";
|
|||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { WorkingHours } from "@lib/types/schedule";
|
||||
|
||||
import Button from "@components/ui/Button";
|
||||
|
||||
import { WeekdaySelect } from "./WeekdaySelect";
|
||||
import SetTimesModal from "./modal/SetTimesModal";
|
||||
|
||||
|
@ -103,9 +105,9 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
|
|||
<OpeningHours key={idx} idx={idx} item={item} />
|
||||
))}
|
||||
</ul>
|
||||
<button type="button" onClick={addNewSchedule} className="mt-2 btn-white btn-sm">
|
||||
<Button type="button" onClick={addNewSchedule} className="mt-2" color="secondary" size="sm">
|
||||
{t("add_another")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{editSchedule >= 0 && (
|
||||
|
|
|
@ -3,6 +3,8 @@ import { useRef } from "react";
|
|||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
import Button from "@components/ui/Button";
|
||||
|
||||
export default function SetTimesModal(props) {
|
||||
const { t } = useLocale();
|
||||
const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60];
|
||||
|
@ -31,26 +33,26 @@ export default function SetTimesModal(props) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="fixed z-50 inset-0 overflow-y-auto"
|
||||
className="fixed inset-0 z-50 overflow-y-auto"
|
||||
aria-labelledby="modal-title"
|
||||
role="dialog"
|
||||
aria-modal="true">
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div
|
||||
className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
|
||||
className="fixed inset-0 z-0 transition-opacity bg-gray-500 bg-opacity-75"
|
||||
aria-hidden="true"></div>
|
||||
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
|
||||
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden 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-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ClockIcon className="h-6 w-6 text-black" />
|
||||
<div className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
|
||||
<div className="mb-4 sm:flex sm:items-start">
|
||||
<div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-blue-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ClockIcon className="w-6 h-6 text-black" />
|
||||
</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">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
{t("change_bookings_availability")}
|
||||
</h3>
|
||||
<div>
|
||||
|
@ -59,7 +61,7 @@ export default function SetTimesModal(props) {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex mb-4">
|
||||
<label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">{t("start_time")}</label>
|
||||
<label className="block w-1/4 pt-2 text-sm font-medium text-gray-700">{t("start_time")}</label>
|
||||
<div>
|
||||
<label htmlFor="startHours" className="sr-only">
|
||||
{t("hours")}
|
||||
|
@ -72,12 +74,12 @@ export default function SetTimesModal(props) {
|
|||
maxLength="2"
|
||||
name="hours"
|
||||
id="startHours"
|
||||
className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
|
||||
placeholder="9"
|
||||
defaultValue={startHours}
|
||||
/>
|
||||
</div>
|
||||
<span className="mx-2 pt-1">:</span>
|
||||
<span className="pt-1 mx-2">:</span>
|
||||
<div>
|
||||
<label htmlFor="startMinutes" className="sr-only">
|
||||
{t("minutes")}
|
||||
|
@ -91,14 +93,14 @@ export default function SetTimesModal(props) {
|
|||
maxLength="2"
|
||||
name="minutes"
|
||||
id="startMinutes"
|
||||
className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
|
||||
placeholder="30"
|
||||
defaultValue={startMinutes}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">{t("end_time")}</label>
|
||||
<label className="block w-1/4 pt-2 text-sm font-medium text-gray-700">{t("end_time")}</label>
|
||||
<div>
|
||||
<label htmlFor="endHours" className="sr-only">
|
||||
{t("hours")}
|
||||
|
@ -111,12 +113,12 @@ export default function SetTimesModal(props) {
|
|||
maxLength="2"
|
||||
name="hours"
|
||||
id="endHours"
|
||||
className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
|
||||
placeholder="17"
|
||||
defaultValue={endHours}
|
||||
/>
|
||||
</div>
|
||||
<span className="mx-2 pt-1">:</span>
|
||||
<span className="pt-1 mx-2">:</span>
|
||||
<div>
|
||||
<label htmlFor="endMinutes" className="sr-only">
|
||||
{t("minutes")}
|
||||
|
@ -130,19 +132,19 @@ export default function SetTimesModal(props) {
|
|||
step="15"
|
||||
name="minutes"
|
||||
id="endMinutes"
|
||||
className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
|
||||
placeholder="30"
|
||||
defaultValue={endMinutes}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button onClick={updateStartEndTimesHandler} type="submit" className="btn btn-primary">
|
||||
<Button onClick={updateStartEndTimesHandler} type="submit">
|
||||
{t("save")}
|
||||
</button>
|
||||
<button onClick={props.onExit} type="button" className="btn btn-white mr-2">
|
||||
</Button>
|
||||
<Button onClick={props.onExit} type="button" color="secondary" className="mr-2">
|
||||
{t("cancel")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import Link from "next/link";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import { QueryCell } from "@lib/QueryCell";
|
||||
|
@ -68,9 +67,9 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
|
|||
<p>{t("troubleshoot_availability")}</p>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<Link href="/availability/troubleshoot">
|
||||
<a className="btn btn-white">{t("launch_troubleshooter")}</a>
|
||||
</Link>
|
||||
<Button href="/availability/troubleshoot" color="secondary">
|
||||
{t("launch_troubleshooter")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1140,15 +1140,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
/>
|
||||
<LocationOptions />
|
||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse ">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("update")}
|
||||
</button>
|
||||
<button
|
||||
<Button type="submit">{t("update")}</Button>
|
||||
<Button
|
||||
onClick={() => setShowLocationModal(false)}
|
||||
type="button"
|
||||
className="mr-2 btn btn-white">
|
||||
color="secondary"
|
||||
className="mr-2">
|
||||
{t("cancel")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -81,9 +81,7 @@ function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>
|
|||
</div>
|
||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
|
||||
<DialogClose asChild>
|
||||
<Button
|
||||
className="table-cell text-center btn-wide btn-primary"
|
||||
onClick={() => setModalOpen(false)}>
|
||||
<Button className="table-cell text-center btn-wide" onClick={() => setModalOpen(false)}>
|
||||
{t("dismiss")}
|
||||
</Button>
|
||||
</DialogClose>
|
||||
|
|
|
@ -98,10 +98,7 @@ export default function Teams() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-start mb-4">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setShowCreateTeamModal(true)}
|
||||
className="btn btn-white">
|
||||
<Button type="button" onClick={() => setShowCreateTeamModal(true)} color="secondary">
|
||||
<PlusIcon className="group-hover:text-black text-gray-700 w-3.5 h-3.5 mr-2 inline-block" />
|
||||
{t("new_team")}
|
||||
</Button>
|
||||
|
@ -114,7 +111,7 @@ export default function Teams() {
|
|||
|
||||
{!!invites.length && (
|
||||
<div>
|
||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">Open Invitations</h2>
|
||||
<h2 className="text-lg font-medium leading-6 text-gray-900 font-cal">Open Invitations</h2>
|
||||
<ul className="px-4 mt-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
|
||||
{invites.map((team: Team) => (
|
||||
<TeamListItem
|
||||
|
@ -176,15 +173,14 @@ export default function Teams() {
|
|||
/>
|
||||
</div>
|
||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("create_team")}
|
||||
</button>
|
||||
<button
|
||||
<Button type="submit">{t("create_team")}</Button>
|
||||
<Button
|
||||
onClick={() => setShowCreateTeamModal(false)}
|
||||
type="button"
|
||||
className="mr-2 btn btn-white">
|
||||
className="mr-2"
|
||||
color="secondary">
|
||||
{t("cancel")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue
Block a user