diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx index f854c92442..0bce4271c5 100644 --- a/apps/web/components/eventtype/EventAdvancedTab.tsx +++ b/apps/web/components/eventtype/EventAdvancedTab.tsx @@ -38,6 +38,7 @@ const generateHashedLink = (id: number) => { export const EventAdvancedTab = ({ eventType, team }: Pick) => { const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery(); + const { data: user } = trpc.viewer.me.useQuery(); const formMethods = useFormContext(); const { t } = useLocale(); @@ -49,6 +50,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick workflowOnEventType.workflow); + const selectedThemeIsDark = + user?.theme === "dark" || + (!user?.theme && typeof document !== "undefined" && document.documentElement.classList.contains("dark")); eventType.bookingFields.forEach(({ name }) => { bookingFields[name] = name + " input"; @@ -162,7 +166,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick
- +
{ }, }); + const selectedTheme = formMethods.watch("theme"); + const selectedThemeIsDark = + selectedTheme === "dark" || + (selectedTheme === "" && + typeof document !== "undefined" && + document.documentElement.classList.contains("dark")); + const { formState: { isSubmitting, isDirty }, reset, @@ -144,6 +151,7 @@ const AppearanceView = () => {
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/public/bookerlayout_month_view_dark.svg b/apps/web/public/bookerlayout_month_view_dark.svg new file mode 100644 index 0000000000..16a6d1494d --- /dev/null +++ b/apps/web/public/bookerlayout_month_view_dark.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/public/bookerlayout_week_view_dark.svg b/apps/web/public/bookerlayout_week_view_dark.svg new file mode 100644 index 0000000000..238e1de259 --- /dev/null +++ b/apps/web/public/bookerlayout_week_view_dark.svg @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/features/settings/BookerLayoutSelector.tsx b/packages/features/settings/BookerLayoutSelector.tsx index a623ef510d..6172eec136 100644 --- a/packages/features/settings/BookerLayoutSelector.tsx +++ b/packages/features/settings/BookerLayoutSelector.tsx @@ -23,6 +23,13 @@ type BookerLayoutSelectorProps = { * settings. */ fallbackToUserSettings?: boolean; + /** + * isDark boolean should be passed in when the user selected 'dark mode' in the theme settings in profile/appearance. + * So it's not based on the user's system settings, but on the user's preference for the booker. + * This boolean is then used to show a dark version of the layout image. It's only easthetic, no functionality is attached + * to this boolean. + */ + isDark?: boolean; }; const defaultFieldName = "metadata.bookerLayouts"; @@ -32,6 +39,7 @@ export const BookerLayoutSelector = ({ description, name, fallbackToUserSettings, + isDark, }: BookerLayoutSelectorProps) => { const { control, getValues } = useFormContext(); const { t } = useLocale(); @@ -58,6 +66,7 @@ export const BookerLayoutSelector = ({ showUserSettings={shouldShowUserSettings} settings={value} onChange={onChange} + isDark={isDark} /> )} /> @@ -69,11 +78,12 @@ type BookerLayoutFieldsProps = { settings: BookerLayoutSettings; onChange: (settings: BookerLayoutSettings) => void; showUserSettings: boolean; + isDark?: boolean; }; type BookerLayoutState = { [key in BookerLayouts]: boolean }; -const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayoutFieldsProps) => { +const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: BookerLayoutFieldsProps) => { const { t } = useLocale(); const { isLoading: isUserLoading, data: user } = useMeQuery(); const [isOverridingSettings, setIsOverridingSettings] = useState(false); @@ -143,7 +153,7 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayo