maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
sean-brydon 2024-01-12 06:22:35 +10:00 committed by GitHub
parent 9901c91e9b
commit bc6267e99b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/pages/[user].tsx
View File

@ -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<UserPageProps> = 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: {

17
apps/web/pages/settings/my-account/appearance.tsx
View File

@ -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 = ({
<Controller
name="brandColor"
control={brandColorsFormMethods.control}
defaultValue={user.brandColor}
defaultValue={DEFAULT_BRAND_COLOURS.light}
render={() => (
<div>
<p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
<ColorPicker
defaultValue={user.brandColor}
defaultValue={DEFAULT_BRAND_COLOURS.light}
resetDefaultValue={DEFAULT_LIGHT_BRAND_COLOR}
onChange={(value) => {
try {
@ -262,12 +267,12 @@ const AppearanceView = ({
<Controller
name="darkBrandColor"
control={brandColorsFormMethods.control}
defaultValue={user.darkBrandColor}
defaultValue={DEFAULT_BRAND_COLOURS.dark}
render={() => (
<div className="mt-6 sm:mt-0">
<p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
<ColorPicker
defaultValue={user.darkBrandColor}
defaultValue={DEFAULT_BRAND_COLOURS.dark}
resetDefaultValue={DEFAULT_DARK_BRAND_COLOR}
onChange={(value) => {
try {

5
packages/features/bookings/Booker/Booker.tsx
View File

@ -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,
});

1
packages/features/ee/components/BrandColorsForm.tsx
View File

@ -26,7 +26,6 @@ const BrandColorsForm = ({
const brandColorsFormMethods = useFormContext();
const {
formState: { isSubmitting: isBrandColorsFormSubmitting, isDirty: isBrandColorsFormDirty },
handleSubmit,
} = brandColorsFormMethods;
const [isCustomBrandColorChecked, setIsCustomBrandColorChecked] = useState(

4
packages/features/ee/organizations/pages/settings/appearance.tsx
View File

@ -180,8 +180,8 @@ const OrgAppearanceView = ({
}}>
<BrandColorsForm
onSubmit={onBrandColorsFormSubmit}
brandColor={currentOrg?.brandColor}
darkBrandColor={currentOrg?.darkBrandColor}
brandColor={currentOrg?.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR}
darkBrandColor={currentOrg?.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR}
/>
</Form>

9
packages/features/ee/teams/pages/team-appearance-view.tsx
View File

@ -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) => {
}}>
<BrandColorsForm
onSubmit={onBrandColorsFormSubmit}
brandColor={team?.brandColor}
darkBrandColor={team?.darkBrandColor}
brandColor={team?.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR}
darkBrandColor={team?.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR}
/>
</Form>

6
packages/lib/getBrandColours.tsx
View File

@ -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;

17
packages/prisma/migrations/20240111075727_remove_brand_colours_default/migration.sql Normal file
View File

@ -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';

8
packages/prisma/schema.prisma
View File

@ -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)