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

locales/en/index.yml

@@ -524,6 +524,25 @@ profile:
       send_email_messages:
         title: Forwarding messages by email
         subtitle: Receive message previews
+      appearance:
+        title: Appearance
+        subtitle: Choose how to customise the 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

locales/it/index.yml

@@ -524,6 +524,25 @@ profile:
       send_email_messages:
         title: Inoltro dei messaggi via email
         subtitle: Ricevi un’anteprima dei messaggi
+      appearance:
+        title: Aspetto dell'app
+        subtitle: Scegli come personalizzare l’interfaccia
+        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

@@ -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}

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

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

ts/screens/profile/AppearancePreferenceScreen.tsx

@@ -0,0 +1,124 @@
+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" | "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"),