feat(design-v2): sdk and dogfood app design-v2 changes

packages/react-bindings/src/hooks/callUtilHooks.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCall } from '../contexts';
 import { useIsCallRecordingInProgress } from './callStateHooks';
+
 /**
  * Custom hook for toggling call recording in a video call.
  *

packages/react-native-sdk/__tests__/components/CallControls.test.tsx

@@ -3,11 +3,10 @@ import { mockClientWithUser } from '../mocks/client';
 import mockParticipant from '../mocks/participant';
 import { ButtonTestIds, ComponentTestIds } from '../../src/constants/TestIds';
 import { mockCall } from '../mocks/call';
-import { fireEvent, render, screen, waitFor } from '../utils/RNTLTools';
+import { fireEvent, render, screen } from '../utils/RNTLTools';
 import { OwnCapability } from '@stream-io/video-client';
 import { defaultEmojiReactions } from '../../src/constants';
-import { CallControls } from '../../src/components/Call/CallControls/CallControls';
-import { ChatButton } from '../../src/components/Call/CallControls/ChatButton';
+import { CallControls } from '../../src';
 import { HangUpCallButton } from '../../src/components/Call/CallControls/HangupCallButton';
 import { ReactionsButton } from '../../src/components/Call/CallControls/ReactionsButton';
 
@@ -18,48 +17,6 @@ enum P_IDS {
   LOCAL_1 = 'local-1',
 }
 
-describe('ChatButton', () => {
-  it('should render an unread badge indicator when the value is defined in the chatButton prop', async () => {
-    const call = mockCall(mockClientWithUser(), [
-      mockParticipant({
-        isLocalParticipant: true,
-        sessionId: P_IDS.LOCAL_1,
-        userId: P_IDS.LOCAL_1,
-      }),
-    ]);
-
-    render(<ChatButton onPressHandler={jest.fn()} unreadBadgeCount={1} />, {
-      call,
-    });
-
-    const indicator = await screen.findByText('1');
-
-    expect(indicator).toBeVisible();
-  });
-
-  it('should not render an unread badge indicator when the value is 0 in the chatButton prop', async () => {
-    const call = mockCall(mockClientWithUser(), [
-      mockParticipant({
-        isLocalParticipant: true,
-        sessionId: P_IDS.LOCAL_1,
-        userId: P_IDS.LOCAL_1,
-      }),
-    ]);
-
-    render(<ChatButton onPressHandler={jest.fn()} unreadBadgeCount={0} />, {
-      call,
-    });
-
-    await waitFor(() =>
-      expect(() =>
-        screen.getByTestId(ComponentTestIds.CHAT_UNREAD_BADGE_COUNT_INDICATOR)
-      ).toThrow(
-        /Unable to find an element with testID: chat-unread-badge-count-indicator/i
-      )
-    );
-  });
-});
-
 describe('ReactionsButton', () => {
   it('render reaction button in call controls component', async () => {
     const call = mockCall(

packages/react-native-sdk/__tests__/components/ParticipantView.test.tsx

@@ -43,7 +43,6 @@ describe('ParticipantView', () => {
     expect(
       await screen.findByTestId(ComponentTestIds.PARTICIPANT_AVATAR)
     ).toBeOnTheScreen();
-    expect(screen.getByTestId(IconTestIds.MUTED_VIDEO)).toBeOnTheScreen();
     expect(screen.getByText(testParticipant.name)).toBeOnTheScreen();
     // reaction is visible and then disappears after 5500 ms
     expect(screen.getByText('🎉')).toBeOnTheScreen();

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-content.mdx

@@ -10,7 +10,6 @@ import CallContentSpotlight from '../../assets/04-ui-components/call/call-conten
 
 import CallTopView from '../../common-content/ui-components/call/call-content/call-top-view.mdx';
 import CallControls from '../../common-content/ui-components/call/call-content/call-controls.mdx';
-import ParticipantsInfoBadge from '../../common-content/ui-components/call/call-content/participants-info-badge.mdx';
 import Landscape from '../../common-content/ui-components/call/call-content/landscape.mdx';
 import OnBackPressed from '../../common-content/ui-components/call/call-content/on-back-pressed.mdx';
 import OnParticipantInfoPress from '../../common-content/ui-components/call/call-content/on-participant-info-press.mdx';

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-top-view.mdx

@@ -3,7 +3,6 @@ id: call-top-view
 title: CallTopView
 ---
 
-import ParticipantsInfoBadge from '../../common-content/ui-components/call/call-content/participants-info-badge.mdx';
 import OnBackPressed from '../../common-content/ui-components/call/call-content/on-back-pressed.mdx';
 import OnParticipantInfoPress from '../../common-content/ui-components/call/call-content/on-participant-info-press.mdx';
 
@@ -60,10 +59,6 @@ Style to override the container of the `CallTopView`.
 | ---------------------------------------------------------- |
 | [ViewStyle](https://reactnative.dev/docs/view-style-props) |
 
-### `ParticipantsInfoBadge`
-
-<ParticipantsInfoBadge />
-
 ## Customization
 
 You can create your own custom `CallTopView` using the [Call Top View UI Cookbook guide](../../../ui-cookbook/replacing-call-top-view/).

packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/19-call-quality-rating.mdx

@@ -69,7 +69,7 @@ const FeedbackModal: = () => {
               <TouchableOpacity onPress={onClose} style={[styles.closeButton]}>
                 <IconWrapper>
                   <Close
-                    color={colors.typeSecondary}
+                    color={colors.iconPrimary}
                     size={variants.roundButtonSizes.sm}
                   />
                 </IconWrapper>
@@ -93,8 +93,8 @@ const FeedbackModal: = () => {
                 <Star
                   color={
                     selectedRating && selectedRating >= rating
-                      ? colors.iconAlertSuccess
-                      : colors.typeSecondary
+                      ? colors.iconSuccess
+                      : colors.iconPrimary
                   }
                 />
               </TouchableOpacity>

packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx

@@ -1,11 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
-
-import {
-  CallTopView as DefaultCallTopView,
-  CallTopViewProps,
-} from '../CallTopView';
 import {
   CallParticipantsGrid,
   CallParticipantsGridProps,
@@ -45,10 +40,6 @@ export type StreamReactionType = StreamReaction & {
 
 type CallContentComponentProps = ParticipantViewComponentProps &
   Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
-    /**
-     * Component to customize the CallTopView component.
-     */
-    CallTopView?: React.ComponentType<CallTopViewProps> | null;
     /**
      * Component to customize the CallControls component.
      */
