From e020c2f4d9d1db7f1ebcb844a36eefe341f97fcd Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Sat, 21 Jun 2025 16:43:11 +0530
Subject: [PATCH] Refactor ThisWeekSection and CalendarScreen for improved
 layout and styling consistency

This update enhances the ThisWeekSection component by refining the layout and ensuring consistent styling for images and text elements. Additionally, the CalendarScreen component has been modified to adjust padding for Android devices and improve the overall visual structure. These changes aim to enhance user experience and maintain design coherence across the application.
---
 src/components/home/ThisWeekSection.tsx | 28 ++++++++++++-------------
 src/screens/CalendarScreen.tsx          |  6 +++++-
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/home/ThisWeekSection.tsx b/src/components/home/ThisWeekSection.tsx
index 167a54c..719416d 100644
--- a/src/components/home/ThisWeekSection.tsx
+++ b/src/components/home/ThisWeekSection.tsx
@@ -204,15 +204,15 @@ export const ThisWeekSection = () => {
           activeOpacity={0.8}
         >
           <View style={styles.imageContainer}>
-            <Image
-              source={{ uri: imageUrl }}
-              style={styles.poster}
-              contentFit="cover"
+          <Image
+            source={{ uri: imageUrl }}
+            style={styles.poster}
+            contentFit="cover"
               transition={400}
-            />
-            
+          />
+          
                         {/* Enhanced gradient overlay */}
-            <LinearGradient
+          <LinearGradient
               colors={[
                 'transparent', 
                 'transparent',
@@ -220,7 +220,7 @@ export const ThisWeekSection = () => {
                 'rgba(0,0,0,0.8)',
                 'rgba(0,0,0,0.95)'
               ]}
-              style={styles.gradient}
+            style={styles.gradient}
               locations={[0, 0.4, 0.6, 0.8, 1]}
             >
               {/* Content area */}
@@ -232,7 +232,7 @@ export const ThisWeekSection = () => {
                 <Text style={[styles.episodeTitle, { color: 'rgba(255,255,255,0.9)' }]} numberOfLines={2}>
                   {item.title}
                 </Text>
-                
+              
                 {item.overview && (
                   <Text style={[styles.overview, { color: 'rgba(255,255,255,0.8)' }]} numberOfLines={2}>
                     {item.overview}
@@ -243,17 +243,17 @@ export const ThisWeekSection = () => {
                   <Text style={[styles.episodeInfo, { color: 'rgba(255,255,255,0.7)' }]}>
                     S{item.season}:E{item.episode} • 
                   </Text>
-                  <MaterialIcons 
+                  <MaterialIcons
                     name="event" 
                     size={14} 
-                    color={currentTheme.colors.primary} 
+                    color={currentTheme.colors.primary}
                   />
                   <Text style={[styles.releaseDate, { color: currentTheme.colors.primary }]}>
                     {formattedDate}
                   </Text>
                 </View>
-              </View>
-            </LinearGradient>
+            </View>
+          </LinearGradient>
           </View>
         </TouchableOpacity>
       </Animated.View>
@@ -264,7 +264,7 @@ export const ThisWeekSection = () => {
     <Animated.View entering={FadeIn.duration(400)} style={styles.container}>
       <View style={styles.header}>
         <View style={styles.titleContainer}>
-          <Text style={[styles.title, { color: currentTheme.colors.text }]}>This Week</Text>
+        <Text style={[styles.title, { color: currentTheme.colors.text }]}>This Week</Text>
           <View style={[styles.titleUnderline, { backgroundColor: currentTheme.colors.primary }]} />
         </View>
         <TouchableOpacity onPress={handleViewAll} style={styles.viewAllButton}>
diff --git a/src/screens/CalendarScreen.tsx b/src/screens/CalendarScreen.tsx
index dd7b0c2..cf61468 100644
--- a/src/screens/CalendarScreen.tsx
+++ b/src/screens/CalendarScreen.tsx
@@ -10,7 +10,8 @@ import {
   SafeAreaView,
   StatusBar,
   Dimensions,
-  SectionList
+  SectionList,
+  Platform
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationProp } from '@react-navigation/native';
@@ -28,6 +29,7 @@ import { tmdbService } from '../services/tmdbService';
 import { logger } from '../utils/logger';
 
 const { width } = Dimensions.get('window');
+const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
 
 interface CalendarEpisode {
   id: string;
@@ -663,6 +665,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     padding: 12,
+    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 12 : 12,
+    borderBottomWidth: 1,
   },
   backButton: {
     padding: 8,