feat: [IOAPPX-453] Add the new static Appearance profile screen

locales/en/index.json

@@ -644,6 +644,31 @@
                     "title": "Forwarding messages by email",
                     "subtitle": "Receive message previews"
                 },
+                "appearance": {
+                    "title": "Appearance",
+                    "subtitle": "Customize the app to your needs",
+                    "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"

locales/it/index.json

@@ -644,6 +644,31 @@
                     "title": "Inoltro dei messaggi via email",
                     "subtitle": "Ricevi un’anteprima dei messaggi"
                 },
+                "appearance": {
+                    "title": "Aspetto dell'app",
+                    "subtitle": "Personalizza l'app in base alle tue esigenze",
+                    "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"

ts/navigation/ProfileNavigator.tsx

@@ -29,6 +29,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";
 
@@ -66,6 +67,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}

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;

ts/navigation/routes.ts

@@ -88,6 +88,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",

ts/screens/profile/AppearancePreferenceScreen.tsx

@@ -0,0 +1,124 @@
+import {
+  ListItemHeader,
+  RadioGroup,
+  VStack
+} from "@pagopa/io-app-design-system";
+import { ReactElement, useState } from "react";
+import { View } from "react-native";
+import { IOScrollViewWithLargeHeader } from "../../components/ui/IOScrollViewWithLargeHeader";
+import I18n from "../../i18n";
+
+type TypefaceChoice = "comfortable" | "standard";
+
+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>("light");
+
+  // Options for typeface
+  const typefaceOptions = [
+    {
+      id: "comfortable" as TypefaceChoice,
+      value: I18n.t(
+        "profile.preferences.list.appearance.typefaceStyle.comfortable.title"
+      ),
+      description: I18n.t(
+        "profile.preferences.list.appearance.typefaceStyle.comfortable.description"
+      )
+    },
+    {
+      id: "standard" as TypefaceChoice,
+      value: I18n.t(
+        "profile.preferences.list.appearance.typefaceStyle.standard.title"
+      ),
+      description: I18n.t(
+        "profile.preferences.list.appearance.typefaceStyle.standard.description"
+      )
+    }
+  ];
+
+  // Options for the color mode
+  const colorModeOptions = [
+    {
+      id: "system" as ColorModeChoice,
+      value: I18n.t(
+        "profile.preferences.list.appearance.theme.automatic.title"
+      ),
+      description: I18n.t(
+        "profile.preferences.list.appearance.theme.automatic.description"
+      ),
+      disabled: true
+    },
+    {
+      id: "light" as ColorModeChoice,
+      value: I18n.t("profile.preferences.list.appearance.theme.light"),
+      disabled: true
+    },
+    {
+      id: "dark" as ColorModeChoice,
+      value: I18n.t("profile.preferences.list.appearance.theme.dark"),
+      disabled: true
+    }
+  ];
+
+  return (
+    <IOScrollViewWithLargeHeader
+      title={{
+        label: I18n.t("profile.preferences.list.appearance.title")
+      }}
+      description={I18n.t("profile.preferences.list.appearance.subtitle")}
+      headerActionsProp={{ showHelp: true }}
+      includeContentMargins
+    >
+      <VStack space={24}>
+        <View>
+          <ListItemHeader
+            iconName="gallery"
+            label={I18n.t(
+              "profile.preferences.list.appearance.typefaceStyle.title"
+            )}
+          />
+          <RadioGroup<TypefaceChoice>
+            type="radioListItem"
+            items={typefaceOptions}
+            selectedItem={selectedTypeface}
+            onPress={setSelectedTypeface}
+          />
+        </View>
+
+        <View>
+          <ListItemHeader
+            iconName="gallery"
+            label={I18n.t("profile.preferences.list.appearance.theme.title")}
+            endElement={{
+              type: "badge",
+              componentProps: {
+                text: I18n.t(
+                  "profile.preferences.list.appearance.theme.comingSoon"
+                ),
+                variant: "info"
+              }
+            }}
+          />
+          <RadioGroup<ColorModeChoice>
+            type="radioListItem"
+            items={colorModeOptions}
+            selectedItem={selectedColorMode}
+            onPress={setSelectedColorMode}
+          />
+        </View>
+      </VStack>
+    </IOScrollViewWithLargeHeader>
+  );
+};
+
+export default AppearancePreferenceScreen;

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"),