fix: incoming and outgoing call screens

GetStream · Nov 14, 2024 · cd25afe · cd25afe
1 parent c9a68be
commit cd25afe
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 17 deletions.
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/AcceptCallButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/AcceptCallButton.tsx
@@ -2,7 +2,7 @@ import { useCall } from '@stream-io/video-react-bindings';
 import { getLogger } from '@stream-io/video-client';
 import React from 'react';
 import { CallControlsButton } from './CallControlsButton';
-import { Phone } from '../../../icons';
+import { IconWrapper, Phone } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 /**
@@ -34,7 +34,7 @@ export const AcceptCallButton = ({
   const {
     theme: {
       colors,
-      variants: { buttonSizes },
+      variants: { buttonSizes, iconSizes },
       acceptCallButton,
     },
   } = useTheme();
@@ -58,10 +58,12 @@ export const AcceptCallButton = ({
     <CallControlsButton
       onPress={acceptCallHandler}
       color={colors.iconSuccess}
-      size={buttonSizes.lg}
+      size={buttonSizes.md}
       style={acceptCallButton}
     >
-      <Phone color={colors.textPrimary} />
+      <IconWrapper>
+        <Phone color={colors.iconPrimary} size={iconSizes.lg} />
+      </IconWrapper>
     </CallControlsButton>
   );
 };
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/IncomingCallControls.tsx b/packages/react-native-sdk/src/components/Call/CallControls/IncomingCallControls.tsx
@@ -24,12 +24,16 @@ export const IncomingCallControls = ({
   onRejectCallHandler,
 }: IncomingCallControlsProps) => {
   const {
-    theme: { incomingCall },
+    theme: {
+      incomingCall,
+      variants: { buttonSizes },
+    },
   } = useTheme();
   return (
     <View style={[styles.buttonGroup, incomingCall.buttonGroup]}>
       <RejectCallButton
         onPressHandler={onRejectCallHandler}
+        size={buttonSizes.md}
         rejectReason="decline"
       />
       <ToggleVideoPreviewButton />

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/RejectCallButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/RejectCallButton.tsx
@@ -1,7 +1,7 @@
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { CallControlsButton } from './CallControlsButton';
-import { PhoneDown } from '../../../icons';
+import { IconWrapper, PhoneDown } from '../../../icons';
 import { CallingState, getLogger } from '@stream-io/video-client';
 import { useTheme } from '../../../contexts/ThemeContext';
 
@@ -80,12 +80,14 @@ export const RejectCallButton = ({
     <CallControlsButton
       onPress={rejectCallHandler}
       color={colors.iconWarning}
-      size={size ?? buttonSizes.lg}
+      size={size ?? buttonSizes.md}
       // TODO: check what to do about this random style prop
       // svgContainerStyle={theme.icon.lg}
       style={rejectCallButton}
     >
-      <PhoneDown color={colors.iconPrimary} size={iconSizes.md} />
+      <IconWrapper>
+        <PhoneDown color={colors.iconPrimary} size={iconSizes.lg} />
+      </IconWrapper>
     </CallControlsButton>
   );
 };
diff --git a/packages/react-native-sdk/src/components/Call/RingingCallContent/IncomingCall.tsx b/packages/react-native-sdk/src/components/Call/RingingCallContent/IncomingCall.tsx
@@ -146,7 +146,7 @@ export const styles = StyleSheet.create({
   content: {
     flex: 1,
   },
-  topContainer: { flex: 1 },
+  topContainer: { flex: 1, justifyContent: 'center' },
   incomingCallText: {
     marginTop: 8,
     textAlign: 'center',

diff --git a/packages/react-native-sdk/src/components/Call/RingingCallContent/OutgoingCall.tsx b/packages/react-native-sdk/src/components/Call/RingingCallContent/OutgoingCall.tsx
@@ -105,7 +105,7 @@ const Background = () => {
       <View
         style={[
           styles.background,
-          { backgroundColor: colors.sheetTertiary },
+          { backgroundColor: colors.sheetSecondary },
           outgoingCall.background,
         ]}
       />
@@ -115,7 +115,7 @@ const Background = () => {
     <View
       style={[
         styles.background,
-        { backgroundColor: colors.sheetTertiary },
+        { backgroundColor: colors.sheetSecondary },
         outgoingCall.background,
       ]}
     >
@@ -137,7 +137,7 @@ const styles = StyleSheet.create({
   container: {
     zIndex: Z_INDEX.IN_MIDDLE,
   },
-  topContainer: { flex: 1 },
+  topContainer: { flex: 1, justifyContent: 'center' },
   content: {
     flex: 1,
   },

diff --git a/packages/react-native-sdk/src/constants/TestIds.ts b/packages/react-native-sdk/src/constants/TestIds.ts
@@ -1,6 +1,7 @@
 export enum IconTestIds {
   MUTED_VIDEO = 'muted-video-icon',
   HANG_UP_CALL = 'hang-up-call-icon',
+  PHONE = 'phone-icon',
   SCREEN_SHARE_INDICATOR = 'screen-share-indicator-icon',
   SCREEN_SHARE = 'screen-share-icon',
 }

diff --git a/packages/react-native-sdk/src/icons/Phone.tsx b/packages/react-native-sdk/src/icons/Phone.tsx
@@ -1,15 +1,23 @@
 import React from 'react';
 import { Svg, Path } from 'react-native-svg';
 import { ColorValue } from 'react-native/types';
+import { IconTestIds } from '../constants/TestIds';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const Phone = ({ color }: Props) => (
-  <Svg viewBox="0 0 34 33">
+export const Phone = ({ color, size }: Props) => (
+  <Svg
+    viewBox="0 0 24 9"
+    width={size}
+    height={size}
+    style={{ transform: [{ rotate: '-130deg' }] }}
+    testID={IconTestIds.PHONE}
+  >
     <Path
-      d="M9.779 24.114c5 5.017 11.085 8.881 16.052 8.881 2.22 0 4.17-.78 5.73-2.508.914-1.017 1.474-2.187 1.474-3.356 0-.899-.356-1.78-1.22-2.39l-5.204-3.695c-.83-.577-1.509-.848-2.12-.848-.796 0-1.508.44-2.287 1.22l-1.22 1.22a.982.982 0 0 1-.662.272c-.271 0-.525-.102-.695-.203-1.068-.577-2.898-2.136-4.593-3.831-1.695-1.695-3.272-3.509-3.831-4.594a1.454 1.454 0 0 1-.187-.695.95.95 0 0 1 .255-.644l1.22-1.237c.763-.797 1.22-1.492 1.22-2.288 0-.628-.27-1.306-.847-2.12L9.186 2.147C8.559 1.265 7.677.892 6.71.892c-1.153 0-2.305.508-3.305 1.474C1.71 3.96.965 5.943.965 8.13c0 4.967 3.814 10.984 8.814 15.985Z"
+      d="M12 0.0546875C16.4531 0.0449219 20.5156 0.962891 22.5566 3.00391C23.4648 3.91211 23.9727 5.02539 23.9336 6.38281C23.9043 7.19336 23.6406 7.87695 23.1621 8.33594C22.7617 8.73633 22.2246 8.9707 21.5898 8.86328L17.9863 8.25781C17.4004 8.16016 17.0098 7.98438 16.7559 7.73047C16.4238 7.39844 16.3262 6.91992 16.3164 6.28516L16.3066 5.26953C16.3066 5.11328 16.248 4.98633 16.1504 4.89844C16.043 4.79102 15.8965 4.73242 15.7891 4.69336C15.0957 4.49805 13.709 4.39062 12 4.39062C10.291 4.39062 8.89453 4.54688 8.21094 4.69336C8.09375 4.72266 7.9375 4.78125 7.83008 4.89844C7.74219 4.99609 7.67383 5.11328 7.67383 5.26953V6.28516C7.66406 6.91992 7.56641 7.4082 7.23438 7.73047C6.98047 7.98438 6.58984 8.16016 6.01367 8.25781L2.37109 8.87305C1.74609 8.9707 1.22852 8.75586 0.837891 8.36523C0.369141 7.89648 0.105469 7.19336 0.0761719 6.39258C0.0078125 5.03516 0.486328 3.92188 1.4043 3.00391C3.44531 0.962891 7.53711 0.0546875 12 0.0546875Z"
       fill={color}
     />
   </Svg>

diff --git a/packages/react-native-sdk/src/icons/PhoneDown.tsx b/packages/react-native-sdk/src/icons/PhoneDown.tsx
@@ -10,13 +10,13 @@ type Props = {
 
 export const PhoneDown = ({ color, size }: Props) => (
   <Svg
-    viewBox={'0 0 24 24'}
+    viewBox={'0 0 24 9'}
     width={size}
     height={size}
     testID={IconTestIds.HANG_UP_CALL}
   >
     <Path
-      d="M4.5801 16.5304L6.5801 14.9404C7.0601 14.5604 7.3401 13.9804 7.3401 13.3704V10.7704C10.3601 9.7904 13.6301 9.7804 16.6601 10.7704V13.3804C16.6601 13.9904 16.9401 14.5704 17.4201 14.9504L19.4101 16.5304C20.2101 17.1604 21.3501 17.1004 22.0701 16.3804L23.2901 15.1604C24.0901 14.3604 24.0901 13.0304 23.2401 12.2804C16.8301 6.6204 7.1701 6.6204 0.760103 12.2804C-0.089897 13.0304 -0.089897 14.3604 0.710103 15.1604L1.9301 16.3804C2.6401 17.1004 3.7801 17.1604 4.5801 16.5304Z"
+      d="M12 0.0546875C16.4531 0.0449219 20.5156 0.962891 22.5566 3.00391C23.4648 3.91211 23.9727 5.02539 23.9336 6.38281C23.9043 7.19336 23.6406 7.87695 23.1621 8.33594C22.7617 8.73633 22.2246 8.9707 21.5898 8.86328L17.9863 8.25781C17.4004 8.16016 17.0098 7.98438 16.7559 7.73047C16.4238 7.39844 16.3262 6.91992 16.3164 6.28516L16.3066 5.26953C16.3066 5.11328 16.248 4.98633 16.1504 4.89844C16.043 4.79102 15.8965 4.73242 15.7891 4.69336C15.0957 4.49805 13.709 4.39062 12 4.39062C10.291 4.39062 8.89453 4.54688 8.21094 4.69336C8.09375 4.72266 7.9375 4.78125 7.83008 4.89844C7.74219 4.99609 7.67383 5.11328 7.67383 5.26953V6.28516C7.66406 6.91992 7.56641 7.4082 7.23438 7.73047C6.98047 7.98438 6.58984 8.16016 6.01367 8.25781L2.37109 8.87305C1.74609 8.9707 1.22852 8.75586 0.837891 8.36523C0.369141 7.89648 0.105469 7.19336 0.0761719 6.39258C0.0078125 5.03516 0.486328 3.92188 1.4043 3.00391C3.44531 0.962891 7.53711 0.0546875 12 0.0546875Z"
       fill={color}
     />
   </Svg>