@@ -71,10 +62,6 @@ export type CallContentProps = Pick<
   HangUpCallButtonProps,
   'onHangupCallHandler'
 > &
-  Pick<
-    CallTopViewProps,
-    'onBackPressed' | 'onParticipantInfoPress' | 'ParticipantsInfoBadge'
-  > &
   CallContentComponentProps & {
     /**
      * This switches the participant's layout between the grid and the spotlight mode.
@@ -100,11 +87,8 @@ export type CallContentProps = Pick<
   };
 
 export const CallContent = ({
-  onBackPressed,
-  onParticipantInfoPress,
   onHangupCallHandler,
   CallParticipantsList,
-  CallTopView = DefaultCallTopView,
   CallControls = DefaultCallControls,
   FloatingParticipantView = DefaultFloatingParticipantView,
   ScreenShareOverlay = DefaultScreenShareOverlay,
@@ -113,7 +97,6 @@ export const CallContent = ({
   ParticipantReaction,
   ParticipantVideoFallback,
   ParticipantView,
-  ParticipantsInfoBadge,
   VideoRenderer,
   layout = 'grid',
   landscape = false,
@@ -125,6 +108,7 @@ export const CallContent = ({
     showRemoteParticipantInFloatingView,
     setShowRemoteParticipantInFloatingView,
   ] = useState<boolean>(false);
+  const styles = useStyles();
   const {
     theme: { callContent },
   } = useTheme();
@@ -213,20 +197,13 @@ export const CallContent = ({
         />
       )}
       <View style={[styles.container, landscapeStyles, callContent.container]}>
-        <View style={[styles.container, callContent.callParticipantsContainer]}>
+        <View style={[styles.content, callContent.callParticipantsContainer]}>
           <View
             style={[styles.view, callContent.topContainer]}
             // "box-none" disallows the container view to be not take up touches
             // and allows only the top and floating view (its child views) to take up the touches
             pointerEvents="box-none"
           >
-            {!isInPiPMode && CallTopView && (
-              <CallTopView
-                onBackPressed={onBackPressed}
-                onParticipantInfoPress={onParticipantInfoPress}
-                ParticipantsInfoBadge={ParticipantsInfoBadge}
-              />
-            )}
             {showFloatingView && FloatingParticipantView && (
               <FloatingParticipantView
                 participant={
@@ -258,10 +235,25 @@ export const CallContent = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  view: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          paddingBottom: theme.variants.insets.bottom,
+          paddingLeft: theme.variants.insets.left,
+          paddingRight: theme.variants.insets.right,
+          paddingTop: theme.variants.insets.top,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+        content: { flex: 1 },
+        view: {
+          ...StyleSheet.absoluteFillObject,
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+      }),
+    [theme]
+  );
+};

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();
@@ -57,11 +57,13 @@ export const AcceptCallButton = ({
   return (
     <CallControlsButton
       onPress={acceptCallHandler}
-      color={colors.info}
-      size={buttonSizes.lg}
+      color={colors.buttonSuccess}
+      size={buttonSizes.md}
       style={acceptCallButton}
     >
-      <Phone color={colors.static_white} />
+      <IconWrapper>
+        <Phone color={colors.iconPrimary} size={iconSizes.lg} />
+      </IconWrapper>
     </CallControlsButton>
   );
 };

packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx

@@ -40,7 +40,7 @@ export const CallControls = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.static_grey },
+        { backgroundColor: colors.sheetPrimary },
         callControls.container,
         landscapeStyles,
         style,
@@ -49,7 +49,7 @@ export const CallControls = ({
       <ToggleVideoPublishingButton />
       <ToggleAudioPublishingButton />
       <ToggleCameraFaceButton />
-      <HangUpCallButton onHangupCallHandler={onHangupCallHandler} />
+      <HangUpCallButton onPressHandler={onHangupCallHandler} />
     </View>
   );
 };

packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx

@@ -18,6 +18,10 @@ interface CallControlsButtonProps {
    * The background color of the button rendered.
    */
   color?: ColorValue;
+  /**
+   * The background color of the disabled button.
+   */
+  disabledColor?: ColorValue;
   /**
    * Boolean to enable/disable the button
    */
@@ -49,6 +53,7 @@ export const CallControlsButton = (
     children,
     disabled,
     color: colorProp,
+    disabledColor: disabledColorProp,
     style: styleProp,
     size,
     testID,
@@ -57,8 +62,9 @@ export const CallControlsButton = (
 
   const {
     theme: {
-      variants: { buttonSizes },
       colors,
+      defaults,
+      variants: { roundButtonSizes },
       callControlsButton: { container },
     },
   } = useTheme();
@@ -67,18 +73,18 @@ export const CallControlsButton = (
     styles.container,
     {
       backgroundColor: disabled
-        ? colors.disabled
-        : colorProp || colors.static_white,
+        ? disabledColorProp || colors.buttonDisabled
+        : colorProp || colors.buttonSecondary,
       opacity: pressed ? 0.2 : 1,
-      height: size || buttonSizes.sm,
-      width: size || buttonSizes.sm,
-      borderRadius: (size || buttonSizes.sm) / 2,
-      borderColor: colors.content_bg,
+      height: size || roundButtonSizes.lg,
+      width: size || roundButtonSizes.lg,
+      borderRadius: defaults.borderRadius,
     },
     styleProp?.container ?? null,
     container,
   ];
 
+  const childrenSize = (size || roundButtonSizes.lg) / 2 - 5;
   return (
     <Pressable
       disabled={disabled}
@@ -89,10 +95,7 @@ export const CallControlsButton = (
     >
       <View
         style={[
-          {
-            height: (size || buttonSizes.sm) / 2 - 5,
-            width: (size || buttonSizes.sm) / 2 - 5,
-          },
+          { height: childrenSize, width: childrenSize },
           styleProp?.svgContainer ?? null,
         ]}
       >
@@ -105,16 +108,7 @@ export const CallControlsButton = (
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
-    borderWidth: 1,
     alignItems: 'center',
-    // For iOS
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 8,
 
     // For android
     elevation: 6,