From d2965627d0516320c60dd55a2ac342a858e9af78 Mon Sep 17 00:00:00 2001 From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Date: Wed, 15 Dec 2021 15:56:39 +0530 Subject: [PATCH] added brand color to dark mode timepicker (#1307) --- components/booking/AvailableTimes.tsx | 14 ++++++++++++-- components/ui/form/PhoneInput.tsx | 2 +- pages/getting-started.tsx | 2 +- styles/globals.css | 2 +- 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx index eaa8ab33e0..99c7e7c3ef 100644 --- a/components/booking/AvailableTimes.tsx +++ b/components/booking/AvailableTimes.tsx @@ -3,8 +3,9 @@ import { SchedulingType } from "@prisma/client"; import { Dayjs } from "dayjs"; import Link from "next/link"; import { useRouter } from "next/router"; -import React, { FC } from "react"; +import React, { FC, useEffect, useState } from "react"; +import classNames from "@lib/classNames"; import { useLocale } from "@lib/hooks/useLocale"; import { useSlots } from "@lib/hooks/useSlots"; @@ -44,6 +45,12 @@ const AvailableTimes: FC = ({ eventTypeId, }); + const [brand, setBrand] = useState("#292929"); + + useEffect(() => { + setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim()); + }, []); + return (
@@ -84,7 +91,10 @@ const AvailableTimes: FC = ({
{slot.time.format(timeFormat)} diff --git a/components/ui/form/PhoneInput.tsx b/components/ui/form/PhoneInput.tsx index c7e102b754..dfe1c7dfda 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/pages/getting-started.tsx b/pages/getting-started.tsx index b5bae20925..1f022b56d0 100644 --- a/pages/getting-started.tsx +++ b/pages/getting-started.tsx @@ -417,7 +417,7 @@ export default function Onboarding(props: inferSSRProps +
Cal.com - {t("getting_started")} diff --git a/styles/globals.css b/styles/globals.css index 73554a5890..0c4b078c0f 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -12,7 +12,7 @@ @apply text-sm border-0 focus:ring-0; } .dark .PhoneInputInput { - @apply bg-brand; + @apply bg-black; } .PhoneInputCountrySelect { @apply text-black;