public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix dropdown focus + public dark mode buttons (#4527) 

* Fix dropdown focus

* Fix darkmode buttons to use brand
pull/4526/head^2
sean-brydon 2022-09-16 15:29:40 +01:00 committed by GitHub
parent 52e74245a4
commit 96aaa36751
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -34,11 +34,11 @@ import useTheme from "@calcom/lib/hooks/useTheme";
import { HttpError } from "@calcom/lib/http-error"; import { HttpError } from "@calcom/lib/http-error";
import { getEveryFreqFor } from "@calcom/lib/recurringStrings"; import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { Button } from "@calcom/ui/Button";
import { Icon } from "@calcom/ui/Icon"; import { Icon } from "@calcom/ui/Icon";
import { Tooltip } from "@calcom/ui/Tooltip"; import { Tooltip } from "@calcom/ui/Tooltip";
import PhoneInput from "@calcom/ui/form/PhoneInputLazy"; import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
import { EmailInput, Form } from "@calcom/ui/form/fields"; import { EmailInput, Form } from "@calcom/ui/form/fields";
import { Button } from "@calcom/ui/v2";
import { asStringOrNull } from "@lib/asStringOrNull"; import { asStringOrNull } from "@lib/asStringOrNull";
import { timeZone } from "@lib/clock"; import { timeZone } from "@lib/clock";
@ -595,9 +595,7 @@ const BookingPage = ({
required required
className={classNames( className={classNames(
inputClassName, inputClassName,
bookingForm.formState.errors.email bookingForm.formState.errors.email && "!focus:ring-red-700 !border-red-700"
? "border-red-700 focus:ring-red-700"
: " border-gray-300 dark:border-gray-900"
)} )}
placeholder="you@example.com" placeholder="you@example.com"
type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...) type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
@ -756,7 +754,9 @@ const BookingPage = ({
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<ReactMultiEmail <ReactMultiEmail
className="relative" className="relative"
placeholder="guest@example.com" placeholder={
<span className="dark:text-darkgray-600">guest@example.com</span>
}
emails={value} emails={value}
onChange={onChange} onChange={onChange}
getLabel={( getLabel={(
@ -854,7 +854,7 @@ const BookingPage = ({
type="button" type="button"
color="secondary" color="secondary"
onClick={() => setGuestToggle(!guestToggle)} onClick={() => setGuestToggle(!guestToggle)}
className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mr-auto rounded-md"> className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast mr-auto dark:border-transparent">
<Icon.FiUserPlus className="mr-2" /> <Icon.FiUserPlus className="mr-2" />
{t("additional_guests")} {t("additional_guests")}
</Button> </Button>
@ -864,12 +864,12 @@ const BookingPage = ({
type="button" type="button"
onClick={() => router.back()} onClick={() => router.back()}
// We override this for this component only for now - as we don't support darkmode everywhere in the app // We override this for this component only for now - as we don't support darkmode everywhere in the app
className="dark:border-none"> className="dark:hover:bg-darkgray-200 dark:border-none dark:text-white">
{t("cancel")} {t("cancel")}
</Button> </Button>
<Button <Button
type="submit" type="submit"
className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast rounded-md" className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast mr-auto dark:border-transparent"
data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"} data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
loading={mutation.isLoading || recurringMutation.isLoading}> loading={mutation.isLoading || recurringMutation.isLoading}>
{rescheduleUid ? t("reschedule") : t("confirm")} {rescheduleUid ? t("reschedule") : t("confirm")}

6
packages/ui/v2/modules/event-types/CreateEventType.tsx
View File

@ -153,7 +153,11 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
) : ( ) : (
<Dropdown> <Dropdown>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button EndIcon={Icon.FiChevronDown}>{t("new")}</Button> <Button
EndIcon={Icon.FiChevronDown}
className="radix-state-open:bg-brand-500 radix-state-open:ring-2 radix-state-open:ring-brand-500 ring-offset-2">
{t("new")}
</Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuLabel> <DropdownMenuLabel>