wip: replaced dark border with border-subtle (#8211)
This commit is contained in:
Peer Richelsen
@@ -529,15 +529,15 @@ const BookingPage = ({
|
||||
className={classNames(
|
||||
"main",
|
||||
isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-default dark:border",
|
||||
"dark:border-darkgray-300 rounded-md sm:border"
|
||||
"border-subtle rounded-md sm:border"
|
||||
)}>
|
||||
<div className="sm:flex">
|
||||
{showEventTypeDetails && (
|
||||
<div className="sm:dark:border-darkgray-300 text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
|
||||
<div className="sm:border-subtle text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
|
||||
<BookingDescription isBookingPage profile={profile} eventType={eventType}>
|
||||
<BookingDescriptionPayment eventType={eventType} t={t} />
|
||||
{!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
|
||||
<div className="dark:text-inverted text-default items-start text-sm font-medium">
|
||||
<div className="text-default items-start text-sm font-medium">
|
||||
<FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
|
||||
<p className="-ml-2 inline-block items-center px-2">
|
||||
{getEveryFreqFor({
|
||||
|
||||
@@ -55,12 +55,12 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
|
||||
}
|
||||
|
||||
const EventTypes = () => (
|
||||
<ul className="dark:border-darkgray-300 border-subtle rounded-md border">
|
||||
<ul className="border-subtle border-subtle rounded-md border">
|
||||
{team.eventTypes.map((type, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={classNames(
|
||||
"dark:bg-darkgray-100 dark:border-darkgray-300 bg-default hover:bg-muted border-subtle group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0",
|
||||
"dark:bg-darkgray-100 border-subtle bg-default hover:bg-muted border-subtle group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0",
|
||||
!isEmbed && "bg-default"
|
||||
)}>
|
||||
<div className="px-6 py-4 ">
|
||||
@@ -125,7 +125,7 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
|
||||
<div>
|
||||
<div className="relative mt-12">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="dark:border-darkgray-300 border-subtle w-full border-t" />
|
||||
<div className="border-subtle border-subtle w-full border-t" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<span className="dark:bg-darkgray-50 bg-subtle text-subtle dark:text-inverted px-2 text-sm">
|
||||
|
||||
+1
-1
@@ -103,7 +103,7 @@ const widgets: Widgets & { [key in keyof Widgets]: Widgets[key] & { type: string
|
||||
props.setValue(val);
|
||||
}}
|
||||
containerClassName="w-full"
|
||||
className="dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500"
|
||||
className="dark:placeholder:text-darkgray-600 focus:border-brand border-subtle dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -120,7 +120,7 @@ function RoutingForm({ form, profile, ...restProps }: inferSSRProps<typeof getSe
|
||||
</Head>
|
||||
<div className={classNames("mx-auto my-0 max-w-3xl", isEmbed ? "" : "md:my-24")}>
|
||||
<div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
|
||||
<div className="main border-bookinglightest dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-default mx-0 rounded-md p-4 py-6 sm:-mx-4 sm:px-8 md:border">
|
||||
<div className="main border-bookinglightest dark:bg-darkgray-100 sm:border-subtle bg-default mx-0 rounded-md p-4 py-6 sm:-mx-4 sm:px-8 md:border">
|
||||
<Toaster position="bottom-right" />
|
||||
|
||||
<form onSubmit={handleOnSubmit}>
|
||||
@@ -150,7 +150,7 @@ function RoutingForm({ form, profile, ...restProps }: inferSSRProps<typeof getSe
|
||||
) : (
|
||||
<div className="mx-auto my-0 max-w-3xl md:my-24">
|
||||
<div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
|
||||
<div className="main dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-default -mx-4 rounded-md border border-neutral-200 p-4 py-6 sm:mx-0 sm:px-8">
|
||||
<div className="main dark:bg-darkgray-100 sm:border-subtle bg-default -mx-4 rounded-md border border-neutral-200 p-4 py-6 sm:mx-0 sm:px-8">
|
||||
<div className="text-emphasis">{customPageMessage}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -125,7 +125,7 @@ export const Components: Record<BookingFieldType, Component> = {
|
||||
const { t } = useLocale();
|
||||
value = value || [];
|
||||
const inputClassName =
|
||||
"dark:placeholder:text-darkgray-600 focus:border-brand-default dark:border-darkgray-300 block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-subtle";
|
||||
"dark:placeholder:text-darkgray-600 focus:border-brand-default border-subtle block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-subtle";
|
||||
return (
|
||||
<>
|
||||
{value.length ? (
|
||||
@@ -145,7 +145,7 @@ export const Components: Record<BookingFieldType, Component> = {
|
||||
}}
|
||||
className={classNames(inputClassName, "border-r-0")}
|
||||
addOnClassname={classNames(
|
||||
"border-default border block border-l-0 disabled:bg-emphasis disabled:hover:cursor-not-allowed bg-transparent disabled:text-subtle dark:border-darkgray-300 "
|
||||
"border-default border block border-l-0 disabled:bg-emphasis disabled:hover:cursor-not-allowed bg-transparent disabled:text-subtle border-subtle "
|
||||
)}
|
||||
placeholder={placeholder}
|
||||
label={<></>}
|
||||
@@ -245,7 +245,7 @@ export const Components: Record<BookingFieldType, Component> = {
|
||||
}
|
||||
setValue(newValue);
|
||||
}}
|
||||
className="dark:bg-darkgray-300 dark:border-darkgray-300 border-default text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2"
|
||||
className="dark:bg-darkgray-300 border-subtle border-default text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2"
|
||||
value={option.value}
|
||||
checked={value.includes(option.value)}
|
||||
/>
|
||||
@@ -304,7 +304,7 @@ export const Components: Record<BookingFieldType, Component> = {
|
||||
type="radio"
|
||||
disabled={readOnly}
|
||||
name={name}
|
||||
className="dark:bg-darkgray-300 dark:border-darkgray-300 border-default text-emphasis h-4 w-4 focus:ring-black ltr:mr-2 rtl:ml-2"
|
||||
className="dark:bg-darkgray-300 border-subtle border-default text-emphasis h-4 w-4 focus:ring-black ltr:mr-2 rtl:ml-2"
|
||||
value={option.value}
|
||||
onChange={(e) => {
|
||||
setValue({
|
||||
|
||||
@@ -36,8 +36,8 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
|
||||
className={cn(
|
||||
"flex h-4 w-4 items-center justify-center rounded-[4px] border opacity-70 ltr:mr-2 rtl:ml-2",
|
||||
isSelected
|
||||
? "dark:bg-darkgray-200 dark:border-darkgray-300 bg-gray-800 text-gray-50"
|
||||
: " dark:bg-darkgray-200 dark:border-darkgray-300 border-default bg-mutedext-gray-600"
|
||||
? "dark:bg-darkgray-200 border-subtle bg-gray-800 text-gray-50"
|
||||
: " dark:bg-darkgray-200 border-subtle border-default bg-mutedext-gray-600"
|
||||
)}>
|
||||
{isSelected && <FiCheck className="h-3 w-3 text-current" />}
|
||||
</div>
|
||||
@@ -73,8 +73,8 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
|
||||
className={cn(
|
||||
"flex h-4 w-4 items-center justify-center rounded-[4px] border ltr:mr-2 rtl:ml-2",
|
||||
isSelected
|
||||
? "dark:bg-darkgray-200 dark:border-darkgray-300 bg-gray-800 text-gray-50"
|
||||
: " dark:bg-darkgray-200 dark:border-darkgray-300 border-default bg-mutedext-gray-600"
|
||||
? "dark:bg-darkgray-200 border-subtle bg-gray-800 text-gray-50"
|
||||
: " dark:bg-darkgray-200 border-subtle border-default bg-mutedext-gray-600"
|
||||
)}>
|
||||
{isSelected && <FiCheck className="h-3 w-3 text-current" />}
|
||||
</div>
|
||||
|
||||
@@ -36,7 +36,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
|
||||
className={
|
||||
classNames && classNames.searchBox
|
||||
? classNames.searchBox
|
||||
: "dark:border-darkgray-300 dark:bg-darkgray-100 focus:border-darkgray-900 text-subtle border-subtle w-full rounded-[6px] border py-2 pl-8 text-sm focus:border-gray-900 focus:outline-none focus:ring-0"
|
||||
: "border-subtle dark:bg-darkgray-100 focus:border-darkgray-900 text-subtle border-subtle w-full rounded-[6px] border py-2 pl-8 text-sm focus:border-gray-900 focus:outline-none focus:ring-0"
|
||||
}
|
||||
autoFocus
|
||||
type="text"
|
||||
|
||||
@@ -130,8 +130,8 @@ function Select<T extends Option>({
|
||||
className={cn(
|
||||
"min-w-64 border-default text-muted flex max-h-[36px] items-center justify-between rounded-md border text-sm transition-all duration-300 focus:outline-none",
|
||||
isDisabled
|
||||
? " dark:bg-darkgray-200 dark:border-darkgray-300 bg-subtle dark:text-subtle text-muted border-subtle"
|
||||
: "dark:border-darkgray-300 dark:bg-darkgray-50 dark:focus:border-darkgray-700 dark:focus:bg-darkgray-100 dark:focus:text-darkgray-900 dark:hover:text-darkgray-900 bg-default hover:border-empthasis focus:border-gray-900"
|
||||
? " dark:bg-darkgray-200 border-subtle bg-subtle dark:text-subtle text-muted border-subtle"
|
||||
: "border-subtle dark:bg-darkgray-50 dark:focus:border-darkgray-700 dark:focus:bg-darkgray-100 dark:focus:text-darkgray-900 dark:hover:text-darkgray-900 bg-default hover:border-empthasis focus:border-gray-900"
|
||||
)}>
|
||||
<div className="flex w-full grow-0 items-center gap-1 overflow-x-hidden">
|
||||
<>
|
||||
@@ -203,7 +203,7 @@ function Select<T extends Option>({
|
||||
<div
|
||||
className={
|
||||
classNames?.menu ??
|
||||
"dark:bg-darkgray-100 dark:border-darkgray-300 min-w-64 bg-default text-default z-10 mt-1.5 overflow-x-hidden rounded border py-1 text-sm shadow-sm"
|
||||
"dark:bg-darkgray-100 border-subtle min-w-64 bg-default text-default z-10 mt-1.5 overflow-x-hidden rounded border py-1 text-sm shadow-sm"
|
||||
}>
|
||||
{isSearchable && (
|
||||
<SearchInput
|
||||
|
||||
@@ -20,7 +20,7 @@ function AddressInput({ className = "", value, onChange, ...rest }: AddressInput
|
||||
onChange(e.target.value);
|
||||
}}
|
||||
color="#D2D2D2"
|
||||
className={`${className} focus-within:border-brand-default dark:bg-darkgray-100 dark:border-darkgray-300 border-default disabled:text-subtle disabled:dark:text-subtle dark:text-inverted block h-10 w-full rounded-md border border py-px pl-10 text-sm outline-none ring-black focus-within:ring-1 disabled:opacity-50 dark:placeholder-gray-500 dark:selection:bg-green-500`}
|
||||
className={`${className} focus-within:border-brand-default dark:bg-darkgray-100 border-subtle border-default disabled:text-subtle disabled:dark:text-subtle dark:text-inverted block h-10 w-full rounded-md border border py-px pl-10 text-sm outline-none ring-black focus-within:ring-1 disabled:opacity-50 dark:placeholder-gray-500 dark:selection:bg-green-500`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user