fix(design-v2): review remarks for the design-v2 umbrella branch (#1572)

Fixes for the review remarks from the design-v2 review call. - removed the CallTopView from SDK - removed hardcoded sizes in some icons - fixed spread styles `container: { ...toggleAudioPreviewButton.container },` - fixed the lobby text message - removed the topOffset in the floating participant video - reverted the video and audio muted icons to the previous state - fixed the SpeechIndicator useRef issue - reverted the FLOATING_VIDEO_VIEW_STYLE changes, they can be easily overriden from the theme - added some inline docs for the theme insets and dimensions - fixed the casting in the dogfood app theme customisation
GetStream · Nov 15, 2024 · 64280b2 · 64280b2
1 parent bc06a89
commit 64280b2
Show file tree

Hide file tree

Showing 85 changed files with 425 additions and 438 deletions.
diff --git a/...ative-sdk/docusaurus/docs/reactnative/05-ui-cookbook/19-call-quality-rating.mdx b/...ative-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>

diff --git a/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx b/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx
@@ -40,10 +40,6 @@ export type StreamReactionType = StreamReaction & {
 
 type CallContentComponentProps = ParticipantViewComponentProps &
   Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
-    /**
-     * Component to customize the CallTopView component.
-     */
-    CallTopView?: React.ComponentType<any> | null;
     /**
      * Component to customize the CallControls component.
      */
@@ -93,7 +89,6 @@ export type CallContentProps = Pick<
 export const CallContent = ({
   onHangupCallHandler,
   CallParticipantsList,
-  CallTopView,
   CallControls = DefaultCallControls,
   FloatingParticipantView = DefaultFloatingParticipantView,
   ScreenShareOverlay = DefaultScreenShareOverlay,
@@ -198,9 +193,6 @@ export const CallContent = ({
       )}
       <View style={[styles.container, callContent.container]}>
         <View style={[styles.content, callContent.callParticipantsContainer]}>
-          {!isInPiPMode && CallTopView && (
-            <CallTopView onHangupCallHandler={onHangupCallHandler} />
-          )}
           <View
             style={[styles.view, callContent.topContainer]}
             // "box-none" disallows the container view to be not take up touches

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();
@@ -57,11 +57,13 @@ export const AcceptCallButton = ({
   return (
     <CallControlsButton
       onPress={acceptCallHandler}
-      color={colors.iconAlertSuccess}
-      size={buttonSizes.lg}
+      color={colors.buttonSuccess}
+      size={buttonSizes.md}
       style={acceptCallButton}
     >
-      <Phone color={colors.typePrimary} />
+      <IconWrapper>
+        <Phone color={colors.iconPrimary} size={iconSizes.lg} />
+      </IconWrapper>
     </CallControlsButton>
   );
 };
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx b/packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx
@@ -49,7 +49,7 @@ export const CallControls = ({
       <ToggleVideoPublishingButton />
       <ToggleAudioPublishingButton />
       <ToggleCameraFaceButton />
-      <HangUpCallButton onHangupCallHandler={onHangupCallHandler} />
+      <HangUpCallButton onPressHandler={onHangupCallHandler} />
     </View>
   );
 };

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx
@@ -73,8 +73,8 @@ export const CallControlsButton = (
     styles.container,
     {
       backgroundColor: disabled
-        ? disabledColorProp || colors.buttonPrimaryDisabled
-        : colorProp || colors.buttonSecondaryDefault,
+        ? disabledColorProp || colors.buttonDisabled
+        : colorProp || colors.buttonSecondary,
       opacity: pressed ? 0.2 : 1,
       height: size || roundButtonSizes.lg,
       width: size || roundButtonSizes.lg,

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/HangupCallButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/HangupCallButton.tsx
@@ -68,13 +68,13 @@ export const HangUpCallButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={colors.iconAlertWarning}
+      color={colors.buttonWarning}
       style={hangupCallButton}
       size={size}
       testID={ButtonTestIds.HANG_UP_CALL}
     >
       <IconWrapper>
-        <PhoneDown color={colors.typePrimary} size={variants.iconSizes.md} />
+        <PhoneDown color={colors.iconPrimary} size={variants.iconSizes.md} />
       </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/ReactionsButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ReactionsButton.tsx
@@ -72,7 +72,7 @@ export const ReactionsButton = ({
           onLayout={onReactionsButtonLayout}
         >
           <IconWrapper>
-            <Reaction color={colors.iconPrimaryDefault} />
+            <Reaction color={colors.iconPrimary} />
           </IconWrapper>
         </CallControlsButton>
       </Restricted>

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';
 
@@ -79,13 +79,15 @@ export const RejectCallButton = ({
   return (
     <CallControlsButton
       onPress={rejectCallHandler}
-      color={colors.iconAlertWarning}
-      size={size ?? buttonSizes.lg}
+      color={colors.buttonWarning}
+      size={size ?? buttonSizes.md}
       // TODO: check what to do about this random style prop
       // svgContainerStyle={theme.icon.lg}
       style={rejectCallButton}
     >
-      <PhoneDown color={colors.iconPrimaryDefault} size={iconSizes.md} />
+      <IconWrapper>
+        <PhoneDown color={colors.iconPrimary} size={iconSizes.lg} />
+      </IconWrapper>
     </CallControlsButton>
   );
 };
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ScreenShareToggleButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ScreenShareToggleButton.tsx
@@ -50,9 +50,7 @@ export const ScreenShareToggleButton = ({
     <CallControlsButton
       onPress={onPress}
       color={
-        hasPublishedScreenShare
-          ? colors.iconAlertWarning
-          : colors.buttonSecondaryDefault
+        hasPublishedScreenShare ? colors.buttonWarning : colors.buttonSecondary
       }
       style={{
         container: screenShareToggleButton.container,
@@ -63,12 +61,12 @@ export const ScreenShareToggleButton = ({
         {hasPublishedScreenShare ? (
           <StopScreenShare
             size={variants.iconSizes.md}
-            color={colors.iconPrimaryDefault}
+            color={colors.iconPrimary}
           />
         ) : (
           <ScreenShare
             size={variants.iconSizes.md}
-            color={colors.iconPrimaryDefault}
+            color={colors.iconPrimary}
           />
         )}
       </IconWrapper>

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPreviewButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPreviewButton.tsx
@@ -43,22 +43,18 @@ export const ToggleAudioPreviewButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={
-        !optimisticIsMute
-          ? colors.buttonSecondaryDefault
-          : colors.buttonSecondaryWarningDefault
-      }
+      color={!optimisticIsMute ? colors.buttonSecondary : colors.buttonWarning}
       size={buttonSizes.md}
       style={{
-        container: { ...toggleAudioPreviewButton.container },
+        container: toggleAudioPreviewButton.container,
         svgContainer: toggleAudioPreviewButton.svgContainer,
       }}
     >
       <IconWrapper>
         {!optimisticIsMute ? (
-          <Mic color={colors.iconPrimaryDefault} size={defaults.iconSize} />
+          <Mic color={colors.iconPrimary} size={defaults.iconSize} />
         ) : (
-          <MicOff color={colors.iconPrimaryDefault} size={defaults.iconSize} />
+          <MicOff color={colors.iconPrimary} size={defaults.iconSize} />
         )}
       </IconWrapper>
     </CallControlsButton>

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPublishingButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPublishingButton.tsx
@@ -42,20 +42,15 @@ export const ToggleAudioPublishingButton = ({
       <CallControlsButton
         onPress={onPress}
         color={
-          !optimisticIsMute
-            ? colors.buttonSecondaryDefault
-            : colors.iconAlertWarning
+          !optimisticIsMute ? colors.buttonSecondary : colors.buttonWarning
         }
         style={toggleAudioPublishingButton}
       >
         <IconWrapper>
           {!optimisticIsMute ? (
-            <Mic color={colors.iconPrimaryDefault} size={defaults.iconSize} />
+            <Mic color={colors.iconPrimary} size={defaults.iconSize} />
           ) : (
-            <MicOff
-              color={colors.iconPrimaryDefault}
-              size={defaults.iconSize}
-            />
+            <MicOff color={colors.iconPrimary} size={defaults.iconSize} />
           )}
         </IconWrapper>
       </CallControlsButton>

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx
@@ -53,10 +53,9 @@ export const ToggleCameraFaceButton = ({
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
-        size={variants.roundButtonSizes.md}
         onPress={onPress}
-        color={backgroundColor || colors.buttonSecondaryDefault}
-        disabledColor={colors.sheetPrimary}
+        color={backgroundColor || colors.buttonSecondary}
+        disabledColor={backgroundColor || colors.sheetSecondary}
         disabled={optimisticIsMute}
         style={toggleCameraFaceButton}
       >
@@ -65,10 +64,10 @@ export const ToggleCameraFaceButton = ({
             size={variants.iconSizes.md}
             color={
               optimisticIsMute
-                ? colors.buttonPrimaryDisabled
+                ? colors.buttonDisabled
                 : direction === 'front' || direction === undefined
-                  ? colors.iconPrimaryDefault
-                  : colors.buttonPrimaryDefault
+                  ? colors.iconPrimary
+                  : colors.buttonPrimary
             }
           />
         </IconWrapper>

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPreviewButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPreviewButton.tsx
@@ -47,22 +47,18 @@ export const ToggleVideoPreviewButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={
-        !optimisticIsMute
-          ? colors.buttonSecondaryDefault
-          : colors.iconAlertWarning
-      }
+      color={!optimisticIsMute ? colors.buttonSecondary : colors.buttonWarning}
       size={buttonSizes.md}
       style={{
-        container: { ...toggleVideoPreviewButton.container },
+        container: toggleVideoPreviewButton.container,
         svgContainer: toggleVideoPreviewButton.svgContainer,
       }}
     >
       <IconWrapper>
         {!optimisticIsMute ? (
-          <Video color={colors.iconPrimaryDefault} size={iconSizes.lg} />
+          <Video color={colors.iconPrimary} size={iconSizes.lg} />
         ) : (
-          <VideoSlash color={colors.iconPrimaryDefault} size={iconSizes.lg} />
+          <VideoSlash color={colors.iconPrimary} size={iconSizes.lg} />
         )}
       </IconWrapper>
     </CallControlsButton>

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx
@@ -46,20 +46,15 @@ export const ToggleVideoPublishingButton = ({
       <CallControlsButton
         onPress={onPress}
         color={
-          !optimisticIsMute
-            ? colors.buttonSecondaryDefault
-            : colors.iconAlertWarning
+          !optimisticIsMute ? colors.buttonSecondary : colors.buttonWarning
         }
       >
         <IconWrapper>
           {!optimisticIsMute ? (
-            <Video
-              color={colors.iconPrimaryDefault}
-              size={variants.iconSizes.md}
-            />
+            <Video color={colors.iconPrimary} size={variants.iconSizes.md} />
           ) : (
             <VideoSlash
-              color={colors.iconPrimaryDefault}
+              color={colors.iconPrimary}
               size={variants.iconSizes.md}
             />
           )}

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/internal/ReactionsPicker.tsx b/packages/react-native-sdk/src/components/Call/CallControls/internal/ReactionsPicker.tsx
@@ -30,14 +30,12 @@ export const ReactionsPicker = ({
   const call = useCall();
   const size = reactionsButtonLayoutRectangle?.width ?? 0;
   const reactionItemSize = size * 0.8;
-  const TOP_PADDING = variants.spacingSizes.xs;
-  const REACTION_MARGIN_BOTTOM = variants.spacingSizes.xs;
 
   const popupHeight =
     // the top padding
-    TOP_PADDING +
+    variants.spacingSizes.xs +
     // take margins into account
-    REACTION_MARGIN_BOTTOM * supportedReactions.length +
+    variants.spacingSizes.xs * supportedReactions.length +
     // the size of the reaction icon items (same size as reactions button * amount of reactions)
     reactionItemSize * supportedReactions.length;
 
@@ -119,9 +117,7 @@ export const ReactionsPicker = ({
             style={[
               styles.reactionItem,
               reactionItemStyle,
-              {
-                backgroundColor: colors.buttonSecondaryDefault,
-              },
+              { backgroundColor: colors.buttonSecondary },
               reactionsPicker.reactionItem,
             ]}
             onPress={() => {

diff --git a/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx b/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx
@@ -46,15 +46,15 @@ export const JoinCallButton = ({
     <Pressable
       style={[
         styles.container,
-        { backgroundColor: colors.buttonPrimaryDefault },
+        { backgroundColor: colors.buttonPrimary },
         joinCallButton.container,
       ]}
       onPress={onPress}
     >
       <Text
         style={[
           styles.label,
-          { color: colors.typePrimary },
+          { color: colors.textPrimary },
           typefaces.subtitleBold,
           joinCallButton.label,
         ]}