ui fix

src/components/common/AnimatedCard.tsx

@@ -5,10 +5,12 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   Animated,
+  ViewStyle,
 } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
-import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
-import colors from "../colors";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import { IoniconsIconName } from "react-native-vector-icons/Ionicons";
+import colors from "../colors"; // Assuming your pastel colors are defined here
 
 type CardProps = {
   title: string;
@@ -16,7 +18,8 @@ type CardProps = {
   iconName?: IoniconsIconName;
   onPress?: () => void;
   backOne?: string;
-  backTwo?: string
+  backTwo?: string;
+  style?: ViewStyle;
 };
 
 const AnimatedCard: React.FC<CardProps> = ({
@@ -24,33 +27,27 @@ const AnimatedCard: React.FC<CardProps> = ({
   subtitle,
   iconName = "ellipse",
   onPress,
-  backOne = '#4facfe',
-  backTwo = '#00f2fe'
+  backOne = colors.pastelPink, // Defaulting to pastelPink
+  backTwo = colors.primary,
+  style,
 }) => {
   const scale = useRef(new Animated.Value(1)).current;
 
   const handlePressIn = () => {
-    Animated.spring(scale, {
-      toValue: 0.96,
-      useNativeDriver: true,
-      friction: 4,
-    }).start();
+    Animated.spring(scale, { toValue: 0.96, useNativeDriver: true, friction: 4 }).start();
   };
 
   const handlePressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: true,
-      friction: 4,
-    }).start(() => onPress && onPress());
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, friction: 4 }).start(() => {
+      if (onPress) {
+        onPress();
+      }
+    });
   };
 
   return (
-    <TouchableWithoutFeedback
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-    >
-      <Animated.View style={[styles.card, { transform: [{ scale }] }]}>
+    <TouchableWithoutFeedback onPressIn={handlePressIn} onPressOut={handlePressOut}>
+      <Animated.View style={[styles.card, style, { transform: [{ scale }] }]}>
         <LinearGradient
           colors={[backOne, backTwo]}
           start={{ x: 0, y: 0 }}
@@ -59,21 +56,11 @@ const AnimatedCard: React.FC<CardProps> = ({
         >
           {/* Decorative Graphics */}
           <View style={styles.graphicCircleLarge} />
-          <View style={styles.graphicCircleMedium} />
           <View style={styles.graphicCircleSmall} />
-          <View style={styles.graphicTriangleTop} />
-          <View style={styles.graphicTriangleBottom} />
 
           {/* Content */}
           <View style={styles.content}>
-            {iconName && (
-              <Ionicons
-                name={iconName}
-                size={32}
-                color="#fff"
-                style={styles.icon}
-              />
-            )}
+            {iconName && <Ionicons name={iconName} size={38} color="#fff" style={styles.icon} />}
             <View style={styles.textContainer}>
               <Text style={styles.title}>{title}</Text>
               {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
@@ -87,102 +74,70 @@ const AnimatedCard: React.FC<CardProps> = ({
 
 const styles = StyleSheet.create({
   card: {
-    // marginHorizontal: 16,
     marginVertical: 10,
-    borderRadius: 20,
+    borderRadius: 24,
     overflow: "hidden",
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.25,
-    shadowRadius: 8,
-    elevation: 8,
+    shadowOffset: { width: 0, height: 5 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 5,
+    backgroundColor: colors.white,
   },
   gradient: {
-    minHeight: 120,
+    minHeight: 150, // Increased height for better spacing
     position: "relative",
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
   },
-  // Graphics
   graphicCircleLarge: {
     position: "absolute",
-    top: -20,
-    right: -20,
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: "rgba(124, 80, 80, 0.42)",
-  },
-  graphicCircleMedium: {
-    position: "absolute",
-    bottom: 30,
-    left: -15,
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: "rgba(122, 41, 41, 0.39)",
+    top: -30,
+    right: -40,
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
   },
   graphicCircleSmall: {
     position: "absolute",
-    bottom: -10,
-    right: 40,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: "rgba(207, 110, 80, 0.25)",
-  },
-  graphicTriangleTop: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: 0,
-    height: 0,
-    borderStyle: "solid",
-    borderRightWidth: 60,
-    borderTopWidth: 60,
-    borderRightColor: "transparent",
-    borderTopColor: "rgba(143, 62, 62, 0.31)",
-  },
-  graphicTriangleBottom: {
-    position: "absolute",
-    bottom: 0,
-    right: 0,
-    width: 0,
-    height: 0,
-    borderStyle: "solid",
-    borderLeftWidth: 40,
-    borderBottomWidth: 40,
-    borderLeftColor: "transparent",
-    borderBottomColor: "rgba(172, 51, 51, 0.27)",
+    bottom: -20,
+    left: -25,
+    width: 70,
+    height: 70,
+    borderRadius: 35,
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
   },
   content: {
-    flexDirection: "row", // stack vertically
-    alignItems: "center",    // center horizontally
-    justifyContent: "center", // center vertically
     padding: 20,
     position: "relative",
     zIndex: 1,
-    alignSelf: "center",
-    flex:1
-  }
-  ,
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
   icon: {
-    marginRight: 12,
+    marginBottom: 12,
   },
   textContainer: {
-    // alignItems: "center", // centers title and subtitle
+    alignItems: 'center',
   },
   title: {
     fontSize: 18,
-    fontWeight: "700",
+    fontWeight: "bold",
     color: "#fff",
-    marginBottom: 4,
-    textTransform:'uppercase'
-    // textAlign: "center",
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    textAlign: 'center',
   },
   subtitle: {
-    fontSize: 14,
-    color: colors.primary,
+    fontSize: 13,
+    color: colors.white,
+    opacity: 0.9,
     fontWeight: "500",
     textAlign: "center",
+    marginTop: 4,
   },
 });