fix scaling

Attempt 2 at trying to make a uniform scale across apple and android tv

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

components/Button.tsx

@@ -144,11 +144,11 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
           className={`rounded-2xl items-center justify-center 
             ${colorClasses}
             ${className}`}
-          style={{ paddingVertical: size(20) }}
+          style={{ paddingVertical: size(50) }}
         >
           <Text
             className={`${textColorClass} font-bold`}
-            style={{ fontSize: fontSize(20) }}
+            style={{ fontSize: fontSize(10) }}
           >
             {children}
           </Text>

components/login/TVLogin.tsx

@@ -601,10 +601,10 @@ export const TVLogin: React.FC = () => {
               }}
             >
               {/* Logo */}
-              <View style={{ alignItems: "center", marginBottom: size(16) }}>
+              <View style={{ alignItems: "center", marginBottom: size(5) }}>
                 <Image
                   source={require("@/assets/images/icon-tvos.png")}
-                  style={{ width: size(300), height: size(300) }}
+                  style={{ width: size(400), height: size(400) }}
                   contentFit='contain'
                 />
               </View>
@@ -623,7 +623,7 @@ export const TVLogin: React.FC = () => {
               </Text>
               <Text
                 style={{
-                  fontSize: fontSize(20),
+                  fontSize: fontSize(10),
                   color: "#9CA3AF",
                   textAlign: "center",
                   marginBottom: size(40),
@@ -634,7 +634,7 @@ export const TVLogin: React.FC = () => {
 
               {/* Server URL Input - extra padding for focus scale */}
               <View
-                style={{ marginBottom: size(24), paddingHorizontal: size(8) }}
+                style={{ marginBottom: size(50), paddingHorizontal: size(300) }}
               >
                 <TVInput
                   placeholder={t("server.server_url_placeholder")}
@@ -650,7 +650,9 @@ export const TVLogin: React.FC = () => {
               </View>
 
               {/* Connect Button */}
-              <View style={{ marginBottom: size(12) }}>
+              <View
+                style={{ marginBottom: size(12), paddingHorizontal: size(270) }}
+              >
                 <Button
                   onPress={() => handleConnect(serverURL)}
                   loading={loadingServerCheck}
@@ -661,7 +663,7 @@ export const TVLogin: React.FC = () => {
               </View>
 
               {/* Previous Servers */}
-              <View style={{ paddingHorizontal: size(8) }}>
+              <View style={{ paddingHorizontal: size(300) }}>
                 <TVPreviousServersList
                   onServerSelect={(s) => handleConnect(s.address)}
                   onQuickLogin={handleQuickLoginWithSavedCredential}

components/login/TVPreviousServersList.tsx

@@ -13,6 +13,7 @@ import {
   View,
 } from "react-native";
 import { useMMKVString } from "react-native-mmkv";
+import { fontSize, height, size, width } from "react-native-responsive-sizes";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import {
@@ -61,8 +62,8 @@ const TVServerActionCard: React.FC<{
       <Animated.View
         style={{
           transform: [{ scale }],
-          width: 180,
+          width: width(25),
-          height: 90,
+          height: height(15),
           backgroundColor: focused
             ? isDestructive
               ? "#ef4444"
@@ -70,16 +71,16 @@ const TVServerActionCard: React.FC<{
             : isDestructive
               ? "rgba(239, 68, 68, 0.2)"
               : "rgba(255,255,255,0.08)",
-          borderRadius: 14,
+          borderRadius: size(20),
           justifyContent: "center",
           alignItems: "center",
-          paddingHorizontal: 12,
+          paddingHorizontal: size(12),
-          gap: 8,
+          gap: size(8),
         }}
       >
         <Ionicons
           name={icon}
-          size={28}
+          size={size(56)}
           color={
             focused
               ? isDestructive
@@ -92,7 +93,7 @@ const TVServerActionCard: React.FC<{
         />
         <Text
           style={{
-            fontSize: 16,
+            fontSize: fontSize(12),
             color: focused
               ? isDestructive
                 ? "#fff"
@@ -142,26 +143,26 @@ const TVServerActionSheet: React.FC<{
           intensity={80}
           tint='dark'
           style={{
-            borderTopLeftRadius: 24,
+            borderTopLeftRadius: size(24),
-            borderTopRightRadius: 24,
+            borderTopRightRadius: size(24),
             overflow: "hidden",
           }}
         >
           <View
             style={{
-              paddingTop: 24,
+              paddingTop: size(24),
-              paddingBottom: 50,
+              paddingBottom: size(50),
               overflow: "visible",
             }}
           >
             {/* Title */}
             <Text
               style={{
-                fontSize: 18,
+                fontSize: fontSize(12),
                 fontWeight: "500",
                 color: "rgba(255,255,255,0.6)",
-                marginBottom: 8,
+                marginBottom: size(12),
-                paddingHorizontal: 48,
+                paddingHorizontal: size(48),
                 textTransform: "uppercase",
                 letterSpacing: 1,
               }}
@@ -175,9 +176,9 @@ const TVServerActionSheet: React.FC<{
               showsHorizontalScrollIndicator={false}
               style={{ overflow: "visible" }}
               contentContainerStyle={{
-                paddingHorizontal: 48,
+                paddingHorizontal: size(48),
-                paddingVertical: 10,
+                paddingVertical: size(10),
-                gap: 12,
+                gap: size(12),
               }}
             >
               <TVServerActionCard
@@ -398,19 +399,19 @@ export const TVPreviousServersList: React.FC<TVPreviousServersListProps> = ({
   if (!previousServers.length) return null;
 
   return (
-    <View style={{ marginTop: 32 }}>
+    <View style={{ marginTop: size(100) }}>
       <Text
         style={{
-          fontSize: 24,
+          fontSize: fontSize(12),
           fontWeight: "600",
           color: "#FFFFFF",
-          marginBottom: 16,
+          marginBottom: size(20),
         }}
       >
         {t("server.previous_servers")}
       </Text>
 
-      <View style={{ gap: 12 }}>
+      <View style={{ gap: size(12) }}>
         {previousServers.map((server) => (
           <TVServerCard
             key={server.address}
@@ -437,39 +438,39 @@ export const TVPreviousServersList: React.FC<TVPreviousServersListProps> = ({
             backgroundColor: "rgba(0, 0, 0, 0.9)",
             justifyContent: "center",
             alignItems: "center",
-            padding: 80,
+            padding: size(80),
           }}
         >
           <View
             style={{
               backgroundColor: "#1a1a1a",
-              borderRadius: 24,
+              borderRadius: size(24),
-              padding: 40,
+              padding: size(40),
               width: "100%",
-              maxWidth: 700,
+              maxWidth: width(70),
             }}
           >
             <Text
               style={{
-                fontSize: 32,
+                fontSize: fontSize(32),
                 fontWeight: "bold",
                 color: "#FFFFFF",
-                marginBottom: 8,
+                marginBottom: size(8),
               }}
             >
               {t("server.select_account")}
             </Text>
             <Text
               style={{
-                fontSize: 18,
+                fontSize: fontSize(18),
                 color: "#9CA3AF",
-                marginBottom: 32,
+                marginBottom: size(32),
               }}
             >
               {selectedServer?.name || selectedServer?.address}
             </Text>
 
-            <View style={{ gap: 12, marginBottom: 24 }}>
+            <View style={{ gap: size(12), marginBottom: size(24) }}>
               {selectedServer?.accounts.map((account, index) => (
                 <TVAccountCard
                   key={account.userId}
@@ -484,7 +485,7 @@ export const TVPreviousServersList: React.FC<TVPreviousServersListProps> = ({
               ))}
             </View>
 
-            <View style={{ gap: 12 }}>
+            <View style={{ gap: size(12) }}>
               <Button
                 onPress={() => {
                   setShowAccountsModal(false);

components/login/TVServerCard.tsx

@@ -7,6 +7,7 @@ import {
   Pressable,
   View,
 } from "react-native";
+import { fontSize, size } from "react-native-responsive-sizes";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
 
@@ -86,11 +87,11 @@ export const TVServerCard: React.FC<TVServerCardProps> = ({
         <View
           style={{
             backgroundColor: isFocused ? "#2a2a2a" : "#1a1a1a",
-            borderWidth: 2,
+            borderWidth: size(6),
             borderColor: isFocused ? "#FFFFFF" : "transparent",
-            borderRadius: 16,
+            borderRadius: size(50),
-            paddingHorizontal: 24,
+            paddingHorizontal: size(50),
-            paddingVertical: 20,
+            paddingVertical: size(40),
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
@@ -99,7 +100,7 @@ export const TVServerCard: React.FC<TVServerCardProps> = ({
           <View style={{ flex: 1 }}>
             <Text
               style={{
-                fontSize: 22,
+                fontSize: fontSize(12),
                 fontWeight: "600",
                 color: "#FFFFFF",
               }}
@@ -110,9 +111,9 @@ export const TVServerCard: React.FC<TVServerCardProps> = ({
             {subtitle && (
               <Text
                 style={{
-                  fontSize: 16,
+                  fontSize: fontSize(10),
                   color: "#9CA3AF",
-                  marginTop: 4,
+                  marginTop: size(12),
                 }}
                 numberOfLines={1}
               >
@@ -121,27 +122,27 @@ export const TVServerCard: React.FC<TVServerCardProps> = ({
             )}
           </View>
 
-          <View style={{ marginLeft: 16 }}>
+          <View style={{ marginLeft: size(16) }}>
             {isLoading ? (
               <ActivityIndicator size='small' color={Colors.primary} />
             ) : securityIcon ? (
               <View style={{ flexDirection: "row", alignItems: "center" }}>
                 <Ionicons
                   name={securityIcon}
-                  size={20}
+                  size={size(60)}
                   color={Colors.primary}
-                  style={{ marginRight: 8 }}
+                  style={{ marginRight: size(16) }}
                 />
                 <Ionicons
                   name='chevron-forward'
-                  size={24}
+                  size={size(48)}
                   color={isFocused ? "#FFFFFF" : "#6B7280"}
                 />
               </View>
             ) : (
               <Ionicons
                 name='chevron-forward'
-                size={24}
+                size={size(48)}
                 color={isFocused ? "#FFFFFF" : "#6B7280"}
               />
             )}