@umituz/react-native-settings 4.23.130 → 4.23.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/domains/gamification/components/GamificationScreen/GamificationScreenWithConfig.tsx +2 -3
  3. package/src/domains/gamification/components/StatsCard.tsx +47 -39
  4. package/src/domains/gamification/components/StreakDisplay.tsx +71 -84
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-settings",
3
- "version": "4.23.130",
3
+ "version": "4.23.131",
4
4
  "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/domains/gamification/components/GamificationScreen/GamificationScreenWithConfig.tsx CHANGED
@@ -54,7 +54,6 @@ export const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = (
54
54
  streakProps: {
55
55
  current: streak.current,
56
56
  longest: streak.longest,
57
- currentLabel: config.translations.currentStreak,
58
57
  bestLabel: config.translations.bestStreak,
59
58
  daysLabel: config.translations.days,
60
59
  },
@@ -62,12 +61,12 @@ export const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = (
62
61
  {
63
62
  label: config.translations.pointsLabel,
64
63
  value: points,
65
- icon: "star",
64
+ icon: "⭐",
66
65
  },
67
66
  {
68
67
  label: config.translations.totalCompletedLabel,
69
68
  value: totalTasksCompleted,
70
- icon: "checkmark-circle",
69
+ icon: "✅",
71
70
  },
72
71
  ],
73
72
  achievements: achievementItems,
package/src/domains/gamification/components/StatsCard.tsx CHANGED
@@ -1,16 +1,16 @@
1
1
  /**
2
- * StatsCard Component
3
- * Displays a stat with icon - all text via props
2
+ * StatsCard Component - Modern Design
3
+ * Clean card-based stat display with emoji icons
4
4
  */
5
5
 
6
6
  import React from "react";
7
7
  import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
8
- import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha, useResponsive } from "@umituz/react-native-design-system";
8
+ import { useAppDesignTokens, AtomicText, useResponsive } from "@umituz/react-native-design-system";
9
9
 
