upd: redesign

components/home/projectHome.tsx

@@ -78,11 +78,11 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
                               <LabelStatus
                                  size="default"
                                  category={
-                                    data[index].status === 0 ? 'primary' :
+                                    data[index].status === 0 ? 'secondary' :
                                        data[index].status === 1 ? 'warning' :
                                           data[index].status === 2 ? 'success' :
                                              data[index].status === 3 ? 'error' :
-                                                'primary'
+                                                'secondary'
                                  }
                                  text={
                                     data[index].status === 0 ? 'SEGERA' :

components/paperGridContent.tsx

@@ -1,9 +1,12 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { useTheme } from "@/providers/ThemeProvider";
-import { Pressable, View } from "react-native";
+import { ImageBackground, Pressable, View } from "react-native";
 import Text from "./Text";
 
+import bgDark from '@/assets/images/bgproject-dark.png';
+import bgLight from '@/assets/images/bgproject-light.png';
+
 type Props = {
    content: 'carousel' | 'page';
    children: React.ReactNode;
@@ -15,13 +18,27 @@ type Props = {
    height?: number
 };
 export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition, titleTail, height }: Props) {
-   const { colors } = useTheme();
+   const { colors, activeTheme } = useTheme();
+   const bgSource = activeTheme === 'light' ? bgLight : bgDark;
    return (
       <Pressable onPress={onPress}>
          <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent]}>
-            <View style={[Styles.headerPaperGrid, headerColor == 'warning' ? ColorsStatus.warning : { backgroundColor: colors.primary }]}>
-               <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
-            </View>
+            {
+               headerColor == 'warning' ? (
+                  <View style={[Styles.headerPaperGrid, ColorsStatus.warning]}>
+                     <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, Styles.cDefault, { textAlign: 'center' }]}>{title}</Text>
+                  </View>
+               ) : (
+                  <ImageBackground
+                     source={bgSource}
+                     resizeMode="cover"
+                     imageStyle={{ borderTopLeftRadius: 5, borderTopRightRadius: 5 }}
+                     style={[Styles.headerPaperGrid, { backgroundColor: colors.primary }]}
+                  >
+                     <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
+                  </ImageBackground>
+               )
+            }
             <View style={[
                contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid,
                { backgroundColor: colors.card },