fix: colors consolidation and other bugfixes

GetStream · Nov 5, 2024 · 0687506 · 0687506
1 parent 0b10d27
commit 0687506
Show file tree

Hide file tree

Showing 54 changed files with 245 additions and 356 deletions.
diff --git 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 (
     <CallControlsButton
       onPress={acceptCallHandler}
-      color={colors.info}
+      color={colors.iconAlertSuccess}
       size={buttonSizes.lg}
       style={acceptCallButton}
     >
-      <Phone color={colors.base1} />
+      <Phone color={colors.typePrimary} />
     </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
@@ -40,7 +40,7 @@ export const CallControls = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.base4 },
+        { backgroundColor: colors.sheetPrimary },
         callControls.container,
         landscapeStyles,
         style,

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,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>
   );

diff --git 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}
         >
-          <Reaction color={colors.base5} />
+          <IconWrapper>
+            <Reaction color={colors.iconPrimaryDefault} />
+          </IconWrapper>
         </CallControlsButton>
       </Restricted>
       {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
@@ -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}

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx
@@ -47,7 +47,7 @@ export const ToggleCameraFaceButton = ({
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
         onPress={onPress}
-        color={colors.sheetPrimary}
+        color={colors.buttonSecondaryDefault}
         disabledColor={colors.sheetPrimary}
         disabled={optimisticIsMute}
         style={toggleCameraFaceButton}

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPreviewButton.tsx b/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>

diff --git 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 = ({
       >
         <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>

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
@@ -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
@@ -45,17 +45,15 @@ export const JoinCallButton = ({
     <Pressable
       style={[
         styles.container,
-        { backgroundColor: colors.primary },
+        { backgroundColor: colors.buttonPrimaryDefault },
         joinCallButton.container,
       ]}
       onPress={onPress}
     >
       <Text
         style={[
           styles.label,
-          {
-            color: colors.base1,
-          },
+          { color: colors.typePrimary },
           typefaces.subtitleBold,
           joinCallButton.label,
         ]}

diff --git a/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx b/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx
@@ -90,7 +90,7 @@ export const Lobby = ({
       style={[
         styles.container,
         landscapeStyles,
-        { backgroundColor: colors.base4 },
+        { backgroundColor: colors.sheetPrimary },
         lobby.container,
       ]}
     >
@@ -99,7 +99,7 @@ export const Lobby = ({
           <Text
             style={[
               styles.heading,
-              { color: colors.base1 },
+              { color: colors.typePrimary },
               typefaces.heading4,
               lobby.heading,
             ]}
@@ -109,7 +109,7 @@ export const Lobby = ({
           <Text
             style={[
               styles.subHeading,
-              { color: colors.base3 },
+              { color: colors.typeSecondary },
               typefaces.subtitle,
             ]}
           >
@@ -121,7 +121,7 @@ export const Lobby = ({
             <View
               style={[
                 styles.videoContainer,
-                { backgroundColor: colors.disabled },
+                { backgroundColor: colors.sheetTertiary },
                 lobby.videoContainer,
               ]}
             >
@@ -167,16 +167,14 @@ const ParticipantStatus = () => {
     <View
       style={[
         styles.participantStatusContainer,
-        {
-          backgroundColor: colors.background6,
-        },
+        { backgroundColor: colors.sheetOverlay },
         lobby.participantStatusContainer,
       ]}
     >
       <Text
         style={[
           styles.userNameLabel,
-          { color: colors.base1 },
+          { color: colors.typePrimary },
           typefaces.caption,
           lobby.userNameLabel,
         ]}

diff --git a/packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx b/packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx
@@ -39,13 +39,13 @@ export const LobbyFooter = ({
     <View
       style={[
         styles.infoContainer,
-        { backgroundColor: colors.background6 },
+        { backgroundColor: colors.sheetSecondary },
         lobby.infoContainer,
       ]}
     >
       <Text
         style={[
-          { color: colors.base1 },
+          { color: colors.typePrimary },
           typefaces.subtitleBold,
           lobby.infoText,
         ]}

diff --git a/packages/react-native-sdk/src/components/Call/RingingCallContent/IncomingCall.tsx b/packages/react-native-sdk/src/components/Call/RingingCallContent/IncomingCall.tsx
@@ -71,7 +71,7 @@ export const IncomingCall = ({
           <Text
             style={[
               styles.incomingCallText,
-              { color: colors.base1 },
+              { color: colors.typePrimary },
               typefaces.heading6,
               incomingCall.incomingCallText,
             ]}
@@ -124,7 +124,7 @@ const Background: React.FunctionComponent<{
         }}
         style={[
           styles.background,
-          { backgroundColor: colors.base4 },
+          { backgroundColor: colors.sheetTertiary },
           incomingCall.background,
         ]}
       >
@@ -136,7 +136,7 @@ const Background: React.FunctionComponent<{
     <View
       style={[
         styles.background,
-        { backgroundColor: colors.base4 },
+        { backgroundColor: colors.sheetTertiary },
         incomingCall.background,
       ]}
     >

diff --git 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 = ({
             <Text
               style={[
                 styles.callingText,
-                { color: colors.base1 },
+                { color: colors.typePrimary },
                 typefaces.heading6,
                 outgoingCall.callingText,
               ]}
@@ -111,7 +111,7 @@ const Background = () => {
       <View
         style={[
           styles.background,
-          { backgroundColor: colors.base4 },
+          { backgroundColor: colors.sheetTertiary },
           outgoingCall.background,
         ]}
       />
@@ -121,7 +121,7 @@ const Background = () => {
     <View
       style={[
         styles.background,
-        { backgroundColor: colors.base4 },
+        { backgroundColor: colors.sheetTertiary },
         outgoingCall.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
@@ -18,7 +18,7 @@ export const TextBasedIndicator = (props: TextBasedIndicatorProps) => {
   } = useTheme();
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.base4 }]}>
+    <View style={[styles.container, { backgroundColor: colors.sheetTertiary }]}>
       {props.onBackPress && (
         <View style={styles.backContainer}>
           <Pressable
@@ -31,13 +31,17 @@ export const TextBasedIndicator = (props: TextBasedIndicatorProps) => {
               },
             ]}
           >
-            <Back color={colors.base1} />
+            <Back color={colors.typePrimary} />
           </Pressable>
         </View>
       )}
       <View style={styles.textContainer}>
         <Text
-          style={[styles.text, { color: colors.base1 }, typefaces.heading6]}
+          style={[
+            styles.text,
+            { color: colors.typePrimary },
+            typefaces.heading6,
+          ]}
         >
           {props.text}
         </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
@@ -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
@@ -108,9 +108,7 @@ export const HostLivestream = ({
     <View
       style={[
         styles.container,
-        {
-          backgroundColor: colors.background2,
-        },
+        { backgroundColor: colors.sheetTertiary },
         hostLivestream.container,
       ]}
     >

diff --git a/.../react-native-sdk/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx b/.../react-native-sdk/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx
@@ -45,7 +45,7 @@ export const HostLivestreamControls = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.background6 },
+        { backgroundColor: colors.sheetOverlay },
         hostLivestreamControls.container,
       ]}
       onLayout={onLayout}

diff --git a/...s/react-native-sdk/src/components/Livestream/LivestreamControls/HostStartStreamButton.tsx b/...s/react-native-sdk/src/components/Livestream/LivestreamControls/HostStartStreamButton.tsx
@@ -114,10 +114,10 @@ export const HostStartStreamButton = ({
         styles.container,
         {
           backgroundColor: isAwaitingResponse
-            ? colors.background2
+            ? colors.sheetTertiary
             : liveOrBroadcasting
-              ? colors.error
-              : colors.primary,
+              ? colors.iconAlertWarning
+              : colors.buttonPrimaryDefault,
         },
         hostStartStreamButton.container,
       ]}
@@ -144,7 +144,7 @@ export const HostStartStreamButton = ({
         style={[
           styles.text,
           typefaces.subtitleBold,
-          { color: colors.base1 },
+          { color: colors.typePrimary },
           hostStartStreamButton.text,
         ]}
       >