10
10
  export interface StatsCardProps {
11
11
  value: number;
12
12
  label: string;
13
- icon: React.ReactNode | string;
13
+ icon?: React.ReactNode | string;
14
14
  suffix?: string;
15
15
  containerStyle?: ViewStyle;
16
16
  valueStyle?: TextStyle;
@@ -31,55 +31,57 @@ export const StatsCard: React.FC<StatsCardProps> = ({
31
31
  labelStyle,
32
32
  accentColor,
33
33
  backgroundColor,
34
- textColor,
34
+ textColor: _textColor,
35
35
  subtextColor,
36
36
  }) => {
37
37
  const tokens = useAppDesignTokens();
38
- const { getFontSize, getIconSize } = useResponsive();
38
+ const { getFontSize } = useResponsive();
39
39
 
40
40
  const finalAccentColor = accentColor || tokens.colors.primary;
41
41
  const finalBackgroundColor = backgroundColor || tokens.colors.surface;
42
- const finalTextColor = textColor || tokens.colors.textPrimary;
43
42
  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
44
43
 
45
- const renderedIcon = typeof icon === 'string' ? (
46
- <AtomicIcon name={icon} size="md" customColor={finalAccentColor} />
47
- ) : icon;
48
-
49
- const valueFontSize = getFontSize(32);
50
- const suffixFontSize = getFontSize(14);
51
- const labelFontSize = getFontSize(13);
52
- const iconSize = getIconSize(44);
44
+ const valueFontSize = getFontSize(48);
45
+ const suffixFontSize = getFontSize(16);
46
+ const labelFontSize = getFontSize(12);
47
+ const emojiSize = getFontSize(32);
53
48
 
54
49
  return (
55
50
  <View style={[
56
51
  styles.container,
57
52
  {
58
53
  backgroundColor: finalBackgroundColor,
59
- borderRadius: tokens.borders.radius.lg,
60
- padding: tokens.spacing.lg,
54
+ borderRadius: tokens.borders.radius.xl,
55
+ padding: tokens.spacing.xl,
56
+ shadowColor: "#000",
57
+ shadowOffset: { width: 0, height: 2 },
58
+ shadowOpacity: 0.1,
59
+ shadowRadius: 8,
60
+ elevation: 3,
61
61
  },
62
62
  containerStyle
63
63
  ]}>
64
- <View style={[
65
- styles.iconContainer,
66
- {
67
- backgroundColor: withAlpha(finalAccentColor, 0.15),
68
- width: iconSize,
69
- height: iconSize,
70
- borderRadius: iconSize / 2,
71
- marginBottom: tokens.spacing.md,
72
- }
73
- ]}>
74
- {renderedIcon}
75
- </View>
76
- <View style={[styles.valueRow, { minHeight: valueFontSize + 4 }]}>
64
+ {/* Emoji Icon at Top */}
65
+ {icon && (
66
+ <AtomicText style={[
67
+ styles.emoji,
68
+ {
69
+ fontSize: emojiSize,
70
+ marginBottom: tokens.spacing.sm,
71
+ }
72
+ ]}>
73
+ {icon}
74
+ </AtomicText>
75
+ )}
76
+
77
+ {/* Large Value in Center */}
78
+ <View style={styles.valueRow}>
77
79
  <AtomicText style={[
78
80
  styles.value,
79
81
  {
80
- color: finalTextColor,
82
+ color: finalAccentColor,
81
83
  fontSize: valueFontSize,
82
- lineHeight: valueFontSize + 4,
84
+ lineHeight: valueFontSize + 8,
83
85
  },
84
86
  valueStyle
85
87
  ]}>
@@ -97,6 +99,8 @@ export const StatsCard: React.FC<StatsCardProps> = ({
97
99
  </AtomicText>
98
100
  )}
99
101
  </View>
102
+
103
+ {/* Small Label Below */}
100
104
  <AtomicText style={[
101
105
  styles.label,
102
106
  {
@@ -106,7 +110,7 @@ export const StatsCard: React.FC<StatsCardProps> = ({
106
110
  },
107
111
  labelStyle
108
112
  ]}>
109
- {label}
113
+ {label.toUpperCase()}
110
114
  </AtomicText>
111
115
  </View>
112
116
  );
@@ -116,10 +120,10 @@ const styles = StyleSheet.create({
116
120
  container: {
117
121
  flex: 1,
118
122
  minWidth: "45%",
119
- },
120
- iconContainer: {
121
123
  alignItems: "center",
122
- justifyContent: "center",
124
+ },
125
+ emoji: {
126
+ textAlign: "center",
123
127
  },
124
128
  valueRow: {
125
129
  flexDirection: "row",
@@ -127,12 +131,16 @@ const styles = StyleSheet.create({
127
131
  gap: 4,
128
132
  },
129
133
  value: {
130
- fontWeight: "bold",
134
+ fontWeight: "800",
135
+ letterSpacing: -1,
136
+ textAlign: "center",
131
137
  },
132
138
  suffix: {
133
- fontWeight: "500",
139
+ fontWeight: "600",
134
140
  },
135
141
  label: {
136
- fontWeight: "500",
142
+ fontWeight: "600",
143
+ letterSpacing: 0.5,
144
+ textAlign: "center",
137
145
  },
138
146
  });
package/src/domains/gamification/components/StreakDisplay.tsx CHANGED
@@ -1,16 +1,15 @@
1
1
  /**
2
- * StreakDisplay Component
3
- * Displays streak information - all text via props
2
+ * StreakDisplay Component - Modern Design
3
+ * Clean card-based design with emoji icons
4
4
  */
5
5
 
6
6
  import React from "react";
7
7
  import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
8
- import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha, useResponsive } from "@umituz/react-native-design-system";
8
+ import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
9
9
 
10
10
  export interface StreakDisplayProps {
11
11
  current: number;
12
12
  longest: number;
13
- currentLabel: string;
14
13
  bestLabel: string;
15
14
  daysLabel: string;
16
15
  icon?: React.ReactNode | string;
@@ -26,113 +25,99 @@ export interface StreakDisplayProps {
26
25
  export const StreakDisplay: React.FC<StreakDisplayProps> = ({
27
26
  current,
28
27
  longest,
29
- currentLabel,
30
28
  bestLabel,
31
29
  daysLabel,
32
- icon,
33
30
  containerStyle,
34
31
  numberStyle,
35
32
  labelStyle,
36
33
  primaryColor,
37
34
  backgroundColor,
38
- textColor,
35
+ textColor: _textColor,
39
36
  subtextColor,
40
37
  }) => {
41
38
  const tokens = useAppDesignTokens();
42
- const { getFontSize, iconContainerSize } = useResponsive();
39
+ const { getFontSize } = useResponsive();
43
40
 
44
41
  const finalPrimaryColor = primaryColor || tokens.colors.primary;
45
42
  const finalBackgroundColor = backgroundColor || tokens.colors.surface;
46
- const finalTextColor = textColor || tokens.colors.textPrimary;
47
43
  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
48
44
 
49
- const renderedIcon = typeof icon === 'string' ? (
50
- <AtomicIcon name={icon} size="lg" customColor={finalPrimaryColor} />
51
- ) : icon || <AtomicIcon name="trending-up" size="lg" customColor={finalPrimaryColor} />;
52
-
53
- const numberFontSize = getFontSize(36);
54
- const labelFontSize = getFontSize(11);
55
- const currentLabelFontSize = getFontSize(15);
56
- const bestNumberFontSize = getFontSize(24);
57
- const bestLabelFontSize = getFontSize(10);
45
+ const streakNumberSize = getFontSize(48);
46
+ const streakLabelSize = getFontSize(13);
47
+ const bestNumberSize = getFontSize(20);
48
+ const bestLabelSize = getFontSize(11);
58
49
 
59
50
  return (
60
51
  <View style={[
61
52
  styles.container,
62
53
  {
63
54
  backgroundColor: finalBackgroundColor,
64
- borderRadius: tokens.borders.radius.lg,
65
- padding: tokens.spacing.lg,
55
+ borderRadius: tokens.borders.radius.xl,
56
+ padding: tokens.spacing.xl,
57
+ shadowColor: "#000",
58
+ shadowOffset: { width: 0, height: 2 },
59
+ shadowOpacity: 0.1,
60
+ shadowRadius: 8,
61
+ elevation: 3,
66
62
  },
67
63
  containerStyle
68
64
  ]}>
69
- <View style={styles.mainStreak}>
70
- <View style={[styles.iconContainer, { width: iconContainerSize, height: iconContainerSize }]}>
71
- {renderedIcon}
72
- </View>
73
- <View style={[styles.streakInfo, { minWidth: iconContainerSize + 12 }]}>
74
- <AtomicText style={[
75
- styles.number,
76
- {
77
- color: finalPrimaryColor,
78
- fontSize: numberFontSize,
79
- lineHeight: numberFontSize + 4,
80
- minHeight: numberFontSize + 4,
81
- },
82
- numberStyle
83
- ]}>
84
- {current}
85
- </AtomicText>
86
- <AtomicText style={[
87
- styles.label,
88
- {
89
- color: finalSubtextColor,
90
- fontSize: labelFontSize,
91
- marginTop: tokens.spacing.xs,
92
- },
93
- labelStyle
94
- ]}>
95
- {daysLabel}
96
- </AtomicText>
65
+ {/* Main Streak Section */}
66
+ <View style={styles.mainSection}>
67
+ <AtomicText style={styles.emoji}>🔥</AtomicText>
68
+ <View style={styles.streakNumbers}>
69
+ <View style={styles.currentStreak}>
70
+ <AtomicText style={[
71
+ styles.streakNumber,
72
+ {
73
+ color: finalPrimaryColor,
74
+ fontSize: streakNumberSize,
75
+ lineHeight: streakNumberSize + 8,
76
+ },
77
+ numberStyle
78
+ ]}>
79
+ {current}
80
+ </AtomicText>
81
+ <AtomicText style={[
82
+ styles.streakLabel,
83
+ {
84
+ color: finalSubtextColor,
85
+ fontSize: streakLabelSize,
86
+ marginTop: tokens.spacing.xs,
87
+ },
88
+ labelStyle
89
+ ]}>
90
+ {daysLabel.toUpperCase()}
91
+ </AtomicText>
92
+ </View>
97
93
  </View>
98
- <AtomicText style={[
99
- styles.currentLabel,
100
- {
101
- color: finalTextColor,
102
- fontSize: currentLabelFontSize,
103
- }
104
- ]}>
105
- {currentLabel}
106
- </AtomicText>
107
94
  </View>
108
95
 
96
+ {/* Best Streak Badge */}
109
97
  <View style={[
110
- styles.bestStreak,
98
+ styles.bestBadge,
111
99
  {
112
- backgroundColor: withAlpha(finalPrimaryColor, 0.2),
100
+ backgroundColor: withAlpha(finalPrimaryColor, 0.12),
101
+ borderRadius: tokens.borders.radius.lg,
113
102
  paddingHorizontal: tokens.spacing.md,
114
- paddingVertical: tokens.spacing.sm,
115
- borderRadius: tokens.borders.radius.md,
116
- minWidth: 80,
103
+ paddingVertical: tokens.spacing.md,
117
104
  }
118
105
  ]}>
119
106
  <AtomicText style={[
120
107
  styles.bestLabel,
121
108
  {
122
109
  color: finalSubtextColor,
123
- fontSize: bestLabelFontSize,
110
+ fontSize: bestLabelSize,
124
111
  }
125
112
  ]}>
126
- {bestLabel}
113
+ {bestLabel.toUpperCase()}
127
114
  </AtomicText>
128
115
  <AtomicText style={[
129
116
  styles.bestNumber,
130
117
  {
131
118
  color: finalPrimaryColor,
132
- fontSize: bestNumberFontSize,
133
- lineHeight: bestNumberFontSize + 4,
134
- minHeight: bestNumberFontSize + 4,
135
- marginTop: tokens.spacing.xs,
119
+ fontSize: bestNumberSize,
120
+ marginTop: tokens.spacing.xs / 2,
136
121
  }
137
122
  ]}>
138
123
  {longest}
@@ -148,36 +133,38 @@ const styles = StyleSheet.create({
148
133
  alignItems: "center",
149
134
  justifyContent: "space-between",
150
135
  },
151
- mainStreak: {
136
+ mainSection: {
152
137
  flexDirection: "row",
153
138
  alignItems: "center",
154
- gap: 12,
139
+ gap: 16,
155
140
  flex: 1,
156
141
  },
157
- iconContainer: {
158
- justifyContent: "center",
159
- alignItems: "center",
142
+ emoji: {
143
+ fontSize: 40,
160
144
  },
161
- streakInfo: {
162
- alignItems: "center",
145
+ streakNumbers: {
146
+ flex: 1,
163
147
  },
164
- number: {
165
- fontWeight: "bold",
148
+ currentStreak: {
149
+ alignItems: "flex-start",
166
150
  },
167
- label: {
168
- textTransform: "uppercase",
151
+ streakNumber: {
152
+ fontWeight: "800",
153
+ letterSpacing: -1,
169
154
  },
170
- currentLabel: {
155
+ streakLabel: {
171
156
  fontWeight: "600",
157
+ letterSpacing: 0.5,
172
158
  },
173
- bestStreak: {
159
+ bestBadge: {
174
160
  alignItems: "center",
161
+ minWidth: 70,
175
162
  },
176
163
  bestLabel: {
177
- textTransform: "uppercase",
178
- fontWeight: "600",
164
+ fontWeight: "700",
165
+ letterSpacing: 0.5,
179
166
  },
180
167
  bestNumber: {
181
- fontWeight: "bold",
168
+ fontWeight: "800",
182
169
  },
183
170
  });