Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-01-11 20:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor ThisWeekSection and CalendarScreen for improved layout and styling consistency

Browse source 
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.
This commit is contained in:
tapframe 2025-06-21 16:43:11 +05:30
parent 3c3e07d297
commit e020c2f4d9
2 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/home/ThisWeekSection.tsx
View file

@ -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}>

6
src/screens/CalendarScreen.tsx
View file

@ -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,