diff --git a/app/views/CallView/__snapshots__/index.test.tsx.snap b/app/views/CallView/__snapshots__/index.test.tsx.snap index 4ed23b62a6e..2b6df51f7e6 100644 --- a/app/views/CallView/__snapshots__/index.test.tsx.snap +++ b/app/views/CallView/__snapshots__/index.test.tsx.snap @@ -30,7 +30,6 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = ` "flex": 1, "justifyContent": "space-between", }, - false, { "backgroundColor": "#FFFFFF", }, @@ -72,16 +71,13 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - [ - { - "alignItems": "center", - "flex": 1, - "justifyContent": "center", - "marginBottom": 100, - "paddingHorizontal": 24, - }, - false, - ] + { + "alignItems": "center", + "flex": 1, + "justifyContent": "center", + "marginBottom": 100, + "paddingHorizontal": 24, + } } testID="caller-info-toggle" > @@ -211,18 +207,22 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -1043,18 +1077,22 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -1883,18 +1955,22 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -2715,18 +2825,22 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -3547,18 +3695,22 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -4379,18 +4565,22 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -5193,18 +5418,22 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -5993,18 +6260,22 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -6801,18 +7110,22 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -7601,18 +7952,22 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -8401,18 +8794,22 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = ` > - + - + - + - + - + - + @@ -9201,18 +9636,22 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = ` > - + - + - + - + - + - + + - {label} + + {label} + ); }; diff --git a/app/views/CallView/components/CallButtons.test.tsx b/app/views/CallView/components/CallButtons.test.tsx index 68941013e64..d603d40950b 100644 --- a/app/views/CallView/components/CallButtons.test.tsx +++ b/app/views/CallView/components/CallButtons.test.tsx @@ -1,191 +1,182 @@ import React from 'react'; -import { fireEvent, render, within } from '@testing-library/react-native'; +import { render } from '@testing-library/react-native'; import { Provider } from 'react-redux'; import { mockedStore } from '../../../reducers/mockedStore'; import { useCallStore } from '../../../lib/services/voip/useCallStore'; -import { navigateToCallRoom } from '../../../lib/services/voip/navigateToCallRoom'; import { CallButtons } from './CallButtons'; import { useCallLayoutMode } from '../useCallLayoutMode'; - -jest.mock('../../../lib/services/voip/navigateToCallRoom', () => ({ - navigateToCallRoom: jest.fn().mockResolvedValue(undefined) -})); +import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout'; jest.mock('../useCallLayoutMode', () => ({ useCallLayoutMode: jest.fn(() => ({ layoutMode: 'narrow' })) })); -const mockUseCallLayoutMode = jest.mocked(useCallLayoutMode); - -const mockShowActionSheetRef = jest.fn(); jest.mock('../../../containers/ActionSheet', () => ({ - showActionSheetRef: (options: any) => mockShowActionSheetRef(options), + showActionSheetRef: jest.fn(), hideActionSheetRef: jest.fn() })); -const mockNavigateToCallRoom = jest.mocked(navigateToCallRoom); +jest.mock('react-native-incall-manager', () => ({ + start: jest.fn(), + stop: jest.fn(), + setForceSpeakerphoneOn: jest.fn(() => Promise.resolve()) +})); + +jest.mock('../../../lib/hooks/useResponsiveLayout/useResponsiveLayout', () => ({ + useResponsiveLayout: jest.fn(() => ({ width: 375, height: 812 })) +})); + +const setStoreState = (overrides: Partial> = {}) => { + const mockCall = { + state: 'active', + muted: false, + held: false, + contact: {}, + sendDTMF: jest.fn(), + emitter: { on: jest.fn(), off: jest.fn() } + } as any; + + useCallStore.setState({ + call: mockCall, + callId: 'test-id', + callState: 'active', + isMuted: false, + isOnHold: false, + isSpeakerOn: false, + roomId: 'room-1', + contact: { name: 'Test User' } as any, + toggleMute: jest.fn(), + toggleHold: jest.fn(), + toggleSpeaker: jest.fn(), + endCall: jest.fn(), + dialpadValue: '', + ...overrides + }); +}; const Wrapper = ({ children }: { children: React.ReactNode }) => {children}; describe('CallButtons', () => { beforeEach(() => { + (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'narrow' }); + (useResponsiveLayout as jest.Mock).mockReturnValue({ width: 375, height: 812 }); useCallStore.getState().reset(); - jest.clearAllMocks(); - mockUseCallLayoutMode.mockReturnValue({ layoutMode: 'narrow' }); - useCallStore.setState({ - call: { state: 'active', contact: {} } as any, - callState: 'active', - callId: 'id', - isMuted: false, - isOnHold: false, - isSpeakerOn: false, - roomId: 'rid-1', - contact: { username: 'u', sipExtension: '', displayName: 'U' }, - toggleMute: jest.fn(), - toggleHold: jest.fn(), - toggleSpeaker: jest.fn(), - endCall: jest.fn() - }); }); - it('should set pointerEvents to none when controlsVisible is false', () => { - useCallStore.setState({ controlsVisible: false }); + it('renders all 6 buttons', () => { + setStoreState(); const { getByTestId } = render( ); - - const container = getByTestId('call-buttons', { includeHiddenElements: true }); - expect(container.props.pointerEvents).toBe('none'); + expect(getByTestId('call-view-speaker')).toBeTruthy(); + expect(getByTestId('call-view-hold')).toBeTruthy(); + expect(getByTestId('call-view-mute')).toBeTruthy(); + expect(getByTestId('call-view-message')).toBeTruthy(); + expect(getByTestId('call-view-end')).toBeTruthy(); + expect(getByTestId('call-view-dialpad')).toBeTruthy(); }); - it('should set pointerEvents to auto when controlsVisible is true', () => { - useCallStore.setState({ controlsVisible: true }); + it('narrow layout renders 2 rows', () => { + (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'narrow' }); + setStoreState(); const { getByTestId } = render( ); + expect(getByTestId('call-buttons-row-0')).toBeTruthy(); + expect(getByTestId('call-buttons-row-1')).toBeTruthy(); + }); - const container = getByTestId('call-buttons'); - expect(container.props.pointerEvents).toBe('auto'); + it('wide layout renders 1 row', () => { + (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'wide' }); + setStoreState(); + const { getByTestId, queryByTestId } = render( + + + + ); + expect(getByTestId('call-buttons-row-0')).toBeTruthy(); + expect(queryByTestId('call-buttons-row-1')).toBeNull(); }); - it('message button calls navigateToCallRoom when enabled', () => { - const { getByTestId } = render( + it('narrow phone landscape renders 1 row', () => { + (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'narrow' }); + (useResponsiveLayout as jest.Mock).mockReturnValue({ width: 600, height: 400 }); + setStoreState(); + const { getByTestId, queryByTestId } = render( ); - fireEvent.press(getByTestId('call-view-message')); - expect(mockNavigateToCallRoom).toHaveBeenCalledTimes(1); + expect(getByTestId('call-buttons-row-0')).toBeTruthy(); + expect(queryByTestId('call-buttons-row-1')).toBeNull(); }); - it('message button is disabled for SIP calls', () => { - useCallStore.setState({ - contact: { username: 'u', sipExtension: '100', displayName: 'U' } - }); - const { getByTestId } = render( + it('button labels render', () => { + setStoreState(); + const { getByText } = render( ); - fireEvent.press(getByTestId('call-view-message')); - expect(mockNavigateToCallRoom).not.toHaveBeenCalled(); + expect(getByText('Speaker')).toBeTruthy(); + expect(getByText('Hold')).toBeTruthy(); + expect(getByText('Mute')).toBeTruthy(); + expect(getByText('Message')).toBeTruthy(); + expect(getByText('End')).toBeTruthy(); + expect(getByText('Dialpad')).toBeTruthy(); }); - it('message button is disabled when roomId is null', () => { - useCallStore.setState({ roomId: null }); + it('disabled states when ringing', () => { + setStoreState({ callState: 'ringing' }); const { getByTestId } = render( ); - fireEvent.press(getByTestId('call-view-message')); - expect(mockNavigateToCallRoom).not.toHaveBeenCalled(); + expect(getByTestId('call-view-speaker').props.accessibilityState?.disabled).toBe(true); + expect(getByTestId('call-view-hold').props.accessibilityState?.disabled).toBe(true); + expect(getByTestId('call-view-mute').props.accessibilityState?.disabled).toBe(true); + expect(getByTestId('call-view-dialpad').props.accessibilityState?.disabled).toBe(true); + }); + + it('mute toggle label shows Unmute when isMuted is true, Mute when false', () => { + setStoreState({ isMuted: true }); + const { getByText, rerender } = render( + + + + ); + expect(getByText('Unmute')).toBeTruthy(); + + setStoreState({ isMuted: false }); + rerender( + + + + ); + expect(getByText('Mute')).toBeTruthy(); }); - describe('layoutMode prop', () => { - it('renders two button rows on narrow layout', () => { - const { getByTestId } = render( - - - - ); - expect(getByTestId('call-buttons-row-0')).toBeTruthy(); - expect(getByTestId('call-buttons-row-1')).toBeTruthy(); - }); - - it('renders a single button row on wide layout', () => { - mockUseCallLayoutMode.mockReturnValue({ layoutMode: 'wide' }); - const { getByTestId, queryByTestId } = render( - - - - ); - expect(getByTestId('call-buttons-row-0')).toBeTruthy(); - expect(queryByTestId('call-buttons-row-1')).toBeNull(); - }); - - it('renders all six action buttons regardless of layoutMode', () => { - const ids = [ - 'call-view-speaker', - 'call-view-hold', - 'call-view-mute', - 'call-view-message', - 'call-view-end', - 'call-view-dialpad' - ]; - (['narrow', 'wide'] as const).forEach(layoutMode => { - mockUseCallLayoutMode.mockReturnValue({ layoutMode }); - const { getByTestId, unmount } = render( - - - - ); - ids.forEach(id => expect(getByTestId(id)).toBeTruthy()); - unmount(); - }); - }); - - it('places every action button inside row 0 on wide layout', () => { - mockUseCallLayoutMode.mockReturnValue({ layoutMode: 'wide' }); - const { getByTestId } = render( - - - - ); - const row0 = getByTestId('call-buttons-row-0'); - const ids = [ - 'call-view-speaker', - 'call-view-hold', - 'call-view-mute', - 'call-view-message', - 'call-view-end', - 'call-view-dialpad' - ]; - ids.forEach(id => { - expect(within(row0).getByTestId(id)).toBeTruthy(); - }); - }); - - it('splits buttons across row 0 and row 1 on narrow layout', () => { - const { getByTestId } = render( - - - - ); - const row0 = getByTestId('call-buttons-row-0'); - const row1 = getByTestId('call-buttons-row-1'); - - expect(within(row0).getByTestId('call-view-speaker')).toBeTruthy(); - expect(within(row0).getByTestId('call-view-hold')).toBeTruthy(); - expect(within(row0).getByTestId('call-view-mute')).toBeTruthy(); - expect(within(row1).getByTestId('call-view-message')).toBeTruthy(); - expect(within(row1).getByTestId('call-view-end')).toBeTruthy(); - expect(within(row1).getByTestId('call-view-dialpad')).toBeTruthy(); - }); + it('end/cancel label shows Cancel when ringing, End when active', () => { + setStoreState({ callState: 'ringing' }); + const { getByText, rerender } = render( + + + + ); + expect(getByText('Cancel')).toBeTruthy(); + + setStoreState({ callState: 'active' }); + rerender( + + + + ); + expect(getByText('End')).toBeTruthy(); }); }); diff --git a/app/views/CallView/components/CallButtons.tsx b/app/views/CallView/components/CallButtons.tsx index 7c5e8ee5338..ad6335d224e 100644 --- a/app/views/CallView/components/CallButtons.tsx +++ b/app/views/CallView/components/CallButtons.tsx @@ -30,6 +30,7 @@ export const CallButtons = () => { const { layoutMode } = useCallLayoutMode(); const { width, height } = useResponsiveLayout(); const isLandscape = width > height; + const singleRow = layoutMode === 'wide' || isLandscape; const callState = useCallStore(state => state.callState); const isMuted = useCallStore(state => state.isMuted); @@ -117,18 +118,16 @@ export const CallButtons = () => { return ( - {layoutMode === 'wide' ? ( - + {singleRow ? ( + {buttons.map(btn => ( { ) : ( <> - + {buttons.slice(0, 3).map(btn => ( { /> ))} - + {buttons.slice(3, 6).map(btn => ( { const toggleControlsVisible = useCallStore(state => state.toggleControlsVisible); const controlsVisible = useControlsVisible(); const isScreenReaderEnabled = useIsScreenReaderEnabled(); - const { width, height } = useResponsiveLayout(); - const isLandscape = width > height; const callerRowStyle = useAnimatedStyle(() => ({ opacity: withTiming(controlsVisible ? 1 : 0, { duration: CONTROLS_ANIMATION_DURATION }), @@ -29,13 +26,13 @@ const CallerInfo = (): React.ReactElement => { return ( - + diff --git a/app/views/CallView/components/Dialpad/Dialpad.test.tsx b/app/views/CallView/components/Dialpad/Dialpad.test.tsx index 5e214eae2a9..726e9035c3e 100644 --- a/app/views/CallView/components/Dialpad/Dialpad.test.tsx +++ b/app/views/CallView/components/Dialpad/Dialpad.test.tsx @@ -8,11 +8,25 @@ import { mockedStore } from '../../../../reducers/mockedStore'; import * as stories from './Dialpad.stories'; import { generateSnapshots } from '../../../../../.rnstorybook/generateSnapshots'; import { useCallLayoutMode } from '../../useCallLayoutMode'; +import { + BASE_ROW_HEIGHT, + BASE_ROW_HEIGHT_CONDENSED, + useResponsiveLayout +} from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout'; jest.mock('../../useCallLayoutMode', () => ({ useCallLayoutMode: jest.fn(() => ({ layoutMode: 'narrow' })) })); +jest.mock('../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout', () => { + const actual = jest.requireActual('../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout'); + return { + ...actual, + // Delegate to real hook so Storybook snapshots keep ResponsiveLayoutContext.Provider working. + useResponsiveLayout: jest.fn(() => actual.useResponsiveLayout()) + }; +}); + jest.mock('../../../../containers/ActionSheet', () => ({ hideActionSheetRef: jest.fn() })); @@ -47,9 +61,22 @@ const setStoreState = (overrides: Partial {children}; +const mockResponsiveLayout = (width: number, height: number) => + (useResponsiveLayout as jest.Mock).mockReturnValue({ + width, + height, + fontScale: 1, + fontScaleLimited: 1, + isLargeFontScale: false, + rowHeight: BASE_ROW_HEIGHT, + rowHeightCondensed: BASE_ROW_HEIGHT_CONDENSED + }); + describe('Dialpad', () => { beforeEach(() => { (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'narrow' }); + const actual = jest.requireActual('../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout'); + (useResponsiveLayout as jest.Mock).mockImplementation(() => actual.useResponsiveLayout()); useCallStore.getState().reset(); sendDTMFMock.mockClear(); }); @@ -127,8 +154,9 @@ describe('Dialpad', () => { expect(getByTestId('custom-dialpad-input')).toBeTruthy(); }); - it('should render in landscape layout when layoutMode is wide', () => { - (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'wide' }); + it('should render split layout only for narrow phone landscape', () => { + (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'narrow' }); + mockResponsiveLayout(600, 400); setStoreState(); const { getByTestId } = render( @@ -138,8 +166,35 @@ describe('Dialpad', () => { expect(getByTestId('dialpad-landscape-container')).toBeTruthy(); }); - it('should render in portrait layout when layoutMode is narrow', () => { + it('should not use split layout for wide layout in portrait', () => { + (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'wide' }); + mockResponsiveLayout(800, 1000); + setStoreState(); + const { getByTestId, queryByTestId } = render( + + + + ); + expect(getByTestId('dialpad-input')).toBeTruthy(); + expect(queryByTestId('dialpad-landscape-container')).toBeNull(); + }); + + it('should not use split layout for wide layout in landscape', () => { + (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'wide' }); + mockResponsiveLayout(1000, 600); + setStoreState(); + const { getByTestId, queryByTestId } = render( + + + + ); + expect(getByTestId('dialpad-input')).toBeTruthy(); + expect(queryByTestId('dialpad-landscape-container')).toBeNull(); + }); + + it('should render in portrait layout when layoutMode is narrow and portrait', () => { (useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'narrow' }); + mockResponsiveLayout(375, 812); setStoreState(); const { getByTestId, queryByTestId } = render( diff --git a/app/views/CallView/components/Dialpad/Dialpad.tsx b/app/views/CallView/components/Dialpad/Dialpad.tsx index 3c77d524c0c..3f5e0ee74d6 100644 --- a/app/views/CallView/components/Dialpad/Dialpad.tsx +++ b/app/views/CallView/components/Dialpad/Dialpad.tsx @@ -7,6 +7,7 @@ import DialpadButton from './DialpadButton'; import { useCallLayoutMode } from '../../useCallLayoutMode'; import { useDialpadValue } from '../../../../lib/services/voip/useCallStore'; import { useTheme } from '../../../../theme'; +import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout'; const DIALPAD_KEYS: { digit: string; letters: string }[][] = [ [ @@ -49,9 +50,12 @@ export const DialpadGrid = (): React.ReactElement => ( const Dialpad = ({ testID }: IDialpad): React.ReactElement => { const { layoutMode } = useCallLayoutMode(); + const { width, height } = useResponsiveLayout(); const { colors } = useTheme(); const dialpadValue = useDialpadValue(); + const isPhoneLandscape = width > height && layoutMode === 'narrow'; + const input = ( { /> ); - if (layoutMode === 'wide') { + if (isPhoneLandscape) { return ( {input} diff --git a/app/views/CallView/components/Dialpad/__snapshots__/Dialpad.test.tsx.snap b/app/views/CallView/components/Dialpad/__snapshots__/Dialpad.test.tsx.snap index 24657837e9d..b2452891e60 100644 --- a/app/views/CallView/components/Dialpad/__snapshots__/Dialpad.test.tsx.snap +++ b/app/views/CallView/components/Dialpad/__snapshots__/Dialpad.test.tsx.snap @@ -23,13 +23,13 @@ exports[`Story Snapshots: Default should match snapshot 1`] = ` } > - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -201,16 +198,13 @@ exports[`Story Snapshots: UsernameOnly should match snapshot 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - [ - { - "alignItems": "center", - "flex": 1, - "justifyContent": "center", - "marginBottom": 100, - "paddingHorizontal": 24, - }, - false, - ] + { + "alignItems": "center", + "flex": 1, + "justifyContent": "center", + "marginBottom": 100, + "paddingHorizontal": 24, + } } testID="caller-info-toggle" > diff --git a/app/views/CallView/index.test.tsx b/app/views/CallView/index.test.tsx index 7d4afb462f9..fc69b8eefda 100644 --- a/app/views/CallView/index.test.tsx +++ b/app/views/CallView/index.test.tsx @@ -10,9 +10,10 @@ import * as stories from './CallView.stories'; import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots'; let mockWindowWidth = 350; +let mockWindowHeight = 800; jest.mock('react-native/Libraries/Utilities/useWindowDimensions', () => ({ __esModule: true, - default: () => ({ width: mockWindowWidth, height: 800, scale: 1, fontScale: 1 }) + default: () => ({ width: mockWindowWidth, height: mockWindowHeight, scale: 1, fontScale: 1 }) })); const mockNavigateToCallRoom = jest.mocked(navigateToCallRoom); @@ -104,6 +105,7 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => { beforeEach(() => { mockWindowWidth = 350; + mockWindowHeight = 800; useCallStore.getState().reset(); jest.clearAllMocks(); }); @@ -414,6 +416,20 @@ describe('CallView/CallView', () => { it('should render buttons in a single row on wide layout', () => { mockWindowWidth = 800; + mockWindowHeight = 800; + setStoreState(); + const { getByTestId, queryByTestId } = render( + + + + ); + expect(getByTestId('call-buttons-row-0')).toBeTruthy(); + expect(queryByTestId('call-buttons-row-1')).toBeNull(); + }); + + it('should render buttons in a single row in phone landscape (narrow, width > height)', () => { + mockWindowWidth = 600; + mockWindowHeight = 400; setStoreState(); const { getByTestId, queryByTestId } = render( @@ -428,12 +444,14 @@ describe('CallView/CallView', () => { describe('CallView (tablet/wide layout)', () => { beforeEach(() => { mockWindowWidth = 800; + mockWindowHeight = 800; useCallStore.getState().reset(); jest.clearAllMocks(); }); afterAll(() => { mockWindowWidth = 350; + mockWindowHeight = 800; }); it('renders all six action buttons in a single row', () => { diff --git a/app/views/CallView/index.tsx b/app/views/CallView/index.tsx index 0584fa804eb..678d91f8468 100644 --- a/app/views/CallView/index.tsx +++ b/app/views/CallView/index.tsx @@ -5,7 +5,6 @@ import CallerInfo from './components/CallerInfo'; import { styles } from './styles'; import { useTheme } from '../../theme'; import { CallButtons } from './components/CallButtons'; -import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout'; import SafeAreaView from '../../containers/SafeAreaView'; const CallView = (): React.ReactElement | null => { @@ -13,21 +12,13 @@ const CallView = (): React.ReactElement | null => { const { colors } = useTheme(); const call = useCallStore(state => state.call); - const { width, height } = useResponsiveLayout(); - const isLandscape = width > height; if (!call) { return null; } return ( - + diff --git a/app/views/CallView/styles.ts b/app/views/CallView/styles.ts index 9ba3782da0c..de1abeda07d 100644 --- a/app/views/CallView/styles.ts +++ b/app/views/CallView/styles.ts @@ -61,7 +61,11 @@ export const styles = StyleSheet.create({ buttonsRow: { flexDirection: 'row', justifyContent: 'center', - gap: 48 + gap: 24 + }, + actionButtonCell: { + flex: 1, + alignItems: 'center' }, actionButton: { alignItems: 'center', @@ -76,21 +80,5 @@ export const styles = StyleSheet.create({ fontSize: 14, lineHeight: 20, textAlign: 'center' - }, - contentContainerLandscape: { - flexDirection: 'row', - alignItems: 'stretch' - }, - callerInfoContainerLandscape: { - flex: 2 - }, - buttonsContainerLandscape: { - flex: 3, - borderTopWidth: 0, - borderLeftWidth: StyleSheet.hairlineWidth, - justifyContent: 'center' - }, - buttonsRowLandscape: { - marginBottom: 16 } });