fix(design-v2): color consolidation and other fixes (#1556)

## Overview
- consolidates the theme colors
- adds support for Light/Dark theme for the dogfood app
- updates the Lobby screen per design-v2 
- updates iOS config so that iPad is target device as well
- solves issues when the app is shown on iPad is not constrained in
smaller screen size
- fixes speech indicator issue to be animating only when the user is
speaking
- fixes participant name, network indicator and reaction position issues
- updates the `FLOATING_VIDEO_VIEW_STYLE` width and height to bigger
values according to new design-v2
- removes hardcoded Lobby video height const from the SDK
`LOBBY_VIDEO_VIEW_HEIGHT`
- fixes call recording modal and bottom drawer orientation issues

## Screenshots
<kbd>
<img
src="https://github.com/user-attachments/assets/1872ed71-e9df-40d7-a725-a6b01d094640"
alt="ios" width="200" height="440"/>
</kbd>
<kbd>
<img
src="https://github.com/user-attachments/assets/f75912fe-01be-45ba-810d-349d2eb6ef84"
alt="ios" width="200" height="440" />
</kbd>
<kbd>
<img
src="https://github.com/user-attachments/assets/69e63502-c56f-4b4d-ab95-8e707fcd72d6"
alt="ios" width="200" height="440" />
</kbd>
<img
src="https://github.com/user-attachments/assets/9432eef3-7013-4b88-a9c3-fee172b15691"
alt="ios" width="200" height="440" />
</kbd>

Author: kristian-mkd

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

@@ -57,11 +57,11 @@ export const AcceptCallButton = ({
   return (
     <CallControlsButton
       onPress={acceptCallHandler}
-      color={colors.info}
+      color={colors.iconAlertSuccess}
       size={buttonSizes.lg}
       style={acceptCallButton}
     >
-      <Phone color={colors.base1} />
+      <Phone color={colors.typePrimary} />
     </CallControlsButton>
   );
 };

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

@@ -40,7 +40,7 @@ export const CallControls = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.base4 },
+        { backgroundColor: colors.sheetPrimary },
         callControls.container,
         landscapeStyles,
         style,

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

@@ -108,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,

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

@@ -68,16 +68,13 @@ export const HangUpCallButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={colors.error}
+      color={colors.iconAlertWarning}
       style={hangupCallButton}
       size={size}
       testID={ButtonTestIds.HANG_UP_CALL}
     >
       <IconWrapper>
-        <PhoneDown
-          color={colors.iconPrimaryDefault}
-          size={variants.iconSizes.md}
-        />
+        <PhoneDown color={colors.typePrimary} size={variants.iconSizes.md} />
       </IconWrapper>
     </CallControlsButton>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ToggleAudioPreviewButton } from './ToggleAudioPreviewButton';
 import { ToggleVideoPreviewButton } from './ToggleVideoPreviewButton';
@@ -11,6 +11,7 @@ export const LobbyControls = () => {
   const {
     theme: { lobbyControls },
   } = useTheme();
+  const styles = useStyles();
   return (
     <View style={[styles.container, lobbyControls.container]}>
       <ToggleAudioPreviewButton />
@@ -19,10 +20,17 @@ export const LobbyControls = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 12,
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingTop: theme.variants.spacingSizes.xs,
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+        },
+      }),
+    [theme]
+  );
+};

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

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { CallControlsButton } from './CallControlsButton';
 import { OwnCapability } from '@stream-io/video-client';
 import { ButtonTestIds } from '../../../constants/TestIds';
-import { Reaction } from '../../../icons';
+import { IconWrapper, Reaction } from '../../../icons';
 import { ReactionsPicker } from './internal/ReactionsPicker';
 import { LayoutChangeEvent, LayoutRectangle } from 'react-native';
 import { useTheme } from '../../../contexts/ThemeContext';
@@ -71,7 +71,9 @@ export const ReactionsButton = ({
           onPress={reactionsButtonHandler}
           onLayout={onReactionsButtonLayout}
         >
-          <Reaction color={colors.base5} />
+          <IconWrapper>
+            <Reaction color={colors.iconPrimaryDefault} />
+          </IconWrapper>
         </CallControlsButton>
       </Restricted>
       {showReactionsPicker && (

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

@@ -63,7 +63,7 @@ export const RejectCallButton = ({
   return (
     <CallControlsButton
       onPress={rejectCallHandler}
-      color={colors.error}
+      color={colors.iconAlertWarning}
       size={buttonSizes.lg}
       // TODO: check what to do about this random style prop
       // svgContainerStyle={theme.icon.lg}

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

@@ -4,6 +4,7 @@ import React from 'react';
 import { CallControlsButton } from './CallControlsButton';
 import { CameraSwitch, IconWrapper } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { ColorValue } from 'react-native';
 
 /**
  * Props for the Toggle Camera face button.
@@ -14,13 +15,19 @@ export type ToggleCameraFaceButtonProps = {
    * @returns void
    */
   onPressHandler?: () => void;
+
+  /**
+   * Background color of the button.
+   */
+  backgroundColor?: ColorValue;
 };
 
 /**
  * Button to toggle camera face(front/back) when in the call.
  */
 export const ToggleCameraFaceButton = ({
   onPressHandler,
+  backgroundColor,
 }: ToggleCameraFaceButtonProps) => {
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const { camera, optimisticIsMute, direction } = useCameraState();
@@ -46,8 +53,9 @@ export const ToggleCameraFaceButton = ({
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
+        size={variants.roundButtonSizes.md}
         onPress={onPress}
-        color={colors.sheetPrimary}
+        color={backgroundColor || colors.buttonSecondaryDefault}
         disabledColor={colors.sheetPrimary}
         disabled={optimisticIsMute}
         style={toggleCameraFaceButton}

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

@@ -25,8 +25,7 @@ export const ToggleVideoPreviewButton = ({
     theme: {
       colors,
       toggleVideoPreviewButton,
-      variants: { buttonSizes },
-      defaults,
+      variants: { buttonSizes, iconSizes },
     },
   } = useTheme();
   const { useCameraState, useCallSettings } = useCallStateHooks();
@@ -61,12 +60,9 @@ export const ToggleVideoPreviewButton = ({
     >
       <IconWrapper>
         {!optimisticIsMute ? (
-          <Video color={colors.iconPrimaryDefault} size={defaults.iconSize} />
+          <Video color={colors.iconPrimaryDefault} size={iconSizes.lg} />
         ) : (
-          <VideoSlash
-            color={colors.iconPrimaryDefault}
-            size={defaults.iconSize}
-          />
+          <VideoSlash color={colors.iconPrimaryDefault} size={iconSizes.lg} />
         )}
       </IconWrapper>
     </CallControlsButton>

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

@@ -27,7 +27,7 @@ export const ToggleVideoPublishingButton = ({
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
   const {
-    theme: { colors, defaults },
+    theme: { colors, variants },
   } = useTheme();
   const onPress = async () => {
     if (onPressHandler) {
@@ -53,11 +53,14 @@ export const ToggleVideoPublishingButton = ({
       >
         <IconWrapper>
           {!optimisticIsMute ? (
-            <Video color={colors.iconPrimaryDefault} size={defaults.iconSize} />
+            <Video
+              color={colors.iconPrimaryDefault}
+              size={variants.iconSizes.md}
+            />
           ) : (
             <VideoSlash
               color={colors.iconPrimaryDefault}
-              size={defaults.iconSize}
+              size={variants.iconSizes.md}
             />
           )}
         </IconWrapper>