chore: updated usage of tv scaling, alert text fix

Sweep across a few pages to ensure they use the scaling factors now
Added a plugin to fix the alert text on android tv

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

components/tv/settings/TVLogoutButton.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { scaleSize } from "@/utils/scaleSize";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVLogoutButtonProps {
@@ -41,9 +42,9 @@ export const TVLogoutButton: React.FC<TVLogoutButtonProps> = ({
         <View
           style={{
             backgroundColor: focused ? "#ef4444" : "rgba(239, 68, 68, 0.8)",
-            borderRadius: 12,
-            paddingVertical: 18,
-            paddingHorizontal: 48,
+            borderRadius: scaleSize(12),
+            paddingVertical: scaleSize(18),
+            paddingHorizontal: scaleSize(48),
             alignItems: "center",
             justifyContent: "center",
           }}

components/tv/settings/TVSettingsOptionButton.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { scaleSize } from "@/utils/scaleSize";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsOptionButtonProps {
@@ -40,10 +41,10 @@ export const TVSettingsOptionButton: React.FC<TVSettingsOptionButtonProps> = ({
             backgroundColor: focused
               ? "rgba(255, 255, 255, 0.15)"
               : "rgba(255, 255, 255, 0.05)",
-            borderRadius: 12,
-            paddingVertical: 16,
-            paddingHorizontal: 24,
-            marginBottom: 8,
+            borderRadius: scaleSize(12),
+            paddingVertical: scaleSize(16),
+            paddingHorizontal: scaleSize(24),
+            marginBottom: scaleSize(8),
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
@@ -59,12 +60,16 @@ export const TVSettingsOptionButton: React.FC<TVSettingsOptionButtonProps> = ({
             style={{
               fontSize: typography.callout,
               color: "#9CA3AF",
-              marginRight: 12,
+              marginRight: scaleSize(12),
             }}
           >
             {value}
           </Text>
-          <Ionicons name='chevron-forward' size={20} color='#6B7280' />
+          <Ionicons
+            name='chevron-forward'
+            size={scaleSize(20)}
+            color='#6B7280'
+          />
         </View>
       </Animated.View>
     </Pressable>

components/tv/settings/TVSettingsRow.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { scaleSize } from "@/utils/scaleSize";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsRowProps {
@@ -42,10 +43,10 @@ export const TVSettingsRow: React.FC<TVSettingsRowProps> = ({
             backgroundColor: focused
               ? "rgba(255, 255, 255, 0.15)"
               : "rgba(255, 255, 255, 0.05)",
-            borderRadius: 12,
-            paddingVertical: 16,
-            paddingHorizontal: 24,
-            marginBottom: 8,
+            borderRadius: scaleSize(12),
+            paddingVertical: scaleSize(16),
+            paddingHorizontal: scaleSize(24),
+            marginBottom: scaleSize(8),
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
@@ -60,13 +61,17 @@ export const TVSettingsRow: React.FC<TVSettingsRowProps> = ({
             style={{
               fontSize: typography.callout,
               color: "#9CA3AF",
-              marginRight: showChevron ? 12 : 0,
+              marginRight: showChevron ? scaleSize(12) : 0,
             }}
           >
             {value}
           </Text>
           {showChevron && (
-            <Ionicons name='chevron-forward' size={20} color='#6B7280' />
+            <Ionicons
+              name='chevron-forward'
+              size={scaleSize(20)}
+              color='#6B7280'
+            />
           )}
         </View>
       </Animated.View>

components/tv/settings/TVSettingsStepper.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { scaleSize } from "@/utils/scaleSize";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsStepperProps {
@@ -38,10 +39,10 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
           labelAnim.focused || minusAnim.focused || plusAnim.focused
             ? "rgba(255, 255, 255, 0.15)"
             : "rgba(255, 255, 255, 0.05)",
-        borderRadius: 12,
-        paddingVertical: 16,
-        paddingHorizontal: 24,
-        marginBottom: 8,
+        borderRadius: scaleSize(12),
+        paddingVertical: scaleSize(16),
+        paddingHorizontal: scaleSize(24),
+        marginBottom: scaleSize(8),
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
@@ -72,9 +73,9 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
             style={[
               minusAnim.animatedStyle,
               {
-                width: 40,
-                height: 40,
-                borderRadius: 10,
+                width: scaleSize(40),
+                height: scaleSize(40),
+                borderRadius: scaleSize(10),
                 backgroundColor: minusAnim.focused ? "#FFFFFF" : "#4B5563",
                 justifyContent: "center",
                 alignItems: "center",
@@ -83,7 +84,7 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
           >
             <Ionicons
               name='remove'
-              size={24}
+              size={scaleSize(24)}
               color={minusAnim.focused ? "#000000" : "#FFFFFF"}
             />
           </Animated.View>
@@ -92,9 +93,9 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
           style={{
             fontSize: typography.callout,
             color: "#FFFFFF",
-            minWidth: 60,
+            minWidth: scaleSize(60),
             textAlign: "center",
-            marginHorizontal: 16,
+            marginHorizontal: scaleSize(16),
           }}
         >
           {displayValue}
@@ -110,9 +111,9 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
             style={[
               plusAnim.animatedStyle,
               {
-                width: 40,
-                height: 40,
-                borderRadius: 10,
+                width: scaleSize(40),
+                height: scaleSize(40),
+                borderRadius: scaleSize(10),
                 backgroundColor: plusAnim.focused ? "#FFFFFF" : "#4B5563",
                 justifyContent: "center",
                 alignItems: "center",
@@ -121,7 +122,7 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
           >
             <Ionicons
               name='add'
-              size={24}
+              size={scaleSize(24)}
               color={plusAnim.focused ? "#000000" : "#FFFFFF"}
             />
           </Animated.View>

components/tv/settings/TVSettingsTextInput.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from "react";
 import { Animated, Pressable, TextInput } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { scaleSize } from "@/utils/scaleSize";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsTextInputProps {
@@ -48,10 +49,10 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
             backgroundColor: focused
               ? "rgba(255, 255, 255, 0.15)"
               : "rgba(255, 255, 255, 0.05)",
-            borderRadius: 12,
-            paddingVertical: 16,
-            paddingHorizontal: 24,
-            marginBottom: 8,
+            borderRadius: scaleSize(12),
+            paddingVertical: scaleSize(16),
+            paddingHorizontal: scaleSize(24),
+            marginBottom: scaleSize(8),
           },
         ]}
       >
@@ -59,7 +60,7 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
           style={{
             fontSize: typography.callout,
             color: "#9CA3AF",
-            marginBottom: 8,
+            marginBottom: scaleSize(8),
           }}
         >
           {label}
@@ -78,10 +79,10 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
             fontSize: typography.body,
             color: "#FFFFFF",
             backgroundColor: "rgba(255, 255, 255, 0.05)",
-            borderRadius: 8,
-            paddingVertical: 12,
-            paddingHorizontal: 16,
-            borderWidth: focused ? 2 : 1,
+            borderRadius: scaleSize(8),
+            paddingVertical: scaleSize(12),
+            paddingHorizontal: scaleSize(16),
+            borderWidth: focused ? scaleSize(2) : scaleSize(1),
             borderColor: focused ? "#FFFFFF" : "#4B5563",
           }}
         />

components/tv/settings/TVSettingsToggle.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { scaleSize } from "@/utils/scaleSize";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsToggleProps {
@@ -39,10 +40,10 @@ export const TVSettingsToggle: React.FC<TVSettingsToggleProps> = ({
             backgroundColor: focused
               ? "rgba(255, 255, 255, 0.15)"
               : "rgba(255, 255, 255, 0.05)",
-            borderRadius: 12,
-            paddingVertical: 16,
-            paddingHorizontal: 24,
-            marginBottom: 8,
+            borderRadius: scaleSize(12),
+            paddingVertical: scaleSize(16),
+            paddingHorizontal: scaleSize(24),
+            marginBottom: scaleSize(8),
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
@@ -54,19 +55,19 @@ export const TVSettingsToggle: React.FC<TVSettingsToggleProps> = ({
         </Text>
         <View
           style={{
-            width: 56,
-            height: 32,
-            borderRadius: 16,
+            width: scaleSize(56),
+            height: scaleSize(32),
+            borderRadius: scaleSize(16),
             backgroundColor: value ? "#FFFFFF" : "#4B5563",
             justifyContent: "center",
-            paddingHorizontal: 2,
+            paddingHorizontal: scaleSize(2),
           }}
         >
           <View
             style={{
-              width: 28,
-              height: 28,
-              borderRadius: 14,
+              width: scaleSize(28),
+              height: scaleSize(28),
+              borderRadius: scaleSize(14),
               backgroundColor: value ? "#000000" : "#FFFFFF",
               alignSelf: value ? "flex-end" : "flex-start",
             }}