feat: apply font size scaling feature across all components

app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx

@@ -9,12 +9,11 @@ import sharedStyles from '../../../views/Styles';
 import Button from '../../Button';
 import { FormTextInput } from '../../TextInput/FormTextInput';
 import { useActionSheet } from '../Provider';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	subtitleText: {
-		...sharedStyles.textRegular,
-		fontSize: 16,
-		lineHeight: 24
+		...sharedStyles.textRegular
 	},
 	buttonSeparator: {
 		marginRight: 12
@@ -24,9 +23,7 @@ const styles = StyleSheet.create({
 		paddingTop: 16
 	},
 	titleContainerText: {
-		...sharedStyles.textBold,
-		fontSize: 16,
-		lineHeight: 24
+		...sharedStyles.textBold
 	},
 	titleContainer: {
 		paddingRight: 80,
@@ -106,6 +103,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 	autoComplete?: TextInputProps['autoComplete'];
 }): React.ReactElement => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const [inputValues, setInputValues] = useState(inputs.map(() => ''));
 	const inputRefs = useRef(inputs.map(() => React.createRef()));
 
@@ -170,9 +168,9 @@ const ActionSheetContentWithInputAndSubmit = ({
 			<>
 				<View accessible accessibilityLabel={title} style={styles.titleContainer}>
 					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 12 : 0 }]}>{title}</Text>
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 12 : 0, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{title}</Text>
 				</View>
