diff --git a/packages/react-native-sdk/src/components/Call/CallControls/AcceptCallButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/AcceptCallButton.tsx index f9bf774c49..e08b4b7a7a 100644 --- a/packages/react-native-sdk/src/components/Call/CallControls/AcceptCallButton.tsx +++ b/packages/react-native-sdk/src/components/Call/CallControls/AcceptCallButton.tsx @@ -57,11 +57,11 @@ export const AcceptCallButton = ({ return ( - + ); }; diff --git a/packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx b/packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx index 540ee1b718..6de5c02d64 100644 --- a/packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx +++ b/packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx @@ -40,7 +40,7 @@ export const CallControls = ({ - + ); diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ReactionsButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ReactionsButton.tsx index 34b8ef5b65..aa0522af8b 100644 --- a/packages/react-native-sdk/src/components/Call/CallControls/ReactionsButton.tsx +++ b/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} > - + + + {showReactionsPicker && ( diff --git a/packages/react-native-sdk/src/components/Call/CallControls/RejectCallButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/RejectCallButton.tsx index 8073c6a7f8..3ffb7f32ae 100644 --- a/packages/react-native-sdk/src/components/Call/CallControls/RejectCallButton.tsx +++ b/packages/react-native-sdk/src/components/Call/CallControls/RejectCallButton.tsx @@ -63,7 +63,7 @@ export const RejectCallButton = ({ return ( {!optimisticIsMute ? ( - diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx index ecab938bbb..12064cf49a 100644 --- a/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx +++ b/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, defaults, variants }, } = useTheme(); const onPress = async () => { if (onPressHandler) { @@ -53,11 +53,14 @@ export const ToggleVideoPublishingButton = ({ > {!optimisticIsMute ? ( - 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 index c7d1b683f9..7d3a35e8ed 100644 --- a/packages/react-native-sdk/src/components/Call/CallControls/internal/ReactionsPicker.tsx +++ b/packages/react-native-sdk/src/components/Call/CallControls/internal/ReactionsPicker.tsx @@ -104,7 +104,7 @@ export const ReactionsPicker = ({ styles.reactionsPopup, reactionsPopupStyle, { - backgroundColor: colors.base4, + backgroundColor: colors.sheetSecondary, }, reactionsPicker.reactionsPopup, ]} @@ -120,7 +120,7 @@ export const ReactionsPicker = ({ styles.reactionItem, reactionItemStyle, { - backgroundColor: colors.background3, + backgroundColor: colors.buttonSecondaryDefault, }, reactionsPicker.reactionItem, ]} @@ -158,7 +158,7 @@ export const ReactionsPicker = ({ style={[ reactionsButtonDimmerStyle, { - backgroundColor: colors.base4, + backgroundColor: colors.sheetSecondary, }, reactionsPicker.reactionsButtonDimmer, ]} diff --git a/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx b/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx index cf805c7fb1..bb1040f30e 100644 --- a/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx +++ b/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx @@ -45,7 +45,7 @@ export const JoinCallButton = ({ @@ -99,7 +99,7 @@ export const Lobby = ({ @@ -121,7 +121,7 @@ export const Lobby = ({ @@ -167,16 +167,14 @@ const ParticipantStatus = () => { @@ -136,7 +136,7 @@ const Background: React.FunctionComponent<{ diff --git a/packages/react-native-sdk/src/components/Call/RingingCallContent/OutgoingCall.tsx b/packages/react-native-sdk/src/components/Call/RingingCallContent/OutgoingCall.tsx index fe441098d4..6b5646397c 100644 --- a/packages/react-native-sdk/src/components/Call/RingingCallContent/OutgoingCall.tsx +++ b/packages/react-native-sdk/src/components/Call/RingingCallContent/OutgoingCall.tsx @@ -70,7 +70,7 @@ export const OutgoingCall = ({ { @@ -121,7 +121,7 @@ const Background = () => { diff --git a/packages/react-native-sdk/src/components/Call/RingingCallContent/TextBasedIndicator.tsx b/packages/react-native-sdk/src/components/Call/RingingCallContent/TextBasedIndicator.tsx index d4f1f4de53..d83fd1df7c 100644 --- a/packages/react-native-sdk/src/components/Call/RingingCallContent/TextBasedIndicator.tsx +++ b/packages/react-native-sdk/src/components/Call/RingingCallContent/TextBasedIndicator.tsx @@ -18,7 +18,7 @@ export const TextBasedIndicator = (props: TextBasedIndicatorProps) => { } = useTheme(); return ( - + {props.onBackPress && ( { }, ]} > - + )} {props.text} diff --git a/packages/react-native-sdk/src/components/Call/RingingCallContent/UserInfo.tsx b/packages/react-native-sdk/src/components/Call/RingingCallContent/UserInfo.tsx index 74a6c0e1ae..d3b111ca26 100644 --- a/packages/react-native-sdk/src/components/Call/RingingCallContent/UserInfo.tsx +++ b/packages/react-native-sdk/src/components/Call/RingingCallContent/UserInfo.tsx @@ -109,7 +109,7 @@ export const UserInfo = ({ style={[ styles.name, fontStyleByMembersCount, - { color: colors.base1 }, + { color: colors.typePrimary }, userInfo.name, ]} > diff --git a/packages/react-native-sdk/src/components/Livestream/HostLivestream/HostLivestream.tsx b/packages/react-native-sdk/src/components/Livestream/HostLivestream/HostLivestream.tsx index b18c4dfe9a..68d576dba9 100644 --- a/packages/react-native-sdk/src/components/Livestream/HostLivestream/HostLivestream.tsx +++ b/packages/react-native-sdk/src/components/Livestream/HostLivestream/HostLivestream.tsx @@ -108,9 +108,7 @@ export const HostLivestream = ({ diff --git a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx index d3a1c35ad8..7f4d77f243 100644 --- a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx @@ -45,7 +45,7 @@ export const HostLivestreamControls = ({ diff --git a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamAudioControlButton.tsx b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamAudioControlButton.tsx index 005d542298..b03827b1d1 100644 --- a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamAudioControlButton.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamAudioControlButton.tsx @@ -2,7 +2,7 @@ import { useCallStateHooks } from '@stream-io/video-react-bindings'; import React from 'react'; import { useTheme } from '../../../contexts'; import { Pressable, StyleSheet, View } from 'react-native'; -import { Mic, MicOff } from '../../../icons'; +import { IconWrapper, Mic, MicOff } from '../../../icons'; /** * The LivestreamAudioControlButton controls the audio stream publish/unpublish while in the livestream for the host. @@ -15,7 +15,6 @@ export const LivestreamAudioControlButton = () => { colors, variants: { iconSizes, buttonSizes }, livestreamAudioControlButton, - defaults, }, } = useTheme(); @@ -29,7 +28,7 @@ export const LivestreamAudioControlButton = () => { style={[ styles.container, { - backgroundColor: colors.background2, + backgroundColor: colors.buttonSecondaryDefault, height: buttonSizes.xs, width: buttonSizes.xs, }, @@ -46,11 +45,13 @@ export const LivestreamAudioControlButton = () => { livestreamAudioControlButton.icon, ]} > - {!optimisticIsMute ? ( - - ) : ( - - )} + + {!optimisticIsMute ? ( + + ) : ( + + )} + ); diff --git a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamVideoControlButton.tsx b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamVideoControlButton.tsx index e73f6c7a84..d34b215e10 100644 --- a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamVideoControlButton.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamVideoControlButton.tsx @@ -2,7 +2,7 @@ import { useCallStateHooks } from '@stream-io/video-react-bindings'; import React from 'react'; import { useTheme } from '../../../contexts'; import { Pressable, StyleSheet, View } from 'react-native'; -import { Video, VideoSlash } from '../../../icons'; +import { IconWrapper, Video, VideoSlash } from '../../../icons'; /** * The LivestreamVideoControlButton controls the video stream publish/unpublish while in the livestream for the host. @@ -17,7 +17,6 @@ export const LivestreamVideoControlButton = () => { colors, variants: { iconSizes, buttonSizes }, livestreamVideoControlButton, - defaults, }, } = useTheme(); @@ -35,7 +34,7 @@ export const LivestreamVideoControlButton = () => { style={[ styles.container, { - backgroundColor: colors.background2, + backgroundColor: colors.buttonSecondaryDefault, height: buttonSizes.xs, width: buttonSizes.xs, }, @@ -52,11 +51,13 @@ export const LivestreamVideoControlButton = () => { livestreamVideoControlButton.icon, ]} > - {!optimisticIsMute ? ( - ); diff --git a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLeaveStreamButton.tsx b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLeaveStreamButton.tsx index 2ded12c0a6..e32119a850 100644 --- a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLeaveStreamButton.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLeaveStreamButton.tsx @@ -59,9 +59,7 @@ export const ViewerLeaveStreamButton = ({ diff --git a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx index 268fec32d6..a212dc38b5 100644 --- a/packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx @@ -35,9 +35,7 @@ export const ViewerLivestreamControls = ({ diff --git a/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/DurationBadge.tsx b/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/DurationBadge.tsx index c5c0e8a10d..8d590836d5 100644 --- a/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/DurationBadge.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/DurationBadge.tsx @@ -120,7 +120,7 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => { @@ -137,7 +137,11 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => { {formatDuration(duration)} diff --git a/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/FollowerCount.tsx b/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/FollowerCount.tsx index 5e0435ab2c..ce0cbfdf1f 100644 --- a/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/FollowerCount.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/FollowerCount.tsx @@ -26,7 +26,7 @@ export const FollowerCount = ({}: FollowerCountProps) => { @@ -40,7 +40,11 @@ export const FollowerCount = ({}: FollowerCountProps) => { {totalParticipants} diff --git a/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/HostLivestreamTopView.tsx b/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/HostLivestreamTopView.tsx index e923ea7307..8e9b155ca7 100644 --- a/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/HostLivestreamTopView.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/HostLivestreamTopView.tsx @@ -57,7 +57,7 @@ export const HostLivestreamTopView = ({ { { - + ); @@ -171,9 +171,7 @@ export const FloatingParticipantView = ({ style={[ styles.participantViewContainer, participantViewStyle, - { - shadowColor: colors.base5, - }, + { shadowColor: colors.sheetPrimary }, floatingParticipantsView.participantViewContainer, ]} // video z order must be one above the one used in grid view @@ -193,7 +191,6 @@ export const FloatingParticipantView = ({ const styles = StyleSheet.create({ container: { - margin: 8, // Needed to make the view on top and draggable zIndex: Z_INDEX.IN_MIDDLE, flex: 1, diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx index a226b41b1b..7ac0d6d1b1 100644 --- a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx +++ b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx @@ -76,7 +76,7 @@ export const ParticipantLabel = ({ - + {isPinningEnabled && ( @@ -146,7 +146,7 @@ const useStyles = () => { marginTop: 2, fontSize: 13, fontWeight: '400', - color: theme.colors.iconPrimaryDefault, + color: theme.colors.typePrimary, }, screenShareIconContainer: { marginRight: theme.variants.spacingSizes.sm, diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx index 1876085007..78ca55cde9 100644 --- a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx +++ b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx @@ -29,18 +29,14 @@ export const ParticipantVideoFallback = ({ {!image ? ( { +const useStyles = (hasReaction: boolean) => { const { theme } = useTheme(); return useMemo( () => StyleSheet.create({ container: { - justifyContent: 'space-between', overflow: 'hidden', + justifyContent: hasReaction ? 'space-between' : 'flex-end', borderRadius: theme.variants.borderRadiusSizes.md, }, footerContainer: { diff --git a/packages/react-native-sdk/src/components/utility/Avatar.tsx b/packages/react-native-sdk/src/components/utility/Avatar.tsx index b572ac18e9..4f7757fb03 100644 --- a/packages/react-native-sdk/src/components/utility/Avatar.tsx +++ b/packages/react-native-sdk/src/components/utility/Avatar.tsx @@ -69,9 +69,7 @@ export const Avatar = (props: AvatarProps) => { height: size, width: size, }, - { - backgroundColor: colors.primary, - }, + { backgroundColor: colors.buttonPrimaryDefault }, avatar.container, styleProp?.container, ]} @@ -88,7 +86,7 @@ export const Avatar = (props: AvatarProps) => { { @@ -41,7 +41,7 @@ export const ScreenShareOverlay = ({}: ScreenShareOverlayProps) => { style={[ styles.text, typefaces.subtitleBold, - { color: colors.base1 }, + { color: colors.typePrimary }, screenshareOverlay.text, ]} > @@ -53,7 +53,7 @@ export const ScreenShareOverlay = ({}: ScreenShareOverlayProps) => { return [ styles.button, { - backgroundColor: colors.background2, + backgroundColor: colors.sheetSecondary, opacity: pressed ? 0.2 : 1, }, screenshareOverlay.button, @@ -75,7 +75,7 @@ export const ScreenShareOverlay = ({}: ScreenShareOverlayProps) => { diff --git a/packages/react-native-sdk/src/constants/index.ts b/packages/react-native-sdk/src/constants/index.ts index 67774527bb..8ab725af46 100644 --- a/packages/react-native-sdk/src/constants/index.ts +++ b/packages/react-native-sdk/src/constants/index.ts @@ -1,8 +1,8 @@ import { StreamReactionType } from '../components'; export const FLOATING_VIDEO_VIEW_STYLE = { - height: 140, - width: 80, + height: 170, + width: 100, borderRadius: 10, }; diff --git a/packages/react-native-sdk/src/icons/Mic.tsx b/packages/react-native-sdk/src/icons/Mic.tsx index e46bd03c20..684c5233cb 100644 --- a/packages/react-native-sdk/src/icons/Mic.tsx +++ b/packages/react-native-sdk/src/icons/Mic.tsx @@ -8,7 +8,7 @@ type Props = { }; export const Mic = ({ color, size }: Props) => ( - + ( - + ( - + ( - + ( diff --git a/packages/react-native-sdk/src/theme/colors.ts b/packages/react-native-sdk/src/theme/colors.ts index f2861e2e1b..9d038bc445 100644 --- a/packages/react-native-sdk/src/theme/colors.ts +++ b/packages/react-native-sdk/src/theme/colors.ts @@ -1,85 +1,25 @@ -import { palette } from './constants'; import { ColorScheme } from './types'; -const opacityToHex = (opacity: number) => { - return Math.round(opacity * 255) - .toString(16) - .padStart(2, '0'); -}; - const colors: ColorScheme = { - primary: palette.blue500, // remove and replace with primary100 - error: palette.red400, // remove and replace with warning100 - info: palette.green500, // remove and replace with success100 - disabled: palette.grey600, // remove and replace with primary180 - - // these are legacy and should be removed after Design v2 completed - base1: palette.grey50, - base2: palette.grey300, - base3: palette.grey500, - base4: palette.grey700, - base5: palette.grey950, - - // these are legacy and should be removed after Design v2 completed - background1: palette.grey950 + opacityToHex(0.05), - background2: palette.grey800, - background3: palette.grey950 + opacityToHex(0.4), - background4: palette.grey950 + opacityToHex(0.6), - background5: palette.grey900, - background6: palette.grey950 + opacityToHex(0.85), - // Colors candidates for the default theme buttonPrimaryDefault: '#005fff', + buttonPrimaryDisabled: '#1b2c43', buttonSecondaryDefault: '#19232d', + buttonSecondaryHover: '#323b44', buttonSecondaryWarningDefault: '#dc433b', + iconPrimaryDefault: '#eff0f1', + iconPrimaryAccent: '#005fff', iconAlertSuccess: '#00e2a1', + iconAlertWarning: '#dc433b', + sheetPrimary: '#000000', + sheetSecondary: '#101213', + sheetTertiary: '#19232d', sheetOverlay: '#0c0d0ea6', + typePrimary: '#eff0f1', typeSecondary: '#b0b4b7', - buttonSecondaryHover: '#323b44', - - buttonPrimaryDisabled: '#1b2c43', - buttonPrimaryHover: '#4c8fff', - buttonPrimaryPressed: '#123d82', - buttonQuaternaryActive: '#19232d', - buttonQuaternaryDefault: '#dc433b', - buttonQuaternaryDisabled: '#31292f', - buttonQuaternaryHover: '#e77b76', - buttonQuaternaryPressed: '#7d3535', - buttonSecondaryDisabled: '#1e262e29', - buttonSecondaryPressed: '#101213', - buttonSecondaryActiveDefault: '#005fff', - buttonSecondaryActiveHover: '#4c8fff', - buttonSecondaryActivePressed: '#123d82', - buttonSecondaryWarningHover: '#e77b76', - buttonSecondaryWarningPressed: '#7d3535', - buttonTertiaryActive: '#19232d', - buttonTertiaryDisabled: '#1e262e29', - buttonTertiaryHover: '#4c535b', - buttonTertiaryPressed: '#101213', - buttonTertiaryStroke: '#323b44', - containerCaution: '#353830', - containerNeutral: '#323b44', - containerPrimary: '#1b2c43', - containerSecondary: '#263942', - containerSuccess: '#1d2f34', - containerTertiary: '#2d3042', - containerWarning: '#31292f', - iconAlertCaution: '#ffd646', - iconAlertWarning: '#dc433b', - iconPrimaryAccent: '#005fff', - iconPrimaryDisabled: '#7e8389', - iconPrimaryHover: '#e3e4e5', - iconPrimaryOnAccent: '#eff0f1', - iconPrimaryPressed: '#656b72', - sheetSecondary: '#101213', - sheetTertiary: '#19232d', - typeAccent: '#00e2a1', - typeOnAccent: '#eff0f1', - typeQuaternary: '#101213', - typeTertiary: '#656b72', }; const colorPalette = { diff --git a/packages/react-native-sdk/src/theme/theme.ts b/packages/react-native-sdk/src/theme/theme.ts index 3560e77198..75fa0c6231 100644 --- a/packages/react-native-sdk/src/theme/theme.ts +++ b/packages/react-native-sdk/src/theme/theme.ts @@ -380,15 +380,15 @@ export const defaultTheme: Theme = { }, }, defaults: { - color: colors.primary, - backgroundColor: colors.background2, + color: colors.buttonPrimaryDefault, + backgroundColor: colors.sheetPrimary, margin: 10, padding: 10, fontSize: 16, fontWeight: '500', borderRadius: 32, iconSize: 28, - borderColor: colors.primary, + borderColor: colors.buttonPrimaryDefault, borderWidth: 1, }, colors: colors, diff --git a/packages/react-native-sdk/src/theme/types.ts b/packages/react-native-sdk/src/theme/types.ts index 4c9c0db527..e74dd6bdff 100644 --- a/packages/react-native-sdk/src/theme/types.ts +++ b/packages/react-native-sdk/src/theme/types.ts @@ -1,76 +1,21 @@ import { ColorValue, TextStyle } from 'react-native'; export type ColorScheme = { - primary: ColorValue; - error: ColorValue; - info: ColorValue; - disabled: ColorValue; - - // TODO: remove these legacy colors when Design v2 rewrite is completed - base1: ColorValue; - base2: ColorValue; - base4: ColorValue; - base5: ColorValue; - - // TODO: remove these legacy colors when Design v2 rewrite is completed - background1: ColorValue; - background2: ColorValue; - background3: ColorValue; - background4: ColorValue; - background5: ColorValue; - background6: ColorValue; - - // TODO: when design v2 is complete, filter out the not used colors from here (expected to have ~15 theme colors) buttonPrimaryDefault: ColorValue; buttonPrimaryDisabled: ColorValue; - buttonPrimaryHover: ColorValue; - buttonPrimaryPressed: ColorValue; - buttonQuaternaryActive: ColorValue; - buttonQuaternaryDefault: ColorValue; - buttonQuaternaryDisabled: ColorValue; - buttonQuaternaryHover: ColorValue; - buttonQuaternaryPressed: ColorValue; buttonSecondaryDefault: ColorValue; - buttonSecondaryDisabled: ColorValue; buttonSecondaryHover: ColorValue; - buttonSecondaryPressed: ColorValue; - buttonSecondaryActiveDefault: ColorValue; - buttonSecondaryActiveHover: ColorValue; - buttonSecondaryActivePressed: ColorValue; buttonSecondaryWarningDefault: ColorValue; - buttonSecondaryWarningHover: ColorValue; - buttonSecondaryWarningPressed: ColorValue; - buttonTertiaryActive: ColorValue; - buttonTertiaryDisabled: ColorValue; - buttonTertiaryHover: ColorValue; - buttonTertiaryPressed: ColorValue; - buttonTertiaryStroke: ColorValue; - containerCaution: ColorValue; - containerNeutral: ColorValue; - containerPrimary: ColorValue; - containerSecondary: ColorValue; - containerSuccess: ColorValue; - containerTertiary: ColorValue; - containerWarning: ColorValue; - iconAlertCaution: ColorValue; + iconPrimaryDefault: ColorValue; + iconPrimaryAccent: ColorValue; iconAlertSuccess: ColorValue; iconAlertWarning: ColorValue; - iconPrimaryAccent: ColorValue; - iconPrimaryDefault: ColorValue; - iconPrimaryDisabled: ColorValue; - iconPrimaryHover: ColorValue; - iconPrimaryOnAccent: ColorValue; - iconPrimaryPressed: ColorValue; - sheetOverlay: ColorValue; sheetPrimary: ColorValue; sheetSecondary: ColorValue; sheetTertiary: ColorValue; - typeAccent: ColorValue; - typeOnAccent: ColorValue; + sheetOverlay: ColorValue; typePrimary: ColorValue; - typeQuaternary: ColorValue; typeSecondary: ColorValue; - typeTertiary: ColorValue; // allow any other color [key: string]: ColorValue; diff --git a/sample-apps/react-native/dogfood/ios/StreamReactNativeVideoSDKSample.xcodeproj/project.pbxproj b/sample-apps/react-native/dogfood/ios/StreamReactNativeVideoSDKSample.xcodeproj/project.pbxproj index 8fc01b826e..d57d7c3ead 100644 --- a/sample-apps/react-native/dogfood/ios/StreamReactNativeVideoSDKSample.xcodeproj/project.pbxproj +++ b/sample-apps/react-native/dogfood/ios/StreamReactNativeVideoSDKSample.xcodeproj/project.pbxproj @@ -710,6 +710,7 @@ SWIFT_OBJC_BRIDGING_HEADER = "StreamReactNativeVideoSDKSample-Bridging-Header.h"; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; + TARGETED_DEVICE_FAMILY = "1,2"; VERSIONING_SYSTEM = "apple-generic"; }; name = Debug; @@ -815,6 +816,7 @@ PROVISIONING_PROFILE_SPECIFIER = "match AppStore io.getstream.rnvideosample"; SWIFT_OBJC_BRIDGING_HEADER = "StreamReactNativeVideoSDKSample-Bridging-Header.h"; SWIFT_VERSION = 5.0; + TARGETED_DEVICE_FAMILY = "1,2"; VERSIONING_SYSTEM = "apple-generic"; }; name = Release; diff --git a/sample-apps/react-native/dogfood/src/components/BottomControlsDrawer.tsx b/sample-apps/react-native/dogfood/src/components/BottomControlsDrawer.tsx index 07f4e5dd18..2725d6be95 100644 --- a/sample-apps/react-native/dogfood/src/components/BottomControlsDrawer.tsx +++ b/sample-apps/react-native/dogfood/src/components/BottomControlsDrawer.tsx @@ -194,6 +194,7 @@ export const BottomControlsDrawer: React.FC = ({ transparent={true} visible={isVisible} onRequestClose={onClose} + supportedOrientations={['portrait', 'landscape']} > diff --git a/sample-apps/react-native/dogfood/src/components/Button.tsx b/sample-apps/react-native/dogfood/src/components/Button.tsx index 889a1dd01a..fe6f671f73 100644 --- a/sample-apps/react-native/dogfood/src/components/Button.tsx +++ b/sample-apps/react-native/dogfood/src/components/Button.tsx @@ -58,14 +58,14 @@ const useStyles = () => { () => StyleSheet.create({ button: { - backgroundColor: appTheme.colors.primary, + backgroundColor: appTheme.colors.buttonPrimaryDefault, justifyContent: 'center', borderRadius: 8, height: BUTTON_HEIGHT, paddingHorizontal: appTheme.variants.spacingSizes.md, }, buttonText: { - color: appTheme.colors.static_white, + color: appTheme.colors.iconPrimaryDefault, fontWeight: appTheme.typefaces.heading6.fontWeight, textAlign: 'center', fontSize: 17, diff --git a/sample-apps/react-native/dogfood/src/components/CallControlls/LayoutSwitcherModal.tsx b/sample-apps/react-native/dogfood/src/components/CallControlls/LayoutSwitcherModal.tsx index cd7744e911..78e8abd797 100644 --- a/sample-apps/react-native/dogfood/src/components/CallControlls/LayoutSwitcherModal.tsx +++ b/sample-apps/react-native/dogfood/src/components/CallControlls/LayoutSwitcherModal.tsx @@ -88,7 +88,7 @@ const LayoutSwitcherModal: React.FC = ({ > Grid @@ -138,7 +138,7 @@ const useStyles = () => { paddingVertical: theme.variants.spacingSizes.sm, }, selectedButton: { - backgroundColor: theme.colors.primary, + backgroundColor: theme.colors.buttonPrimaryDefault, }, buttonText: { color: 'white', diff --git a/sample-apps/react-native/dogfood/src/components/CallControlls/MoreActionsButton.tsx b/sample-apps/react-native/dogfood/src/components/CallControlls/MoreActionsButton.tsx index 172114b3ee..608a5e2bd8 100644 --- a/sample-apps/react-native/dogfood/src/components/CallControlls/MoreActionsButton.tsx +++ b/sample-apps/react-native/dogfood/src/components/CallControlls/MoreActionsButton.tsx @@ -49,19 +49,6 @@ export const MoreActionsButton = ({ const options: DrawerOption[] = [ { id: '1', - label: 'Stats', - icon: ( - - - - ), - onPress: () => {}, - }, - { - id: '2', label: 'Feedback', icon: ( diff --git a/sample-apps/react-native/dogfood/src/components/NavigationHeader.tsx b/sample-apps/react-native/dogfood/src/components/NavigationHeader.tsx index a08d99c031..b3a8ebccdf 100755 --- a/sample-apps/react-native/dogfood/src/components/NavigationHeader.tsx +++ b/sample-apps/react-native/dogfood/src/components/NavigationHeader.tsx @@ -3,8 +3,9 @@ import { StreamVideoRN, useI18n, useStreamVideoClient, + useTheme, } from '@stream-io/video-react-native-sdk'; -import React from 'react'; +import React, { useMemo } from 'react'; import { Alert, StyleSheet, Text } from 'react-native'; import { useAppGlobalStoreSetState, @@ -21,6 +22,7 @@ import { REACT_NATIVE_DOGFOOD_APP_ENVIRONMENT } from '@env'; export const NavigationHeader = ({ route }: NativeStackHeaderProps) => { const videoClient = useStreamVideoClient(); const { t } = useI18n(); + const styles = useStyles(); const userName = useAppGlobalStoreValue((store) => store.userName); const appStoreSetState = useAppGlobalStoreSetState(); @@ -91,41 +93,48 @@ export const NavigationHeader = ({ route }: NativeStackHeaderProps) => { ); }; -const styles = StyleSheet.create({ - header: { - width: '100%', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - paddingHorizontal: appTheme.spacing.lg, - paddingVertical: appTheme.spacing.lg, - backgroundColor: appTheme.colors.static_grey, - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 0.23, - shadowRadius: 2.62, +const useStyles = () => { + const { theme } = useTheme(); + return useMemo( + () => + StyleSheet.create({ + header: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingHorizontal: appTheme.spacing.lg, + paddingVertical: appTheme.spacing.lg, + backgroundColor: theme.colors.sheetSecondary, + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.23, + shadowRadius: 2.62, - elevation: 4, - }, - headerText: { - flexShrink: 1, - fontSize: 20, - fontWeight: '500', - color: appTheme.colors.static_white, - marginRight: appTheme.spacing.lg, - }, - avatar: { - height: AVATAR_SIZE, - width: AVATAR_SIZE, - borderRadius: 50, - }, - chooseAppMode: { - fontWeight: 'bold', - }, - buttonText: { - fontSize: 12, - }, -}); + elevation: 4, + }, + headerText: { + flexShrink: 1, + fontSize: 20, + fontWeight: '500', + color: appTheme.colors.static_white, + marginRight: appTheme.spacing.lg, + }, + avatar: { + height: AVATAR_SIZE, + width: AVATAR_SIZE, + borderRadius: 50, + }, + chooseAppMode: { + fontWeight: 'bold', + }, + buttonText: { + fontSize: 12, + }, + }), + [theme], + ); +}; diff --git a/sample-apps/react-native/dogfood/src/components/ParticipantActions.tsx b/sample-apps/react-native/dogfood/src/components/ParticipantActions.tsx index 7b45e84436..0479c7d57b 100644 --- a/sample-apps/react-native/dogfood/src/components/ParticipantActions.tsx +++ b/sample-apps/react-native/dogfood/src/components/ParticipantActions.tsx @@ -7,6 +7,7 @@ import { useCall, useCallStateHooks, useI18n, + useTheme, } from '@stream-io/video-react-native-sdk'; import { Cross } from '../assets/Cross'; import { Mic } from '../assets/Mic'; @@ -19,7 +20,6 @@ import { VideoSlash } from '../assets/VideoSlash'; import { Pressable, StyleSheet, Text, View } from 'react-native'; import React, { useCallback, useMemo } from 'react'; import { generateParticipantTitle } from '../utils'; -import { useTheme } from 'stream-chat-react-native'; type CallParticipantOptionType = { title: string; @@ -103,7 +103,7 @@ export const ParticipantActions = (props: ParticipantActionsType) => { const muteUserVideoOption = participantPublishesVideo ? { - icon: , + icon: , title: 'Mute Video', onPressHandler: muteUserVideo, } @@ -111,7 +111,7 @@ export const ParticipantActions = (props: ParticipantActionsType) => { const muteUserAudioOption = participantPublishesAudio ? { - icon: , + icon: , title: 'Mute Audio', onPressHandler: muteUserAudio, } @@ -125,37 +125,37 @@ export const ParticipantActions = (props: ParticipantActionsType) => { userHasUpdateCallPermissionsCapability ? [ { - icon: , + icon: , title: 'Disable Video', onPressHandler: async () => await revokePermission(OwnCapability.SEND_VIDEO), }, { - icon: , + icon: , title: 'Disable Audio', onPressHandler: async () => await revokePermission(OwnCapability.SEND_AUDIO), }, { - icon: , + icon: , title: 'Allow Audio', onPressHandler: async () => await grantPermission(OwnCapability.SEND_AUDIO), }, { - icon: , + icon: , title: 'Allow Video', onPressHandler: async () => await grantPermission(OwnCapability.SEND_VIDEO), }, { - icon: , + icon: , title: 'Allow Screen Sharing', onPressHandler: async () => await grantPermission(OwnCapability.SCREENSHARE), }, { - icon: , + icon: , title: 'Disable Screen Sharing', onPressHandler: async () => await revokePermission(OwnCapability.SCREENSHARE), @@ -167,7 +167,7 @@ export const ParticipantActions = (props: ParticipantActionsType) => { userHasBlockUserCapability ? [ { - icon: , + icon: , title: 'Block', onPressHandler: blockUser, }, @@ -177,7 +177,7 @@ export const ParticipantActions = (props: ParticipantActionsType) => { const isLocalPinningAllowed = !participant.pin || participant.pin.isLocalPin; const pinParticipant: CallParticipantOptionType | null = isLocalPinningAllowed ? { - icon: , + icon: , title: participant.pin ? 'Unpin' : 'Pin', onPressHandler: toggleParticipantPinnedAt, } @@ -191,7 +191,6 @@ export const ParticipantActions = (props: ParticipantActionsType) => { ]; const showYouLabel = participant.isLocalParticipant; - return ( @@ -207,7 +206,7 @@ export const ParticipantActions = (props: ParticipantActionsType) => { style={styles.closePressable} onPress={onCloseParticipantOptions} > - + {options.map((option, index) => { @@ -248,7 +247,7 @@ const useStyles = () => { flex: 1, }, modalContainer: { - backgroundColor: theme.colors.background5, + backgroundColor: theme.colors.sheetPrimary, borderRadius: 15, marginHorizontal: 32, }, @@ -266,7 +265,7 @@ const useStyles = () => { marginLeft: 8, fontSize: 16, fontWeight: '500', - color: theme.colors.base1, + color: theme.colors.iconPrimaryDefault, }, option: { paddingHorizontal: 24, @@ -280,12 +279,12 @@ const useStyles = () => { }, title: { marginLeft: 16, - color: theme.colors.base1, + color: theme.colors.iconPrimaryDefault, fontSize: 16, fontWeight: '400', }, borderBottom: { - borderBottomColor: theme.colors.base4, + borderBottomColor: theme.colors.buttonSecondaryHover, borderBottomWidth: 1, }, crossIcon: { @@ -294,8 +293,8 @@ const useStyles = () => { }, closePressable: { padding: 8, - borderRadius: 5, - backgroundColor: theme.colors.base4, + borderRadius: 15, + backgroundColor: theme.colors.buttonSecondaryDefault, }, }), [theme], diff --git a/sample-apps/react-native/dogfood/src/components/ParticipantsInfoList.tsx b/sample-apps/react-native/dogfood/src/components/ParticipantsInfoList.tsx index b7a4743d76..0eca219fe2 100644 --- a/sample-apps/react-native/dogfood/src/components/ParticipantsInfoList.tsx +++ b/sample-apps/react-native/dogfood/src/components/ParticipantsInfoList.tsx @@ -58,6 +58,7 @@ export const ParticipantsInfoList = ({ setIsCallParticipantsInfoVisible, }: ParticipantsInfoListProps) => { const styles = useStyles(); + const { theme } = useTheme(); const { useParticipants } = useCallStateHooks(); const participants = useParticipants(); const { t } = useI18n(); @@ -129,14 +130,14 @@ export const ParticipantsInfoList = ({ testID={ButtonTestIds.EXIT_PARTICIPANTS_INFO} > - + {t('Invite')} @@ -219,22 +220,22 @@ const ParticipantInfoItem = (props: ParticipantInfoType) => { - + )} {isAudioMuted && ( - + )} {isVideoMuted && ( - + )} {!participantIsLocalParticipant && ( - + )} @@ -249,12 +250,11 @@ const useStyles = () => { StyleSheet.create({ backDropBackground: { ...StyleSheet.absoluteFillObject, - backgroundColor: theme.colors.background3, zIndex: Z_INDEX.IN_BACK, }, content: { zIndex: Z_INDEX.IN_FRONT, - backgroundColor: theme.colors.background5, + backgroundColor: theme.colors.sheetPrimary, borderRadius: 15, marginHorizontal: 16, }, @@ -270,13 +270,13 @@ const useStyles = () => { headerText: { fontSize: 16, fontWeight: '600', - color: theme.base1, + color: theme.colors.typePrimary, }, closePressable: { padding: 8, - borderRadius: 5, + borderRadius: 15, marginRight: 16, - backgroundColor: theme.base4, + backgroundColor: theme.colors.buttonSecondaryDefault, }, buttonGroup: { flexDirection: 'row', @@ -298,14 +298,22 @@ const useStyles = () => { }, button: { flex: 1, - backgroundColor: theme.colors.primary, + borderRadius: 24, + padding: 8, + marginHorizontal: 8, + borderColor: theme.colors.buttonSecondaryDefault, + borderWidth: 2, + }, + inviteButton: { + flex: 1, + backgroundColor: theme.colors.buttonPrimaryDefault, borderRadius: 24, padding: 8, marginHorizontal: 8, }, buttonText: { textAlign: 'center', - color: theme.colors.base1, + color: theme.colors.iconPrimaryDefault, fontSize: 16, fontWeight: '500', }, @@ -315,7 +323,7 @@ const useStyles = () => { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', - borderBottomColor: theme.colors.base4, + borderBottomColor: theme.colors.buttonSecondaryHover, borderBottomWidth: 1, }, participantInfo: { @@ -325,7 +333,7 @@ const useStyles = () => { }, name: { marginLeft: 8, - color: theme.colors.base1, + color: theme.colors.typePrimary, flexShrink: 1, fontSize: 16, fontWeight: '500', @@ -339,7 +347,6 @@ const useStyles = () => { modal: { alignItems: 'center', justifyContent: 'center', - backgroundColor: theme.colors.background3, }, }), [theme], diff --git a/sample-apps/react-native/dogfood/src/screens/Meeting/ChatScreen.tsx b/sample-apps/react-native/dogfood/src/screens/Meeting/ChatScreen.tsx index c1dad33220..310029d0c7 100644 --- a/sample-apps/react-native/dogfood/src/screens/Meeting/ChatScreen.tsx +++ b/sample-apps/react-native/dogfood/src/screens/Meeting/ChatScreen.tsx @@ -96,18 +96,18 @@ const useStyles = () => { header: { padding: 10, flexDirection: 'row', - backgroundColor: theme.colors.base5, + backgroundColor: theme.colors.sheetPrimary, }, - headerText: { flex: 1, color: theme.colors.base1 }, + headerText: { flex: 1, color: theme.colors.typePrimary }, notedButton: { - backgroundColor: theme.colors.primary, + backgroundColor: theme.colors.buttonPrimaryDefault, justifyContent: 'center', padding: 10, borderRadius: 10, marginLeft: 10, }, notedButtonText: { - color: theme.colors.base1, + color: theme.colors.typePrimary, fontWeight: '500', }, }), diff --git a/sample-apps/react-native/dogfood/src/screens/Meeting/JoinMeetingScreen.tsx b/sample-apps/react-native/dogfood/src/screens/Meeting/JoinMeetingScreen.tsx index 2587996510..8ad40777eb 100644 --- a/sample-apps/react-native/dogfood/src/screens/Meeting/JoinMeetingScreen.tsx +++ b/sample-apps/react-native/dogfood/src/screens/Meeting/JoinMeetingScreen.tsx @@ -26,6 +26,7 @@ type JoinMeetingScreenProps = NativeStackScreenProps< const JoinMeetingScreen = (props: JoinMeetingScreenProps) => { const [callId, setCallId] = useState(''); + const { theme } = useTheme(); const [linking, setLinking] = useState(false); const { t } = useI18n(); const orientation = useOrientation(); @@ -103,7 +104,12 @@ const JoinMeetingScreen = (props: JoinMeetingScreenProps) => { onPress={joinCallHandler} title={t('Join Call')} disabled={!isValidCallId} - buttonStyle={styles.joinCallButton} + buttonStyle={{ + ...styles.joinCallButton, + backgroundColor: isValidCallId + ? theme.colors.buttonPrimaryDefault + : theme.colors.buttonPrimaryDisabled, + }} />