0e6bf54fa2
* feat(companion): add dark mode support using NativeWind system preference - Set userInterfaceStyle to 'automatic' in app.json to follow system preference - Add useColorScheme hook from NativeWind to detect color scheme - Update root layout with dynamic colors for StatusBar, containers, and modals - Update tabs layout with dynamic colors for tab bar and icons - Update all Stack.Screen options to use dynamic background colors and blur effects - Support both iOS and Android with appropriate dark mode colors Co-Authored-By: peer@cal.com <peer@cal.com> * fix(companion): use NativeWind dark: variant classes for automatic dark mode Use dark: Tailwind variant classes instead of conditional logic based on useColorScheme for the container background. This ensures NativeWind automatically applies dark mode styles based on system preference. Co-Authored-By: peer@cal.com <peer@cal.com> * fix(companion): use darkMode 'media' for automatic dark mode detection - Changed darkMode from 'class' to 'media' in tailwind.config.js - Updated global.css to use @media (prefers-color-scheme: dark) instead of .dark selector - This ensures NativeWind properly detects system color scheme on iOS/Android Co-Authored-By: peer@cal.com <peer@cal.com> * dark mode starting * feat(companion): add dark mode support to core infrastructure (Phase 1) * feat(companion): add dark mode support to tab pages (Phase 2) * fix(companion): add dark mode support to booking list components for font visibility * fix(companion): add dark mode support to EventTypeListItem components * event types and bookings page * Availability list page * more page, and some ui fixes * feat(companion): add dark mode support to detail screens and modals - BookingDetailScreen (iOS & Android): dynamic colors for all UI elements - AvailabilityDetailScreen (iOS & Android): dark mode backgrounds and text - profile-sheet (iOS & Android): dark mode support for profile modal - RescheduleScreen (all platforms): dark mode for date/time pickers - EditLocationScreen (iOS & Android): dark mode for location editor - AddGuestsScreen: partial dark mode implementation (in progress) Uses iOS system colors: #000000 (black), #1C1C1E (secondary), #FFFFFF (white), #38383A (border), #8E8E93 (text secondary) * fix typecheck and lint * feat(companion): add dark mode support to remaining screens - ScreenWrapper: Fix hardcoded #800020 color with dynamic destructive color - EditAvailabilityDayScreen: Add dark mode for Android/Web and iOS - EditAvailabilityHoursScreen: Add dark mode for Android/Web and iOS - EditAvailabilityNameScreen: Add dark mode for Android/Web and iOS - EditAvailabilityOverrideScreen: Add dark mode for Web, iOS, and Android - MarkNoShowScreen: Add dark mode with dynamic colors for no-show states - MeetingSessionDetailsScreen: Add dark mode for session details - ViewRecordingsScreen: Add dark mode for recordings list Uses iOS system colors (#000000, #1C1C1E, #38383A, #8E8E93) and useColorScheme hook for automatic theme detection. * fix(companion): fix iOS modal dark mode backgrounds for transparent glass UI * fix(companion): fix dark mode for booking action screens in transparent background mode * fix(companion): fix Android dark mode for transparent background in EditAvailabilityOverrideScreen * refactor(companion): centralize dark mode colors and align with main website - Update tailwind.config.js with centralized color definitions - Create constants/colors.ts for inline style color references - Replace iOS system colors with main website neutral grays: - #1C1C1E -> #171717 (secondary dark background) - #38383A -> #4D4D4D (dark border) - #8E8E93 -> #A3A3A3 (secondary text dark) - Keep pure black (#000000) for main backgrounds (OLED friendly) - Add semantic color mappings for consistent UI styling * feat(companion): complete dark mode implementation across all priority files - Priority 1: Updated SettingsUI.tsx, BasicsTab.tsx, LimitsTab.tsx, AdvancedTab.tsx, RecurringTab.tsx, AvailabilityTab.tsx, event-type-detail.tsx - Priority 2: Updated edit-availability-hours/name/override/day.tsx, oauth/callback.tsx - Priority 3: Updated AvailabilityListScreen.tsx with dark mode for modals and list items - Priority 4: Updated BookingActionsModal.tsx, BookingActionsModal.ios.tsx, GlassModalHeader.tsx, LoginScreen.tsx, LocationsList.tsx, SearchHeader.tsx, toast.tsx Dark mode colors used: - Main bg: #000000 (cal.bg.dark) - Secondary bg: #171717 (cal.bg.secondaryDark) - Muted bg: #262626 (cal.bg.mutedDark) - Borders: #4D4D4D (cal.border.dark) - Secondary text: #A3A3A3 (cal.text.secondaryDark) * fix(companion): add dark mode support to iOS header, GlassView modals, and main content background * fix(companion): add dark mode support to toggle/switch components * fix(companion): use iOS green (#34C759) for toggle ON state in dark mode * fix(companion): use white track + black thumb for dark mode toggles * fix(companion): add dark mode support to login page logo and button * dark mode to many pages, centralize the colors * dark mode skelaton * Availability pages android * toggles * headers * red color for dark mode * copy button * white flash on bottom ui native ios sheet * bottom sheet buttons * bottom sheet in gray color * bottom sheet again.. yeahh * toggle green * toggle green * fix lint and typechecks * fix exntension error * Update companion/components/event-type-detail/tabs/LimitsTabDatePicker.android.tsx Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * address cubic comments --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: peer@cal.com <peer@cal.com> Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
464 lines
16 KiB
TypeScript
464 lines
16 KiB
TypeScript
import "./_webRuntimeGuards";
|
|
import "../global.css";
|
|
|
|
import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
|
|
import { PortalHost } from "@rn-primitives/portal";
|
|
import { isLiquidGlassAvailable } from "expo-glass-effect";
|
|
import { Stack } from "expo-router";
|
|
import { Platform, StatusBar, useColorScheme, View } from "react-native";
|
|
import { CalComLogo } from "@/components/CalComLogo";
|
|
import LoginScreenComponent from "@/components/LoginScreen";
|
|
import { NetworkStatusBanner } from "@/components/NetworkStatusBanner";
|
|
import { GlobalToast } from "@/components/ui/GlobalToast";
|
|
import { getColors, colors as semanticColors } from "@/constants/colors";
|
|
import { AuthProvider, useAuth } from "@/contexts/AuthContext";
|
|
import { QueryProvider } from "@/contexts/QueryContext";
|
|
import { ToastProvider } from "@/contexts/ToastContext";
|
|
|
|
function RootLayoutContent() {
|
|
const { isAuthenticated, loading } = useAuth();
|
|
const colorScheme = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
const colors = getColors(isDark);
|
|
|
|
// Show Cal.com logo while checking auth state to prevent login flash
|
|
if (loading) {
|
|
return (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<StatusBar
|
|
barStyle={isDark ? "light-content" : "dark-content"}
|
|
backgroundColor={colors.background}
|
|
/>
|
|
<CalComLogo
|
|
width={120}
|
|
height={26}
|
|
color={isDark ? semanticColors.dark.text : semanticColors.light.text}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const content = isAuthenticated ? (
|
|
<Stack>
|
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
<Stack.Screen
|
|
name="profile-sheet"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: Platform.OS === "ios" ? "You" : "Profile",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
// iOS-specific sheet options (ignored on Android)
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.6, 0.9] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable() ? "transparent" : colors.background,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.background,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="meeting-session-details"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Session Details",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
// iOS-specific sheet options (ignored on Android)
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.7, 0.9] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="edit-location"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Edit Location",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.5, 0.7] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="mark-no-show"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Mark No-Show",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.4, 0.6] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="view-recordings"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Recordings",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.7, 0.9] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="add-guests"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Add Guests",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.6, 0.8] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="reschedule"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Reschedule",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.8, 0.95] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="edit-availability-name"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Edit Name & Timezone",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.5, 0.7] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="edit-availability-hours"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Working Hours",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.7, 1] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="edit-availability-day"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Edit Day",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.6, 0.9] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="edit-availability-override"
|
|
options={{
|
|
headerShown: true,
|
|
headerTransparent: Platform.OS === "ios",
|
|
headerLargeTitle: false,
|
|
title: "Date Override",
|
|
presentation:
|
|
Platform.OS === "ios"
|
|
? isLiquidGlassAvailable()
|
|
? "formSheet"
|
|
: "modal"
|
|
: "containedModal",
|
|
sheetGrabberVisible: Platform.OS === "ios",
|
|
sheetAllowedDetents: Platform.OS === "ios" ? [0.7, 0.9] : undefined,
|
|
sheetInitialDetentIndex: Platform.OS === "ios" ? 0 : undefined,
|
|
contentStyle: {
|
|
backgroundColor:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? "transparent"
|
|
: colors.backgroundSecondary,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: Platform.OS === "ios" ? "transparent" : colors.backgroundSecondary,
|
|
},
|
|
headerBlurEffect:
|
|
Platform.OS === "ios" && isLiquidGlassAvailable()
|
|
? undefined
|
|
: isDark
|
|
? "dark"
|
|
: "light",
|
|
}}
|
|
/>
|
|
</Stack>
|
|
) : (
|
|
<LoginScreenComponent />
|
|
);
|
|
|
|
const containerClass =
|
|
Platform.OS === "web"
|
|
? "w-[400px] flex-1 flex-col self-end border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-black"
|
|
: "bg-white dark:bg-black";
|
|
|
|
const containerStyle =
|
|
Platform.OS === "web"
|
|
? {
|
|
width: 400,
|
|
flex: 1,
|
|
display: "flex" as const,
|
|
flexDirection: "column" as const,
|
|
}
|
|
: { flex: 1 };
|
|
|
|
return (
|
|
<ThemeProvider value={isDark ? DarkTheme : DefaultTheme}>
|
|
<View
|
|
style={[containerStyle, Platform.OS === "web" && { pointerEvents: "auto" as const }]}
|
|
className={containerClass}
|
|
>
|
|
<StatusBar
|
|
barStyle={isDark ? "light-content" : "dark-content"}
|
|
backgroundColor={colors.background}
|
|
/>
|
|
{content}
|
|
<NetworkStatusBanner />
|
|
<PortalHost />
|
|
</View>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
export default function RootLayout() {
|
|
return (
|
|
<QueryProvider>
|
|
<AuthProvider>
|
|
<ToastProvider>
|
|
<RootLayoutContent />
|
|
<GlobalToast />
|
|
</ToastProvider>
|
|
</AuthProvider>
|
|
</QueryProvider>
|
|
);
|
|
}
|