Merge pull request #68 from giolaq/main

Remove movie title from movie cards

Author: giolaq

packages/shared-ui/src/screens/HomeScreen.tsx

@@ -44,9 +44,6 @@ const MovieItem = React.memo(
           onError={(error) => console.log('Image load error:', item.title, error.nativeEvent.error)}
           onLoad={() => console.log('Image loaded:', item.title)}
         />
-        <View style={styles.thumbnailTextContainer}>
-          <Text style={styles.thumbnailText} numberOfLines={2}>{item.title}</Text>
-        </View>
       </View>
     );
   },
@@ -207,125 +204,125 @@ export default function HomeScreen() {
 }
 
 const gridStyles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: colors.background,
-    },
-    scrollContent: {
-      flex: 1,
-      marginBottom: scaledPixels(safeZones.actionSafe.vertical),
-    },
-    highlightsTitle: {
-      color: colors.text,
-      fontSize: scaledPixels(40),
-      fontWeight: 'bold',
-      marginBottom: scaledPixels(16),
-      marginTop: scaledPixels(20),
-      textShadowColor: 'rgba(0, 0, 0, 0.9)',
-      textShadowOffset: { width: 0, height: 2 },
-      textShadowRadius: 8,
-    },
-    headerTitle: {
-      color: colors.text,
-      fontSize: scaledPixels(56),
-      fontWeight: 'bold',
-      marginBottom: scaledPixels(16),
-      textShadowColor: 'rgba(0, 0, 0, 0.9)',
-      textShadowOffset: { width: 0, height: 2 },
-      textShadowRadius: 12,
-    },
-    headerDescription: {
-      color: colors.text,
-      fontSize: scaledPixels(28),
-      fontWeight: '500',
-      lineHeight: scaledPixels(40),
-      textShadowColor: 'rgba(0, 0, 0, 0.9)',
-      textShadowOffset: { width: 0, height: 2 },
-      textShadowRadius: 8,
-    },
-    thumbnailTextContainer: {
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      backgroundColor: colors.scrimDark,
-      paddingHorizontal: scaledPixels(16),
-      paddingVertical: scaledPixels(12),
-      borderBottomLeftRadius: scaledPixels(8),
-      borderBottomRightRadius: scaledPixels(8),
-    },
-    thumbnailText: {
-      color: colors.text,
-      fontSize: scaledPixels(24),
-      fontWeight: '600',
-      textAlign: 'center',
-      lineHeight: scaledPixels(32),
-    },
-    highlightThumbnail: {
-      width: scaledPixels(420),
-      height: scaledPixels(260),
-      marginRight: scaledPixels(20),
-      backgroundColor: colors.card,
-      borderRadius: scaledPixels(12),
-      borderWidth: scaledPixels(5),
-      borderColor: 'transparent',
-      overflow: 'hidden',
-    },
-    highlightThumbnailFocused: {
-      borderColor: colors.focusBorder,
-      borderWidth: scaledPixels(6),
-      transform: [{ scale: 1.1 }],
-      shadowColor: colors.focus,
-      shadowOffset: {
-        width: 0,
-        height: 0,
-      },
-      shadowOpacity: 0.9,
-      shadowRadius: scaledPixels(20),
-      elevation: 15,
-    },
-    highlightsContainer: {
-      paddingHorizontal: scaledPixels(safeZones.actionSafe.horizontal),
-      paddingVertical: scaledPixels(16),
-      height: scaledPixels(400),
-    },
-    thumbnailPlaceholder: {
-      backgroundColor: colors.cardElevated,
-      width: '100%',
-      height: '100%',
-      borderRadius: scaledPixels(8),
-    },
-    header: {
-      width: '100%',
-      height: scaledPixels(700),
-      position: 'relative',
-    },
-    headerImage: {
-      width: '100%',
-      height: '100%',
-      resizeMode: 'cover',
-    },
-    gradientLeft: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      bottom: 0,
-      width: '65%',
-    },
-    headerTextContainer: {
-      position: 'absolute',
-      left: scaledPixels(safeZones.titleSafe.horizontal),
-      top: scaledPixels(safeZones.titleSafe.vertical),
-      bottom: scaledPixels(safeZones.titleSafe.vertical),
-      justifyContent: 'center',
-      width: '55%',
-    },
-    highlightsList: {
-      paddingLeft: scaledPixels(20),
-    },
-    cardImage: {
-      width: '100%',
-      height: '100%',
-      borderRadius: scaledPixels(8),
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  scrollContent: {
+    flex: 1,
+    marginBottom: scaledPixels(safeZones.actionSafe.vertical),
+  },
+  highlightsTitle: {
+    color: colors.text,
+    fontSize: scaledPixels(40),
+    fontWeight: 'bold',
+    marginBottom: scaledPixels(16),
+    marginTop: scaledPixels(20),
+    textShadowColor: 'rgba(0, 0, 0, 0.9)',
+    textShadowOffset: { width: 0, height: 2 },
+    textShadowRadius: 8,
+  },
+  headerTitle: {
+    color: colors.text,
+    fontSize: scaledPixels(56),
+    fontWeight: 'bold',
+    marginBottom: scaledPixels(16),
+    textShadowColor: 'rgba(0, 0, 0, 0.9)',
+    textShadowOffset: { width: 0, height: 2 },
+    textShadowRadius: 12,
+  },
+  headerDescription: {
+    color: colors.text,
+    fontSize: scaledPixels(28),
+    fontWeight: '500',
+    lineHeight: scaledPixels(40),
+    textShadowColor: 'rgba(0, 0, 0, 0.9)',
+    textShadowOffset: { width: 0, height: 2 },
+    textShadowRadius: 8,
+  },
+  thumbnailTextContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: colors.scrimDark,
+    paddingHorizontal: scaledPixels(16),
+    paddingVertical: scaledPixels(12),
+    borderBottomLeftRadius: scaledPixels(8),
+    borderBottomRightRadius: scaledPixels(8),
+  },
+  thumbnailText: {
+    color: colors.text,
+    fontSize: scaledPixels(24),
+    fontWeight: '600',
+    textAlign: 'center',
+    lineHeight: scaledPixels(32),
+  },
+  highlightThumbnail: {
+    width: scaledPixels(420),
+    height: scaledPixels(260),
+    marginRight: scaledPixels(20),
+    backgroundColor: colors.card,
+    borderRadius: scaledPixels(12),
+    borderWidth: scaledPixels(5),
+    borderColor: 'transparent',
+    overflow: 'hidden',
+  },
+  highlightThumbnailFocused: {
+    borderColor: colors.focusBorder,
+    borderWidth: scaledPixels(6),
+    transform: [{ scale: 1.1 }],
+    shadowColor: colors.focus,
+    shadowOffset: {
+      width: 0,
+      height: 0,
     },
-  });
+    shadowOpacity: 0.9,
+    shadowRadius: scaledPixels(20),
+    elevation: 15,
+  },
+  highlightsContainer: {
+    paddingHorizontal: scaledPixels(safeZones.actionSafe.horizontal),
+    paddingVertical: scaledPixels(16),
+    height: scaledPixels(400),
+  },
+  thumbnailPlaceholder: {
+    backgroundColor: colors.cardElevated,
+    width: '100%',
+    height: '100%',
+    borderRadius: scaledPixels(8),
+  },
+  header: {
+    width: '100%',
+    height: scaledPixels(700),
+    position: 'relative',
+  },
+  headerImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  gradientLeft: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: '65%',
+  },
+  headerTextContainer: {
+    position: 'absolute',
+    left: scaledPixels(safeZones.titleSafe.horizontal),
+    top: scaledPixels(safeZones.titleSafe.vertical),
+    bottom: scaledPixels(safeZones.titleSafe.vertical),
+    justifyContent: 'center',
+    width: '55%',
+  },
+  highlightsList: {
+    paddingLeft: scaledPixels(20),
+  },
+  cardImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: scaledPixels(8),
+  },
+});