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="flex items-center justify-between flex-wrap">
<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
className="h-7 w-7 text-indigo-500 fill-current"
xmlns="http://www.w3.org/2000/svg"

4
components/Loader.tsx
View file

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

2
components/Tooltip.tsx
View file

@ -23,7 +23,7 @@ export function Tooltip({
onOpenChange={onOpenChange}>
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
<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"
align="center"
{...props}>

2
components/booking/AvailableTimes.tsx
View file

@ -91,7 +91,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
<div key={slot.time.format()}>
<Link href={bookingUrl}>
<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">
{slot.time.format(timeFormat)}
</a>

4
components/booking/DatePicker.tsx
View file

@ -186,12 +186,12 @@ function DatePicker({
disabled={day.disabled}
className={classNames(
"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
? "text-gray-400 font-light hover:border-0 cursor-default"
: "dark:text-white text-primary-500 font-medium",
date && date.isSame(inviteeDate().date(day.date), "day")
? "bg-black text-white-important"
? "bg-brand text-white-important"
: !day.disabled
? " 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}
onChange={handle24hClockToggle}
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"
)}>
<span className="sr-only">{t("use_setting")}</span>
@ -69,7 +69,7 @@ const TimeOptions: FC<Props> = (props) => {
id="timeZone"
value={selectedTimeZone}
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>
) : null;

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

@ -205,7 +205,7 @@ const BookingPage = (props: BookingPageProps) => {
{isReady && (
<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="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
size={16}
items={[{ image: props.profile.image, alt: props.profile.name }].concat(
@ -263,7 +263,7 @@ const BookingPage = (props: BookingPageProps) => {
name="name"
id="name"
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"
defaultValue={props.booking ? props.booking.attendees[0].name : ""}
/>
@ -282,7 +282,7 @@ const BookingPage = (props: BookingPageProps) => {
id="email"
inputMode="email"
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"
defaultValue={props.booking ? props.booking.attendees[0].email : ""}
/>
@ -341,7 +341,7 @@ const BookingPage = (props: BookingPageProps) => {
id={"custom_" + input.id}
required={input.required}
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}
/>
)}
@ -351,7 +351,7 @@ const BookingPage = (props: BookingPageProps) => {
name={"custom_" + input.id}
id={"custom_" + input.id}
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}
/>
)}
@ -361,7 +361,7 @@ const BookingPage = (props: BookingPageProps) => {
name={"custom_" + input.id}
id={"custom_" + input.id}
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=""
/>
)}
@ -437,7 +437,7 @@ const BookingPage = (props: BookingPageProps) => {
name="notes"
id="notes"
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")}
defaultValue={props.booking ? props.booking.description : ""}
/>

4
components/security/ChangePasswordSection.tsx
View file

@ -72,7 +72,7 @@ const ChangePasswordSection = () => {
name="current_password"
id="current_password"
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")}
/>
</div>
@ -89,7 +89,7 @@ const ChangePasswordSection = () => {
value={newPassword}
required
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")}
/>
</div>

2
components/security/TwoFactorModalHeader.tsx
View file

@ -4,7 +4,7 @@ import React from "react";
const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
return (
<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" />
</div>
<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="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" />
</div>
<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"
placeholder="email@example.com"
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 className="mb-4">
@ -104,7 +104,7 @@ export default function MemberInvitationModal(props: { team: Team | undefined |
</label>
<select
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="OWNER">{t("owner")}</option>
</select>
@ -116,7 +116,7 @@ export default function MemberInvitationModal(props: { team: Team | undefined |
name="sendInviteEmail"
defaultChecked
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 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",
"border border-neutral-200",
"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",
"hover:shadow-md"
);

2
components/ui/Avatar.tsx
View file

@ -36,7 +36,7 @@ export default function Avatar(props: AvatarProps) {
return title ? (
<Tooltip.Tooltip delayDuration={300}>
<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 />
{title}
</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>
</Tooltip.TooltipTrigger>
{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 />
<ul>
{truncatedAvatars.map((title) => (

2
components/ui/Button.tsx
View file

@ -63,7 +63,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
color === "primary" &&
(disabled
? "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" &&
(disabled
? "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"
value={{ value: selectedTimeZone }}
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>

2
components/ui/UsernameInput.tsx
View file

@ -22,7 +22,7 @@ const UsernameInput = React.forwardRef<HTMLInputElement, UsernameInputProps>((pr
autoComplete="username"
required
{...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>

2
components/ui/WeekdaySelect.tsx
View file

@ -34,7 +34,7 @@ export const WeekdaySelect = (props: WeekdaySelectProps) => {
}}
className={`
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-l-none" : ""}
${idx === 0 ? "rounded-l" : ""}

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

@ -8,7 +8,7 @@ export const PhoneInput = (props: PhoneInputProps) => (
<BasePhoneInput
{...props}
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
)}
onChange={() => {

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

@ -12,7 +12,7 @@ const RadioArea = (props: RadioAreaProps) => {
<label
className={classNames(
"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
)}>
<input

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

@ -72,7 +72,7 @@ export default function SetTimesModal(props) {
maxLength="2"
name="hours"
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"
defaultValue={startHours}
/>
@ -91,7 +91,7 @@ export default function SetTimesModal(props) {
maxLength="2"
name="minutes"
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"
defaultValue={startMinutes}
/>
@ -111,7 +111,7 @@ export default function SetTimesModal(props) {
maxLength="2"
name="hours"
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"
defaultValue={endHours}
/>
@ -130,7 +130,7 @@ export default function SetTimesModal(props) {
step="15"
name="minutes"
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"
defaultValue={endMinutes}
/>

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

@ -15,7 +15,7 @@ import Button from "@components/ui/Button";
const CARD_OPTIONS = {
iconStyle: "solid" as const,
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: {
base: {

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

@ -130,7 +130,7 @@ const AddCalDavIntegration = React.forwardRef<HTMLFormElement, Props>((props, re
name="url"
id="url"
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>

4
pages/[user].tsx
View file

@ -30,7 +30,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
avatar={user.avatar || undefined}
/>
{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">
<div className="mb-8 text-center">
<Avatar
@ -47,7 +47,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
{eventTypes.map((type) => (
<div
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" />
<Link href={`/${user.username}/${type.slug}`}>
<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"
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-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>

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

@ -107,7 +107,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
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-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>
@ -116,7 +116,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
<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-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 && (

2
pages/auth/logout.tsx
View file

@ -35,7 +35,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-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")}
</a>
</Link>

6
pages/auth/signup.tsx
View file

@ -85,7 +85,7 @@ export default function Signup(props) {
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"
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 className="mb-2">
@ -98,7 +98,7 @@ export default function Signup(props) {
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"
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>
@ -111,7 +111,7 @@ export default function Signup(props) {
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"
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>

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>
<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">
{t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
</div>
@ -94,7 +94,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
</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">
{t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
</div>

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

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

2
pages/getting-started.tsx
View file

@ -408,7 +408,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
}
return (
<div className="min-h-screen bg-black">
<div className="min-h-screen bg-brand">
<Head>
<title>Cal.com - {t("getting_started")}</title>
<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 (
<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 flex-col max-w-full truncate">
<div className="flex space-y-1">
@ -61,7 +61,7 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
</span>
</div>
<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) => (
<span
key={ind}
@ -366,7 +366,7 @@ function IframeEmbedContainer() {
<div>
<input
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")}
defaultValue={iframeTemplate}
readOnly
@ -391,7 +391,7 @@ function IframeEmbedContainer() {
<div>
<input
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")}
defaultValue={htmlTemplate}
readOnly
@ -419,9 +419,9 @@ function IframeEmbedContainer() {
</div>
<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")}
</a>
</Button>
</div>
</>
);

2
pages/success.tsx
View file

@ -246,7 +246,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
id="email"
inputMode="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"
/>
<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) => (
<li
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" />
<Link href={`${team.slug}/${type.slug}`}>
<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>
<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")}
</span>
</div>

6
styles/globals.css
View file

@ -7,7 +7,7 @@
@apply text-sm focus:ring-0 border-0;
}
.dark .PhoneInputInput {
@apply bg-black;
@apply bg-brand;
}
.PhoneInputCountrySelect {
@apply text-black;
@ -170,12 +170,12 @@
}
.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] {
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] {

3
tailwind.config.js
View file

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