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

themed

Browse Source
This commit is contained in:
Jaanu423
2025-10-14 10:45:32 +05:30
parent afe43b56a5
commit 4cebaa64f1
1 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/notification/Notification.tsx
+36 -36
View File
@@ -1,4 +1,4 @@
import React from 'react'; // import React from 'react';
import { import {
View, View,
Text, Text,
@@ -19,6 +19,7 @@ import AppView from '../../components/AppView';
import Header from '../../components/common/Header'; import Header from '../../components/common/Header';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import { useNotificationHandler } from '../hook/useNotificationHandler'; import { useNotificationHandler } from '../hook/useNotificationHandler';
import colors from '../../components/colors';
type FilterType = 'all' | 'JOIN_REQUEST' | 'CONTRIBUTION' | 'CONTRIBUTION_ACK' | type FilterType = 'all' | 'JOIN_REQUEST' | 'CONTRIBUTION' | 'CONTRIBUTION_ACK' |
'CYCLE_COMPLETED' | 'WITHDRAWAL' | 'WITHDRAWAL_NOTIFY' | 'CYCLE_COMPLETED' | 'WITHDRAWAL' | 'WITHDRAWAL_NOTIFY' |
@@ -145,31 +146,31 @@ const Notification = () => {
const getNotificationColor = (msgType: string) => { const getNotificationColor = (msgType: string) => {
switch (msgType) { switch (msgType) {
case 'JOIN_REQUEST': case 'JOIN_REQUEST':
return '#FF6B35'; // Orange return '#FFB6C1'; // Pastel Pink
case 'CONTRIBUTION': case 'CONTRIBUTION':
return '#4CAF50'; // Green return '#98FB98'; // Pastel Green
case 'CONTRIBUTION_ACK': case 'CONTRIBUTION_ACK':
return '#2196F3'; // Blue return '#ADD8E6'; // Pastel Blue
case 'CYCLE_COMPLETED': case 'CYCLE_COMPLETED':
return '#9C27B0'; // Purple return '#D8BFD8'; // Pastel Purple
case 'WITHDRAWAL': case 'WITHDRAWAL':
return '#FF9800'; // Amber return '#FFD700'; // Pastel Yellow
case 'WITHDRAWAL_NOTIFY': case 'WITHDRAWAL_NOTIFY':
return '#F44336'; // Red return '#FFA07A'; // Pastel Orange
case 'CYCLE_WAIVER': case 'CYCLE_WAIVER':
return '#607D8B'; // Blue Grey return '#B0C4DE'; // Pastel Steel Blue
case 'WAIVER_RECEIVED': case 'WAIVER_RECEIVED':
return '#009688'; // Teal return '#AFEEEE'; // Pastel Turquoise
case 'USER_SELECTED': case 'USER_SELECTED':
return '#673AB7'; // Deep Purple return '#DDA0DD'; // Pastel Plum
case 'GROUP_STARTED': case 'GROUP_STARTED':
return '#00BCD4'; // Cyan return '#87CEFA'; // Pastel Sky Blue
case 'JOIN_APPROVED': case 'JOIN_APPROVED':
return '#4CAF50'; // Green return '#98FB98'; // Pastel Green
case 'JOIN_VIA_INVITE': case 'JOIN_VIA_INVITE':
return '#FFC107'; // Yellow return '#FFFACD'; // Pastel Lemon
default: default:
return '#757575'; // Grey return '#D3D3D3'; // Pastel Gray
} }
}; };
@@ -210,11 +211,11 @@ const Notification = () => {
<AppView> <AppView>
{/* Header with actions */} {/* Header with actions */}
<Header <Header
title={`Notifications ${unreadCount > 0 ? `(${unreadCount})` : ''}`} /> title={`Notifications ${unreadCount > 0 ? `(${unreadCount})` : ''}`} arrowColor='#000' titleColor='#000'/>
<View style={styles.headerActions}> <View style={styles.headerActions}>
{unreadCount > 0 && ( {unreadCount > 0 && (
<LinearGradient <LinearGradient
colors={['#4CAF50', '#45a049']} colors={[colors.primary, colors.pastelPink]} // Pastel Green gradient
style={[styles.headerButton, styles.markReadButton]}> style={[styles.headerButton, styles.markReadButton]}>
<TouchableOpacity onPress={handleMarkAllAsRead}> <TouchableOpacity onPress={handleMarkAllAsRead}>
<Text style={styles.headerButtonText}>Mark All Read</Text> <Text style={styles.headerButtonText}>Mark All Read</Text>
@@ -223,7 +224,7 @@ const Notification = () => {
)} )}
{notifications.length > 0 && ( {notifications.length > 0 && (
<LinearGradient <LinearGradient
colors={['#FF6B6B', '#FF8E53']} colors={[colors.pastelPink, colors.pastelBlue]} // Pastel Pink to Pastel Orange gradient
style={styles.headerButton}> style={styles.headerButton}>
<TouchableOpacity onPress={handleClearAll}> <TouchableOpacity onPress={handleClearAll}>
<Text style={styles.headerButtonText}>Clear All</Text> <Text style={styles.headerButtonText}>Clear All</Text>
@@ -246,10 +247,11 @@ const Notification = () => {
activeOpacity={0.7} activeOpacity={0.7}
> >
<LinearGradient <LinearGradient
colors={item.read ? ['#f8f9fa', '#e9ecef'] : ['#ffffff', '#f8f9fa']} colors={item.read ? ['#F5F5F5', '#E8E8E8'] : ['#FFFFFF', '#F8F8FF']} // Pastel grays and whites
style={[ style={[
styles.notificationCard, styles.notificationCard,
!item.read && styles.unreadNotification, { borderLeftColor: getNotificationColor(item.data.msgType) } !item.read && styles.unreadNotification,
{ borderLeftColor: getNotificationColor(item.data.msgType) }
]}> ]}>
<View style={styles.notificationContent}> <View style={styles.notificationContent}>
{/* Icon */} {/* Icon */}
@@ -285,7 +287,6 @@ const Notification = () => {
styles.tag, styles.tag,
{ backgroundColor: getNotificationColor(item.data.msgType) } { backgroundColor: getNotificationColor(item.data.msgType) }
]}> ]}>
{/* {item.data.msgType} */}
{getFilterDisplayName(item.data.msgType as FilterType)} {getFilterDisplayName(item.data.msgType as FilterType)}
</Text> </Text>
</View> </View>
@@ -301,7 +302,7 @@ const Notification = () => {
onPress={() => handleDelete(item.messageId)} onPress={() => handleDelete(item.messageId)}
style={styles.deleteButton} style={styles.deleteButton}
> >
<Ionicons name="trash-outline" size={20} color="#e63946" /> <Ionicons name="trash-outline" size={20} color={colors.pastelPink} /> {/* Pastel Pink */}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
@@ -311,7 +312,7 @@ const Notification = () => {
}} }}
ListEmptyComponent={ ListEmptyComponent={
<View style={styles.emptyContainer}> <View style={styles.emptyContainer}>
<Ionicons name="notifications-off-outline" size={64} color="#ccc" /> <Ionicons name="notifications-off-outline" size={64} color="#D3D3D3" /> {/* Pastel Gray */}
<Text style={styles.emptyText}>No notifications yet</Text> <Text style={styles.emptyText}>No notifications yet</Text>
<Text style={styles.emptySubtext}> <Text style={styles.emptySubtext}>
When you get notifications, they'll appear here When you get notifications, they'll appear here
@@ -344,7 +345,7 @@ const styles = StyleSheet.create({
minWidth: 100, minWidth: 100,
}, },
headerButtonText: { headerButtonText: {
color: '#fff', color: '#FFFFFF', // White text for better contrast on pastel backgrounds
fontWeight: '600', fontWeight: '600',
fontSize: 12, fontSize: 12,
}, },
@@ -358,15 +359,14 @@ const styles = StyleSheet.create({
padding: 16, padding: 16,
marginBottom: 10, marginBottom: 10,
shadowColor: '#000', shadowColor: '#000',
shadowOpacity: 0.1, shadowOpacity: 0.05, // Reduced opacity for softer shadow
shadowRadius: 5, shadowRadius: 4,
elevation: 3, elevation: 2,
borderLeftWidth: 4, borderLeftWidth: 4,
borderLeftColor: 'transparent', borderLeftColor: 'transparent',
}, },
unreadNotification: { unreadNotification: {
// borderLeftColor: colors.primary, backgroundColor: '#F8F8FF', // Pastel Lavender
backgroundColor: '#fff',
}, },
notificationContent: { notificationContent: {
flexDirection: 'row', flexDirection: 'row',
@@ -389,22 +389,22 @@ const styles = StyleSheet.create({
title: { title: {
fontWeight: '600', fontWeight: '600',
fontSize: 16, fontSize: 16,
color: '#333', color: '#696969', // Dim Gray
flex: 1, flex: 1,
marginRight: 8, marginRight: 8,
}, },
unreadTitle: { unreadTitle: {
fontWeight: '700', fontWeight: '700',
color: '#000', color: '#2F4F4F', // Dark Slate Gray
}, },
message: { message: {
fontSize: 14, fontSize: 14,
color: '#666', color: '#808080', // Gray
lineHeight: 20, lineHeight: 20,
}, },
time: { time: {
fontSize: 12, fontSize: 12,
color: '#999', color: '#A9A9A9', // Dark Gray
fontWeight: '500', fontWeight: '500',
}, },
tagContainer: { tagContainer: {
@@ -412,7 +412,7 @@ const styles = StyleSheet.create({
}, },
tag: { tag: {
fontSize: 10, fontSize: 10,
color: '#fff', color: '#FFFFFF', // White text for better contrast
paddingHorizontal: 8, paddingHorizontal: 8,
paddingVertical: 2, paddingVertical: 2,
borderRadius: 4, borderRadius: 4,
@@ -428,7 +428,7 @@ const styles = StyleSheet.create({
width: 8, width: 8,
height: 8, height: 8,
borderRadius: 4, borderRadius: 4,
backgroundColor: '#2196F3', backgroundColor: '#87CEEB', // Pastel Sky Blue
}, },
deleteButton: { deleteButton: {
padding: 4, padding: 4,
@@ -442,13 +442,13 @@ const styles = StyleSheet.create({
emptyText: { emptyText: {
fontSize: 18, fontSize: 18,
fontWeight: '600', fontWeight: '600',
color: '#666', color: '#A9A9A9', // Dark Gray
marginTop: 16, marginTop: 16,
marginBottom: 8, marginBottom: 8,
}, },
emptySubtext: { emptySubtext: {
fontSize: 14, fontSize: 14,
color: '#999', color: '#C0C0C0', // Silver
textAlign: 'center', textAlign: 'center',
lineHeight: 20, lineHeight: 20,
}, },