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

added brand color to dark mode timepicker (#1307)

Browse source
This commit is contained in:
Syed Ali Shahbaz 2021-12-15 15:56:39 +05:30 committed by GitHub
parent 5deea2c5f6
commit d2965627d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/booking/AvailableTimes.tsx
View file

@ -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<AvailableTimesProps> = ({
eventTypeId,
});
const [brand, setBrand] = useState("#292929");
useEffect(() => {
setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim());
}, []);
return (
<div className="flex flex-col mt-8 text-center sm:pl-4 sm:mt-0 sm:w-1/3 md:-mb-5">
<div className="mb-4 text-lg font-light text-left text-gray-600">
@ -84,7 +91,10 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
<div key={slot.time.format()}>
<Link href={bookingUrl}>
<a
className="block py-4 mb-2 font-medium bg-white border rounded-sm dark:bg-gray-600 text-primary-500 dark:text-neutral-200 border-brand dark:border-transparent hover:text-white hover:bg-brand hover:text-brandcontrast dark:hover:border-black dark:hover:bg-black"
className={classNames(
"block py-4 mb-2 font-medium bg-white border rounded-sm dark:bg-gray-600 text-primary-500 dark:text-neutral-200 dark:border-transparent hover:text-white hover:bg-brand hover:text-brandcontrast dark:hover:border-black dark:hover:bg-brand dark:hover:text-brandcontrast",
brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
)}
data-testid="time">
{slot.time.format(timeFormat)}
</a>

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-brand dark:border-gray-900 dark:text-brandcontrast dark:bg-brand",
"shadow-sm rounded-sm 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-black dark:text-white dark:bg-black",
props.className
)}
onChange={() => {

2
pages/getting-started.tsx
View file

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

2
styles/globals.css
View file

@ -12,7 +12,7 @@
@apply text-sm border-0 focus:ring-0;
}
.dark .PhoneInputInput {
@apply bg-brand;
@apply bg-black;
}
.PhoneInputCountrySelect {
@apply text-black;