feat(design-v2): new layouts

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

@@ -197,7 +197,7 @@ export const CallContent = ({
         />
       )}
       <View style={[styles.container, callContent.container]}>
-        <View style={[styles.container, callContent.callParticipantsContainer]}>
+        <View style={[styles.content, callContent.callParticipantsContainer]}>
           {!isInPiPMode && CallTopView && (
             <CallTopView onHangupCallHandler={onHangupCallHandler} />
           )}

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

@@ -28,7 +28,7 @@ export const ToggleCameraFaceButton = ({
   const isVideoEnabledInCall = callSettings?.video.enabled;
 
   const {
-    theme: { colors, toggleCameraFaceButton, defaults },
+    theme: { colors, toggleCameraFaceButton, variants },
   } = useTheme();
   const onPress = async () => {
     if (onPressHandler) {
@@ -54,7 +54,7 @@ export const ToggleCameraFaceButton = ({
       >
         <IconWrapper>
           <CameraSwitch
-            size={defaults.iconSize}
+            size={variants.iconSizes.md}
             color={
               optimisticIsMute
                 ? colors.buttonPrimaryDisabled

packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   hasScreenShare,
   speakerLayoutSortPreset,
@@ -56,8 +56,9 @@ export const CallParticipantsSpotlight = ({
   disablePictureInPicture,
 }: CallParticipantsSpotlightProps) => {
   const {
-    theme: { colors, callParticipantsSpotlight },
+    theme: { callParticipantsSpotlight, variants },
   } = useTheme();
+  const styles = useStyles();
   const { useParticipants } = useCallStateHooks();
   const _allParticipants = useParticipants({
     sortBy: speakerLayoutSortPreset,
@@ -88,7 +89,7 @@ export const CallParticipantsSpotlight = ({
   };
 
   const spotlightContainerLandscapeStyles: ViewStyle = {
-    marginHorizontal: landscape ? 0 : 8,
+    marginHorizontal: landscape ? 0 : variants.spacingSizes.xs,
   };
 
   return (
@@ -97,9 +98,6 @@ export const CallParticipantsSpotlight = ({
       style={[
         styles.container,
         landscapeStyles,
-        {
-          backgroundColor: colors.background2,
-        },
         callParticipantsSpotlight.container,
       ]}
     >
@@ -155,20 +153,29 @@ export const CallParticipantsSpotlight = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  fullScreenSpotlightContainer: {
-    flex: 1,
-  },
-  spotlightContainer: {
-    flex: 2,
-    overflow: 'hidden',
-    borderRadius: 10,
-    marginHorizontal: 8,
-  },
-  callParticipantsListContainer: {
-    flex: 1,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          padding: theme.variants.spacingSizes.xs,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+        fullScreenSpotlightContainer: {
+          flex: 1,
+        },
+        spotlightContainer: {
+          flex: 2,
+          overflow: 'hidden',
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+          marginHorizontal: theme.variants.spacingSizes.sm,
+        },
+        callParticipantsListContainer: {
+          flex: 1,
+        },
+      }),
+    [theme]
+  );
+};

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

@@ -1,4 +1,4 @@
-import React, { ComponentType } from 'react';
+import React, { ComponentType, useMemo } from 'react';
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 import {
   useCallStateHooks,
@@ -63,6 +63,7 @@ export const Lobby = ({
   const {
     theme: { colors, lobby, typefaces },
   } = useTheme();
+  const styles = useStyles();
   const connectedUser = useConnectedUser();
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const callSettings = useCallSettings();
@@ -159,6 +160,7 @@ const ParticipantStatus = () => {
   const {
     theme: { colors, typefaces, lobby },
   } = useTheme();
+  const styles = useStyles();
   const connectedUser = useConnectedUser();
   const participantLabel = connectedUser?.name ?? connectedUser?.id;
   return (
@@ -186,51 +188,62 @@ const ParticipantStatus = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-evenly',
-  },
-  topContainer: {
-    flex: 2,
-    justifyContent: 'space-evenly',
-    paddingHorizontal: 12,
-  },
-  heading: {
-    textAlign: 'center',
-  },
-  subHeading: {
-    textAlign: 'center',
-  },
-  videoContainer: {
-    height: LOBBY_VIDEO_VIEW_HEIGHT,
-    borderRadius: 20,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    overflow: 'hidden',
-    padding: 8,
-  },
-  topView: {},
-  bottomContainer: {
-    flex: 2,
-    justifyContent: 'space-evenly',
-    paddingHorizontal: 12,
-  },
-  participantStatusContainer: {
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
-    borderRadius: 5,
-  },
-  avatarContainer: {
-    flex: 2,
-    justifyContent: 'center',
-  },
-  userNameLabel: {
-    flexShrink: 1,
-  },
-  audioMutedIconContainer: {
-    marginLeft: 8,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          justifyContent: 'space-evenly',
+          paddingRight: theme.variants.insets.right,
+          paddingLeft: theme.variants.insets.left,
+          paddingTop: theme.variants.insets.top,
+          paddingBottom: theme.variants.insets.bottom,
+        },
+        topContainer: {
+          flex: 2,
+          justifyContent: 'space-evenly',
+          paddingHorizontal: 12,
+        },
+        heading: {
+          textAlign: 'center',
+        },
+        subHeading: {
+          textAlign: 'center',
+        },
+        videoContainer: {
+          height: LOBBY_VIDEO_VIEW_HEIGHT,
+          borderRadius: 20,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          overflow: 'hidden',
+          padding: 8,
+        },
+        topView: {},
+        bottomContainer: {
+          flex: 2,
+          justifyContent: 'space-evenly',
+          paddingHorizontal: 12,
+        },
+        participantStatusContainer: {
+          alignSelf: 'flex-start',
+          flexDirection: 'row',
+          alignItems: 'center',
+          padding: 8,
+          borderRadius: 5,
+        },
+        avatarContainer: {
+          flex: 2,
+          justifyContent: 'center',
+        },
+        userNameLabel: {
+          flexShrink: 1,
+        },
+        audioMutedIconContainer: {
+          marginLeft: 8,
+        },
+      }),
+    [theme]
+  );
+};

packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx

@@ -97,15 +97,7 @@ export const ParticipantLabel = ({
       ]}
     >
       <View style={styles.wrapper}>
-        <Text
-          style={[
-            styles.userNameLabel,
-            { color: colors.iconPrimaryDefault },
-            typefaces.subtitle,
-            userNameLabel,
-          ]}
-          numberOfLines={1}
-        >
+        <Text style={[styles.userNameLabel, userNameLabel]} numberOfLines={1}>
           {participantLabel}
         </Text>
         <View style={styles.indicatorWrapper}>
@@ -152,6 +144,9 @@ const useStyles = () => {
         userNameLabel: {
           flexShrink: 1,
           marginTop: 2,
+          fontSize: 13,
+          fontWeight: '400',
+          color: theme.colors.iconPrimaryDefault,
         },
         screenShareIconContainer: {
           marginRight: theme.variants.spacingSizes.sm,

packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantView.tsx

@@ -149,7 +149,13 @@ export const ParticipantView = ({
           videoZOrder={videoZOrder}
         />
       )}
-      <View style={[styles.footerContainer, participantView.footerContainer]}>
+      <View
+        style={[
+          styles.footerContainer,
+          participantView.footerContainer,
+          !ParticipantLabel && styles.networkIndicatorOnly,
+        ]}
+      >
         {ParticipantLabel && (
           <ParticipantLabel participant={participant} trackType={trackType} />
         )}
@@ -169,10 +175,7 @@ const useStyles = () => {
         container: {
           justifyContent: 'space-between',
           overflow: 'hidden',
-          borderWidth: 2,
-          borderColor: 'transparent',
-          margin: theme.variants.spacingSizes.sm,
-          borderRadius: 16,
+          borderRadius: theme.variants.borderRadiusSizes.md,
         },
         footerContainer: {
           flexDirection: 'row',
@@ -182,6 +185,7 @@ const useStyles = () => {
         highligtedContainer: {
           borderWidth: 2,
         },
+        networkIndicatorOnly: { justifyContent: 'flex-end' },
       }),
     [theme]
   );

packages/react-native-sdk/src/icons/CameraSwitch.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 export const CameraSwitch = ({ color, size }: Props) => (
-  <Svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
+  <Svg viewBox={`0 0 24 24`} width={size} height={size}>
     <Path
       d="M20 5.5H16.83L15.59 4.15C15.22 3.74 14.68 3.5 14.12 3.5H9.88C9.32 3.5 8.78 3.74 8.4 4.15L7.17 5.5H4C2.9 5.5 2 6.4 2 7.5V19.5C2 20.6 2.9 21.5 4 21.5H20C21.1 21.5 22 20.6 22 19.5V7.5C22 6.4 21.1 5.5 20 5.5ZM13.67 18.2C13.15 18.39 12.59 18.5 12 18.5C9.24 18.5 7 16.26 7 13.5H5L7.5 11L10 13.5H8C8 15.71 9.79 17.5 12 17.5C12.46 17.5 12.91 17.42 13.32 17.27C13.51 17.2 13.71 17.24 13.85 17.38C14.11 17.64 14.01 18.07 13.67 18.2ZM16.5 16L14 13.5H16C16 11.29 14.21 9.5 12 9.5C11.54 9.5 11.09 9.58 10.68 9.73C10.49 9.8 10.29 9.76 10.15 9.62C9.89 9.36 9.99 8.93 10.33 8.8C10.85 8.61 11.41 8.5 12 8.5C14.76 8.5 17 10.74 17 13.5H19L16.5 16Z"
       fill={color}

packages/react-native-sdk/src/icons/Effects.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 export const Effects = ({ color, size }: Props) => (
-  <Svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
+  <Svg viewBox={`0 0 24 24`} width={size} height={size}>
     <Path
       d="M19.1065 8.00002L19.8965 6.25002L21.6465 5.46002C22.0365 5.28002 22.0365 4.73002 21.6465 4.55002L19.8965 3.76002L19.1065 2.00002C18.9265 1.61002 18.3765 1.61002 18.1965 2.00002L17.4065 3.75002L15.6465 4.54002C15.2565 4.72002 15.2565 5.27002 15.6465 5.45002L17.3965 6.24002L18.1865 8.00002C18.3665 8.39002 18.9265 8.39002 19.1065 8.00002ZM11.1465 9.50002L9.55652 6.00002C9.20652 5.22002 8.08652 5.22002 7.73652 6.00002L6.14652 9.50002L2.64652 11.09C1.86652 11.45 1.86652 12.56 2.64652 12.91L6.14652 14.5L7.73652 18C8.09652 18.78 9.20652 18.78 9.55652 18L11.1465 14.5L14.6465 12.91C15.4265 12.55 15.4265 11.44 14.6465 11.09L11.1465 9.50002ZM18.1865 16L17.3965 17.75L15.6465 18.54C15.2565 18.72 15.2565 19.27 15.6465 19.45L17.3965 20.24L18.1865 22C18.3665 22.39 18.9165 22.39 19.0965 22L19.8865 20.25L21.6465 19.46C22.0365 19.28 22.0365 18.73 21.6465 18.55L19.8965 17.76L19.1065 16C18.9265 15.61 18.3665 15.61 18.1865 16Z"
       fill={color}

packages/react-native-sdk/src/theme/theme.ts

@@ -17,6 +17,7 @@ export type Theme = {
     avatarSizes: DimensionType;
     fontSizes: DimensionType;
     spacingSizes: DimensionType;
+    borderRadiusSizes: DimensionType;
     insets: Insets;
   };
   typefaces: Record<FontTypes, FontStyle>;
@@ -298,6 +299,13 @@ export const defaultTheme: Theme = {
       lg: 44,
       xl: 56,
     },
+    borderRadiusSizes: {
+      xs: 4,
+      sm: 8,
+      md: 16,
+      lg: 24,
+      xl: 32,
+    },
     buttonSizes: {
       xs: 40,
       sm: 50,

sample-apps/react-native/dogfood/src/assets/Grid.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+  size: number;
+};
+
+export const Grid = ({ color, size }: Props) => (
+  <Svg viewBox={'0 0 24 24'} width={size} height={size}>
+    <Path
+      fill={color}
+      d="M5.88979 11.707C4.82673 11.707 4.29102 11.1713 4.29102 10.0664V6.32477C4.29102 5.21986 4.82673 4.69252 5.88979 4.69252H9.70675C10.7698 4.69252 11.3055 5.21986 11.3055 6.32477V10.0664C11.3055 11.1713 10.7698 11.707 9.70675 11.707H5.88979ZM14.2938 11.707C13.2224 11.707 12.6867 11.1713 12.6867 10.0664V6.32477C12.6867 5.21986 13.2224 4.69252 14.2938 4.69252H18.1024C19.1655 4.69252 19.7012 5.21986 19.7012 6.32477V10.0664C19.7012 11.1713 19.1655 11.707 18.1024 11.707H14.2938ZM5.88979 20.1027C4.82673 20.1027 4.29102 19.5753 4.29102 18.4704V14.7204C4.29102 13.6239 4.82673 13.0882 5.88979 13.0882H9.70675C10.7698 13.0882 11.3055 13.6239 11.3055 14.7204V18.4704C11.3055 19.5753 10.7698 20.1027 9.70675 20.1027H5.88979ZM14.2938 20.1027C13.2224 20.1027 12.6867 19.5753 12.6867 18.4704V14.7204C12.6867 13.6239 13.2224 13.0882 14.2938 13.0882H18.1024C19.1655 13.0882 19.7012 13.6239 19.7012 14.7204V18.4704C19.7012 19.5753 19.1655 20.1027 18.1024 20.1027H14.2938Z"
+    />
+  </Svg>
+);

sample-apps/react-native/dogfood/src/assets/Spotlight.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+  size: number;
+};
+
+export const SpotLight = ({ color, size }: Props) => (
+  <Svg viewBox={'0 0 24 24'} width={size} height={size}>
+    <Path
+      fill={color}
+      d="M5.88491 11.3003C4.82185 11.3003 4.28613 10.7646 4.28613 9.65965V5.91802C4.28613 4.81311 4.82185 4.28577 5.88491 4.28577H18.0975C19.1606 4.28577 19.6963 4.81311 19.6963 5.91802V9.65965C19.6963 10.7646 19.1606 11.3003 18.0975 11.3003H5.88491ZM5.88491 19.6959C4.82185 19.6959 4.28613 19.1686 4.28613 18.0637V14.3137C4.28613 13.2171 4.82185 12.6814 5.88491 12.6814H9.70187C10.7649 12.6814 11.3006 13.2171 11.3006 14.3137V18.0637C11.3006 19.1686 10.7649 19.6959 9.70187 19.6959H5.88491ZM14.2889 19.6959C13.2175 19.6959 12.6818 19.1686 12.6818 18.0637V14.3137C12.6818 13.2171 13.2175 12.6814 14.2889 12.6814H18.0975C19.1606 12.6814 19.6963 13.2171 19.6963 14.3137V18.0637C19.6963 19.1686 19.1606 19.6959 18.0975 19.6959H14.2889Z"
+    />
+  </Svg>
+);