From 773e9ac57eadcf9a065566e718a0f4950b3ade57 Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Thu, 4 Nov 2021 14:30:37 +0000 Subject: [PATCH] replaced black color with new brand variable to make styling easier (#1125) --- components/AddToHomescreen.tsx | 2 +- components/Loader.tsx | 4 ++-- components/Tooltip.tsx | 2 +- components/booking/AvailableTimes.tsx | 2 +- components/booking/DatePicker.tsx | 4 ++-- components/booking/TimeOptions.tsx | 4 ++-- components/booking/pages/BookingPage.tsx | 14 +++++++------- components/security/ChangePasswordSection.tsx | 4 ++-- components/security/TwoFactorModalHeader.tsx | 2 +- components/team/MemberInvitationModal.tsx | 8 ++++---- components/team/screens/Team.tsx | 2 +- components/ui/Avatar.tsx | 2 +- components/ui/AvatarGroup.tsx | 2 +- components/ui/Button.tsx | 2 +- components/ui/Scheduler.tsx | 2 +- components/ui/UsernameInput.tsx | 2 +- components/ui/WeekdaySelect.tsx | 2 +- components/ui/form/PhoneInput.tsx | 2 +- components/ui/form/radio-area/RadioAreaGroup.tsx | 2 +- components/ui/modal/SetTimesModal.tsx | 8 ++++---- ee/components/stripe/Payment.tsx | 2 +- .../CalDav/components/AddCalDavIntegration.tsx | 2 +- pages/[user].tsx | 4 ++-- pages/auth/forgot-password/[id].tsx | 2 +- pages/auth/forgot-password/index.tsx | 4 ++-- pages/auth/logout.tsx | 2 +- pages/auth/signup.tsx | 6 +++--- pages/availability/troubleshoot.tsx | 4 ++-- pages/event-types/index.tsx | 2 +- pages/getting-started.tsx | 2 +- pages/integrations/index.tsx | 12 ++++++------ pages/success.tsx | 2 +- pages/team/[slug].tsx | 4 ++-- styles/globals.css | 6 +++--- tailwind.config.js | 3 +++ 35 files changed, 66 insertions(+), 63 deletions(-) diff --git a/components/AddToHomescreen.tsx b/components/AddToHomescreen.tsx index 312894dc..0405b1e1 100644 --- a/components/AddToHomescreen.tsx +++ b/components/AddToHomescreen.tsx @@ -18,7 +18,7 @@ export default function AddToHomescreen() {
- + - +
+
); } diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx index 7103c0ff..b27f3c25 100644 --- a/components/Tooltip.tsx +++ b/components/Tooltip.tsx @@ -23,7 +23,7 @@ export function Tooltip({ onOpenChange={onOpenChange}> {children} diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx index ba3b882b..1fc178cb 100644 --- a/components/booking/AvailableTimes.tsx +++ b/components/booking/AvailableTimes.tsx @@ -91,7 +91,7 @@ const AvailableTimes: FC = ({
{slot.time.format(timeFormat)} diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx index f3ce4894..b501128b 100644 --- a/components/booking/DatePicker.tsx +++ b/components/booking/DatePicker.tsx @@ -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" : "" diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx index 123746d8..b707e638 100644 --- a/components/booking/TimeOptions.tsx +++ b/components/booking/TimeOptions.tsx @@ -47,7 +47,7 @@ const TimeOptions: FC = (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" )}> {t("use_setting")} @@ -69,7 +69,7 @@ const TimeOptions: FC = (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" />
) : null; diff --git a/components/booking/pages/BookingPage.tsx b/components/booking/pages/BookingPage.tsx index bab46967..07549717 100644 --- a/components/booking/pages/BookingPage.tsx +++ b/components/booking/pages/BookingPage.tsx @@ -205,7 +205,7 @@ const BookingPage = (props: BookingPageProps) => { {isReady && (
-
+
{ 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 : ""} /> diff --git a/components/security/ChangePasswordSection.tsx b/components/security/ChangePasswordSection.tsx index 492f132c..4d59a6af 100644 --- a/components/security/ChangePasswordSection.tsx +++ b/components/security/ChangePasswordSection.tsx @@ -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")} />
@@ -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")} />
diff --git a/components/security/TwoFactorModalHeader.tsx b/components/security/TwoFactorModalHeader.tsx index 73c3632e..bcf5f21f 100644 --- a/components/security/TwoFactorModalHeader.tsx +++ b/components/security/TwoFactorModalHeader.tsx @@ -4,7 +4,7 @@ import React from "react"; const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => { return (
-
+
diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx index f9a602f6..780e2e25 100644 --- a/components/team/MemberInvitationModal.tsx +++ b/components/team/MemberInvitationModal.tsx @@ -71,7 +71,7 @@ export default function MemberInvitationModal(props: { team: Team | undefined |
-
+
@@ -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" />
@@ -104,7 +104,7 @@ export default function MemberInvitationModal(props: { team: Team | undefined | @@ -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" />
diff --git a/components/team/screens/Team.tsx b/components/team/screens/Team.tsx index 13c0bae0..35d3ba4d 100644 --- a/components/team/screens/Team.tsx +++ b/components/team/screens/Team.tsx @@ -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" ); diff --git a/components/ui/Avatar.tsx b/components/ui/Avatar.tsx index cbaf5f0f..97cf5204 100644 --- a/components/ui/Avatar.tsx +++ b/components/ui/Avatar.tsx @@ -36,7 +36,7 @@ export default function Avatar(props: AvatarProps) { return title ? ( {avatar} - + {title} diff --git a/components/ui/AvatarGroup.tsx b/components/ui/AvatarGroup.tsx index f4ce1f57..8b75a228 100644 --- a/components/ui/AvatarGroup.tsx +++ b/components/ui/AvatarGroup.tsx @@ -40,7 +40,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) { +1 {truncatedAvatars.length !== 0 && ( - +
    {truncatedAvatars.map((title) => ( diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx index 570278c6..8c085141 100644 --- a/components/ui/Button.tsx +++ b/components/ui/Button.tsx @@ -63,7 +63,7 @@ export const Button = forwardRef 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" />
diff --git a/components/ui/UsernameInput.tsx b/components/ui/UsernameInput.tsx index cd3b615f..f3993889 100644 --- a/components/ui/UsernameInput.tsx +++ b/components/ui/UsernameInput.tsx @@ -22,7 +22,7 @@ const UsernameInput = React.forwardRef((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" />
diff --git a/components/ui/WeekdaySelect.tsx b/components/ui/WeekdaySelect.tsx index 83fdddfc..7857ed97 100644 --- a/components/ui/WeekdaySelect.tsx +++ b/components/ui/WeekdaySelect.tsx @@ -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" : ""} diff --git a/components/ui/form/PhoneInput.tsx b/components/ui/form/PhoneInput.tsx index d3e2dad2..7b1bb474 100644 --- a/components/ui/form/PhoneInput.tsx +++ b/components/ui/form/PhoneInput.tsx @@ -8,7 +8,7 @@ export const PhoneInput = (props: PhoneInputProps) => ( { diff --git a/components/ui/form/radio-area/RadioAreaGroup.tsx b/components/ui/form/radio-area/RadioAreaGroup.tsx index e22f1a91..eace7064 100644 --- a/components/ui/form/radio-area/RadioAreaGroup.tsx +++ b/components/ui/form/radio-area/RadioAreaGroup.tsx @@ -12,7 +12,7 @@ const RadioArea = (props: RadioAreaProps) => {
diff --git a/pages/[user].tsx b/pages/[user].tsx index 342e22f6..a95454b8 100644 --- a/pages/[user].tsx +++ b/pages/[user].tsx @@ -30,7 +30,7 @@ export default function User(props: inferSSRProps) { avatar={user.avatar || undefined} /> {isReady && ( -
+
) { {eventTypes.map((type) => (
+ 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"> diff --git a/pages/auth/forgot-password/[id].tsx b/pages/auth/forgot-password/[id].tsx index bc065850..c6288b0d 100644 --- a/pages/auth/forgot-password/[id].tsx +++ b/pages/auth/forgot-password/[id].tsx @@ -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" />
diff --git a/pages/auth/forgot-password/index.tsx b/pages/auth/forgot-password/index.tsx index a17d7bc8..101c143f 100644 --- a/pages/auth/forgot-password/index.tsx +++ b/pages/auth/forgot-password/index.tsx @@ -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" />
@@ -116,7 +116,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
- + {t("go_back_login")} diff --git a/pages/auth/signup.tsx b/pages/auth/signup.tsx index ab40ead5..577d7b5b 100644 --- a/pages/auth/signup.tsx +++ b/pages/auth/signup.tsx @@ -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" />
@@ -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" />
@@ -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" />
diff --git a/pages/availability/troubleshoot.tsx b/pages/availability/troubleshoot.tsx index d6b46a00..c9862ca6 100644 --- a/pages/availability/troubleshoot.tsx +++ b/pages/availability/troubleshoot.tsx @@ -64,7 +64,7 @@ const AvailabilityView = ({ user }: { user: User }) => { /> {t("hover_over_bold_times_tip")}
-
+
{t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
@@ -94,7 +94,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
)} -
+
{t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index 6026ad71..1b6b7cf4 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -275,7 +275,7 @@ const EventTypesPage = () => { return (
- {t("event_types_page_title")}| Cal.com + Home | Cal.com +
Cal.com - {t("getting_started")} diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx index 99266b94..14171dc2 100644 --- a/pages/integrations/index.tsx +++ b/pages/integrations/index.tsx @@ -48,7 +48,7 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void } }); return ( - +
@@ -61,7 +61,7 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
- + {props.webhook.eventTriggers.map((eventTrigger, ind) => ( - +
); diff --git a/pages/success.tsx b/pages/success.tsx index 9ec84739..094067f2 100644 --- a/pages/success.tsx +++ b/pages/success.tsx @@ -246,7 +246,7 @@ export default function Success(props: inferSSRProps) 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" />