fix(tv): font sizes

components/series/TVEpisodeCard.tsx

@@ -7,6 +7,7 @@ import { ProgressBar } from "@/components/common/ProgressBar";
 import { Text } from "@/components/common/Text";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
 import { WatchedIndicator } from "@/components/WatchedIndicator";
+import { TVTypography } from "@/constants/TVTypography";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { runtimeTicksToMinutes } from "@/utils/time";
 
@@ -75,11 +76,9 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
           style={{
             width: TV_EPISODE_WIDTH,
             aspectRatio: 16 / 9,
-            borderRadius: 12,
+            borderRadius: 24,
             overflow: "hidden",
             backgroundColor: "#1a1a1a",
-            borderWidth: 1,
-            borderColor: "#262626",
           }}
         >
           {thumbnailUrl ? (
@@ -109,7 +108,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
           {episodeLabel && (
             <Text
               style={{
-                fontSize: 14,
+                fontSize: TVTypography.callout,
                 color: "#9CA3AF",
                 fontWeight: "500",
               }}
@@ -119,15 +118,23 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
           )}
           {duration && (
             <>
-              <Text style={{ color: "#6B7280", fontSize: 14 }}>•</Text>
-              <Text style={{ fontSize: 14, color: "#9CA3AF" }}>{duration}</Text>
+              <Text
+                style={{ color: "#6B7280", fontSize: TVTypography.callout }}
+              >
+                •
+              </Text>
+              <Text
+                style={{ fontSize: TVTypography.callout, color: "#9CA3AF" }}
+              >
+                {duration}
+              </Text>
             </>
           )}
         </View>
         <Text
           numberOfLines={2}
           style={{
-            fontSize: 16,
+            fontSize: TVTypography.callout,
             color: "#FFFFFF",
             marginTop: 4,
             fontWeight: "500",

components/series/TVSeriesHeader.tsx

@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { BlurView } from "expo-blur";
 import { Image } from "expo-image";
 import { useAtomValue } from "jotai";
 import React, { useMemo } from "react";
@@ -7,6 +8,7 @@ import { Dimensions, View } from "react-native";
 import { Badge } from "@/components/Badge";
 import { Text } from "@/components/common/Text";
 import { GenreTags } from "@/components/GenreTags";
+import { TVTypography } from "@/constants/TVTypography";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 
@@ -56,7 +58,7 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
       ) : (
         <Text
           style={{
-            fontSize: 52,
+            fontSize: TVTypography.display,
             fontWeight: "bold",
             color: "#FFFFFF",
             marginBottom: 16,
@@ -78,7 +80,9 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
         }}
       >
         {yearString && (
-          <Text style={{ color: "#9CA3AF", fontSize: 18 }}>{yearString}</Text>
+          <Text style={{ color: "#9CA3AF", fontSize: TVTypography.body }}>
+            {yearString}
+          </Text>
         )}
         {item.OfficialRating && (
           <Badge text={item.OfficialRating} variant='gray' />
@@ -101,17 +105,34 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
 
       {/* Overview */}
       {item.Overview && (
-        <Text
+        <BlurView
+          intensity={10}
+          tint='light'
           style={{
-            fontSize: 18,
-            color: "#D1D5DB",
-            lineHeight: 28,
+            borderRadius: 8,
+            overflow: "hidden",
             maxWidth: SCREEN_WIDTH * 0.45,
+            alignSelf: "flex-start",
           }}
-          numberOfLines={4}
         >
-          {item.Overview}
-        </Text>
+          <View
+            style={{
+              padding: 16,
+              backgroundColor: "rgba(0,0,0,0.3)",
+            }}
+          >
+            <Text
+              style={{
+                fontSize: TVTypography.body,
+                color: "#E5E7EB",
+                lineHeight: 32,
+              }}
+              numberOfLines={4}
+            >
+              {item.Overview}
+            </Text>
+          </View>
+        </BlurView>
       )}
     </View>
   );

components/series/TVSeriesPage.tsx

@@ -32,6 +32,7 @@ import {
   TVEpisodeCard,
 } from "@/components/series/TVEpisodeCard";
 import { TVSeriesHeader } from "@/components/series/TVSeriesHeader";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import { useDownload } from "@/providers/DownloadProvider";
@@ -146,7 +147,7 @@ const TVSeasonButton: React.FC<{
   const animateTo = (v: number) =>
     Animated.timing(scale, {
       toValue: v,
-      duration: 120,
+      duration: 150,
       easing: Easing.out(Easing.quad),
       useNativeDriver: true,
     }).start();
@@ -156,7 +157,7 @@ const TVSeasonButton: React.FC<{
       onPress={onPress}
       onFocus={() => {
         setFocused(true);
-        animateTo(1.02);
+        animateTo(1.05);
       }}
       onBlur={() => {
         setFocused(false);
@@ -170,33 +171,34 @@ const TVSeasonButton: React.FC<{
           transform: [{ scale }],
           shadowColor: "#fff",
           shadowOffset: { width: 0, height: 0 },
-          shadowOpacity: focused ? 0.4 : 0,
-          shadowRadius: focused ? 12 : 0,
+          shadowOpacity: focused ? 0.6 : 0,
+          shadowRadius: focused ? 20 : 0,
         }}
       >
         <View
           style={{
             backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.1)",
-            borderRadius: 10,
-            paddingVertical: 14,
-            paddingHorizontal: 20,
+            borderRadius: 12,
+            paddingVertical: 18,
+            paddingHorizontal: 32,
             flexDirection: "row",
             alignItems: "center",
-            gap: 8,
+            justifyContent: "center",
+            gap: 10,
           }}
         >
           <Text
             style={{
-              fontSize: 16,
+              fontSize: TVTypography.body,
               color: focused ? "#000" : "#FFFFFF",
-              fontWeight: "500",
+              fontWeight: "bold",
             }}
           >
             {seasonName}
           </Text>
           <Ionicons
             name='chevron-down'
-            size={18}
+            size={28}
             color={focused ? "#000" : "#FFFFFF"}
           />
         </View>
@@ -572,7 +574,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
                 />
                 <Text
                   style={{
-                    fontSize: 20,
+                    fontSize: TVTypography.body,
                     fontWeight: "bold",
                     color: "#000000",
                   }}
@@ -595,7 +597,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
         <View style={{ marginTop: 40, overflow: "visible" }}>
           <Text
             style={{
-              fontSize: 22,
+              fontSize: TVTypography.body,
               fontWeight: "600",
               color: "#FFFFFF",
               marginBottom: 16,
@@ -626,7 +628,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
               <Text
                 style={{
                   color: "#737373",
-                  fontSize: 16,
+                  fontSize: TVTypography.callout,
                   marginLeft: SCALE_PADDING,
                 }}
               >