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

replaced black color with new brand variable to make styling easier (#1125)

Browse source
This commit is contained in:
Peer Richelsen 2021-11-04 14:30:37 +00:00 committed by GitHub
parent 0e9c50a58d
commit 773e9ac57e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 66 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/AddToHomescreen.tsx
View file

@ -18,7 +18,7 @@ export default function AddToHomescreen() {
<div className="p-2 rounded-lg shadow-lg sm:p-3" style={{ background: "#2F333D" }}> <div className="p-2 rounded-lg shadow-lg sm:p-3" style={{ background: "#2F333D" }}>
<div className="flex items-center justify-between flex-wrap"> <div className="flex items-center justify-between flex-wrap">
<div className="w-0 flex-1 flex items-center"> <div className="w-0 flex-1 flex items-center">
<span className="flex p-2 rounded-lg bg-opacity-30 bg-black"> <span className="flex p-2 rounded-lg bg-opacity-30 bg-brand">
<svg <svg
className="h-7 w-7 text-indigo-500 fill-current" className="h-7 w-7 text-indigo-500 fill-current"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

4
components/Loader.tsx
View file

@ -1,7 +1,7 @@
export default function Loader() { export default function Loader() {
return ( return (
<div className="loader border-black dark:border-white"> <div className="loader border-brand dark:border-white">
<span className="loader-inner bg-black dark:bg-white"></span> <span className="loader-inner bg-brand dark:bg-white"></span>
</div> </div>
); );
} }

2
components/Tooltip.tsx
View file

@ -23,7 +23,7 @@ export function Tooltip({
onOpenChange={onOpenChange}> onOpenChange={onOpenChange}>
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger> <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content <TooltipPrimitive.Content
className="bg-black text-xs -mt-2 text-white px-1 py-0.5 shadow-lg rounded-sm" className="bg-brand text-xs -mt-2 text-white px-1 py-0.5 shadow-lg rounded-sm"
side="top" side="top"
align="center" align="center"
{...props}> {...props}>

2
components/booking/AvailableTimes.tsx
View file

@ -91,7 +91,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
<div key={slot.time.format()}> <div key={slot.time.format()}>
<Link href={bookingUrl}> <Link href={bookingUrl}>
<a <a
className="block font-medium mb-2 bg-white dark:bg-gray-600 text-primary-500 dark:text-neutral-200 border border-primary-500 dark:border-transparent rounded-sm hover:text-white hover:bg-primary-500 dark:hover:border-black py-4 dark:hover:bg-black" className="block font-medium mb-2 bg-white dark:bg-gray-600 text-primary-500 dark:text-neutral-200 border border-brand dark:border-transparent rounded-sm hover:text-white hover:bg-brand dark:hover:border-black py-4 dark:hover:bg-black"
data-testid="time"> data-testid="time">
{slot.time.format(timeFormat)} {slot.time.format(timeFormat)}
</a> </a>

4
components/booking/DatePicker.tsx
View file

@ -186,12 +186,12 @@ function DatePicker({
disabled={day.disabled} disabled={day.disabled}
className={classNames( className={classNames(
"absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto", "absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto",
"hover:border hover:border-black dark:hover:border-white", "hover:border hover:border-brand dark:hover:border-white",
day.disabled day.disabled
? "text-gray-400 font-light hover:border-0 cursor-default" ? "text-gray-400 font-light hover:border-0 cursor-default"
: "dark:text-white text-primary-500 font-medium", : "dark:text-white text-primary-500 font-medium",
date && date.isSame(inviteeDate().date(day.date), "day") date && date.isSame(inviteeDate().date(day.date), "day")
? "bg-black text-white-important" ? "bg-brand text-white-important"
: !day.disabled : !day.disabled
? " bg-gray-100 dark:bg-gray-600" ? " bg-gray-100 dark:bg-gray-600"
: "" : ""

4
components/booking/TimeOptions.tsx
View file

@ -47,7 +47,7 @@ const TimeOptions: FC<Props> = (props) => {
checked={is24hClock} checked={is24hClock}
onChange={handle24hClockToggle} onChange={handle24hClockToggle}
className={classNames( className={classNames(
is24hClock ? "bg-black" : "dark:bg-gray-600 bg-gray-200", is24hClock ? "bg-brand" : "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-black" "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">{t("use_setting")}</span> <span className="sr-only">{t("use_setting")}</span>
@ -69,7 +69,7 @@ const TimeOptions: FC<Props> = (props) => {
id="timeZone" id="timeZone"
value={selectedTimeZone} value={selectedTimeZone}
onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)} onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
className="mb-2 shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md" className="mb-2 shadow-sm focus:ring-black focus:border-brand mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
/> />
</div> </div>
) : null; ) : null;

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

@ -205,7 +205,7 @@ const BookingPage = (props: BookingPageProps) => {
{isReady && ( {isReady && (
<div className="overflow-hidden bg-white border border-gray-200 dark:bg-neutral-900 dark:border-0 sm:rounded-sm"> <div className="overflow-hidden bg-white border border-gray-200 dark:bg-neutral-900 dark:border-0 sm:rounded-sm">
<div className="px-4 py-5 sm:flex sm:p-4"> <div className="px-4 py-5 sm:flex sm:p-4">
<div className="sm:w-1/2 sm:border-r sm:dark:border-black"> <div className="sm:w-1/2 sm:border-r sm:dark:border-brand">
<AvatarGroup <AvatarGroup
size={16} size={16}
items={[{ image: props.profile.image, alt: props.profile.name }].concat( items={[{ image: props.profile.image, alt: props.profile.name }].concat(
@ -263,7 +263,7 @@ const BookingPage = (props: BookingPageProps) => {
name="name" name="name"
id="name" id="name"
required required
className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
placeholder="John Doe" placeholder="John Doe"
defaultValue={props.booking ? props.booking.attendees[0].name : ""} defaultValue={props.booking ? props.booking.attendees[0].name : ""}
/> />
@ -282,7 +282,7 @@ const BookingPage = (props: BookingPageProps) => {
id="email" id="email"
inputMode="email" inputMode="email"
required required
className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
placeholder="you@example.com" placeholder="you@example.com"
defaultValue={props.booking ? props.booking.attendees[0].email : ""} defaultValue={props.booking ? props.booking.attendees[0].email : ""}
/> />
@ -341,7 +341,7 @@ const BookingPage = (props: BookingPageProps) => {
id={"custom_" + input.id} id={"custom_" + input.id}
required={input.required} required={input.required}
rows={3} rows={3}
className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
placeholder={input.placeholder} placeholder={input.placeholder}
/> />
)} )}
@ -351,7 +351,7 @@ const BookingPage = (props: BookingPageProps) => {
name={"custom_" + input.id} name={"custom_" + input.id}
id={"custom_" + input.id} id={"custom_" + input.id}
required={input.required} required={input.required}
className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
placeholder={input.placeholder} placeholder={input.placeholder}
/> />
)} )}
@ -361,7 +361,7 @@ const BookingPage = (props: BookingPageProps) => {
name={"custom_" + input.id} name={"custom_" + input.id}
id={"custom_" + input.id} id={"custom_" + input.id}
required={input.required} required={input.required}
className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
placeholder="" placeholder=""
/> />
)} )}
@ -437,7 +437,7 @@ const BookingPage = (props: BookingPageProps) => {
name="notes" name="notes"
id="notes" id="notes"
rows={3} rows={3}
className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm" className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
placeholder={t("share_additional_notes")} placeholder={t("share_additional_notes")}
defaultValue={props.booking ? props.booking.description : ""} defaultValue={props.booking ? props.booking.description : ""}
/> />

4
components/security/ChangePasswordSection.tsx
View file

@ -72,7 +72,7 @@ const ChangePasswordSection = () => {
name="current_password" name="current_password"
id="current_password" id="current_password"
required required
className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm" className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-sm"
placeholder={t("your_old_password")} placeholder={t("your_old_password")}
/> />
</div> </div>
@ -89,7 +89,7 @@ const ChangePasswordSection = () => {
value={newPassword} value={newPassword}
required required
onInput={(e) => setNewPassword(e.currentTarget.value)} onInput={(e) => setNewPassword(e.currentTarget.value)}
className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm" className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-sm"
placeholder={t("super_secure_new_password")} placeholder={t("super_secure_new_password")}
/> />
</div> </div>

2
components/security/TwoFactorModalHeader.tsx
View file

@ -4,7 +4,7 @@ import React from "react";
const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => { const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
return ( return (
<div className="mb-4 sm:flex sm:items-start"> <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-black rounded-full bg-opacity-5 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-brand rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<ShieldCheckIcon className="w-6 h-6 text-black" /> <ShieldCheckIcon 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">

8
components/team/MemberInvitationModal.tsx
View file

@ -71,7 +71,7 @@ export default function MemberInvitationModal(props: { team: Team | undefined |
<div className="inline-block px-4 pt-5 pb-4 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="inline-block px-4 pt-5 pb-4 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="mb-4 sm:flex sm:items-start">
<div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-black rounded-full bg-opacity-5 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-brand rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<UsersIcon className="w-6 h-6 text-black" /> <UsersIcon 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">
@ -95,7 +95,7 @@ export default function MemberInvitationModal(props: { team: Team | undefined |
id="inviteUser" id="inviteUser"
placeholder="email@example.com" placeholder="email@example.com"
required required
className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-black focus:border-black sm:text-sm" className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-black focus:border-brand sm:text-sm"
/> />
</div> </div>
<div className="mb-4"> <div className="mb-4">
@ -104,7 +104,7 @@ export default function MemberInvitationModal(props: { team: Team | undefined |
</label> </label>
<select <select
id="role" id="role"
className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-black sm:text-sm"> className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm">
<option value="MEMBER">{t("member")}</option> <option value="MEMBER">{t("member")}</option>
<option value="OWNER">{t("owner")}</option> <option value="OWNER">{t("owner")}</option>
</select> </select>
@ -116,7 +116,7 @@ export default function MemberInvitationModal(props: { team: Team | undefined |
name="sendInviteEmail" name="sendInviteEmail"
defaultChecked defaultChecked
id="sendInviteEmail" id="sendInviteEmail"
className="text-black border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-black sm:text-sm" className="text-black border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
/> />
</div> </div>
<div className="ml-2 text-sm"> <div className="ml-2 text-sm">

2
components/team/screens/Team.tsx
View file

@ -23,7 +23,7 @@ const Team = ({ team }) => {
"bg-white dark:bg-neutral-900 dark:border-0 dark:bg-opacity-8", "bg-white dark:bg-neutral-900 dark:border-0 dark:bg-opacity-8",
"border border-neutral-200", "border border-neutral-200",
"hover:cursor-pointer", "hover:cursor-pointer",
"hover:border-black dark:border-neutral-700 dark:hover:border-neutral-600", "hover:border-brand dark:border-neutral-700 dark:hover:border-neutral-600",
"rounded-sm", "rounded-sm",
"hover:shadow-md" "hover:shadow-md"
); );

2
components/ui/Avatar.tsx
View file

@ -36,7 +36,7 @@ export default function Avatar(props: AvatarProps) {
return title ? ( return title ? (
<Tooltip.Tooltip delayDuration={300}> <Tooltip.Tooltip delayDuration={300}>
<Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger> <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
<Tooltip.Content className="p-2 rounded-sm text-sm bg-black text-white shadow-sm"> <Tooltip.Content className="p-2 rounded-sm text-sm bg-brand text-white shadow-sm">
<Tooltip.Arrow /> <Tooltip.Arrow />
{title} {title}
</Tooltip.Content> </Tooltip.Content>

2
components/ui/AvatarGroup.tsx
View file

@ -40,7 +40,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
<span className="w-16 absolute bottom-1.5 border-2 border-gray-300 flex-inline items-center text-white pt-4 text-2xl top-0 rounded-full block bg-neutral-600">+1</span> <span className="w-16 absolute bottom-1.5 border-2 border-gray-300 flex-inline items-center text-white pt-4 text-2xl top-0 rounded-full block bg-neutral-600">+1</span>
</Tooltip.TooltipTrigger> </Tooltip.TooltipTrigger>
{truncatedAvatars.length !== 0 && ( {truncatedAvatars.length !== 0 && (
<Tooltip.Content className="p-2 rounded-sm text-sm bg-black text-white shadow-sm"> <Tooltip.Content className="p-2 rounded-sm text-sm bg-brand text-white shadow-sm">
<Tooltip.Arrow /> <Tooltip.Arrow />
<ul> <ul>
{truncatedAvatars.map((title) => ( {truncatedAvatars.map((title) => (

2
components/ui/Button.tsx
View file

@ -63,7 +63,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
color === "primary" && color === "primary" &&
(disabled (disabled
? "border border-transparent bg-gray-400 text-white" ? "border border-transparent bg-gray-400 text-white"
: "border border-transparent dark:text-black text-white bg-neutral-900 dark:bg-white hover:bg-neutral-800 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"), : "border border-transparent dark:text-black text-white bg-brand dark:bg-white hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
color === "secondary" && color === "secondary" &&
(disabled (disabled
? "border border-gray-200 text-gray-400 bg-white" ? "border border-gray-200 text-gray-400 bg-white"

2
components/ui/Scheduler.tsx
View file

@ -113,7 +113,7 @@ export const Scheduler = ({
id="timeZone" id="timeZone"
value={{ value: selectedTimeZone }} value={{ value: selectedTimeZone }}
onChange={(tz) => setTimeZone(tz.value)} onChange={(tz) => setTimeZone(tz.value)}
className="shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md" className="shadow-sm focus:ring-black focus:border-brand mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
/> />
</div> </div>
</div> </div>

2
components/ui/UsernameInput.tsx
View file

@ -22,7 +22,7 @@ const UsernameInput = React.forwardRef<HTMLInputElement, UsernameInputProps>((pr
autoComplete="username" autoComplete="username"
required required
{...props} {...props}
className="flex-grow block w-full min-w-0 lowercase border-gray-300 rounded-none rounded-r-sm focus:ring-black focus:border-black sm:text-sm" className="flex-grow block w-full min-w-0 lowercase border-gray-300 rounded-none rounded-r-sm focus:ring-black focus:border-brand sm:text-sm"
/> />
</div> </div>
</div> </div>

2
components/ui/WeekdaySelect.tsx
View file

@ -34,7 +34,7 @@ export const WeekdaySelect = (props: WeekdaySelectProps) => {
}} }}
className={` className={`
w-10 h-10 w-10 h-10
bg-black text-white focus:outline-none px-3 py-1 rounded bg-brand text-white focus:outline-none px-3 py-1 rounded
${activeDays[idx + 1] ? "rounded-r-none" : ""} ${activeDays[idx + 1] ? "rounded-r-none" : ""}
${activeDays[idx - 1] ? "rounded-l-none" : ""} ${activeDays[idx - 1] ? "rounded-l-none" : ""}
${idx === 0 ? "rounded-l" : ""} ${idx === 0 ? "rounded-l" : ""}

2
components/ui/form/PhoneInput.tsx
View file

@ -8,7 +8,7 @@ export const PhoneInput = (props: PhoneInputProps) => (
<BasePhoneInput <BasePhoneInput
{...props} {...props}
className={classNames( className={classNames(
"shadow-sm rounded-md block w-full py-px px-3 border border-1 border-gray-300 ring-black focus-within:ring-1 focus-within:border-black dark:border-gray-900 dark:text-white dark:bg-black", "shadow-sm rounded-md block w-full py-px px-3 border border-1 border-gray-300 ring-black focus-within:ring-1 focus-within:border-brand dark:border-gray-900 dark:text-white dark:bg-brand",
props.className props.className
)} )}
onChange={() => { onChange={() => {

2
components/ui/form/radio-area/RadioAreaGroup.tsx
View file

@ -12,7 +12,7 @@ const RadioArea = (props: RadioAreaProps) => {
<label <label
className={classNames( className={classNames(
"block border border-1 p-4 focus:outline-none focus:ring focus:ring-neutral-500", "block border border-1 p-4 focus:outline-none focus:ring focus:ring-neutral-500",
props.checked && "border-black", props.checked && "border-brand",
props.className props.className
)}> )}>
<input <input

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

@ -72,7 +72,7 @@ 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-black block w-full sm:text-sm border-gray-300 rounded-md" className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="9" placeholder="9"
defaultValue={startHours} defaultValue={startHours}
/> />
@ -91,7 +91,7 @@ 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-black block w-full sm:text-sm border-gray-300 rounded-md" className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="30" placeholder="30"
defaultValue={startMinutes} defaultValue={startMinutes}
/> />
@ -111,7 +111,7 @@ 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-black block w-full sm:text-sm border-gray-300 rounded-md" className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="17" placeholder="17"
defaultValue={endHours} defaultValue={endHours}
/> />
@ -130,7 +130,7 @@ 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-black block w-full sm:text-sm border-gray-300 rounded-md" className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="30" placeholder="30"
defaultValue={endMinutes} defaultValue={endMinutes}
/> />

2
ee/components/stripe/Payment.tsx
View file

@ -15,7 +15,7 @@ import Button from "@components/ui/Button";
const CARD_OPTIONS = { const CARD_OPTIONS = {
iconStyle: "solid" as const, iconStyle: "solid" as const,
classes: { classes: {
base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus-within:ring-black focus-within:border-black sm:text-sm", base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus-within:ring-black focus-within:border-brand sm:text-sm",
}, },
style: { style: {
base: { base: {

2
lib/integrations/CalDav/components/AddCalDavIntegration.tsx
View file

@ -130,7 +130,7 @@ const AddCalDavIntegration = React.forwardRef<HTMLFormElement, Props>((props, re
name="url" name="url"
id="url" id="url"
placeholder="https://example.com/calendar" placeholder="https://example.com/calendar"
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" className="focus:ring-black focus:border-brand flex-grow block w-full min-w-0 rounded-none rounded-r-sm sm:text-sm border-gray-300 lowercase"
/> />
</div> </div>
</div> </div>

4
pages/[user].tsx
View file

@ -30,7 +30,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
avatar={user.avatar || undefined} avatar={user.avatar || undefined}
/> />
{isReady && ( {isReady && (
<div className="bg-neutral-50 dark:bg-black h-screen"> <div className="bg-neutral-50 dark:bg-brand h-screen">
<main className="max-w-3xl mx-auto py-24 px-4"> <main className="max-w-3xl mx-auto py-24 px-4">
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<Avatar <Avatar
@ -47,7 +47,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
{eventTypes.map((type) => ( {eventTypes.map((type) => (
<div <div
key={type.id} key={type.id}
className="group relative dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-black rounded-sm"> className="group relative dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-brand rounded-sm">
<ArrowRightIcon className="absolute transition-opacity h-4 w-4 right-3 top-3 text-black dark:text-white opacity-0 group-hover:opacity-100" /> <ArrowRightIcon className="absolute transition-opacity h-4 w-4 right-3 top-3 text-black dark:text-white opacity-0 group-hover:opacity-100" />
<Link href={`/${user.username}/${type.slug}`}> <Link href={`/${user.username}/${type.slug}`}>
<a className="block px-6 py-4"> <a className="block px-6 py-4">

2
pages/auth/forgot-password/[id].tsx
View file

@ -151,7 +151,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
type="password" type="password"
autoComplete="password" autoComplete="password"
required 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-black focus:border-black 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-brand sm:text-sm"
/> />
</div> </div>
</div> </div>

4
pages/auth/forgot-password/index.tsx
View file

@ -107,7 +107,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
autoComplete="email" autoComplete="email"
placeholder="john.doe@example.com" placeholder="john.doe@example.com"
required 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-black focus:border-black 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-brand sm:text-sm"
/> />
</div> </div>
</div> </div>
@ -116,7 +116,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
<button <button
type="submit" type="submit"
disabled={loading} 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-black hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${ className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-brand hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
loading ? "cursor-not-allowed" : "" loading ? "cursor-not-allowed" : ""
}`}> }`}>
{loading && ( {loading && (

2
pages/auth/logout.tsx
View file

@ -35,7 +35,7 @@ export default function Logout() {
</div> </div>
<div className="mt-5 sm:mt-6"> <div className="mt-5 sm:mt-6">
<Link href="/auth/login"> <Link href="/auth/login">
<a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm"> <a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-brand text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm">
{t("go_back_login")} {t("go_back_login")}
</a> </a>
</Link> </Link>

6
pages/auth/signup.tsx
View file

@ -85,7 +85,7 @@ export default function Signup(props) {
disabled={!!props.email} disabled={!!props.email}
readOnly={!!props.email} readOnly={!!props.email}
value={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" 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-brand sm:text-sm"
/> />
</div> </div>
<div className="mb-2"> <div className="mb-2">
@ -98,7 +98,7 @@ export default function Signup(props) {
id="password" id="password"
required required
placeholder="•••••••••••••" 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" 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-brand sm:text-sm"
/> />
</div> </div>
<div> <div>
@ -111,7 +111,7 @@ export default function Signup(props) {
id="passwordcheck" id="passwordcheck"
required required
placeholder="•••••••••••••" 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" 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-brand sm:text-sm"
/> />
</div> </div>
</div> </div>

4
pages/availability/troubleshoot.tsx
View file

@ -64,7 +64,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
/> />
<small className="block text-neutral-400">{t("hover_over_bold_times_tip")}</small> <small className="block text-neutral-400">{t("hover_over_bold_times_tip")}</small>
<div className="mt-4 space-y-4"> <div className="mt-4 space-y-4">
<div className="bg-black overflow-hidden rounded-sm"> <div className="bg-brand overflow-hidden rounded-sm">
<div className="px-4 sm:px-6 py-2 text-white"> <div className="px-4 sm:px-6 py-2 text-white">
{t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)} {t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
</div> </div>
@ -94,7 +94,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
</div> </div>
)} )}
<div className="bg-black overflow-hidden rounded-sm"> <div className="bg-brand overflow-hidden rounded-sm">
<div className="px-4 sm:px-6 py-2 text-white"> <div className="px-4 sm:px-6 py-2 text-white">
{t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)} {t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
</div> </div>

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

@ -275,7 +275,7 @@ const EventTypesPage = () => {
return ( return (
<div> <div>
<Head> <Head>
<title>{t("event_types_page_title")}| Cal.com</title> <title>Home | Cal.com</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Shell <Shell

2
pages/getting-started.tsx
View file

@ -408,7 +408,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
} }
return ( return (
<div className="min-h-screen bg-black"> <div className="min-h-screen bg-brand">
<Head> <Head>
<title>Cal.com - {t("getting_started")}</title> <title>Cal.com - {t("getting_started")}</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />

12
pages/integrations/index.tsx
View file

@ -48,7 +48,7 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
}); });
return ( return (
<ListItem className="flex w-full p-4"> <ListItem className="flex w-full p-4 -mt-px">
<div className="flex justify-between w-full"> <div className="flex justify-between w-full">
<div className="flex flex-col max-w-full truncate"> <div className="flex flex-col max-w-full truncate">
<div className="flex space-y-1"> <div className="flex space-y-1">
@ -61,7 +61,7 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
</span> </span>
</div> </div>
<div className="flex mt-2"> <div className="flex mt-2">
<span className="flex flex-col space-y-1 text-xs sm:flex-row sm:space-x-2"> <span className="flex flex-col space-y-1 sm:space-y-0 text-xs sm:flex-row sm:space-x-2">
{props.webhook.eventTriggers.map((eventTrigger, ind) => ( {props.webhook.eventTriggers.map((eventTrigger, ind) => (
<span <span
key={ind} key={ind}
@ -366,7 +366,7 @@ function IframeEmbedContainer() {
<div> <div>
<input <input
id="iframe" id="iframe"
className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-black" className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-brand"
placeholder={t("loading")} placeholder={t("loading")}
defaultValue={iframeTemplate} defaultValue={iframeTemplate}
readOnly readOnly
@ -391,7 +391,7 @@ function IframeEmbedContainer() {
<div> <div>
<input <input
id="fullscreen" id="fullscreen"
className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-black" className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-brand"
placeholder={t("loading")} placeholder={t("loading")}
defaultValue={htmlTemplate} defaultValue={htmlTemplate}
readOnly readOnly
@ -419,9 +419,9 @@ function IframeEmbedContainer() {
</div> </div>
<ShellSubHeading className="mt-10" title="Cal.com API" subtitle={t("leverage_our_api")} /> <ShellSubHeading className="mt-10" title="Cal.com API" subtitle={t("leverage_our_api")} />
<a href="https://developer.cal.com/api" className="btn btn-primary"> <Button color="primary" href="https://developer.cal.com/api">
{t("browse_api_documentation")} {t("browse_api_documentation")}
</a> </Button>
</div> </div>
</> </>
); );

2
pages/success.tsx
View file

@ -246,7 +246,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
id="email" id="email"
inputMode="email" inputMode="email"
defaultValue={router.query.email} defaultValue={router.query.email}
className="block w-full text-gray-600 border-gray-300 shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm" className="block w-full text-gray-600 border-gray-300 shadow-sm dark:bg-brand dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
placeholder="rick.astley@cal.com" placeholder="rick.astley@cal.com"
/> />
<Button type="submit" className="min-w-max" color="primary"> <Button type="submit" className="min-w-max" color="primary">

4
pages/team/[slug].tsx
View file

@ -29,7 +29,7 @@ function TeamPage({ team }: inferSSRProps<typeof getServerSideProps>) {
{team.eventTypes.map((type) => ( {team.eventTypes.map((type) => (
<li <li
key={type.id} key={type.id}
className="group relative dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-black rounded-sm"> className="group relative dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-brand rounded-sm">
<ArrowRightIcon className="absolute transition-opacity h-4 w-4 right-3 top-3 text-black dark:text-white opacity-0 group-hover:opacity-100" /> <ArrowRightIcon className="absolute transition-opacity h-4 w-4 right-3 top-3 text-black dark:text-white opacity-0 group-hover:opacity-100" />
<Link href={`${team.slug}/${type.slug}`}> <Link href={`${team.slug}/${type.slug}`}>
<a className="px-6 py-4 flex justify-between"> <a className="px-6 py-4 flex justify-between">
@ -76,7 +76,7 @@ function TeamPage({ team }: inferSSRProps<typeof getServerSideProps>) {
<div className="w-full border-t border-gray-200 dark:border-gray-900" /> <div className="w-full border-t border-gray-200 dark:border-gray-900" />
</div> </div>
<div className="relative flex justify-center"> <div className="relative flex justify-center">
<span className="px-2 bg-gray-100 text-sm text-gray-500 dark:bg-black dark:text-gray-500"> <span className="px-2 bg-gray-100 text-sm text-gray-500 dark:bg-brand dark:text-gray-500">
{t("or")} {t("or")}
</span> </span>
</div> </div>

6
styles/globals.css
View file

@ -7,7 +7,7 @@
@apply text-sm focus:ring-0 border-0; @apply text-sm focus:ring-0 border-0;
} }
.dark .PhoneInputInput { .dark .PhoneInputInput {
@apply bg-black; @apply bg-brand;
} }
.PhoneInputCountrySelect { .PhoneInputCountrySelect {
@apply text-black; @apply text-black;
@ -170,12 +170,12 @@
} }
.react-multi-email > [type="text"] { .react-multi-email > [type="text"] {
@apply 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; @apply shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md;
} }
.react-multi-email [data-tag] { .react-multi-email [data-tag] {
box-shadow: none !important; box-shadow: none !important;
@apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500; @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-brand focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
} }
.react-multi-email > span[data-placeholder] { .react-multi-email > span[data-placeholder] {

3
tailwind.config.js
View file

@ -12,6 +12,9 @@ module.exports = {
}, },
extend: { extend: {
colors: { colors: {
/* your primary brand color */
brand: "#292929",
black: "#111111", black: "#111111",
gray: { gray: {
50: "#F8F8F8", 50: "#F8F8F8",