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