@umituz/react-native-settings 4.23.83 → 4.23.84

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/feedback/presentation/components/FeedbackModal.tsx +16 -19
  3. package/src/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx +17 -14
  4. package/src/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx +46 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-settings",
3
- "version": "4.23.83",
3
+ "version": "4.23.84",
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/feedback/presentation/components/FeedbackModal.tsx CHANGED
@@ -34,34 +34,31 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
34
34
  const tokens = useAppDesignTokens();
35
35
  const styles = getStyles(tokens);
36
36
 
37
+ const header = (
38
+ <NavigationHeader
39
+ title={title || ""}
40
+ subtitle={subtitle}
41
+ rightElement={
42
+ <TouchableOpacity
43
+ onPress={onClose}
44
+ style={[styles.closeButton, { backgroundColor: tokens.colors.surfaceVariant }]}
45
+ >
46
+ <AtomicIcon name="close" size="sm" color="onSurface" />
47
+ </TouchableOpacity>
48
+ }
49
+ />
50
+ );
51
+
37
52
  return (
38
53
  <BaseModal visible={visible} onClose={onClose}>
39
54
  <ScreenLayout
55
+ header={header}
40
56
  scrollable={true}
41
57
  edges={[]}
42
58
  keyboardAvoiding={true}
43
59
  contentContainerStyle={styles.content}
44
60
  hideScrollIndicator={false}
45
61
  >
46
- <View style={[styles.header, { borderBottomColor: tokens.colors.border }]}>
47
- <View style={styles.headerText}>
48
- <AtomicText type="headlineSmall" color="textPrimary">
49
- {title}
50
- </AtomicText>
51
- {subtitle && (
52
- <AtomicText type="bodySmall" color="textSecondary" style={{ marginTop: 4 }}>
53
- {subtitle}
54
- </AtomicText>
55
- )}
56
- </View>
57
- <TouchableOpacity
58
- onPress={onClose}
59
- style={[styles.closeButton, { backgroundColor: tokens.colors.surfaceVariant }]}
60
- >
61
- <AtomicIcon name="close" size="sm" color="onSurface" />
62
- </TouchableOpacity>
63
- </View>
64
-
65
62
  <FeedbackForm
66
63
  onSubmit={onSubmit}
67
64
  initialType={initialType}
package/src/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx CHANGED
@@ -44,18 +44,19 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
44
44
  style={[styles.thumbnail, horizontal && styles.horizontalThumbnail]}
45
45
  resizeMode="cover"
46
46
  />
47
- <View style={[styles.durationBadge, { backgroundColor: "rgba(0,0,0,0.7)" }]}>
48
- <AtomicText style={styles.durationText}>{formatDuration(tutorial.duration)}</AtomicText>
47
+ <View style={styles.durationBadge}>
48
+ <AtomicText type="labelSmall" style={styles.durationText}>{formatDuration(tutorial.duration)}</AtomicText>
49
49
  </View>
50
50
  {tutorial.featured && (
51
51
  <View style={[styles.featuredBadge, { backgroundColor: tokens.colors.primary }]}>
52
- <AtomicText style={[styles.featuredText, { color: tokens.colors.onPrimary }]}>Featured</AtomicText>
52
+ <AtomicText type="labelSmall" style={[styles.featuredText, { color: tokens.colors.onPrimary }]}>Featured</AtomicText>
53
53
  </View>
54
54
  )}
55
55
  </View>
56
56
 
57
57
  <View style={styles.content}>
58
58
  <AtomicText
59
+ type={horizontal ? "titleMedium" : "titleLarge"}
59
60
  style={[styles.title, horizontal && styles.horizontalTitle]}
60
61
  numberOfLines={2}
61
62
  >
@@ -63,6 +64,8 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
63
64
  </AtomicText>
64
65
 
65
66
  <AtomicText
67
+ type={horizontal ? "bodySmall" : "bodyMedium"}
68
+ color="textSecondary"
66
69
  style={[styles.description, horizontal && styles.horizontalDescription]}
67
70
  numberOfLines={horizontal ? 2 : 3}
68
71
  >
@@ -70,10 +73,10 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
70
73
  </AtomicText>
71
74
 
72
75
  <View style={styles.metadata}>
73
- <AtomicText style={styles.category}>
76
+ <AtomicText type="labelSmall" color="textTertiary" style={styles.category}>
74
77
  {tutorial.category.replace("-", " ")}
75
78
  </AtomicText>
76
- <AtomicText style={styles.difficulty}>
79
+ <AtomicText type="labelSmall" color="textSecondary" style={styles.difficulty}>
77
80
  {tutorial.difficulty}
78
81
  </AtomicText>
79
82
  </View>
@@ -88,16 +91,16 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => StyleSheet.
88
91
  imageContainer: { position: "relative" },
89
92
  thumbnail: { width: "100%", height: 180 },
90
93
  horizontalThumbnail: { height: 140 },
91
- durationBadge: { position: "absolute", bottom: 8, right: 8, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4 },
92
- durationText: { color: tokens.colors.textInverse, fontSize: 12, fontWeight: "500" },
94
+ durationBadge: { position: "absolute", bottom: 8, right: 8, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, backgroundColor: "rgba(0,0,0,0.7)" },
95
+ durationText: { color: tokens.colors.textInverse },
93
96
  featuredBadge: { position: "absolute", top: 8, left: 8, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4 },
94
- featuredText: { fontSize: 11, fontWeight: "600" },
97
+ featuredText: { fontWeight: "600" },
95
98
  content: { padding: 12 },
96
- title: { fontSize: tokens.typography.titleMedium.fontSize, fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
97
- horizontalTitle: { fontSize: tokens.typography.bodyLarge.fontSize },
98
- description: { fontSize: tokens.typography.bodyMedium.fontSize, lineHeight: 20, marginBottom: 8, color: tokens.colors.textSecondary },
99
- horizontalDescription: { fontSize: tokens.typography.bodySmall.fontSize, lineHeight: 16, marginBottom: 6 },
99
+ title: { fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
100
+ horizontalTitle: {},
101
+ description: { marginBottom: 8 },
102
+ horizontalDescription: { marginBottom: 6 },
100
103
  metadata: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
101
- category: { fontSize: 12, textTransform: "capitalize", fontWeight: "500", color: tokens.colors.textTertiary },
102
- difficulty: { fontSize: 12, textTransform: "capitalize", fontWeight: "500", color: tokens.colors.textSecondary },
104
+ category: { textTransform: "capitalize", fontWeight: "500" },
105
+ difficulty: { textTransform: "capitalize", fontWeight: "500" },
103
106
  });
package/src/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx CHANGED
@@ -48,6 +48,7 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
48
48
  onTutorialPress,
49
49
  }) => {
50
50
  const tokens = useAppDesignTokens();
51
+ const navigation = useAppNavigation();
51
52
  const styles = getStyles(tokens);
52
53
 
53
54
  const handleTutorialPress = React.useCallback(
@@ -69,10 +70,6 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
69
70
  [handleTutorialPress]
70
71
  );
71
72
 
72
- const navigation = useAppNavigation();
73
-
74
- if (isLoading) return <AtomicSpinner size="lg" fullContainer />;
75
-
76
73
  const hasFeatured = featuredTutorials && featuredTutorials.length > 0;
77
74
  const hasTutorials = tutorials && tutorials.length > 0;
78
75
 
@@ -83,21 +80,29 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
83
80
  />
84
81
  );
