CircleCollect/circle-collect
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dummy home screen

Browse Source
This commit is contained in:
Jaanu423
2025-09-16 16:21:01 +05:30
parent 66b509e58e
commit 6ed8163d25
7 changed files with 551 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/Custom.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
? colors.pastelOrange
: colors.primary);
const textColor = type === "secondary" ? colors.textDark : colors.white;
const textColor = type === "secondary" ? colors.textDark : '#000';
return (
<TouchableOpacity
src/screens/GroupScreen.tsx
+6 -2
View File
@@ -145,7 +145,7 @@ export default function GroupScreen() {
};
const renderContent = () => {
let data ;
let data: Group[];
switch (activeTab) {
case "My Groups": data = myGroups; break;
case "Joined": data = joinedGroups; break;
@@ -168,7 +168,11 @@ export default function GroupScreen() {
renderItem={({ item }) => (
<GroupCard
item={item}
onJoin={activeTab === 'Public' ? handleJoinGroup : () => { }}
onJoin={() => {
if (activeTab === 'Public') {
handleJoinGroup
}
}}
onView={handleViewGroup}
isGrid={isGridView}
/>
src/screens/home/GroupList.tsx
+206
View File
@@ -0,0 +1,206 @@
import React, { useState, useEffect } from "react";
import {
View,
Text,
TextInput,
StyleSheet,
FlatList,
ActivityIndicator,
TouchableOpacity,
LayoutAnimation,
UIManager,
Platform,
} from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import colors from "../../components/colors";
// ✅ Enable LayoutAnimation for Android
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const API_URL = "https://api.godemo.in/FundCollect/api/fund/getAll/my/groups";
const TOKEN =
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDAyOTkxLCJleHAiOjE3NTgwODkzOTF9.mMRPsULcvdfdCrJJBDjnT2okE3dJsTn42JBqi_vP0Xk";
// ✅ Each group card with expandable details
const GroupCard = ({ item }: { item: any }) => {
const [expanded, setExpanded] = useState(false);
const toggleExpand = () => {
LayoutAnimation.easeInEaseOut();
setExpanded(!expanded);
};
const initial = item.groupName ? item.groupName.charAt(0).toUpperCase() : "?";
return (
<View style={styles.groupCard}>
<View style={styles.groupHeader}>
<View style={styles.avatar}>
<Text style={styles.avatarText}>{initial}</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={styles.groupName}>{item.groupName}</Text>
<Text style={styles.groupDescription}>{item.description}</Text>
<Text style={styles.groupMeta}>
{item.visibility} • {item.cycleType}
</Text>
</View>
<TouchableOpacity onPress={toggleExpand}>
<Ionicons
name={expanded ? "chevron-up-outline" : "chevron-forward-outline"}
size={22}
color={colors.textLight}
/>
</TouchableOpacity>
</View>
{expanded && (
<View style={styles.groupDetails}>
{Object.entries(item).map(([key, value]) => (
<Text key={key} style={styles.detailText}>
<Text style={{ fontWeight: "600" }}>{key}:</Text>{" "}
{Array.isArray(value) ? value.join(", ") : String(value)}
</Text>
))}
</View>
)}
</View>
);
};
// ✅ Group list with search
const GroupList = () => {
const [groups, setGroups] = useState<any[]>([]);
const [filteredGroups, setFilteredGroups] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const [search, setSearch] = useState("");
useEffect(() => {
const fetchGroups = async () => {
try {
const res = await fetch(API_URL, {
headers: { Accept: "*/*", Authorization: TOKEN },
});
const data = await res.json();
setGroups(data.data || []);
setFilteredGroups(data.data || []);
} catch (e) {
console.error("API error", e);
} finally {
setLoading(false);
}
};
fetchGroups();
}, []);
useEffect(() => {
if (search.trim() === "") {
setFilteredGroups(groups);
} else {
setFilteredGroups(
groups.filter((g) =>
g.groupName.toLowerCase().includes(search.toLowerCase())
)
);
}
}, [search, groups]);
if (loading) {
return (
<ActivityIndicator
size="large"
color={colors.primary}
style={{ marginTop: 20 }}
/>
);
}
return (
<View style={{ flex: 1 }}>
{/* Search bar */}
<View style={styles.searchContainer}>
<Ionicons name="search" size={20} color={colors.textLight} />
<TextInput
placeholder="Search groups..."
placeholderTextColor={colors.textLight}
style={styles.searchInput}
value={search}
onChangeText={setSearch}
/>
</View>
{/* Group list */}
<FlatList
data={filteredGroups}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <GroupCard item={item} />}
ListEmptyComponent={
<Text style={styles.emptyText}>No groups found</Text>
}
contentContainerStyle={{ paddingBottom: 20 }}
/>
</View>
);
};
export default GroupList;
const styles = StyleSheet.create({
searchContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: colors.white,
borderRadius: 12,
paddingHorizontal: 12,
margin: 10,
height: 45,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 5,
elevation: 2,
},
searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },
groupCard: {
backgroundColor: colors.white,
padding: 14,
borderRadius: 14,
marginHorizontal: 10,
marginBottom: 12,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
},
groupHeader: { flexDirection: "row", alignItems: "center" },
avatar: {
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: colors.primary + "33",
justifyContent: "center",
alignItems: "center",
marginRight: 12,
},
avatarText: { fontSize: 18, fontWeight: "700", color: colors.primary },
groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
groupMeta: { fontSize: 12, color: colors.primary, marginTop: 2 },
groupDetails: {
marginTop: 10,
padding: 10,
borderRadius: 8,
backgroundColor: "#f9f9f9",
},
detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
emptyText: {
textAlign: "center",
color: colors.textLight,
marginTop: 20,
fontSize: 14,
},
});
src/screens/home/GroupsTabs.tsx
+261
View File
@@ -0,0 +1,261 @@
import React, { useState, useEffect } from "react";
import {
View,
Text,
StyleSheet,
TouchableOpacity,
TextInput,
FlatList,
ActivityIndicator,
LayoutAnimation,
UIManager,
Platform,
} from "react-native";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import colors from "../../components/colors";
import AppView from "../../components/AppView";
// Enable LayoutAnimation for Android
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const API_URL = "https://api.godemo.in/FundCollect/api/fund/getAll/my/groups";
const TOKEN =
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDAyOTkxLCJleHAiOjE3NTgwODkzOTF9.mMRPsULcvdfdCrJJBDjnT2okE3dJsTn42JBqi_vP0Xk";
// ✅ Group Card
const GroupCard = ({ item }: { item: any }) => {
const [expanded, setExpanded] = useState(false);
const toggleExpand = () => {
LayoutAnimation.easeInEaseOut();
setExpanded(!expanded);
};
const initial = item.groupName ? item.groupName.charAt(0).toUpperCase() : "?";
return (
<View style={styles.groupCard}>
<View style={styles.groupLeft}>
<View style={styles.groupAvatar}>
<Text style={styles.avatarText}>{initial}</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={styles.groupName}>{item.groupName}</Text>
<Text style={styles.groupDescription}>{item.description}</Text>
<Text style={styles.groupMeta}>
{item.visibility} • {item.cycleType}
</Text>
</View>
<TouchableOpacity onPress={toggleExpand}>
<Ionicons
name={expanded ? "chevron-up-outline" : "chevron-forward-outline"}
size={22}
color={colors.textLight}
/>
</TouchableOpacity>
</View>
{expanded && (
<View style={styles.detailsBox}>
{Object.entries(item).map(([key, value]) => (
<Text key={key} style={styles.detailText}>
<Text style={{ fontWeight: "600" }}>{key}:</Text>{" "}
{Array.isArray(value) ? value.join("-") : String(value)}
</Text>
))}
</View>
)}
</View>
);
};
// ✅ Group List with Search
const GroupList = () => {
const [groups, setGroups] = useState<any[]>([]);
const [filteredGroups, setFilteredGroups] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const [search, setSearch] = useState("");
useEffect(() => {
const fetchGroups = async () => {
try {
const res = await fetch(API_URL, {
headers: { Accept: "*/*", Authorization: TOKEN },
});
const data = await res.json();
setGroups(data.data || []);
setFilteredGroups(data.data || []);
} catch (e) {
console.error("API error", e);
} finally {
setLoading(false);
}
};
fetchGroups();
}, []);
useEffect(() => {
if (search.trim() === "") {
setFilteredGroups(groups);
} else {
setFilteredGroups(
groups.filter((g) =>
g.groupName.toLowerCase().includes(search.toLowerCase())
)
);
}
}, [search, groups]);
if (loading) return <ActivityIndicator size="large" color={colors.primary} />;
return (
<>
<View style={styles.searchContainer}>
<Ionicons name="search" size={20} color={colors.textLight} />
<TextInput
placeholder="Search groups..."
placeholderTextColor={colors.textLight}
style={styles.searchInput}
value={search}
onChangeText={setSearch}
/>
</View>
<FlatList
data={filteredGroups}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <GroupCard item={item} />}
ListEmptyComponent={
<Text style={styles.emptyText}>No groups found</Text>
}
/>
</>
);
};
// ✅ Tab Layout
const GroupsTabs = () => {
const [activeTab, setActiveTab] = useState("MyGroups");
const renderContent = () => {
switch (activeTab) {
case "MyGroups":
return <GroupList />;
case "Create":
return (
<View style={styles.centered}>
<Text style={styles.sectionTitle}>Create Group Screen</Text>
</View>
);
case "History":
return (
<View style={styles.centered}>
<Text style={styles.sectionTitle}>History Screen</Text>
</View>
);
default:
return null;
}
};
return (
<AppView barStyle="dark-content">
<View style={styles.container}>
{/* Tabs */}
<View style={styles.tabs}>
{["MyGroups", "Create", "History"].map((tab) => (
<TouchableOpacity
key={tab}
style={[
styles.tabButton,
activeTab === tab && styles.activeTabButton,
]}
onPress={() => setActiveTab(tab)}
>
<Text
style={[
styles.tabText,
activeTab === tab && styles.activeTabText,
]}
>
{tab === "MyGroups" ? "My Groups" : tab}
</Text>
</TouchableOpacity>
))}
</View>
{/* Content */}
{renderContent()}
</View>
</AppView>
);
};
export default GroupsTabs;
const styles = StyleSheet.create({
container: { },
tabs: {
flexDirection: "row",
justifyContent: "space-around",
// marginVertical: 10,
borderBottomWidth: 1,
borderBottomColor: "#ddd",
},
tabButton: { paddingVertical: 10, flex: 1, alignItems: "center" },
tabText: { fontSize: 16, color: colors.textLight },
activeTabButton: { borderBottomWidth: 2, borderBottomColor: colors.primary },
activeTabText: { color: colors.primary, fontWeight: "600" },
searchContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: colors.white,
borderRadius: 12,
paddingHorizontal: 12,
marginVertical: 10,
height: 45,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 5,
elevation: 2,
},
searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },
groupCard: {
backgroundColor: colors.white,
padding: 14,
borderRadius: 14,
marginBottom: 12,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
},
groupLeft: { flexDirection: "row", alignItems: "center" },
groupAvatar: {
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: colors.primary + "33",
justifyContent: "center",
alignItems: "center",
marginRight: 12,
},
avatarText: { fontSize: 18, fontWeight: "700", color: colors.primary },
groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
groupMeta: { fontSize: 12, color: colors.primary, marginTop: 2 },
detailsBox: {
marginTop: 10,
padding: 10,
borderRadius: 8,
backgroundColor: "#f9f9f9",
},
detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
emptyText: { textAlign: "center", color: colors.textLight, marginTop: 20 },
centered: { flex: 1, justifyContent: "center", alignItems: "center" },
sectionTitle: { fontSize: 18, fontWeight: "600", color: colors.textDark },
});
src/screens/home/Home.tsx
+22 -134
View File
@@ -1,82 +1,43 @@
import React from "react";
import React, { useEffect, useState } from "react";
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
FlatList,
Image,
UIManager,
Platform,
} from "react-native";
import AppView from "../../components/AppView";
import UserProfileStatus from "./UserProfileStatus";
import colors from "../../components/colors";
import {Ionicons} from "@react-native-vector-icons/ionicons";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import GroupsTabs from "./GroupsTabs";
// Enable animation for Android
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const dummyChats = [
{ id: "1", name: "Amit Sharma", lastMessage: "Sent ₹500", avatar: "https://i.pravatar.cc/100?img=1" },
{ id: "2", name: "Sneha Patel", lastMessage: "Requested ₹200", avatar: "https://i.pravatar.cc/100?img=2" },
{ id: "3", name: "Group Savings", lastMessage: "Target reached 🎉", avatar: "https://i.pravatar.cc/100?img=3" },
];
const Home = () => {
return (
<AppView barStyle="dark-content">
<View style={styles.container}>
<AppView barStyle="dark-content">
{/* Header */}
<View style={styles.header}>
<Text style={styles.greeting}>Hello, Pooja 👋</Text>
<TouchableOpacity>
<Ionicons name="person-circle-outline" size={40} color={colors.primary} />
<Ionicons
name="person-circle-outline"
size={40}
color={colors.primary}
/>
</TouchableOpacity>
</View>
{/* Status */}
<UserProfileStatus />
<GroupsTabs />
{/* Search Bar */}
<View style={styles.searchContainer}>
<Ionicons name="search" size={20} color={colors.textLight} />
<TextInput
placeholder="Search chats or funds..."
placeholderTextColor={colors.textLight}
style={styles.searchInput}
/>
</View>
{/* Quick Actions */}
<View style={styles.quickActions}>
<TouchableOpacity style={styles.actionButton}>
<Ionicons name="send-outline" size={22} color={colors.primary} />
<Text style={styles.actionText}>Send</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.actionButton}>
<Ionicons name="cash-outline" size={22} color={colors.primary} />
<Text style={styles.actionText}>Request</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.actionButton}>
<Ionicons name="time-outline" size={22} color={colors.primary} />
<Text style={styles.actionText}>History</Text>
</TouchableOpacity>
</View>
{/* Recent Chats / Transactions */}
<Text style={styles.sectionTitle}>Recent Activity</Text>
<FlatList
data={dummyChats}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity style={styles.chatItem}>
<Image source={{ uri: item.avatar }} style={styles.avatar} />
<View style={styles.chatInfo}>
<Text style={styles.chatName}>{item.name}</Text>
<Text style={styles.chatMessage}>{item.lastMessage}</Text>
</View>
<Ionicons name="chevron-forward-outline" size={20} color={colors.textLight} />
</TouchableOpacity>
)}
/>
</View>
</AppView>
);
};
@@ -84,87 +45,14 @@ const Home = () => {
export default Home;
const styles = StyleSheet.create({
container: {
flex: 1,
// padding: 16,
},
container: { },
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 12,
},
greeting: {
fontSize: 22,
fontWeight: "600",
color: colors.textDark,
},
searchContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: colors.white,
borderRadius: 12,
paddingHorizontal: 12,
marginVertical: 10,
height: 45,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 5,
elevation: 2,
},
searchInput: {
flex: 1,
marginLeft: 8,
color: colors.textDark,
},
quickActions: {
flexDirection: "row",
justifyContent: "space-between",
marginVertical: 16,
},
actionButton: {
alignItems: "center",
flex: 1,
},
actionText: {
marginTop: 6,
fontSize: 14,
color: colors.textDark,
},
sectionTitle: {
fontSize: 18,
fontWeight: "600",
marginVertical: 10,
color: colors.textDark,
},
chatItem: {
flexDirection: "row",
alignItems: "center",
backgroundColor: colors.white,
padding: 12,
borderRadius: 12,
marginBottom: 10,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 1,
},
avatar: {
width: 45,
height: 45,
borderRadius: 22,
marginRight: 12,
},
chatInfo: {
flex: 1,
},
chatName: {
fontSize: 16,
fontWeight: "500",
color: colors.textDark,
},
chatMessage: {
fontSize: 14,
color: colors.textLight,
},
});
greeting: { fontSize: 22, fontWeight: "600", color: colors.textDark },
});
src/screens/home/UserProfileStatus.tsx
+1 -1
View File
@@ -153,7 +153,7 @@ export default UserProfileStatus;
const styles = StyleSheet.create({
container: {
flex: 1,
// flex: 1,
// padding: 16,
// backgroundColor: "#f5f7fb",
},
src/screens/profile/Profile.tsx
+54 -33
View File
@@ -240,6 +240,40 @@ const Profile = () => {
}
};
const handleLogout = (navigation: any) => {
Alert.alert(
"Logout",
"Are you sure you want to logout?",
[
{
text: "Cancel",
style: "cancel",
},
{
text: "Yes, Logout",
style: "destructive",
onPress: async () => {
try {
// Clear saved credentials from Keychain
await Keychain.resetGenericPassword();
// Navigate to login screen
navigation.reset({
index: 0,
routes: [{ name: "Login" }],
});
} catch (error) {
console.error("Logout error:", error);
Alert.alert("Error", "Failed to logout. Please try again.");
}
},
},
],
{ cancelable: true }
);
};
useFocusEffect(
useCallback(() => {
userStatus();
@@ -267,7 +301,7 @@ const Profile = () => {
if (fetching || !user) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color={colors.Profile} />
<ActivityIndicator size="large" color={colors.pastelBlue} />
<Text style={styles.loadingText}>Loading profile...</Text>
</View>
);
@@ -281,7 +315,7 @@ const Profile = () => {
<View style={styles.header}>
<Text style={styles.headerTitle}>User Profile</Text>
<TouchableOpacity onPress={fetchUserProfile} style={styles.refreshButton}>
<Ionicons name="refresh" size={24} color={colors.Profile} />
<Ionicons name="refresh" size={24} color={'#000'} />
</TouchableOpacity>
</View>
<KeyboardAvoidingView
@@ -309,7 +343,7 @@ const Profile = () => {
onError={() => console.log("Error loading image")}
/>
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
<Ionicons name="camera" size={18} color="white" />
<Ionicons name="camera" size={18} color="#000" />
</TouchableOpacity>
</View>
@@ -318,7 +352,7 @@ const Profile = () => {
onPress={handleUpdateImage}
icon={imageUpdating ? undefined : "cloud-upload"}
style={styles.updateImageButton}
buttonBackground={colors.Profile}
buttonBackground={colors.pastelBlue}
/>
</View>
@@ -334,7 +368,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="person" size={20} color={colors.Profile} style={styles.detailIcon} />
<Ionicons name="person" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Name</Text>
<Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
@@ -342,7 +376,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="mail" size={20} color={colors.Profile} style={styles.detailIcon} />
<Ionicons name="mail" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Email</Text>
<Text style={styles.detailText}>{user.email || "Not provided"}</Text>
@@ -350,7 +384,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="call" size={20} color={colors.Profile} style={styles.detailIcon} />
<Ionicons name="call" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Mobile</Text>
<Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
@@ -358,7 +392,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="at-circle" size={20} color={colors.Profile} style={styles.detailIcon} />
<Ionicons name="at-circle" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Username</Text>
<Text style={styles.detailText}>{user.username}</Text>
@@ -366,7 +400,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="location" size={20} color={colors.Profile} style={styles.detailIcon} />
<Ionicons name="location" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Address</Text>
<Text style={styles.detailText}>{user.address || "Not provided"}</Text>
@@ -374,7 +408,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="male-female" size={20} color={colors.Profile} style={styles.detailIcon} />
<Ionicons name="male-female" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Gender</Text>
<Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
@@ -382,7 +416,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="key" size={20} color={colors.Profile} style={styles.detailIcon} />
<Ionicons name="key" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Role</Text>
<Text style={styles.detailText}>{user.role || "User"}</Text>
@@ -395,7 +429,7 @@ const Profile = () => {
onPress={() => setEditing(true)}
icon="create"
style={styles.editButton}
buttonBackground={colors.Profile}
buttonBackground={colors.pastelBlue}
/>
</>
) : (
@@ -521,13 +555,13 @@ const styles = StyleSheet.create({
profileCard: {
borderRadius: 20,
margin: 16,
backgroundColor: "#fff",
padding: 20,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowRadius: 10,
shadowOffset: { width: 0, height: 4 },
elevation: 5,
// backgroundColor: "#fff",
// padding: 20,
// shadowColor: "#000",
// shadowOpacity: 0.1,
// shadowRadius: 10,
// shadowOffset: { width: 0, height: 4 },
// elevation: 5,
},
profileImageSection: {
alignItems: "center",
@@ -551,7 +585,7 @@ const styles = StyleSheet.create({
position: "absolute",
right: 0,
bottom: 0,
backgroundColor: "#6366f1",
backgroundColor: colors.pastelBlue,
borderRadius: 20,
width: 40,
height: 40,
@@ -645,19 +679,6 @@ const styles = StyleSheet.create({
inputWithIcon: {
paddingLeft: 40,
},
button: {
backgroundColor: "#6366f1",
paddingVertical: 14,
borderRadius: 12,
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
shadowColor: "#6366f1",
shadowOpacity: 0.3,
shadowRadius: 6,
shadowOffset: { width: 0, height: 3 },
elevation: 4,
},
buttonSecondary: {
backgroundColor: "#f1f5f9",
},