From bc6267e99b900f8269d3bf9965b95cacb3146cbe Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Fri, 12 Jan 2024 06:22:35 +1000 Subject: [PATCH] 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 --- apps/web/pages/[user].tsx | 5 +++-- .../pages/settings/my-account/appearance.tsx | 17 +++++++++++------ packages/features/bookings/Booker/Booker.tsx | 5 +++-- .../features/ee/components/BrandColorsForm.tsx | 1 - .../organizations/pages/settings/appearance.tsx | 4 ++-- .../ee/teams/pages/team-appearance-view.tsx | 9 ++++++--- packages/lib/getBrandColours.tsx | 6 ++++-- .../migration.sql | 17 +++++++++++++++++ packages/prisma/schema.prisma | 8 ++++---- 9 files changed, 50 insertions(+), 22 deletions(-) create mode 100644 packages/prisma/migrations/20240111075727_remove_brand_colours_default/migration.sql diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx index acb97c9bce..5c8b506074 100644 --- a/apps/web/pages/[user].tsx +++ b/apps/web/pages/[user].tsx @@ -18,6 +18,7 @@ import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/or import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains"; import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components"; 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 { useLocale } from "@calcom/lib/hooks/useLocale"; import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery"; @@ -412,9 +413,9 @@ export const getServerSideProps: GetServerSideProps = async (cont name: user.name || user.username || "", image: user.avatar, theme: user.theme, - brandColor: user.brandColor, + brandColor: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR, avatarUrl: user.avatarUrl, - darkBrandColor: user.darkBrandColor, + darkBrandColor: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR, allowSEOIndexing: user.allowSEOIndexing ?? true, username: user.username, organization: { diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx index 067da81c5b..e4173758ec 100644 --- a/apps/web/pages/settings/my-account/appearance.tsx +++ b/apps/web/pages/settings/my-account/appearance.tsx @@ -100,10 +100,15 @@ const AppearanceView = ({ reset: resetBookerLayoutThemeReset, } = bookerLayoutFormMethods; + const DEFAULT_BRAND_COLOURS = { + light: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR, + dark: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR, + }; + const brandColorsFormMethods = useForm({ defaultValues: { - brandColor: user.brandColor || DEFAULT_LIGHT_BRAND_COLOR, - darkBrandColor: user.darkBrandColor || DEFAULT_DARK_BRAND_COLOR, + brandColor: DEFAULT_BRAND_COLOURS.light, + darkBrandColor: DEFAULT_BRAND_COLOURS.dark, }, }); @@ -233,12 +238,12 @@ const AppearanceView = ({ (

{t("light_brand_color")}

{ try { @@ -262,12 +267,12 @@ const AppearanceView = ({ (

{t("dark_brand_color")}

{ try { diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index 9c4b204209..1164e057ca 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -10,6 +10,7 @@ import dayjs from "@calcom/dayjs"; import { useEmbedType, useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe"; import { useNonEmptyScheduleDays } from "@calcom/features/schedules"; 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 useMediaQuery from "@calcom/lib/hooks/useMediaQuery"; import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils"; @@ -144,8 +145,8 @@ const BookerComponent = ({ : bookerLayouts.defaultLayout; useBrandColors({ - brandColor: event.data?.profile.brandColor, - darkBrandColor: event.data?.profile.darkBrandColor, + brandColor: event.data?.profile.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR, + darkBrandColor: event.data?.profile.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR, theme: event.data?.profile.theme, }); diff --git a/packages/features/ee/components/BrandColorsForm.tsx b/packages/features/ee/components/BrandColorsForm.tsx index a3181ac24d..df924b1920 100644 --- a/packages/features/ee/components/BrandColorsForm.tsx +++ b/packages/features/ee/components/BrandColorsForm.tsx @@ -26,7 +26,6 @@ const BrandColorsForm = ({ const brandColorsFormMethods = useFormContext(); const { formState: { isSubmitting: isBrandColorsFormSubmitting, isDirty: isBrandColorsFormDirty }, - handleSubmit, } = brandColorsFormMethods; const [isCustomBrandColorChecked, setIsCustomBrandColorChecked] = useState( diff --git a/packages/features/ee/organizations/pages/settings/appearance.tsx b/packages/features/ee/organizations/pages/settings/appearance.tsx index 8760787465..d6941a3ede 100644 --- a/packages/features/ee/organizations/pages/settings/appearance.tsx +++ b/packages/features/ee/organizations/pages/settings/appearance.tsx @@ -180,8 +180,8 @@ const OrgAppearanceView = ({ }}> diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx index 02dfea5357..e28ee15455 100644 --- a/packages/features/ee/teams/pages/team-appearance-view.tsx +++ b/packages/features/ee/teams/pages/team-appearance-view.tsx @@ -61,7 +61,10 @@ const ProfileView = ({ team }: ProfileViewProps) => { await utils.viewer.teams.get.invalidate(); if (res) { 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"); @@ -139,8 +142,8 @@ const ProfileView = ({ team }: ProfileViewProps) => { }}> diff --git a/packages/lib/getBrandColours.tsx b/packages/lib/getBrandColours.tsx index 92159c512b..0fefafa995 100644 --- a/packages/lib/getBrandColours.tsx +++ b/packages/lib/getBrandColours.tsx @@ -1,7 +1,9 @@ import { useBrandColors } from "@calcom/embed-core/embed-iframe"; -const BRAND_COLOR = "#292929"; -const DARK_BRAND_COLOR = "#fafafa"; +import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "./constants"; + +const BRAND_COLOR = DEFAULT_LIGHT_BRAND_COLOR; +const DARK_BRAND_COLOR = DEFAULT_DARK_BRAND_COLOR; type Rgb = { r: number; diff --git a/packages/prisma/migrations/20240111075727_remove_brand_colours_default/migration.sql b/packages/prisma/migrations/20240111075727_remove_brand_colours_default/migration.sql new file mode 100644 index 0000000000..bc96af772c --- /dev/null +++ b/packages/prisma/migrations/20240111075727_remove_brand_colours_default/migration.sql @@ -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'; + diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma index c86f0a393c..41f3a836ef 100644 --- a/packages/prisma/schema.prisma +++ b/packages/prisma/schema.prisma @@ -224,8 +224,8 @@ model User { availability Availability[] invitedTo Int? webhooks Webhook[] - brandColor String @default("#292929") - darkBrandColor String @default("#fafafa") + brandColor String? + darkBrandColor String? // the location where the events will end up destinationCalendar DestinationCalendar? away Boolean @default(false) @@ -299,8 +299,8 @@ model Team { /// @zod.custom(imports.teamMetadataSchema) metadata Json? theme String? - brandColor String @default("#292929") - darkBrandColor String @default("#fafafa") + brandColor String? + darkBrandColor String? verifiedNumbers VerifiedNumber[] parentId Int? parent Team? @relation("organization", fields: [parentId], references: [id], onDelete: Cascade)