Add the new Appearance profile screen

pagopa · Dec 19, 2024 · 46b4dcf · 46b4dcf
1 parent a0d562f
commit 46b4dcf
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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}
     />
+    <Stack.Screen
+      name={ROUTES.PROFILE_PREFERENCES_APPEARANCE}
+      component={AppearancePreferenceScreen}
+    />
     <Stack.Screen
       name={ROUTES.PROFILE_PREFERENCES_EMAIL_FORWARDING}
       component={EmailForwardingScreen}

diff --git a/ts/navigation/params/ProfileParamsList.ts b/ts/navigation/params/ProfileParamsList.ts
@@ -10,6 +10,7 @@ export type ProfileParamsList = {
   [ROUTES.PROFILE_DATA]: undefined;
   [ROUTES.PROFILE_SECURITY]: undefined;
   [ROUTES.PROFILE_PREFERENCES_SERVICES]: undefined;
+  [ROUTES.PROFILE_PREFERENCES_APPEARANCE]: undefined;
   [ROUTES.PROFILE_PREFERENCES_EMAIL_FORWARDING]: undefined;
   [ROUTES.PROFILE_PREFERENCES_CALENDAR]: undefined;
   [ROUTES.PROFILE_PREFERENCES_LANGUAGE]: undefined;

diff --git a/ts/navigation/routes.ts b/ts/navigation/routes.ts
@@ -90,6 +90,7 @@ const ROUTES = {
   PROFILE_PREFERENCES_EMAIL_FORWARDING: "PROFILE_PREFERENCES_EMAIL_FORWARDING",
   PROFILE_PREFERENCES_CALENDAR: "PROFILE_PREFERENCES_CALENDAR",
   PROFILE_PREFERENCES_LANGUAGE: "PROFILE_PREFERENCES_LANGUAGE",
+  PROFILE_PREFERENCES_APPEARANCE: "PROFILE_PREFERENCES_APPEARANCE",
   PROFILE_ABOUT_APP: "PROFILE_ABOUT_APP",
   PROFILE_LOGOUT: "PROFILE_LOGOUT",
   PROFILE_FISCAL_CODE: "PROFILE_FISCAL_CODE",

diff --git a/ts/screens/profile/AppearancePreferenceScreen.tsx b/ts/screens/profile/AppearancePreferenceScreen.tsx
@@ -0,0 +1,104 @@
+import {
+  ListItemHeader,
+  RadioGroup,
+  VStack
+} from "@pagopa/io-app-design-system";
+import React, { ReactElement, useState } from "react";
+import { View } from "react-native";
+import { IOScrollViewWithLargeHeader } from "../../components/ui/IOScrollViewWithLargeHeader";
+import I18n from "../../i18n";
+
+type TypefaceChoice = "comfortable" | "traditional";
+
+type ColorModeChoice = "system" | "dark" | "light";
+
+/**
+ * Display the appearance related settings
+ * @param props
+ * @constructor
+ */
+const AppearancePreferenceScreen = (): ReactElement => {
+  const [selectedTypeface, setSelectedTypeface] =
+    useState<TypefaceChoice>("comfortable");
+
+  const [selectedColorMode, setSelectedColorMode] =
+    useState<ColorModeChoice>("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 (
+    <IOScrollViewWithLargeHeader
+      includeContentMargins
+      title={{
+        label: I18n.t("profile.preferences.list.appearance.title")
+      }}
+      headerActionsProp={{ showHelp: true }}
+    >
+      <VStack space={24}>
+        <View>
+          <ListItemHeader label={"Carattere"} />
+          <RadioGroup<TypefaceChoice>
+            type="radioListItem"
+            items={typefaceOptions}
+            selectedItem={selectedTypeface}
+            onPress={setSelectedTypeface}
+          />
+        </View>
+
+        <View>
+          <ListItemHeader
+            label={"Modalità cromatica"}
+            endElement={{
+              type: "badge",
+              componentProps: {
+                text: "In arrivo",
+                variant: "info"
+              }
+            }}
+          />
+          <RadioGroup<ColorModeChoice>
+            type="radioListItem"
+            items={colorModeOptions}
+            selectedItem={selectedColorMode}
+            onPress={setSelectedColorMode}
+          />
+        </View>
+      </VStack>
+    </IOScrollViewWithLargeHeader>
+  );
+};
+
+export default AppearancePreferenceScreen;
diff --git 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"),