dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: implement dark gradient metric cards with high contrast white text and colored labels

Browse Source
This commit is contained in:
Aleksandar 2025-12-11 14:01:32 +01:00
parent 71a05c51bf
commit 966bcb084d
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/mobile/src/components/PerformanceMetrics.tsx
View File

@ -16,31 +16,35 @@ interface MetricProps {
const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => { const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => {
const schemes = { const schemes = {
blue: { blue: {
colors: ['#3b82f6', '#06b6d4'], colors: ['#1e3a8a', '#0c4a6e'],
text: '#ffffff', text: '#ffffff',
badge: '#dbeafe', label: '#93c5fd',
badgeText: '#1e40af', badge: '#3b82f6',
badgeText: '#ffffff',
icon: '#60a5fa', icon: '#60a5fa',
}, },
green: { green: {
colors: ['#10b981', '#14b8a6'], colors: ['#064e3b', '#047857'],
text: '#ffffff', text: '#ffffff',
badge: '#dcfce7', label: '#86efac',
badgeText: '#047857', badge: '#10b981',
badgeText: '#ffffff',
icon: '#34d399', icon: '#34d399',
}, },
purple: { purple: {
colors: ['#a855f7', '#3b82f6'], colors: ['#581c87', '#7c3aed'],
text: '#ffffff', text: '#ffffff',
badge: '#e9d5ff', label: '#d8b4fe',
badgeText: '#6b21a8', badge: '#a855f7',
badgeText: '#ffffff',
icon: '#c084fc', icon: '#c084fc',
}, },
orange: { orange: {
colors: ['#f97316', '#ef4444'], colors: ['#92400e', '#b45309'],
text: '#ffffff', text: '#ffffff',
badge: '#fed7aa', label: '#fcd34d',
badgeText: '#92400e', badge: '#f97316',
badgeText: '#ffffff',
icon: '#fb923c', icon: '#fb923c',
}, },
}; };
@ -61,7 +65,7 @@ const MetricCard: React.FC<MetricProps> = ({ title, value, change, trend, icon,
> >
<View style={styles.cardContent}> <View style={styles.cardContent}>
<View style={styles.header}> <View style={styles.header}>
<Text style={[styles.label, { color: colors.text }]}>{title}</Text> <Text style={[styles.label, { color: colors.label }]}>{title}</Text>
<View style={[styles.iconContainer, { backgroundColor: colors.icon + '40' }]}> <View style={[styles.iconContainer, { backgroundColor: colors.icon + '40' }]}>
<Ionicons name={icon as any} size={20} color={colors.text} /> <Ionicons name={icon as any} size={20} color={colors.text} />
</View> </View>