From 25b483f4faa0ea8ec6049f0c1fb9dcd422443685 Mon Sep 17 00:00:00 2001 From: tapframe Date: Mon, 9 Jun 2025 01:15:54 +0530 Subject: [PATCH] Refactor styling across multiple components to standardize border radius to 8. This change enhances visual consistency in the UI by unifying the border radius for content items, posters, and containers in various sections including Home, Library, and Catalog screens. --- src/components/discover/ContentItem.tsx | 2 +- src/components/home/ContentItem.tsx | 8 ++++---- src/components/home/ContinueWatchingSection.tsx | 6 +++--- src/components/home/ThisWeekSection.tsx | 2 +- src/screens/CatalogScreen.tsx | 6 +++--- src/screens/HomeScreen.tsx | 8 ++++---- src/screens/LibraryScreen.tsx | 2 +- src/screens/SearchScreen.tsx | 2 +- 8 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/discover/ContentItem.tsx b/src/components/discover/ContentItem.tsx index 015db8c4a..de22a611f 100644 --- a/src/components/discover/ContentItem.tsx +++ b/src/components/discover/ContentItem.tsx @@ -51,7 +51,7 @@ const styles = StyleSheet.create({ marginHorizontal: 0, }, posterContainer: { - borderRadius: 16, + borderRadius: 8, overflow: 'hidden', backgroundColor: 'rgba(255,255,255,0.03)', elevation: 5, diff --git a/src/components/home/ContentItem.tsx b/src/components/home/ContentItem.tsx index c116271b2..ac3b0dbea 100644 --- a/src/components/home/ContentItem.tsx +++ b/src/components/home/ContentItem.tsx @@ -132,7 +132,7 @@ const styles = StyleSheet.create({ width: POSTER_WIDTH, aspectRatio: 2/3, margin: 0, - borderRadius: 16, + borderRadius: 8, overflow: 'hidden', position: 'relative', elevation: 8, @@ -146,14 +146,14 @@ const styles = StyleSheet.create({ contentItemContainer: { width: '100%', height: '100%', - borderRadius: 16, + borderRadius: 8, overflow: 'hidden', position: 'relative', }, poster: { width: '100%', height: '100%', - borderRadius: 16, + borderRadius: 8, }, loadingOverlay: { position: 'absolute', @@ -163,7 +163,7 @@ const styles = StyleSheet.create({ bottom: 0, justifyContent: 'center', alignItems: 'center', - borderRadius: 16, + borderRadius: 8, }, watchedIndicator: { position: 'absolute', diff --git a/src/components/home/ContinueWatchingSection.tsx b/src/components/home/ContinueWatchingSection.tsx index d0d156fbd..5ef50024d 100644 --- a/src/components/home/ContinueWatchingSection.tsx +++ b/src/components/home/ContinueWatchingSection.tsx @@ -320,7 +320,7 @@ const styles = StyleSheet.create({ width: POSTER_WIDTH, aspectRatio: 2/3, margin: 0, - borderRadius: 12, + borderRadius: 8, overflow: 'hidden', position: 'relative', elevation: 8, @@ -332,14 +332,14 @@ const styles = StyleSheet.create({ contentItemContainer: { width: '100%', height: '100%', - borderRadius: 12, + borderRadius: 8, overflow: 'hidden', position: 'relative', }, poster: { width: '100%', height: '100%', - borderRadius: 12, + borderRadius: 8, }, episodeInfoContainer: { position: 'absolute', diff --git a/src/components/home/ThisWeekSection.tsx b/src/components/home/ThisWeekSection.tsx index d9eb51151..1fe8cd543 100644 --- a/src/components/home/ThisWeekSection.tsx +++ b/src/components/home/ThisWeekSection.tsx @@ -329,7 +329,7 @@ const styles = StyleSheet.create({ episodeItem: { width: '100%', height: '100%', - borderRadius: 12, + borderRadius: 8, overflow: 'hidden', }, poster: { diff --git a/src/screens/CatalogScreen.tsx b/src/screens/CatalogScreen.tsx index 597ce7c58..59d5c3987 100644 --- a/src/screens/CatalogScreen.tsx +++ b/src/screens/CatalogScreen.tsx @@ -85,7 +85,7 @@ const createStyles = (colors: any) => StyleSheet.create({ item: { width: ITEM_WIDTH, marginBottom: SPACING.lg, - borderRadius: 12, + borderRadius: 8, overflow: 'hidden', backgroundColor: colors.elevation2, shadowColor: '#000', @@ -97,8 +97,8 @@ const createStyles = (colors: any) => StyleSheet.create({ poster: { width: '100%', aspectRatio: 2/3, - borderTopLeftRadius: 12, - borderTopRightRadius: 12, + borderTopLeftRadius: 8, + borderTopRightRadius: 8, backgroundColor: colors.elevation3, }, itemContent: { diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 958b7731d..f781b0ddd 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -895,7 +895,7 @@ const styles = StyleSheet.create({ width: POSTER_WIDTH, aspectRatio: 2/3, margin: 0, - borderRadius: 16, + borderRadius: 8, overflow: 'hidden', position: 'relative', elevation: 8, @@ -909,7 +909,7 @@ const styles = StyleSheet.create({ poster: { width: '100%', height: '100%', - borderRadius: 16, + borderRadius: 8, }, imdbLogo: { width: 35, @@ -948,7 +948,7 @@ const styles = StyleSheet.create({ contentItemContainer: { width: '100%', height: '100%', - borderRadius: 16, + borderRadius: 8, overflow: 'hidden', position: 'relative', }, @@ -1059,7 +1059,7 @@ const styles = StyleSheet.create({ backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center', - borderRadius: 16, + borderRadius: 8, }, featuredImage: { width: '100%', diff --git a/src/screens/LibraryScreen.tsx b/src/screens/LibraryScreen.tsx index 0cf6affee..8e7059512 100644 --- a/src/screens/LibraryScreen.tsx +++ b/src/screens/LibraryScreen.tsx @@ -390,7 +390,7 @@ const styles = StyleSheet.create({ marginBottom: 16, }, posterContainer: { - borderRadius: 16, + borderRadius: 8, overflow: 'hidden', backgroundColor: 'rgba(255,255,255,0.03)', aspectRatio: 2/3, diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx index 0e2d471dc..c36d8949c 100644 --- a/src/screens/SearchScreen.tsx +++ b/src/screens/SearchScreen.tsx @@ -710,7 +710,7 @@ const styles = StyleSheet.create({ horizontalItemPosterContainer: { width: HORIZONTAL_ITEM_WIDTH, height: HORIZONTAL_POSTER_HEIGHT, - borderRadius: 12, + borderRadius: 8, overflow: 'hidden', marginBottom: 8, borderWidth: 1,