feat: improve cover image visual contrast with lighter overlay

theo-mesnil · Dec 15, 2024 · f011727 · f011727
1 parent bab92b5
commit f011727
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 15 deletions.
diff --git a/src/app/person/[id]/index.tsx b/src/app/person/[id]/index.tsx
@@ -87,7 +87,6 @@ export default function Person() {
 
   return (
     <ContentLayout
-      isPersonContent
       isLoading={isLoading || isLoadingMovies || isLoadingTv}
       imageUrl={coverUrl}
       title={name}

diff --git a/src/layouts/Content/Cover/index.tsx b/src/layouts/Content/Cover/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Image, ImageBackground, StyleSheet, View } from 'react-native';
 
-
 import { Gradient } from 'components/Gradient';
 import { Loader } from 'components/Loader';
 import { Text } from 'components/Text';
@@ -14,7 +13,6 @@ export type CoverProps = {
   imageUrl?: string;
   imageWidth?: ImageSizeBackdrop;
   isLoading?: boolean;
-  isPerson?: boolean;
   logo?: {
     aspectRatio: number;
     url: string;
@@ -23,7 +21,7 @@ export type CoverProps = {
 };
 
 export const Cover = React.memo(
-  ({ imageUrl, isLoading, isPerson, logo, title }: CoverProps) => {
+  ({ imageUrl, isLoading, logo, title }: CoverProps) => {
     return (
       <View style={styles.wrapper}>
         <ImageBackground
@@ -36,7 +34,7 @@ export const Cover = React.memo(
           {isLoading && <Loader style={styles.loading} />}
         </ImageBackground>
         <Gradient
-          style={[styles.gradient, isPerson && styles.personGradient]}
+          style={styles.gradient}
           colors={['transparent', theme.colors.behind]}
         />
         <View style={styles.content}>
@@ -67,13 +65,9 @@ const styles = StyleSheet.create({
   },
   gradient: {
     position: 'absolute',
-    marginTop: 50,
-    height: COVER_HEIGHT - 50,
-    width: '100%'
-  },
-  personGradient: {
     marginTop: 150,
-    height: COVER_HEIGHT - 150
+    height: COVER_HEIGHT - 150,
+    width: '100%'
   },
   content: {
     height: '100%',

diff --git a/src/layouts/Content/index.tsx b/src/layouts/Content/index.tsx
@@ -2,7 +2,6 @@ import { useNavigation } from 'expo-router';
 import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
-
 import { Text } from 'components/Text';
 import { COVER_HEIGHT } from 'constants/cover';
 import { BasicLayout } from 'layouts/Basic';
@@ -16,7 +15,6 @@ export type ContentLayoutProps = {
   children: React.ReactNode;
   imageUrl?: string;
   isLoading?: boolean;
-  isPersonContent?: boolean;
   logo?: {
     aspectRatio: number;
     url: string;
@@ -30,7 +28,6 @@ export function ContentLayout({
   children,
   imageUrl,
   isLoading,
-  isPersonContent,
   logo,
   subtitle,
   title
@@ -61,7 +58,6 @@ export function ContentLayout({
         imageUrl={imageUrl}
         title={title}
         logo={logo}
-        isPerson={isPersonContent}
       />
       <View style={styles.infos}>
         {badges && <View style={styles.badges}>{badges}</View>}