From 8bbfc0c7f0b225dcfd93edebb96a2ee610b41659 Mon Sep 17 00:00:00 2001 From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Date: Tue, 14 Dec 2021 16:09:32 +0530 Subject: [PATCH] Adds complementing text color for various brand colors that the user might choose (#1289) * added contrast evaluator * added brandtext --WIP * further changes and fixes * fixed type err * fixed datepicker bug * changed brandtext to brandcontrast * further dark mode changes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- components/AddToHomescreen.tsx | 18 +++++------ components/CustomBranding.tsx | 30 +++++++++++++++++++ components/Tooltip.tsx | 2 +- components/booking/AvailableTimes.tsx | 2 +- components/booking/DatePicker.tsx | 8 ++--- components/booking/TimeOptions.tsx | 12 ++++---- components/security/TwoFactorModalHeader.tsx | 4 +-- components/team/MemberInvitationModal.tsx | 4 +-- components/ui/Avatar.tsx | 2 +- components/ui/Button.tsx | 2 +- components/ui/WeekdaySelect.tsx | 2 +- components/ui/form/PhoneInput.tsx | 2 +- ee/components/stripe/Payment.tsx | 2 +- .../availability/TeamAvailabilityTimes.tsx | 2 +- pages/auth/forgot-password/index.tsx | 16 +++++----- pages/auth/logout.tsx | 14 ++++----- pages/availability/troubleshoot.tsx | 20 ++++++------- pages/getting-started.tsx | 2 +- pages/success.tsx | 2 +- pages/team/[slug].tsx | 2 +- styles/globals.css | 1 + tailwind.config.js | 2 +- 22 files changed, 90 insertions(+), 61 deletions(-) diff --git a/components/AddToHomescreen.tsx b/components/AddToHomescreen.tsx index 0405b1e1..8730e948 100644 --- a/components/AddToHomescreen.tsx +++ b/components/AddToHomescreen.tsx @@ -13,14 +13,14 @@ export default function AddToHomescreen() { } } return !closeBanner ? ( -
-
+
+
-
-
- +
+
+ @@ -34,13 +34,13 @@ export default function AddToHomescreen() {

-
+
diff --git a/components/CustomBranding.tsx b/components/CustomBranding.tsx index 74b5bd0c..75acc79c 100644 --- a/components/CustomBranding.tsx +++ b/components/CustomBranding.tsx @@ -1,8 +1,38 @@ import { useEffect } from "react"; +function computeContrastRatio(a: number[], b: number[]) { + const lum1 = computeLuminance(a[0], a[1], a[2]); + const lum2 = computeLuminance(b[0], b[1], b[2]); + const brightest = Math.max(lum1, lum2); + const darkest = Math.min(lum1, lum2); + return (brightest + 0.05) / (darkest + 0.05); +} + +function computeLuminance(r: number, g: number, b: number) { + const a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; +} + +function hexToRGB(hex: string) { + const color = hex.replace("#", ""); + return [parseInt(color.slice(0, 2), 16), parseInt(color.slice(2, 4), 16), parseInt(color.slice(4, 6), 16)]; +} + +function getContrastingTextColor(bgColor: string | null): string { + bgColor = bgColor == "" || bgColor == null ? "#292929" : bgColor; + const rgb = hexToRGB(bgColor); + const whiteContrastRatio = computeContrastRatio(rgb, [255, 255, 255]); + const blackContrastRatio = computeContrastRatio(rgb, [41, 41, 41]); //#292929 + return whiteContrastRatio > blackContrastRatio ? "#ffffff" : "#292929"; +} + const BrandColor = ({ val = "#292929" }: { val: string | undefined | null }) => { useEffect(() => { document.documentElement.style.setProperty("--brand-color", val); + document.documentElement.style.setProperty("--brand-text-color", getContrastingTextColor(val)); }, [val]); return null; }; diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx index b27f3c25..b932152d 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 92e64c31..eaa8ab33 100644 --- a/components/booking/AvailableTimes.tsx +++ b/components/booking/AvailableTimes.tsx @@ -84,7 +84,7 @@ const AvailableTimes: FC = ({
{slot.time.format(timeFormat)} diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx index bc207579..5fd9832b 100644 --- a/components/booking/DatePicker.tsx +++ b/components/booking/DatePicker.tsx @@ -200,13 +200,11 @@ function DatePicker({ className={classNames( "absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto", "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", + day.disabled ? "text-gray-400 font-light hover:border-0 cursor-default" : "font-medium", date && date.isSame(inviteeDate().date(day.date), "day") - ? "bg-brand text-white-important" + ? "bg-brand text-brandcontrast" : !day.disabled - ? " bg-gray-100 dark:bg-gray-600" + ? " bg-gray-100 dark:bg-gray-600 dark:text-white" : "" )} data-testid="day" diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx index b707e638..8b6c79af 100644 --- a/components/booking/TimeOptions.tsx +++ b/components/booking/TimeOptions.tsx @@ -35,19 +35,19 @@ const TimeOptions: FC = (props) => { }; return selectedTimeZone !== "" ? ( -
+
-
{t("time_options")}
+
{t("time_options")}
- {t("am_pm")} + {t("am_pm")} {t("use_setting")} @@ -60,7 +60,7 @@ const TimeOptions: FC = (props) => { /> - {t("24_h")} + {t("24_h")}
@@ -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-brand mt-1 block w-full sm:text-sm border-gray-300 rounded-md" + className="block w-full mt-1 mb-2 border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm" />
) : null; diff --git a/components/security/TwoFactorModalHeader.tsx b/components/security/TwoFactorModalHeader.tsx index bcf5f21f..b2c763fe 100644 --- a/components/security/TwoFactorModalHeader.tsx +++ b/components/security/TwoFactorModalHeader.tsx @@ -4,11 +4,11 @@ import React from "react"; const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => { return (
-
+
-

{description}

diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx index 5f873c58..370462a9 100644 --- a/components/team/MemberInvitationModal.tsx +++ b/components/team/MemberInvitationModal.tsx @@ -62,8 +62,8 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
-
- +
+