Auth2fa theme update

src/components/AnimatedStep/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import useNativeDriver from '@libs/useNativeDriver';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import {AnimationDirection} from './AnimatedStepContext';
@@ -18,18 +18,15 @@ type AnimatedStepProps = ChildrenProps & {
     onAnimationEnd: () => void;
 };
 
-function getAnimationStyle(direction: AnimationDirection) {
-    let transitionValue;
+function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) {
+    const styles = useThemeStyles();
 
-    if (direction === 'in') {
-        transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    } else {
-        transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    }
-    return styles.makeSlideInTranslation('translateX', transitionValue);
-}
+    const animationStyle = useMemo(() => {
+        const transitionValue = direction === 'in' ? CONST.ANIMATED_TRANSITION_FROM_VALUE : -CONST.ANIMATED_TRANSITION_FROM_VALUE;
+
+        return styles.makeSlideInTranslation('translateX', transitionValue);
+    }, [direction, styles]);
 
-function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) {
     return (
         <Animatable.View
             onAnimationEnd={() => {
@@ -39,7 +36,7 @@ function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN,
                 onAnimationEnd();
             }}
             duration={CONST.ANIMATED_TRANSITION}
-            animation={getAnimationStyle(direction)}
+            animation={animationStyle}
             useNativeDriver={useNativeDriver}
             style={style}
         >

src/components/OfflineIndicator.js

@@ -3,8 +3,8 @@ import React from 'react';
 import {View} from 'react-native';
 import compose from '@libs/compose';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -36,20 +36,22 @@ const defaultProps = {
     style: [],
 };
 
-const setStyles = (containerStyles, isSmallScreenWidth) => {
+const getStyles = (containerStyles, isSmallScreenWidth, styles) => {
     if (containerStyles.length) {
         return containerStyles;
     }
     return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
 };
 
 function OfflineIndicator(props) {
+    const styles = useThemeStyles();
+
     if (!props.network.isOffline) {
         return null;
     }
 
     return (
-        <View style={[setStyles(props.containerStyles, props.isSmallScreenWidth), styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
+        <View style={[getStyles(props.containerStyles, props.isSmallScreenWidth, styles), styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
             <Icon
                 src={Expensicons.OfflineCloud}
                 width={variables.iconSizeSmall}

src/components/Pressable/GenericPressable/BaseGenericPressable.tsx

@@ -5,26 +5,11 @@ import useSingleExecution from '@hooks/useSingleExecution';
 import Accessibility from '@libs/Accessibility';
 import HapticFeedback from '@libs/HapticFeedback';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableProps from './types';
 
-/**
- * Returns the cursor style based on the state of Pressable
- */
-function getCursorStyle(isDisabled: boolean, isText: boolean): Pick<ViewStyle, 'cursor'> {
-    if (isDisabled) {
-        return styles.cursorDisabled;
-    }
-
-    if (isText) {
-        return styles.cursorText;
-    }
-
-    return styles.cursorPointer;
-}
-
 function GenericPressable(
     {
         children,
@@ -51,10 +36,30 @@ function GenericPressable(
     }: PressableProps,
     ref: ForwardedRef<View>,
 ) {
+    const styles = useThemeStyles();
     const {isExecuting, singleExecution} = useSingleExecution();
     const isScreenReaderActive = Accessibility.useScreenReaderStatus();
     const [hitSlop, onLayout] = Accessibility.useAutoHitSlop();
 
+    /**
+     * Returns the cursor style based on the state of Pressable
+     */
+    const cursorStyle = useMemo(
+        () =>
+            (isDisabled: boolean, isText: boolean): Pick<ViewStyle, 'cursor'> => {
+                if (isDisabled) {
+                    return styles.cursorDisabled;
+                }
+
+                if (isText) {
+                    return styles.cursorText;
+                }
+
+                return styles.cursorPointer;
+            },
+        [styles],
+    );
+
     const isDisabled = useMemo(() => {
         let shouldBeDisabledByScreenReader = false;
         if (enableInScreenReaderStates === CONST.SCREEN_READER_STATES.ACTIVE) {
@@ -132,7 +137,7 @@ function GenericPressable(
             onPressIn={!isDisabled ? onPressIn : undefined}
             onPressOut={!isDisabled ? onPressOut : undefined}
             style={(state) => [
-                getCursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text')),
+                cursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text')),
                 StyleUtils.parseStyleFromFunction(style, state),
                 isScreenReaderActive && StyleUtils.parseStyleFromFunction(screenReaderActiveStyle, state),
                 state.focused && StyleUtils.parseStyleFromFunction(focusStyle, state),

src/components/Pressable/PressableWithDelayToggle.tsx

@@ -8,8 +8,8 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableProps from './GenericPressable/types';
 import PressableWithoutFeedback from './PressableWithoutFeedback';
@@ -66,6 +66,7 @@ function PressableWithDelayToggle(
     }: PressableWithDelayToggleProps,
     ref: ForwardedRef<RNText | View>,
 ) {
+    const styles = useThemeStyles();
     const [isActive, temporarilyDisableInteractions] = useThrottledButtonState();
 
     const updatePressState = () => {