@umituz/react-native-settings 1.6.1 → 1.6.2
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.
package/package.json
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Appearance Settings Screen
|
|
3
|
-
*
|
|
4
|
-
* Modern appearance settings with Paper List.Section:
|
|
5
|
-
* - React Native Paper List.Section pattern
|
|
6
|
-
* - Lucide icons (Languages, Moon, Sun)
|
|
7
|
-
* - Language + Theme settings combined
|
|
8
|
-
* - Dynamic icon based on theme mode
|
|
9
|
-
* - Material Design 3 compliance
|
|
3
|
+
* Modern appearance settings with language and theme controls
|
|
10
4
|
*/
|
|
11
5
|
|
|
12
|
-
import React from
|
|
13
|
-
import { View, StyleSheet } from
|
|
14
|
-
|
|
15
|
-
import { useNavigation } from
|
|
16
|
-
import {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { View, StyleSheet } from "react-native";
|
|
8
|
+
import { Languages, Moon, Sun } from "lucide-react-native";
|
|
9
|
+
import { useNavigation } from "@react-navigation/native";
|
|
10
|
+
import {
|
|
11
|
+
useDesignSystemTheme,
|
|
12
|
+
useAppDesignTokens,
|
|
13
|
+
type DesignTokens,
|
|
14
|
+
} from "@umituz/react-native-design-system-theme";
|
|
15
|
+
import { ScreenLayout } from "@umituz/react-native-design-system-organisms";
|
|
16
|
+
import { useLocalization, getLanguageByCode } from "@umituz/react-native-localization";
|
|
17
|
+
import { SettingItem } from "../components/SettingItem";
|
|
18
|
+
import { SettingsSection } from "../components/SettingsSection";
|
|
21
19
|
|
|
22
20
|
export const AppearanceScreen: React.FC = () => {
|
|
23
21
|
const { t, currentLanguage } = useLocalization();
|
|
@@ -27,63 +25,43 @@ export const AppearanceScreen: React.FC = () => {
|
|
|
27
25
|
const styles = getStyles(tokens);
|
|
28
26
|
|
|
29
27
|
const currentLang = getLanguageByCode(currentLanguage);
|
|
30
|
-
const languageDisplay = currentLang
|
|
31
|
-
|
|
28
|
+
const languageDisplay = currentLang
|
|
29
|
+
? `${currentLang.flag} ${currentLang.nativeName}`
|
|
30
|
+
: "English";
|
|
31
|
+
const themeDisplay =
|
|
32
|
+
themeMode === "dark" ? t("settings.darkMode") : t("settings.lightMode");
|
|
32
33
|
|
|
33
34
|
const handleLanguagePress = () => {
|
|
34
|
-
navigation.navigate(
|
|
35
|
+
navigation.navigate("LanguageSelection" as never);
|
|
35
36
|
};
|
|
36
37
|
|
|
37
38
|
const handleThemeToggle = () => {
|
|
38
|
-
const newMode = themeMode ===
|
|
39
|
+
const newMode = themeMode === "dark" ? "light" : "dark";
|
|
39
40
|
setThemeMode(newMode);
|
|
40
41
|
};
|
|
41
42
|
|
|
42
43
|
return (
|
|
43
44
|
<ScreenLayout testID="appearance-screen" hideScrollIndicator>
|
|
44
|
-
{/* Header */}
|
|
45
|
-
<View style={styles.header}>
|
|
46
|
-
<AtomicText type="headlineLarge" color="primary">
|
|
47
|
-
{t('settings.appearance.title')}
|
|
48
|
-
</AtomicText>
|
|
49
|
-
<AtomicText type="bodyMedium" color="secondary" style={styles.headerSubtitle}>
|
|
50
|
-
{t('settings.appearance.themeDescription')}
|
|
51
|
-
</AtomicText>
|
|
52
|
-
</View>
|
|
53
|
-
|
|
54
45
|
{/* Language Section */}
|
|
55
|
-
<
|
|
56
|
-
<AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
|
|
57
|
-
{t('settings.language')}
|
|
58
|
-
</AtomicText>
|
|
46
|
+
<SettingsSection title={t("settings.language")}>
|
|
59
47
|
<SettingItem
|
|
60
|
-
icon=
|
|
61
|
-
|
|
62
|
-
title={t('settings.language')}
|
|
48
|
+
icon={Languages}
|
|
49
|
+
title={t("settings.language")}
|
|
63
50
|
value={languageDisplay}
|
|
64
51
|
onPress={handleLanguagePress}
|
|
65
|
-
testID="language-button"
|
|
66
52
|
/>
|
|
67
|
-
</
|
|
53
|
+
</SettingsSection>
|
|
68
54
|
|
|
69
55
|
{/* Theme Section */}
|
|
70
|
-
<
|
|
71
|
-
<AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
|
|
72
|
-
{t('settings.appearance.darkMode')}
|
|
73
|
-
</AtomicText>
|
|
56
|
+
<SettingsSection title={t("settings.appearance.darkMode")}>
|
|
74
57
|
<SettingItem
|
|
75
|
-
icon={themeMode ===
|
|
76
|
-
|
|
77
|
-
themeMode === 'dark'
|
|
78
|
-
? (((tokens.colors as any).settingGradients?.themeDark as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary])
|
|
79
|
-
: (((tokens.colors as any).settingGradients?.themeLight as unknown as string[]) || [tokens.colors.secondary, tokens.colors.primary])
|
|
80
|
-
}
|
|
81
|
-
title={t('settings.appearance.darkMode')}
|
|
58
|
+
icon={themeMode === "dark" ? Moon : Sun}
|
|
59
|
+
title={t("settings.appearance.darkMode")}
|
|
82
60
|
value={themeDisplay}
|
|
83
61
|
onPress={handleThemeToggle}
|
|
84
|
-
|
|
62
|
+
isLast={true}
|
|
85
63
|
/>
|
|
86
|
-
</
|
|
64
|
+
</SettingsSection>
|
|
87
65
|
</ScreenLayout>
|
|
88
66
|
);
|
|
89
67
|
};
|
|
@@ -91,23 +69,20 @@ export const AppearanceScreen: React.FC = () => {
|
|
|
91
69
|
const getStyles = (tokens: DesignTokens) =>
|
|
92
70
|
StyleSheet.create({
|
|
93
71
|
header: {
|
|
94
|
-
paddingBottom: tokens.spacing.lg,
|
|
95
|
-
paddingTop: tokens.spacing.md,
|
|
96
72
|
paddingHorizontal: tokens.spacing.lg,
|
|
73
|
+
paddingTop: tokens.spacing.lg,
|
|
74
|
+
paddingBottom: tokens.spacing.md,
|
|
97
75
|
},
|
|
98
76
|
headerSubtitle: {
|
|
99
|
-
marginTop: tokens.spacing.
|
|
100
|
-
lineHeight: 20,
|
|
101
|
-
opacity: 0.8,
|
|
77
|
+
marginTop: tokens.spacing.xs,
|
|
102
78
|
},
|
|
103
79
|
sectionHeader: {
|
|
104
80
|
paddingHorizontal: tokens.spacing.lg,
|
|
105
81
|
paddingTop: tokens.spacing.lg,
|
|
106
82
|
paddingBottom: tokens.spacing.md,
|
|
107
|
-
textTransform:
|
|
83
|
+
textTransform: "uppercase",
|
|
108
84
|
letterSpacing: 1,
|
|
109
|
-
fontWeight:
|
|
85
|
+
fontWeight: "600",
|
|
110
86
|
fontSize: 12,
|
|
111
87
|
},
|
|
112
88
|
});
|
|
113
|
-
|