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

## Overview
Design v2 changes of the SDK components and dogfood application. 

[RELEASE
NOTES](https://github.com/GetStream/docs-content/blob/745f82b3f9e97bbcf9035785eedf319aba7f43ff/video/react-native/CHANGELOG.md)

[PR: Docs update](GetStream/docs-content#16)


### Summary
We're excited to announce version 1.4.0 of our react-native library,
bringing significant improvements and features. This update includes
breaking changes, so please review the migration guide before upgrading.

### ✨ New Features
- **Theme System Overhaul**
  - Added comprehensive theme support for:
    - Button sizes
    - Icon sizes
    - Avatar sizes
    - Font sizes
    - Spacing sizes
    - Border radius sizes
    - Insets
  - Introduced new color system (see Migration Guide)
- **New Component**
  - Speech Indicator: Visual feedback for active speaker states
- **Updated icons**
- Mic, MicOff, Video, VideoSlash, CameraSwitch, Phone, PhoneDown,
ScreenShare, StopScreenShare
- **New default emojis**
  - 🤣 Rolling on the floor laughing
  - 👍 Like
  - 🚀 Rocket
  - 👎 Dislike
  - 🎉 Fireworks
  - 🙌 Raised hands
  - ✋ Raised hand
- **Safe Area Improvements**
  - Added theme-based inset support for better safe area handling
- See our [Safe Area
Guide](/video/docs/react-native/ui-cookbook/safe-area/) for
implementation details


### 🔨 Enhancements
- Design updates for most of the components

### 🚨 Breaking Changes

- The following SDK components have been deprecated and removed:
  - CallTopView.tsx
  - ChatButton.tsx
  - ParticipantsInfoBadge.tsx

#### CallTopView Removal
The `CallTopView` prop in `CallContent` component has been removed.
Instead, you can now render your custom top view component as a sibling
to `CallContent`. This provides more flexibility and better composition
of UI elements.

**Before:**
```tsx
<StreamCall call={call}>
  <CallContent CallTopView={CustomCallTopView} /> {/* Removed */}
</StreamCall>
```

**After:**
```tsx
<StreamCall call={call}>
  <CustomCallTopView /> {/* Render as separate component */}
  <CallContent />
</StreamCall>
```

#### Colors migration guide
| Old          | New                                              |
| ------------------ | ------------------------------------------------
|
| primary | primary or buttonPrimary or iconPrimary |
| error | iconWarning or buttonWarning |
| info | iconSuccess |
| static_black | sheetPrimary or iconPrimary |
| static_white | textPrimary or iconPrimary |
| static_grey | sheetPrimary or sheetSecondary or sheetTertiary |
| static_overlay | sheetOverlay |
| overlay | sheetOverlay |
| darkGray | sheetPrimary or sheetTertiary or buttonSecondary |
| disabled | sheetTertiary or buttonDisabled |
| bars | textPrimary |
| text_high_emphasis | textPrimary |
| text_low_emphasis | textSecondary |
| controls_bg | textPrimary |
| borders | primary or secondary |
| overlay_dark | sheetOverlay |
| content_bg | sheetPrimary |
| dark_gray | sheetPrimary |

---------

Co-authored-by: Santhosh Vaiyapuri <[email protected]>
Co-authored-by: GitHub Actions Bot <>
Co-authored-by: Oliver Lazoroski <[email protected]>

Author: 3 people

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/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participants-info-badge.mdx

@@ -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/CallContent/CallContent.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/AcceptCallButton.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>
   );
 };