85
82
 
83
+ if (isLoading) {
84
+ return (
85
+ <ScreenLayout header={header}>
86
+ <AtomicSpinner size="lg" fullContainer color="primary" />
87
+ </ScreenLayout>
88
+ );
89
+ }
90
+
86
91
  if (!hasTutorials && !hasFeatured) {
87
92
  return (
88
- <ScreenLayout header={header} edges={["bottom"]}>
93
+ <ScreenLayout header={header}>
89
94
  <View style={styles.emptyContainer}>
90
- <AtomicText color="secondary" type="bodyLarge">{emptyMessage}</AtomicText>
95
+ <AtomicText color="textSecondary" type="bodyLarge" style={{ textAlign: 'center' }}>{emptyMessage}</AtomicText>
91
96
  </View>
92
97
  </ScreenLayout>
93
98
  );
94
99
  }
95
100
 
96
- return (
97
- <ScreenLayout header={header} scrollable={false} edges={["bottom"]}>
101
+ const ListHeader = () => (
102
+ <>
98
103
  {hasFeatured && (
99
104
  <View style={styles.section}>
100
- <AtomicText color="secondary" style={styles.sectionTitle}>{featuredTitle}</AtomicText>
105
+ <AtomicText color="textSecondary" type="titleLarge" style={styles.sectionTitle}>{featuredTitle}</AtomicText>
101
106
  <FlatList
102
107
  data={featuredTutorials}
103
108
  renderItem={renderFeaturedItem}
@@ -108,38 +113,47 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
108
113
  />
109
114
  </View>
110
115
  )}
111
-
112
116
  {hasTutorials && (
113
- <View style={styles.section}>
114
- <AtomicText color="secondary" style={styles.sectionTitle}>{allTutorialsTitle}</AtomicText>
115
- <FlatList
116
- data={tutorials}
117
- renderItem={renderTutorialItem}
118
- keyExtractor={(item) => item.id}
119
- showsVerticalScrollIndicator={false}
120
- contentContainerStyle={styles.verticalList}
121
- />
122
- </View>
117
+ <AtomicText color="textSecondary" type="titleLarge" style={styles.sectionTitle}>{allTutorialsTitle}</AtomicText>
123
118
  )}
119
+ </>
120
+ );
121
+
122
+ return (
123
+ <ScreenLayout header={header} scrollable={false}>
124
+ <FlatList
125
+ data={tutorials}
126
+ renderItem={renderTutorialItem}
127
+ keyExtractor={(item) => item.id}
128
+ showsVerticalScrollIndicator={false}
129
+ contentContainerStyle={styles.verticalList}
130
+ ListHeaderComponent={ListHeader}
131
+ />
124
132
  </ScreenLayout>
125
133
  );
126
134
  }
