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

replaced btn-primary, btn-secondary, btn-white with respective Button equivalents (#1218)

Browse source 
* 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:
Syed Ali Shahbaz 2021-11-29 12:07:31 +05:30 committed by GitHub
parent 20cbab1c15
commit 529f3027cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 57 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/booking/pages/BookingPage.tsx
View file

@ -444,7 +444,6 @@ const BookingPage = (props: BookingPageProps) => {
/> />
</div> </div>
<div className="flex items-start space-x-2"> <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}> <Button type="submit" loading={loading}>
{rescheduleUid ? t("reschedule") : t("confirm")} {rescheduleUid ? t("reschedule") : t("confirm")}
</Button> </Button>

12
components/pages/eventtypes/CustomInputTypeForm.tsx
View file

@ -5,6 +5,8 @@ import Select, { OptionTypeBase } from "react-select";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
import Button from "@components/ui/Button";
interface Props { interface Props {
onSubmit: SubmitHandler<IFormInput>; onSubmit: SubmitHandler<IFormInput>;
onCancel: () => void; onCancel: () => void;
@ -82,7 +84,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
<input <input
type="text" type="text"
id="placeholder" 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} defaultValue={selectedCustomInput?.placeholder}
{...register("placeholder")} {...register("placeholder")}
/> />
@ -114,12 +116,10 @@ const CustomInputTypeForm: FC<Props> = (props) => {
{...register("id", { valueAsNumber: true })} {...register("id", { valueAsNumber: true })}
/> />
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary"> <Button type="submit">{t("save")}</Button>
{t("save")} <Button onClick={onCancel} type="button" color="secondary" className="mr-2">
</button>
<button onClick={onCancel} type="button" className="mr-2 btn btn-white">
{t("cancel")} {t("cancel")}
</button> </Button>
</div> </div>
</form> </form>
); );

8
components/security/ChangePasswordSection.tsx
View file

@ -4,6 +4,8 @@ import { ErrorCode } from "@lib/auth";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
import showToast from "@lib/notification"; import showToast from "@lib/notification";
import Button from "@components/ui/Button";
const ChangePasswordSection = () => { const ChangePasswordSection = () => {
const [oldPassword, setOldPassword] = useState(""); const [oldPassword, setOldPassword] = useState("");
const [newPassword, setNewPassword] = useState(""); const [newPassword, setNewPassword] = useState("");
@ -97,11 +99,7 @@ const ChangePasswordSection = () => {
</div> </div>
{errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>} {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
<div className="py-8 flex justify-end"> <div className="py-8 flex justify-end">
<button <Button type="submit">{t("save")}</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>
</div> </div>
<hr className="mt-4" /> <hr className="mt-4" />
</div> </div>

15
components/team/EditTeam.tsx
View file

@ -141,7 +141,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
</div> </div>
</div> </div>
<hr className="mt-2" /> <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}> <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={updateTeamHandler}>
{hasErrors && <ErrorAlert message={errorMessage} />} {hasErrors && <ErrorAlert message={errorMessage} />}
<div className="py-6 lg:pb-8"> <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" /> <hr className="mt-6" />
</div> </div>
<div className="flex justify-between mt-7"> <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"> <div className="relative flex items-center">
<Button <Button
type="button" type="button"
@ -255,13 +255,10 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
<div> <div>
<div className="relative flex items-start"> <div className="relative flex items-start">
<Dialog> <Dialog>
<DialogTrigger <DialogTrigger asChild>
onClick={(e) => { <Button type="button" color="secondary" StartIcon={TrashIcon}>
e.stopPropagation(); {t("disband_team")}
}} </Button>
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> </DialogTrigger>
<ConfirmationDialogContent <ConfirmationDialogContent
variety="danger" variety="danger"

6
components/ui/Scheduler.tsx
View file

@ -9,6 +9,8 @@ import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
import { WorkingHours } from "@lib/types/schedule"; import { WorkingHours } from "@lib/types/schedule";
import Button from "@components/ui/Button";
import { WeekdaySelect } from "./WeekdaySelect"; import { WeekdaySelect } from "./WeekdaySelect";
import SetTimesModal from "./modal/SetTimesModal"; import SetTimesModal from "./modal/SetTimesModal";
@ -103,9 +105,9 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
<OpeningHours key={idx} idx={idx} item={item} /> <OpeningHours key={idx} idx={idx} item={item} />
))} ))}
</ul> </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")} {t("add_another")}
</button> </Button>
</div> </div>
</div> </div>
{editSchedule >= 0 && ( {editSchedule >= 0 && (

42
components/ui/modal/SetTimesModal.tsx
View file

@ -3,6 +3,8 @@ import { useRef } from "react";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
import Button from "@components/ui/Button";
export default function SetTimesModal(props) { export default function SetTimesModal(props) {
const { t } = useLocale(); const { t } = useLocale();
const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60]; const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60];
@ -31,26 +33,26 @@ export default function SetTimesModal(props) {
return ( return (
<div <div
className="fixed z-50 inset-0 overflow-y-auto" className="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title" aria-labelledby="modal-title"
role="dialog" role="dialog"
aria-modal="true"> 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 <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> aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"> <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203; &#8203;
</span> </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="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="sm:flex sm:items-start mb-4"> <div className="mb-4 sm:flex sm:items-start">
<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"> <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="h-6 w-6 text-black" /> <ClockIcon className="w-6 h-6 text-black" />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <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")} {t("change_bookings_availability")}
</h3> </h3>
<div> <div>
@ -59,7 +61,7 @@ export default function SetTimesModal(props) {
</div> </div>
</div> </div>
<div className="flex mb-4"> <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> <div>
<label htmlFor="startHours" className="sr-only"> <label htmlFor="startHours" className="sr-only">
{t("hours")} {t("hours")}
@ -72,12 +74,12 @@ export default function SetTimesModal(props) {
maxLength="2" maxLength="2"
name="hours" name="hours"
id="startHours" 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" placeholder="9"
defaultValue={startHours} defaultValue={startHours}
/> />
</div> </div>
<span className="mx-2 pt-1">:</span> <span className="pt-1 mx-2">:</span>
<div> <div>
<label htmlFor="startMinutes" className="sr-only"> <label htmlFor="startMinutes" className="sr-only">
{t("minutes")} {t("minutes")}
@ -91,14 +93,14 @@ export default function SetTimesModal(props) {
maxLength="2" maxLength="2"
name="minutes" name="minutes"
id="startMinutes" 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" placeholder="30"
defaultValue={startMinutes} defaultValue={startMinutes}
/> />
</div> </div>
</div> </div>
<div className="flex"> <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> <div>
<label htmlFor="endHours" className="sr-only"> <label htmlFor="endHours" className="sr-only">
{t("hours")} {t("hours")}
@ -111,12 +113,12 @@ export default function SetTimesModal(props) {
maxLength="2" maxLength="2"
name="hours" name="hours"
id="endHours" 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" placeholder="17"
defaultValue={endHours} defaultValue={endHours}
/> />
</div> </div>
<span className="mx-2 pt-1">:</span> <span className="pt-1 mx-2">:</span>
<div> <div>
<label htmlFor="endMinutes" className="sr-only"> <label htmlFor="endMinutes" className="sr-only">
{t("minutes")} {t("minutes")}
@ -130,19 +132,19 @@ export default function SetTimesModal(props) {
step="15" step="15"
name="minutes" name="minutes"
id="endMinutes" 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" placeholder="30"
defaultValue={endMinutes} defaultValue={endMinutes}
/> />
</div> </div>
</div> </div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <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")} {t("save")}
</button> </Button>
<button onClick={props.onExit} type="button" className="btn btn-white mr-2"> <Button onClick={props.onExit} type="button" color="secondary" className="mr-2">
{t("cancel")} {t("cancel")}
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

7
pages/availability/index.tsx
View file

@ -1,4 +1,3 @@
import Link from "next/link";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { QueryCell } from "@lib/QueryCell"; import { QueryCell } from "@lib/QueryCell";
@ -68,9 +67,9 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
<p>{t("troubleshoot_availability")}</p> <p>{t("troubleshoot_availability")}</p>
</div> </div>
<div className="mt-5"> <div className="mt-5">
<Link href="/availability/troubleshoot"> <Button href="/availability/troubleshoot" color="secondary">
<a className="btn btn-white">{t("launch_troubleshooter")}</a> {t("launch_troubleshooter")}
</Link> </Button>
</div> </div>
</div> </div>
</div> </div>

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

@ -1140,15 +1140,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
/> />
<LocationOptions /> <LocationOptions />
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse "> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse ">
<button type="submit" className="btn btn-primary"> <Button type="submit">{t("update")}</Button>
{t("update")} <Button
</button>
<button
onClick={() => setShowLocationModal(false)} onClick={() => setShowLocationModal(false)}
type="button" type="button"
className="mr-2 btn btn-white"> color="secondary"
className="mr-2">
{t("cancel")} {t("cancel")}
</button> </Button>
</div> </div>
</form> </form>
</div> </div>

4
pages/settings/profile.tsx
View file

@ -81,9 +81,7 @@ function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>
</div> </div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2"> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
<DialogClose asChild> <DialogClose asChild>
<Button <Button className="table-cell text-center btn-wide" onClick={() => setModalOpen(false)}>
className="table-cell text-center btn-wide btn-primary"
onClick={() => setModalOpen(false)}>
{t("dismiss")} {t("dismiss")}
</Button> </Button>
</DialogClose> </DialogClose>

18
pages/settings/teams.tsx
View file

@ -98,10 +98,7 @@ export default function Teams() {
)} )}
</div> </div>
<div className="flex items-start mb-4"> <div className="flex items-start mb-4">
<Button <Button type="button" onClick={() => setShowCreateTeamModal(true)} color="secondary">
type="button"
onClick={() => setShowCreateTeamModal(true)}
className="btn btn-white">
<PlusIcon className="group-hover:text-black text-gray-700 w-3.5 h-3.5 mr-2 inline-block" /> <PlusIcon className="group-hover:text-black text-gray-700 w-3.5 h-3.5 mr-2 inline-block" />
{t("new_team")} {t("new_team")}
</Button> </Button>
@ -114,7 +111,7 @@ export default function Teams() {
{!!invites.length && ( {!!invites.length && (
<div> <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"> <ul className="px-4 mt-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
{invites.map((team: Team) => ( {invites.map((team: Team) => (
<TeamListItem <TeamListItem
@ -176,15 +173,14 @@ export default function Teams() {
/> />
</div> </div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary"> <Button type="submit">{t("create_team")}</Button>
{t("create_team")} <Button
</button>
<button
onClick={() => setShowCreateTeamModal(false)} onClick={() => setShowCreateTeamModal(false)}
type="button" type="button"
className="mr-2 btn btn-white"> className="mr-2"
color="secondary">
{t("cancel")} {t("cancel")}
</button> </Button>
</div> </div>
</form> </form>
</div> </div>