-				{description ? <Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text> : null}
+				{description ? <Text style={[styles.subtitleText, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{description}</Text> : null}
 				{customText}
 			</>
 			{showInput ? renderInputs() : null}

app/containers/ActionSheet/BottomSheetContent.tsx

@@ -10,6 +10,7 @@ import { type TActionSheetOptionsItem } from './Provider';
 import styles from './styles';
 import * as List from '../List';
 import Touch from '../Touch';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IBottomSheetContentProps {
 	hasCancel?: boolean;
@@ -25,6 +26,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 	const { colors } = useTheme();
 	const { bottom } = useSafeAreaInsets();
 	const { fontScale } = useWindowDimensions();
+	const { scaleFontSize } = useResponsiveLayout();
 	const height = 48 * fontScale;
 
 	const renderFooter = () =>
@@ -33,7 +35,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 				onPress={hide}
 				style={[styles.button, { backgroundColor: colors.surfaceHover, height }]}
 				accessibilityLabel={I18n.t('Cancel')}>
-				<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
+				<Text style={[styles.text, { color: colors.fontDefault, fontSize: scaleFontSize(16) }]}>{I18n.t('Cancel')}</Text>
 			</Touch>
 		) : null;
 

app/containers/ActionSheet/Item.tsx

@@ -9,6 +9,7 @@ import { type TActionSheetOptionsItem } from './Provider';
 import styles from './styles';
 import { LISTENER } from '../Toast';
 import Touch from '../Touch';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export interface IActionSheetItem {
 	item: TActionSheetOptionsItem;
@@ -21,6 +22,7 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 	const enabled = item?.enabled ?? true;
 	const { colors } = useTheme();
 	const { fontScale } = useWindowDimensions();
+	const { scaleFontSize } = useResponsiveLayout();
 	const onPress = () => {
 		if (enabled) {
 			hide();
@@ -51,13 +53,13 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 				testID={item.testID}>
 				{item.icon ? <CustomIcon name={item.icon} size={24} color={color} /> : null}
 				<View style={styles.titleContainer}>
-					<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
+					<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]}>
 						{item.title}
 					</Text>
 					{item?.subtitle ? (
 						<Text
 							numberOfLines={1}
-							style={[styles.subtitle, { color: colors.fontSecondaryInfo, marginLeft: item.icon ? 16 : 0 }]}>
+							style={[styles.subtitle, { color: colors.fontSecondaryInfo, marginLeft: item.icon ? 16 : 0, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(20) }]}>
 							{item.subtitle}
 						</Text>
 					) : null}

app/containers/ActionSheet/styles.ts

@@ -20,13 +20,9 @@ export default StyleSheet.create({
 		flex: 1
 	},
 	title: {
-		fontSize: 16,
-		lineHeight: 22,
 		...sharedStyles.textMedium
 	},
 	subtitle: {
-		fontSize: 14,
-		lineHeight: 20,
 		...sharedStyles.textRegular
 	},
 	handle: {
@@ -55,7 +51,6 @@ export default StyleSheet.create({
 		marginBottom: 12
 	},
 	text: {
-		fontSize: 16,
 		...sharedStyles.textMedium,
 		...sharedStyles.textAlignCenter
 	},

app/containers/AppVersion.tsx

@@ -5,15 +5,15 @@ import sharedStyles from '../views/Styles';
 import { getReadableVersion } from '../lib/methods/helpers';
 import I18n from '../i18n';
 import { useTheme } from '../theme';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
 		alignItems: 'center',
 		justifyContent: 'flex-end'
 	},
 	text: {
-		...sharedStyles.textRegular,
-		fontSize: 13
+		...sharedStyles.textRegular
 	},
 	bold: {
 		...sharedStyles.textSemibold
@@ -22,9 +22,10 @@ const styles = StyleSheet.create({
 
 const AppVersion = React.memo(() => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>
+			<Text style={[styles.text, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(13) }]}>
 				{I18n.t('Version_no', { version: '' })}
 				<Text style={styles.bold}>{getReadableVersion}</Text>
 			</Text>

app/containers/AudioPlayer/PlaybackSpeed.tsx

@@ -7,10 +7,12 @@ import { useTheme } from '../../theme';
 import { AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS } from './constants';
 import { useUserPreferences } from '../../lib/methods/userPreferences';
 import NativeButton from '../NativeButton';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const PlaybackSpeed = () => {
 	const [playbackSpeed, setPlaybackSpeed] = useUserPreferences<number>(AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS[1]);
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const onPress = () => {
 		const speedIndex = AVAILABLE_SPEEDS.indexOf(playbackSpeed as number);
@@ -21,10 +23,10 @@ const PlaybackSpeed = () => {
 	return (
 		<NativeButton
 			accessible
-			accessibilityLabel={i18n.t('Playback_speed', { playbackSpeed: `${playbackSpeed} x` })}
+			accessibilityLabel={i18n.t('Playback_speed', { playbackSpeed: `${playbackSpeed}x` })}
 			onPress={onPress}
 			style={[styles.containerPlaybackSpeed, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
-			<Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary }]}>{playbackSpeed}x</Text>
+			<Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary, fontSize: scaleFontSize(14) }]}>{playbackSpeed}x</Text>
 		</NativeButton>
 	);
 };

app/containers/AudioPlayer/Seek.tsx

@@ -14,6 +14,7 @@ import Animated, {
 import styles from './styles';
 import { useTheme } from '../../theme';
 import { SEEK_HIT_SLOP, THUMB_SEEK_SIZE, ACTIVE_OFFSET_X, DEFAULT_TIME_LABEL } from './constants';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 Animated.addWhitelistedNativeProps({ text: true });
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
@@ -44,6 +45,7 @@ const formatTime = (ms: number) => {
 
 const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const maxWidth = useSharedValue(1);
 	const translateX = useSharedValue(0);
@@ -111,7 +113,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 				<AnimatedTextInput
 					defaultValue={DEFAULT_TIME_LABEL}
 					editable={false}
-					style={[styles.duration, { color: colors.fontDefault }]}
+					style={[styles.duration, { color: colors.fontDefault, fontSize: scaleFontSize(14) }]}
 					animatedProps={timeLabelAnimatedProps}
 				/>
 				<View style={styles.seek} onLayout={onLayout}>

app/containers/BackgroundContainer/index.tsx

@@ -4,6 +4,7 @@ import { ActivityIndicator, ImageBackground, StyleSheet, Text, View } from 'reac
 import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants/colors';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export interface IBackgroundContainer {
 	text?: string;
@@ -24,7 +25,6 @@ const styles = StyleSheet.create({
 		top: 60,
 		left: 0,
 		right: 0,
-		fontSize: 16,
 		paddingHorizontal: 24,
 		...sharedStyles.textRegular,
 		...sharedStyles.textAlignCenter
@@ -33,10 +33,11 @@ const styles = StyleSheet.create({
 
 const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.ReactElement => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
 		<View style={styles.container}>
 			<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-			{text && !loading ? <Text style={[styles.text, { color: themes[theme].fontHint }]}>{text}</Text> : null}
+			{text && !loading ? <Text style={[styles.text, { color: themes[theme].fontHint, fontSize: scaleFontSize(16) }]}>{text}</Text> : null}
 			{/* @ts-ignore */}
 			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].fontHint} /> : null}
 		</View>

app/containers/Button/index.tsx

@@ -5,6 +5,7 @@ import Touchable, { type PlatformTouchableProps } from 'react-native-platform-to
 import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 // @ts-ignore
 interface IButtonProps extends PlatformTouchableProps {
@@ -40,9 +41,7 @@ const styles = StyleSheet.create({
 		...sharedStyles.textAlignCenter
 	},
 	smallText: {
-		...sharedStyles.textBold,
-		fontSize: 12,
-		lineHeight: 18
+		...sharedStyles.textBold
 	},
 	disabled: {
 		opacity: 0.3
@@ -64,6 +63,7 @@ const Button: React.FC<IButtonProps> = ({
 	...otherProps
 }) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const isPrimary = type === 'primary';
 	const isDisabled = disabled || loading;
 
@@ -82,9 +82,13 @@ const Button: React.FC<IButtonProps> = ({
 	];
 
 	const textStyle = [
-		{ color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, fontSize },
 		small ? styles.smallText : styles.text,
-		styleText
+		styleText,
+		{ 
+			color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, 
+			fontSize: small ? scaleFontSize(12) : scaleFontSize(fontSize),
+			lineHeight: small ? scaleFontSize(18) : undefined
+		}
 	];
 
 	return (

app/containers/CallHeader.tsx

@@ -12,6 +12,7 @@ import AvatarContainer from './Avatar';
 import StatusContainer from './Status';
 import DotsLoader from './DotsLoader';
 import I18n from '../i18n';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 type TCallHeader = {
 	mic: boolean;
@@ -28,6 +29,7 @@ type TCallHeader = {
 export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name, direct }: TCallHeader): React.ReactElement => {
 	const style = useStyle();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const calling = useAppSelector(state => state.videoConf.calling);
 
 	const handleColors = (enabled: boolean) => {
@@ -44,7 +46,7 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 			<View>
 				<View style={style.actionSheetHeader}>
 					<View style={style.rowContainer}>
-						<Text style={style.actionSheetHeaderTitle}>{title}</Text>
+						<Text style={[style.actionSheetHeaderTitle, { fontSize: scaleFontSize(14) }]}>{title}</Text>
 						{calling && direct ? <DotsLoader /> : null}
 					</View>
 					<View style={style.actionSheetHeaderButtons}>
@@ -73,7 +75,7 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 				<View style={style.actionSheetUsernameContainer}>
 					<AvatarContainer text={avatar} size={36} />
 					{direct ? <StatusContainer size={16} id={uid} style={style.statusContainerMargin} /> : null}
-					<Text style={{ ...style.actionSheetUsername, marginLeft: !direct ? 8 : 0 }} numberOfLines={1}>
+					<Text style={{ ...style.actionSheetUsername, marginLeft: !direct ? 8 : 0, fontSize: scaleFontSize(16) }} numberOfLines={1}>
 						{name}
 					</Text>
 				</View>
@@ -87,7 +89,6 @@ function useStyle() {
 	const style = StyleSheet.create({
 		actionSheetHeader: { flexDirection: 'row', alignItems: 'center' },
 		actionSheetHeaderTitle: {
-			fontSize: 14,
 			...sharedStyles.textBold,
 			color: colors.fontDefault
 		},
@@ -103,7 +104,6 @@ function useStyle() {
 		},
 		actionSheetUsernameContainer: { flexDirection: 'row', paddingTop: 8, alignItems: 'center' },
 		actionSheetUsername: {
-			fontSize: 16,
 			...sharedStyles.textBold,
 			color: colors.fontDefault,
 			flexShrink: 1

app/containers/ChangePasswordRequired.tsx

@@ -9,6 +9,7 @@ import { useTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import Button from './Button';
 import { CustomIcon } from './CustomIcon';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IChangePasswordRequired {
 	navigation: Omit<NavigationProp<any>, 'getState'> & {
@@ -18,6 +19,7 @@ interface IChangePasswordRequired {
 
 export const ChangePasswordRequired = ({ navigation }: IChangePasswordRequired) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const dispatch = useDispatch();
 
 	const handleChangePassword = () => {
@@ -29,8 +31,8 @@ export const ChangePasswordRequired = ({ navigation }: IChangePasswordRequired)
 			<View style={styles.iconContainer}>
 				<CustomIcon name='info' size={36} color={colors.statusFontWarning} />
 			</View>
-			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('You_need_to_change_your_password')}</Text>
-			<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('To_continue_using_RocketChat')}</Text>
+			<Text style={[styles.title, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(20), lineHeight: scaleFontSize(30) }]}>{I18n.t('You_need_to_change_your_password')}</Text>
+			<Text style={[styles.description, { color: colors.fontDefault, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{I18n.t('To_continue_using_RocketChat')}</Text>
 			<Button
 				testID='change-password-required-button'
 				title={I18n.t('Change_password')}
@@ -59,14 +61,10 @@ const styles = StyleSheet.create({
 		padding: 24
 	},
 	title: {
-		fontSize: 20,
-		lineHeight: 30,
 		marginBottom: 24,
 		...sharedStyles.textBold
 	},
 	description: {
-		fontSize: 16,
-		lineHeight: 24,
 		marginBottom: 24,
 		...sharedStyles.textRegular
 	}