Set primary color based on DS experimental flag to react-navigation

pagopa · Jan 23, 2024 · 3866add · 3866add
1 parent 7f1cf77
commit 3866add
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/ts/components/DebugInfoOverlay.tsx b/ts/components/DebugInfoOverlay.tsx
@@ -1,22 +1,22 @@
-import * as React from "react";
-import { StyleSheet, Pressable, SafeAreaView, View, Text } from "react-native";
-import { connect } from "react-redux";
-import { useState } from "react";
-import { widthPercentageToDP } from "react-native-responsive-screen";
 import {
   HSpacer,
   IOColors,
   IOStyles,
   hexToRgba,
   makeFontStyleObject
 } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { useState } from "react";
+import { Pressable, SafeAreaView, StyleSheet, Text, View } from "react-native";
+import { widthPercentageToDP } from "react-native-responsive-screen";
+import { connect } from "react-redux";
 import { ReduxProps } from "../store/actions/types";
+import { useIOSelector } from "../store/hooks";
 import { currentRouteSelector } from "../store/reducers/navigation";
+import { isPagoPATestEnabledSelector } from "../store/reducers/persistedPreferences";
 import { GlobalState } from "../store/reducers/types";
 import { getAppVersion } from "../utils/appVersion";
 import { clipboardSetStringWithFeedback } from "../utils/clipboard";
-import { useIOSelector } from "../store/hooks";
-import { isPagoPATestEnabledSelector } from "../store/reducers/persistedPreferences";
 import PagoPATestIndicator from "./PagoPATestIndicator";
 
 type Props = ReturnType<typeof mapStateToProps> & ReduxProps;
@@ -27,6 +27,7 @@ const debugItemBorderColor = hexToRgba(IOColors.black, 0.1);
 const styles = StyleSheet.create({
   versionContainer: {
     ...StyleSheet.absoluteFillObject,
+    top: -8,
     justifyContent: "flex-start",
     alignItems: "center",
     zIndex: 1000

diff --git a/ts/features/design-system/navigation/navigator.tsx b/ts/features/design-system/navigation/navigator.tsx
@@ -1,5 +1,6 @@
 import {
   HeaderSecondLevel,
+  IOColors,
   IOThemeContext,
   IOThemes,
   IconButton,
@@ -103,10 +104,20 @@ export const DesignSystemNavigator = () => {
   const { isExperimental } = useIOExperimentalDesign();
   const colorScheme = useColorScheme();
 
+  const IODSNavigationLightTheme = {
+    ...IONavigationLightTheme,
+    colors: {
+      ...IONavigationLightTheme.colors,
+      primary: isExperimental ? IOColors["blueIO-500"] : IOColors.blue
+    }
+  };
+
   return (
     <ThemeProvider
       value={
-        colorScheme === "dark" ? IONavigationDarkTheme : IONavigationLightTheme
+        colorScheme === "dark"
+          ? IONavigationDarkTheme
+          : IODSNavigationLightTheme
       }
     >
       <IOThemeContext.Provider