notification store and update in local storage

src/components/common/AnimatedCard.tsx

@@ -9,13 +9,13 @@ import {
   StyleProp,
 } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
-import { Ionicons } from "@react-native-vector-icons/ionicons";
+import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
 import colors from "../colors"; // Assuming your pastel colors are defined here
 
 type CardProps = {
   title: string;
   subtitle?: string;
-  iconName?: string;
+  iconName?: IoniconsIconName;
   onPress?: () => void;
   backOne?: string;
   backTwo?: string;
@@ -89,7 +89,7 @@ const AnimatedCard: React.FC<CardProps> = ({
 
 const styles = StyleSheet.create({
   card: {
-    minWidth: 170,
+    // minWidth: 170,
     flex: 1,
     height: 170,
     marginHorizontal: 8,
@@ -101,13 +101,16 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.15,
     shadowRadius: 12,
     elevation: 5,
-    backgroundColor: colors.white,
   },
   gradient: {
     position: "relative",
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
+    // justifyContent: "center",
+    // alignItems: "center",
+    justifyContent: "space-between",
+    borderRadius: 24,
+    overflow: "hidden",
+    gap: 10,
   },
   graphicCircleLarge: {
     position: "absolute",

src/components/common/Header.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {Ionicons} from "@react-native-vector-icons/ionicons";
+import colors from "../colors";
 
 type HeaderProps = {
   title: string;
@@ -17,8 +18,8 @@ const Header: React.FC<HeaderProps> = ({
   showBack = true,
   onBackPress,
   rightAction,
-  titleColor = "",
-  arrowColor='pink'
+  titleColor = colors.primary,
+  arrowColor = colors.primary
 }) => {
   const navigation = useNavigation();
 
@@ -32,6 +33,11 @@ const Header: React.FC<HeaderProps> = ({
 
   return (
     <View style={styles.header}>
+      {showBack && (
+        <TouchableOpacity onPress={handleBack} style={{padding:6}}>
+          <Ionicons name="arrow-back" size={24} color={arrowColor} />
+        </TouchableOpacity>
+      )}
       <Text style={[styles.headerTitle, {color:titleColor}]}>{title}</Text>
       <View>{rightAction}</View>
     </View>