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

Matches phone input darkmode to the rest of inputs (#3247)

pull/3249/head
Omar López 2022-07-06 12:19:48 -06:00 committed by GitHub
parent 56da9c7c5f
commit a4684042a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/components/ui/form/PhoneInput.tsx
View File

@ -1,8 +1,6 @@
import BasePhoneInput, { Props } from "react-phone-number-input/react-hook-form"; import BasePhoneInput, { Props } from "react-phone-number-input/react-hook-form";
import "react-phone-number-input/style.css"; import "react-phone-number-input/style.css";
import classNames from "@lib/classNames";
export type PhoneInputProps<FormValues> = Props< export type PhoneInputProps<FormValues> = Props<
{ {
value: string; value: string;
@ -19,10 +17,9 @@ function PhoneInput<FormValues>({ control, name, ...rest }: PhoneInputProps<Form
{...rest} {...rest}
name={name} name={name}
control={control} control={control}
className={classNames( countrySelectProps={{ className: "text-black" }}
"border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white", numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }}
rest.disabled ? "bg-gray-200 dark:text-gray-500" : "" className="border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 shadow-sm ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
)}
/> />
); );
} }

11
apps/web/styles/globals.css
View File

@ -61,17 +61,6 @@ button[role="switch"][data-state="checked"] span {
transform: translateX(16px); transform: translateX(16px);
} }
/* PhoneInput dark-mode overrides (it would add a lot of boilerplate to do this in JavaScript) */
.PhoneInputInput {
@apply border-0 text-sm focus:ring-0;
}
.dark .PhoneInputInput {
@apply bg-black;
}
.PhoneInputCountrySelect {
@apply text-black;
}
/* DateRangePicker */ /* DateRangePicker */
.react-daterange-picker > .react-daterange-picker__wrapper { .react-daterange-picker > .react-daterange-picker__wrapper {
/* border consistent with other inputs */ /* border consistent with other inputs */