fix: Use constants.ts for brand colours > db DEFAULT (#13167)
* fix: user proper default values if no brand colour is set. * fix:default value * fix: more ?? to defined default as color is possibly null
This commit is contained in:
parent
9901c91e9b
commit
bc6267e99b
|
@ -18,6 +18,7 @@ import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/or
|
||||||
import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
|
import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
|
||||||
import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
|
import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
|
||||||
import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
|
import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
|
||||||
|
import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "@calcom/lib/constants";
|
||||||
import { getUsernameList } from "@calcom/lib/defaultEvents";
|
import { getUsernameList } from "@calcom/lib/defaultEvents";
|
||||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
|
import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
|
||||||
|
@ -412,9 +413,9 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
|
||||||
name: user.name || user.username || "",
|
name: user.name || user.username || "",
|
||||||
image: user.avatar,
|
image: user.avatar,
|
||||||
theme: user.theme,
|
theme: user.theme,
|
||||||
brandColor: user.brandColor,
|
brandColor: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
|
||||||
avatarUrl: user.avatarUrl,
|
avatarUrl: user.avatarUrl,
|
||||||
darkBrandColor: user.darkBrandColor,
|
darkBrandColor: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
|
||||||
allowSEOIndexing: user.allowSEOIndexing ?? true,
|
allowSEOIndexing: user.allowSEOIndexing ?? true,
|
||||||
username: user.username,
|
username: user.username,
|
||||||
organization: {
|
organization: {
|
||||||
|
|
|
@ -100,10 +100,15 @@ const AppearanceView = ({
|
||||||
reset: resetBookerLayoutThemeReset,
|
reset: resetBookerLayoutThemeReset,
|
||||||
} = bookerLayoutFormMethods;
|
} = bookerLayoutFormMethods;
|
||||||
|
|
||||||
|
const DEFAULT_BRAND_COLOURS = {
|
||||||
|
light: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
|
||||||
|
dark: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
|
||||||
|
};
|
||||||
|
|
||||||
const brandColorsFormMethods = useForm({
|
const brandColorsFormMethods = useForm({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
brandColor: user.brandColor || DEFAULT_LIGHT_BRAND_COLOR,
|
brandColor: DEFAULT_BRAND_COLOURS.light,
|
||||||
darkBrandColor: user.darkBrandColor || DEFAULT_DARK_BRAND_COLOR,
|
darkBrandColor: DEFAULT_BRAND_COLOURS.dark,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -233,12 +238,12 @@ const AppearanceView = ({
|
||||||
<Controller
|
<Controller
|
||||||
name="brandColor"
|
name="brandColor"
|
||||||
control={brandColorsFormMethods.control}
|
control={brandColorsFormMethods.control}
|
||||||
defaultValue={user.brandColor}
|
defaultValue={DEFAULT_BRAND_COLOURS.light}
|
||||||
render={() => (
|
render={() => (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
|
<p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
defaultValue={user.brandColor}
|
defaultValue={DEFAULT_BRAND_COLOURS.light}
|
||||||
resetDefaultValue={DEFAULT_LIGHT_BRAND_COLOR}
|
resetDefaultValue={DEFAULT_LIGHT_BRAND_COLOR}
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
try {
|
try {
|
||||||
|
@ -262,12 +267,12 @@ const AppearanceView = ({
|
||||||
<Controller
|
<Controller
|
||||||
name="darkBrandColor"
|
name="darkBrandColor"
|
||||||
control={brandColorsFormMethods.control}
|
control={brandColorsFormMethods.control}
|
||||||
defaultValue={user.darkBrandColor}
|
defaultValue={DEFAULT_BRAND_COLOURS.dark}
|
||||||
render={() => (
|
render={() => (
|
||||||
<div className="mt-6 sm:mt-0">
|
<div className="mt-6 sm:mt-0">
|
||||||
<p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
|
<p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
defaultValue={user.darkBrandColor}
|
defaultValue={DEFAULT_BRAND_COLOURS.dark}
|
||||||
resetDefaultValue={DEFAULT_DARK_BRAND_COLOR}
|
resetDefaultValue={DEFAULT_DARK_BRAND_COLOR}
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -10,6 +10,7 @@ import dayjs from "@calcom/dayjs";
|
||||||
import { useEmbedType, useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
|
import { useEmbedType, useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
|
||||||
import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
|
import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
|
||||||
import classNames from "@calcom/lib/classNames";
|
import classNames from "@calcom/lib/classNames";
|
||||||
|
import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants";
|
||||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
|
import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
|
||||||
import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils";
|
import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils";
|
||||||
|
@ -144,8 +145,8 @@ const BookerComponent = ({
|
||||||
: bookerLayouts.defaultLayout;
|
: bookerLayouts.defaultLayout;
|
||||||
|
|
||||||
useBrandColors({
|
useBrandColors({
|
||||||
brandColor: event.data?.profile.brandColor,
|
brandColor: event.data?.profile.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
|
||||||
darkBrandColor: event.data?.profile.darkBrandColor,
|
darkBrandColor: event.data?.profile.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
|
||||||
theme: event.data?.profile.theme,
|
theme: event.data?.profile.theme,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -26,7 +26,6 @@ const BrandColorsForm = ({
|
||||||
const brandColorsFormMethods = useFormContext();
|
const brandColorsFormMethods = useFormContext();
|
||||||
const {
|
const {
|
||||||
formState: { isSubmitting: isBrandColorsFormSubmitting, isDirty: isBrandColorsFormDirty },
|
formState: { isSubmitting: isBrandColorsFormSubmitting, isDirty: isBrandColorsFormDirty },
|
||||||
handleSubmit,
|
|
||||||
} = brandColorsFormMethods;
|
} = brandColorsFormMethods;
|
||||||
|
|
||||||
const [isCustomBrandColorChecked, setIsCustomBrandColorChecked] = useState(
|
const [isCustomBrandColorChecked, setIsCustomBrandColorChecked] = useState(
|
||||||
|
|
|
@ -180,8 +180,8 @@ const OrgAppearanceView = ({
|
||||||
}}>
|
}}>
|
||||||
<BrandColorsForm
|
<BrandColorsForm
|
||||||
onSubmit={onBrandColorsFormSubmit}
|
onSubmit={onBrandColorsFormSubmit}
|
||||||
brandColor={currentOrg?.brandColor}
|
brandColor={currentOrg?.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR}
|
||||||
darkBrandColor={currentOrg?.darkBrandColor}
|
darkBrandColor={currentOrg?.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR}
|
||||||
/>
|
/>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
||||||
|
|
|
@ -61,7 +61,10 @@ const ProfileView = ({ team }: ProfileViewProps) => {
|
||||||
await utils.viewer.teams.get.invalidate();
|
await utils.viewer.teams.get.invalidate();
|
||||||
if (res) {
|
if (res) {
|
||||||
resetTheme({ theme: res.theme });
|
resetTheme({ theme: res.theme });
|
||||||
resetBrandColors({ brandColor: res.brandColor, darkBrandColor: res.darkBrandColor });
|
resetBrandColors({
|
||||||
|
brandColor: res.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
|
||||||
|
darkBrandColor: res.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
showToast(t("your_team_updated_successfully"), "success");
|
showToast(t("your_team_updated_successfully"), "success");
|
||||||
|
@ -139,8 +142,8 @@ const ProfileView = ({ team }: ProfileViewProps) => {
|
||||||
}}>
|
}}>
|
||||||
<BrandColorsForm
|
<BrandColorsForm
|
||||||
onSubmit={onBrandColorsFormSubmit}
|
onSubmit={onBrandColorsFormSubmit}
|
||||||
brandColor={team?.brandColor}
|
brandColor={team?.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR}
|
||||||
darkBrandColor={team?.darkBrandColor}
|
darkBrandColor={team?.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR}
|
||||||
/>
|
/>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
import { useBrandColors } from "@calcom/embed-core/embed-iframe";
|
import { useBrandColors } from "@calcom/embed-core/embed-iframe";
|
||||||
|
|
||||||
const BRAND_COLOR = "#292929";
|
import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "./constants";
|
||||||
const DARK_BRAND_COLOR = "#fafafa";
|
|
||||||
|
const BRAND_COLOR = DEFAULT_LIGHT_BRAND_COLOR;
|
||||||
|
const DARK_BRAND_COLOR = DEFAULT_DARK_BRAND_COLOR;
|
||||||
|
|
||||||
type Rgb = {
|
type Rgb = {
|
||||||
r: number;
|
r: number;
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
ALTER TABLE "Team" ALTER COLUMN "brandColor" DROP NOT NULL,
|
||||||
|
ALTER COLUMN "brandColor" DROP DEFAULT,
|
||||||
|
ALTER COLUMN "darkBrandColor" DROP NOT NULL,
|
||||||
|
ALTER COLUMN "darkBrandColor" DROP DEFAULT;
|
||||||
|
|
||||||
|
-- AlterTable
|
||||||
|
ALTER TABLE "users" ALTER COLUMN "brandColor" DROP NOT NULL,
|
||||||
|
ALTER COLUMN "brandColor" DROP DEFAULT,
|
||||||
|
ALTER COLUMN "darkBrandColor" DROP NOT NULL,
|
||||||
|
ALTER COLUMN "darkBrandColor" DROP DEFAULT;
|
||||||
|
|
||||||
|
UPDATE "Team" SET "brandColor" = NULL WHERE "brandColor" = '#292929';
|
||||||
|
UPDATE "Team" SET "darkBrandColor" = NULL WHERE "darkBrandColor" = '#fafafa';
|
||||||
|
|
||||||
|
UPDATE "users" SET "brandColor" = NULL WHERE "brandColor" = '#292929';
|
||||||
|
UPDATE "users" SET "darkBrandColor" = NULL WHERE "darkBrandColor" = '#fafafa';
|
||||||
|
|
|
@ -224,8 +224,8 @@ model User {
|
||||||
availability Availability[]
|
availability Availability[]
|
||||||
invitedTo Int?
|
invitedTo Int?
|
||||||
webhooks Webhook[]
|
webhooks Webhook[]
|
||||||
brandColor String @default("#292929")
|
brandColor String?
|
||||||
darkBrandColor String @default("#fafafa")
|
darkBrandColor String?
|
||||||
// the location where the events will end up
|
// the location where the events will end up
|
||||||
destinationCalendar DestinationCalendar?
|
destinationCalendar DestinationCalendar?
|
||||||
away Boolean @default(false)
|
away Boolean @default(false)
|
||||||
|
@ -299,8 +299,8 @@ model Team {
|
||||||
/// @zod.custom(imports.teamMetadataSchema)
|
/// @zod.custom(imports.teamMetadataSchema)
|
||||||
metadata Json?
|
metadata Json?
|
||||||
theme String?
|
theme String?
|
||||||
brandColor String @default("#292929")
|
brandColor String?
|
||||||
darkBrandColor String @default("#fafafa")
|
darkBrandColor String?
|
||||||
verifiedNumbers VerifiedNumber[]
|
verifiedNumbers VerifiedNumber[]
|
||||||
parentId Int?
|
parentId Int?
|
||||||
parent Team? @relation("organization", fields: [parentId], references: [id], onDelete: Cascade)
|
parent Team? @relation("organization", fields: [parentId], references: [id], onDelete: Cascade)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user