127
135
  );
128
136
 
129
137
  const getStyles = (tokens: DesignTokens) => StyleSheet.create({
130
- title: {
131
- fontSize: tokens.typography.headlineLarge.fontSize,
132
- color: tokens.colors.textPrimary,
133
- fontWeight: "600",
134
- marginBottom: 24,
138
+ section: {
139
+ marginBottom: tokens.spacing.lg,
135
140
  },
136
- section: { marginBottom: 24 },
137
141
  sectionTitle: {
138
- fontSize: tokens.typography.titleLarge.fontSize,
139
- fontWeight: "500",
140
- marginBottom: 12,
142
+ fontWeight: "600",
143
+ marginBottom: tokens.spacing.sm,
144
+ paddingHorizontal: tokens.spacing.md,
145
+ },
146
+ horizontalList: {
147
+ paddingHorizontal: tokens.spacing.md,
148
+ },
149
+ verticalList: {
150
+ paddingBottom: tokens.spacing.xl,
151
+ paddingHorizontal: tokens.spacing.md,
152
+ },
153
+ emptyContainer: {
154
+ flex: 1,
155
+ justifyContent: "center",
156
+ alignItems: "center",
157
+ padding: tokens.spacing.lg,
141
158
  },
142
- horizontalList: { paddingRight: 16 },
143
- verticalList: { paddingBottom: 16 },
144
- emptyContainer: { flex: 1, justifyContent: "center", alignItems: "center", padding: 20 },
145
159
  });