1a0bf47bc56cc5dc90cf49cf96ba83b8cd62d2f3
2
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
   
|
0e6bf54fa2 |
feat(companion): dark mode (#27305)
* 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> |
||
|
Dhairyashil Shinde
|
60a4d3f2b4 |
feat(companion): Add DropdownMenu and Alert Dialog for Android (#26385)
* feat(companion): add DropdownMenu for Android event types list Replace Alert.alert with react-native-reusables DropdownMenu component for Android event type list items, providing a native-feeling menu experience that matches iOS functionality. Changes: - Install react-native-reusables dropdown-menu component and dependencies (lucide-react-native, tailwindcss-animate, class-variance-authority, clsx, tailwind-merge) - Create EventTypeListItem.android.tsx with DropdownMenu implementation - Single ellipsis button triggers dropdown menu - Menu includes: Preview, Copy link, Edit, Duplicate, Delete - Delete action marked as destructive variant - Proper safe area insets handling - Add PortalHost to app/_layout.tsx for portal rendering support - Create lib/utils.ts with cn() helper for className merging - Update global.css with theme CSS variables (popover, border, accent, destructive, etc.) for dropdown menu styling - Update tailwind.config.js with theme colors and tailwindcss-animate plugin - Update metro.config.js with inlineRem: 16 for proper rem unit handling - Remove Android Alert.alert fallback from event types index.tsx - Fix lint issues in generated dropdown-menu.tsx (remove unnecessary fragments) The Android experience now matches iOS with a single menu button that opens a dropdown containing all event type actions, replacing the previous Alert.alert dialog and separate action buttons. Refs: https://reactnativereusables.com/docs/components/dropdown-menu * adjust with of menu * feat(companion): add DropdownMenu for Android booking and availability list items - Add BookingListItem.android.tsx with DropdownMenu for booking actions - Add BookingDetailScreen.android.tsx with DropdownMenu in header - Add AvailabilityListItem.android.tsx with DropdownMenu for schedule actions Actions include: Reschedule, Edit Location, Add Guests, View Recordings, Meeting Session Details, Mark as No-Show, Report Booking, Cancel Event for bookings; Set as Default, Duplicate, Delete for availability schedules. * fix lint issues * feat(android): replace native alerts with AlertDialog and Toast in event types - Install AlertDialog and Alert components from react-native-reusables - Create Android-specific event types screen (index.android.tsx) - Replace native Alert.alert() with AlertDialog for delete confirmation - Add inline validation errors (red border + error text) in create modal - Implement Toast snackbar for success/error notifications (no layout shift) - Auto-dismiss toast after 2.5 seconds - Fix React Compiler compatibility by removing animated refs This provides a more consistent and polished UI experience on Android, matching the design system used in other parts of the app. * feat(android): add AlertDialog for availability delete and booking cancel - Add index.android.tsx for availability with AlertDialog for delete confirmation - Add index.android.tsx for bookings with AlertDialog for cancel (with reason input) - Both screens include Toast snackbar for success/error notifications - Follows the same pattern as event types Android implementation * feat(companion): add DropdownMenu and AlertDialog for Android - Replace native Alert.alert context menus with DropdownMenu component for event types, bookings, and availability lists - Replace FullScreenModal with AlertDialog for create/delete/cancel flows - Add toast notifications for success/error feedback on Android - Set consistent 380px max-width for all AlertDialogs - Fix layout headers showing "index" text on event-types and availability - Create Android-specific More screen with AlertDialog logout confirmation Uses react-native-reusables components for polished Android UI * better code * fix cubics comments * refactor(android): revert delete confirmations to native Alert.alert() - Logout: reverted to native Alert.alert() (simple yes/no) - Event Types Delete: reverted to native Alert.alert() (simple yes/no) - Availability Delete: reverted to native Alert.alert() (simple yes/no) Keep AlertDialog only where user input is needed: - Event Types Create (has TextInput for title) - Availability Create (has TextInput for name) - Bookings Cancel (has TextInput for cancellation reason) * refactor(android): remove redundant index.android.tsx files The main index.tsx files already handle Android via Platform.OS checks. Android-specific behavior for actions is in the list item components: - EventTypeListItem.android.tsx - BookingListItem.android.tsx - AvailabilityListItem.android.tsx This consolidates the code and reduces duplication. * corrected the implementation both native and alert dialog * address cubics comments * fix lint issue and address cubic comments |