From 46b4dcf48d5eaeedd3913bac29cede029fa1fc85 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 19 Dec 2024 15:41:56 +0100 Subject: [PATCH 1/6] Add the new `Appearance` profile screen --- locales/en/index.yml | 3 + locales/it/index.yml | 3 + ts/navigation/ProfileNavigator.tsx | 5 + ts/navigation/params/ProfileParamsList.ts | 1 + ts/navigation/routes.ts | 1 + .../profile/AppearancePreferenceScreen.tsx | 104 ++++++++++++++++++ ts/screens/profile/PreferencesScreen.tsx | 12 ++ 7 files changed, 129 insertions(+) create mode 100644 ts/screens/profile/AppearancePreferenceScreen.tsx diff --git a/locales/en/index.yml b/locales/en/index.yml index 4e1a03a7de4..19ca59dec13 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -524,6 +524,9 @@ profile: send_email_messages: title: Forwarding messages by email subtitle: Receive message previews + appearance: + title: Appearance + subtitle: Customise your app experience language: title: Language subtitle: Choose language diff --git a/locales/it/index.yml b/locales/it/index.yml index 32ec5c05be3..d19ab495e0d 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -524,6 +524,9 @@ profile: send_email_messages: title: Inoltro dei messaggi via email subtitle: Ricevi un’anteprima dei messaggi + appearance: + title: Aspetto + subtitle: Personalizza la tua esperienza in app language: title: Lingua subtitle: Scegli la lingua diff --git a/ts/navigation/ProfileNavigator.tsx b/ts/navigation/ProfileNavigator.tsx index 1b5909d20c4..2a083761e02 100644 --- a/ts/navigation/ProfileNavigator.tsx +++ b/ts/navigation/ProfileNavigator.tsx @@ -31,6 +31,7 @@ import { isGestureEnabled } from "../utils/navigation"; import TrialSystemPlayground from "../screens/profile/TrialSystemPlayground"; import ProfileMainScreen from "../screens/profile/ProfileMainScreen"; import { IOMarkdownPlayground } from "../screens/profile/playgrounds/IOMarkdownPlayground"; +import AppearancePreferenceScreen from "../screens/profile/AppearancePreferenceScreen"; import { ProfileParamsList } from "./params/ProfileParamsList"; import ROUTES from "./routes"; @@ -68,6 +69,10 @@ const ProfileStackNavigator = () => ( name={ROUTES.PROFILE_PREFERENCES_SERVICES} component={ServicesPreferenceScreen} /> + { + const [selectedTypeface, setSelectedTypeface] = + useState("comfortable"); + + const [selectedColorMode, setSelectedColorMode] = + useState("system"); + + // Options for typeface + const typefaceOptions = [ + { + id: "comfortable" as TypefaceChoice, + value: "Confortevole", + description: + "Progettato per migliorare la leggibilità e accessibilità del testo" + }, + { + id: "traditional" as TypefaceChoice, + value: "Tradizionale", + description: "Utilizzato nella versione precedente dell'interfaccia" + } + ]; + + // Options for the color mode + const colorModeOptions = [ + { + id: "system" as ColorModeChoice, + value: "Automatica", + description: "Cambia in base alle impostazioni di sistema", + disabled: true + }, + { + id: "dark" as ColorModeChoice, + value: "Scura", + disabled: true + }, + { + id: "light" as ColorModeChoice, + value: "Chiara", + disabled: true + } + ]; + + return ( + + + + + + type="radioListItem" + items={typefaceOptions} + selectedItem={selectedTypeface} + onPress={setSelectedTypeface} + /> + + + + + + type="radioListItem" + items={colorModeOptions} + selectedItem={selectedColorMode} + onPress={setSelectedColorMode} + /> + + + + ); +}; + +export default AppearancePreferenceScreen; diff --git a/ts/screens/profile/PreferencesScreen.tsx b/ts/screens/profile/PreferencesScreen.tsx index 9e6f734f80c..6ee5d1463d6 100644 --- a/ts/screens/profile/PreferencesScreen.tsx +++ b/ts/screens/profile/PreferencesScreen.tsx @@ -63,6 +63,12 @@ const PreferencesScreen = () => { }); }, [navigation]); + const navigateToAppearancePreferenceScreen = useCallback(() => { + navigation.navigate(ROUTES.PROFILE_NAVIGATOR, { + screen: ROUTES.PROFILE_PREFERENCES_APPEARANCE + }); + }, [navigation]); + const checkPermissionThenGoCalendar = async () => { await requestWriteCalendarPermission({ title: I18n.t("permissionRationale.calendar.title"), @@ -109,6 +115,12 @@ const PreferencesScreen = () => { description: I18n.t("profile.preferences.list.notifications.subtitle"), onPress: navigateToNotificationPreferenceScreen }, + { + // Appearance + value: I18n.t("profile.preferences.list.appearance.title"), + description: I18n.t("profile.preferences.list.appearance.subtitle"), + onPress: navigateToAppearancePreferenceScreen + }, { // Calendar value: I18n.t("profile.preferences.list.preferred_calendar.title"), From 6a4e6c61b3f4d369a3066512c2bf723da3df6a4b Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 20 Dec 2024 10:09:59 +0100 Subject: [PATCH 2/6] Update copy --- locales/en/index.yml | 2 +- locales/it/index.yml | 2 +- .../profile/AppearancePreferenceScreen.tsx | 19 +++++++++---------- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index ef9de8684e0..de5ae4b4bac 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -526,7 +526,7 @@ profile: subtitle: Receive message previews appearance: title: Appearance - subtitle: Customise your app experience + subtitle: Customise the app interface language: title: Language subtitle: Choose language diff --git a/locales/it/index.yml b/locales/it/index.yml index b4269ca2dd8..636b2f959a3 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -526,7 +526,7 @@ profile: subtitle: Ricevi un’anteprima dei messaggi appearance: title: Aspetto - subtitle: Personalizza la tua esperienza in app + subtitle: Personalizza l'interfaccia dell'app language: title: Lingua subtitle: Scegli la lingua diff --git a/ts/screens/profile/AppearancePreferenceScreen.tsx b/ts/screens/profile/AppearancePreferenceScreen.tsx index c0b7385c924..20df224daa3 100644 --- a/ts/screens/profile/AppearancePreferenceScreen.tsx +++ b/ts/screens/profile/AppearancePreferenceScreen.tsx @@ -22,20 +22,19 @@ const AppearancePreferenceScreen = (): ReactElement => { useState("comfortable"); const [selectedColorMode, setSelectedColorMode] = - useState("system"); + useState("light"); // Options for typeface const typefaceOptions = [ { id: "comfortable" as TypefaceChoice, value: "Confortevole", - description: - "Progettato per migliorare la leggibilità e accessibilità del testo" + description: "Progettato per una migliore leggibilità dei testi" }, { id: "traditional" as TypefaceChoice, - value: "Tradizionale", - description: "Utilizzato nella versione precedente dell'interfaccia" + value: "Standard", + description: "Lo stile di sempre, con forme strette e geometriche" } ]; @@ -43,18 +42,18 @@ const AppearancePreferenceScreen = (): ReactElement => { const colorModeOptions = [ { id: "system" as ColorModeChoice, - value: "Automatica", + value: "Automatico", description: "Cambia in base alle impostazioni di sistema", disabled: true }, { id: "dark" as ColorModeChoice, - value: "Scura", + value: "Scuro", disabled: true }, { id: "light" as ColorModeChoice, - value: "Chiara", + value: "Chiaro", disabled: true } ]; @@ -69,7 +68,7 @@ const AppearancePreferenceScreen = (): ReactElement => { > - + type="radioListItem" items={typefaceOptions} @@ -80,7 +79,7 @@ const AppearancePreferenceScreen = (): ReactElement => { Date: Tue, 7 Jan 2025 12:14:58 +0100 Subject: [PATCH 3/6] Add missing I18n strings --- locales/en/index.yml | 16 +++++++ locales/it/index.yml | 16 +++++++ .../profile/AppearancePreferenceScreen.tsx | 48 +++++++++++++------ 3 files changed, 65 insertions(+), 15 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index 07df073aa53..9c5380eadda 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -527,6 +527,22 @@ profile: appearance: title: Appearance subtitle: Customise the app interface + typefaceStyle: + title: Typeface style + comfortable: + title: Comfortable + description: Designed for better text readability + standard: + title: Standard + description: The usual style with narrow, geometric shapes + theme: + title: Theme + comingSoon: Coming soon + automatic: + title: Automatic + description: Based on system settings + light: Light + dark: Dark language: title: Language subtitle: Choose language diff --git a/locales/it/index.yml b/locales/it/index.yml index 50e50332cb6..f909a6a0683 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -527,6 +527,22 @@ profile: appearance: title: Aspetto subtitle: Personalizza l'interfaccia dell'app + typefaceStyle: + title: Stile carattere + comfortable: + title: Confortevole + description: Progettato per una migliore leggibilità dei testi + standard: + title: Standard + description: Lo stile di sempre, con forme strette e geometriche + theme: + title: Tema + comingSoon: In arrivo + automatic: + title: Automatico + description: Cambia in base alle impostazioni di sistema + light: Chiaro + dark: Scuro language: title: Lingua subtitle: Scegli la lingua diff --git a/ts/screens/profile/AppearancePreferenceScreen.tsx b/ts/screens/profile/AppearancePreferenceScreen.tsx index 20df224daa3..1856f5863fd 100644 --- a/ts/screens/profile/AppearancePreferenceScreen.tsx +++ b/ts/screens/profile/AppearancePreferenceScreen.tsx @@ -8,7 +8,7 @@ import { View } from "react-native"; import { IOScrollViewWithLargeHeader } from "../../components/ui/IOScrollViewWithLargeHeader"; import I18n from "../../i18n"; -type TypefaceChoice = "comfortable" | "traditional"; +type TypefaceChoice = "comfortable" | "standard"; type ColorModeChoice = "system" | "dark" | "light"; @@ -28,13 +28,21 @@ const AppearancePreferenceScreen = (): ReactElement => { const typefaceOptions = [ { id: "comfortable" as TypefaceChoice, - value: "Confortevole", - description: "Progettato per una migliore leggibilità dei testi" + value: I18n.t( + "profile.preferences.list.appearance.typefaceStyle.comfortable.title" + ), + description: I18n.t( + "profile.preferences.list.appearance.typefaceStyle.comfortable.description" + ) }, { - id: "traditional" as TypefaceChoice, - value: "Standard", - description: "Lo stile di sempre, con forme strette e geometriche" + id: "standard" as TypefaceChoice, + value: I18n.t( + "profile.preferences.list.appearance.typefaceStyle.standard.title" + ), + description: I18n.t( + "profile.preferences.list.appearance.typefaceStyle.standard.description" + ) } ]; @@ -42,18 +50,22 @@ const AppearancePreferenceScreen = (): ReactElement => { const colorModeOptions = [ { id: "system" as ColorModeChoice, - value: "Automatico", - description: "Cambia in base alle impostazioni di sistema", + value: I18n.t( + "profile.preferences.list.appearance.theme.automatic.title" + ), + description: I18n.t( + "profile.preferences.list.appearance.theme.automatic.description" + ), disabled: true }, { - id: "dark" as ColorModeChoice, - value: "Scuro", + id: "light" as ColorModeChoice, + value: I18n.t("profile.preferences.list.appearance.theme.light"), disabled: true }, { - id: "light" as ColorModeChoice, - value: "Chiaro", + id: "dark" as ColorModeChoice, + value: I18n.t("profile.preferences.list.appearance.theme.dark"), disabled: true } ]; @@ -68,7 +80,11 @@ const AppearancePreferenceScreen = (): ReactElement => { > - + type="radioListItem" items={typefaceOptions} @@ -79,11 +95,13 @@ const AppearancePreferenceScreen = (): ReactElement => { Date: Thu, 9 Jan 2025 10:18:10 +0100 Subject: [PATCH 4/6] Update I18n strings --- locales/en/index.yml | 2 +- locales/it/index.yml | 4 ++-- ts/screens/profile/AppearancePreferenceScreen.tsx | 5 ++++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index 3b22ed8251e..b7eb16e12b3 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -526,7 +526,7 @@ profile: subtitle: Receive message previews appearance: title: Appearance - subtitle: Customise the app interface + subtitle: Choose how to customise the interface typefaceStyle: title: Typeface style comfortable: diff --git a/locales/it/index.yml b/locales/it/index.yml index ea0993786e3..401844b3f6f 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -525,8 +525,8 @@ profile: title: Inoltro dei messaggi via email subtitle: Ricevi un’anteprima dei messaggi appearance: - title: Aspetto - subtitle: Personalizza l'interfaccia dell'app + title: Aspetto dell'app + subtitle: Scegli come personalizzare l’interfaccia typefaceStyle: title: Stile carattere comfortable: diff --git a/ts/screens/profile/AppearancePreferenceScreen.tsx b/ts/screens/profile/AppearancePreferenceScreen.tsx index 1856f5863fd..53e3ca1c30d 100644 --- a/ts/screens/profile/AppearancePreferenceScreen.tsx +++ b/ts/screens/profile/AppearancePreferenceScreen.tsx @@ -72,15 +72,17 @@ const AppearancePreferenceScreen = (): ReactElement => { return ( { Date: Thu, 9 Jan 2025 18:09:59 +0100 Subject: [PATCH 5/6] Changes proposed by UX Copy team --- locales/en/index.yml | 2 +- locales/it/index.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index 626594fd58f..38950f56cc2 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -526,7 +526,7 @@ profile: subtitle: Receive message previews appearance: title: Appearance - subtitle: Choose how to customise the interface + subtitle: Choose how to customise the style of the app typefaceStyle: title: Typeface style comfortable: diff --git a/locales/it/index.yml b/locales/it/index.yml index 084d27cc10b..c5563b699ea 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -526,7 +526,7 @@ profile: subtitle: Ricevi un’anteprima dei messaggi appearance: title: Aspetto dell'app - subtitle: Scegli come personalizzare l’interfaccia + subtitle: Scegli come personalizzare lo stile dell'app typefaceStyle: title: Stile carattere comfortable: From 271f4ba92bac616b25db0df7b030f91d17c950a5 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 10 Jan 2025 10:25:50 +0100 Subject: [PATCH 6/6] Simplify the copy further --- locales/en/index.yml | 2 +- locales/it/index.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index 38950f56cc2..6f89cdf74bc 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -526,7 +526,7 @@ profile: subtitle: Receive message previews appearance: title: Appearance - subtitle: Choose how to customise the style of the app + subtitle: Choose how to customise the app typefaceStyle: title: Typeface style comfortable: diff --git a/locales/it/index.yml b/locales/it/index.yml index c5563b699ea..4b92a36a3d3 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -526,7 +526,7 @@ profile: subtitle: Ricevi un’anteprima dei messaggi appearance: title: Aspetto dell'app - subtitle: Scegli come personalizzare lo stile dell'app + subtitle: Scegli come personalizzare l'app typefaceStyle: title: Stile carattere comfortable: