chore: [IOAPPX-476] Change StatusBar style according to the current…

… color scheme (#6680) ## Short description This PR adds a `StatusBar` that changes its style according to the color scheme of the app. ## List of changes proposed in this pull request - Add a `StatusBar` with a specific color scheme condition in the `AppStackNavigator` ### Preview > [!note] > Please focus on the statusbar on the top while playing the videos | Before | After | |--------|--------| | <video src="https://github.com/user-attachments/assets/a9be6e64-dc9d-4ef5-b3b2-33b48d9d509f" /> | <video src="https://github.com/user-attachments/assets/8b2a56dc-ea83-4a13-bb00-d12830aca3f8" /> | ## How to test Change the color scheme of your app from **Dev Settings** and randomly check the headers of the screens. Focus your attention on the screens with an existing specific `StatusBar` behavior. --------- Co-authored-by: Emanuele Dall'Ara <[email protected]>
pagopa · Feb 28, 2025 · 04d2853 · 04d2853
1 parent 2da6efc
commit 04d2853
Show file tree

Hide file tree

Showing 18 changed files with 170 additions and 178 deletions.
diff --git a/ts/RootContainer.tsx b/ts/RootContainer.tsx
@@ -6,29 +6,27 @@ import {
   AppState,
   AppStateStatus,
   EmitterSubscription,
-  NativeEventSubscription,
-  StatusBar
+  NativeEventSubscription
 } from "react-native";
 import SplashScreen from "react-native-splash-screen";
 import { connect } from "react-redux";
-import configurePushNotifications from "./features/pushNotifications/utils/configurePushNotification";
 import DebugInfoOverlay from "./components/DebugInfoOverlay";
 import PagoPATestIndicatorOverlay from "./components/PagoPATestIndicatorOverlay";
 import { LightModalRoot } from "./components/ui/LightModal";
+import configurePushNotifications from "./features/pushNotifications/utils/configurePushNotification";
 import { setLocale } from "./i18n";
 import { IONavigationContainer } from "./navigation/AppStackNavigator";
 import RootModal from "./screens/modal/RootModal";
 import { applicationChangeState } from "./store/actions/application";
 import { setDebugCurrentRouteName } from "./store/actions/debug";
 import { navigateBack } from "./store/actions/navigation";
+import { setScreenReaderEnabled } from "./store/actions/preferences";
 import { isDebugModeEnabledSelector } from "./store/reducers/debug";
 import {
   isPagoPATestEnabledSelector,
   preferredLanguageSelector
 } from "./store/reducers/persistedPreferences";
 import { GlobalState } from "./store/reducers/types";
-import customVariables from "./theme/variables";
-import { setScreenReaderEnabled } from "./store/actions/preferences";
 
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps;
 
@@ -109,11 +107,6 @@ class RootContainer extends PureComponent<Props> {
 
     return (
       <>
-        <StatusBar
-          barStyle={"dark-content"}
-          backgroundColor={customVariables.androidStatusBarColor}
-        />
-
         <IONavigationContainer />
 
         {/* When debug mode is enabled, the following information

diff --git a/ts/components/BonusCard/BonusCardScreenComponent.tsx b/ts/components/BonusCard/BonusCardScreenComponent.tsx
@@ -1,9 +1,15 @@
-import { HeaderActionProps } from "@pagopa/io-app-design-system";
+import {
+  HeaderActionProps,
+  IOColors,
+  useIOThemeContext
+} from "@pagopa/io-app-design-system";
 import { ReactNode } from "react";
 import { Dimensions } from "react-native";
 import Animated, { useAnimatedRef } from "react-native-reanimated";
 import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel";
 import { SupportRequestParams } from "../../hooks/useStartSupportRequest";
+import { isAndroid } from "../../utils/platform";
+import FocusAwareStatusBar from "../ui/FocusAwareStatusBar";
 import { IOScrollView, IOScrollViewActions } from "../ui/IOScrollView";
 import { BonusCard } from "./BonusCard";
 
@@ -41,10 +47,24 @@ const BonusCardScreenComponent = ({
   const screenHeight = Dimensions.get("window").height;
   const shouldHideLogo = screenHeight < MIN_HEIGHT_TO_SHOW_FULL_RENDER;
 
+  const { themeType } = useIOThemeContext();
+
+  const isDark = themeType === "dark";
+  // We need to check if the card is a CGN type to set the background color
+  const isCGNType = !cardProps.isLoading && cardProps.cardBackground;
+  // Custom background color for CGN based on the platform
+  const cgnBackgroundColor = isAndroid ? IOColors.white : IOColors["grey-50"];
+  // If the card is not a CGN type, we set the default header background color as card color
+  const backgroundColor = isCGNType
+    ? cgnBackgroundColor
+    : IOColors["blueIO-50"];
+
   useHeaderSecondLevel({
     title: title || "",
     transparent: true,
     supportRequest: true,
+    variant: "neutral",
+    backgroundColor,
     faqCategories,
     contextualHelpMarkdown,
     contextualHelp,
@@ -54,14 +74,19 @@ const BonusCardScreenComponent = ({
   });
 
   return (
-    <IOScrollView
-      animatedRef={animatedScrollViewRef}
-      actions={actions}
-      includeContentMargins={false}
-    >
-      <BonusCard hideLogo={shouldHideLogo} {...cardProps} />
-      {children}
-    </IOScrollView>
+    <>
+      <FocusAwareStatusBar
+        barStyle={isAndroid && isDark ? "light-content" : "dark-content"}
+      />
+      <IOScrollView
+        animatedRef={animatedScrollViewRef}
+        actions={actions}
+        includeContentMargins={false}
+      >
+        <BonusCard hideLogo={shouldHideLogo} {...cardProps} />
+        {children}
+      </IOScrollView>
+    </>
   );
 };
 

diff --git a/ts/components/ui/AppHeader.tsx b/ts/components/ui/AppHeader.tsx
@@ -4,9 +4,8 @@
 
 import { IOStyles, IOVisualCostants } from "@pagopa/io-app-design-system";
 import { PropsWithChildren } from "react";
-import { ColorValue, StatusBar, View, ViewProps } from "react-native";
+import { ColorValue, View, ViewProps } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import variables from "../../theme/variables";
 
 type Props = ViewProps & {
   backgroundColor?: ColorValue;
@@ -23,10 +22,6 @@ const AppHeader = (props: PropsWithChildren<Props>) => {
         backgroundColor: props.backgroundColor
       }}
     >
-      <StatusBar
-        barStyle={"dark-content"}
-        backgroundColor={variables.androidStatusBarColor}
-      />
       <View
         style={{
           ...IOStyles.row,

diff --git a/ts/components/ui/FocusAwareStatusBar.tsx b/ts/components/ui/FocusAwareStatusBar.tsx
@@ -13,7 +13,8 @@ import { StatusBar, StatusBarProps } from "react-native";
 
 const FocusAwareStatusBar = (props: StatusBarProps) => {
   const isFocused = useIsFocused();
-  return <>{isFocused && <StatusBar {...props} />}</>;
+
+  return isFocused && <StatusBar {...props} />;
 };
 
 export default FocusAwareStatusBar;
diff --git a/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx b/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx
@@ -49,6 +49,7 @@ export const CategoryTag = ({ category }: CategoryTagProps) => {
   return O.isSome(categorySpecs) ? (
     <Tag
       text={I18n.t(categorySpecs.value.nameKey)}
+      forceLightMode
       variant="custom"
       icon={{
         name: categorySpecs.value.icon,
@@ -108,7 +109,7 @@ export const ModuleCgnDiscount = ({ onPress, discount }: ModuleCgnDiscount) => {
               </HStack>
             )}
 
-            <H6>{discount.name}</H6>
+            <H6 color={"grey-850"}>{discount.name}</H6>
             <HStack space={4} style={{ flexWrap: "wrap" }}>
               {discount.productCategories.map(categoryKey => (
                 <CategoryTag key={categoryKey} category={categoryKey} />

diff --git a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx
@@ -6,7 +6,6 @@ import {
   IOStyles,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import { useHeaderHeight } from "@react-navigation/elements";
 import { StyleSheet, View } from "react-native";
 import { Discount } from "../../../../../../../definitions/cgn/merchants/Discount";
 import I18n from "../../../../../../i18n";
@@ -26,8 +25,6 @@ export const CgnDiscountHeader = ({
     ? styles.backgroundNewItem
     : styles.backgroundDefault;
 
-  const headerHeight = useHeaderHeight();
-
   const { isNew, discount, name, productCategories } = discountDetails;
 
   return (
@@ -36,7 +33,6 @@ export const CgnDiscountHeader = ({
       style={[
         IOStyles.horizontalContentPadding,
         {
-          paddingTop: headerHeight,
           backgroundColor: discountColor.backgroundColor,
           paddingBottom: 24
         }
@@ -63,7 +59,7 @@ export const CgnDiscountHeader = ({
             <VSpacer size={12} />
           </>
         )}
-        <H3>{name}</H3>
+        <H3 color="grey-850">{name}</H3>
         <VSpacer size={12} />
         <HStack space={4} style={{ flexWrap: "wrap" }}>
           {productCategories.map(categoryKey => (

diff --git a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx
@@ -196,6 +196,7 @@ const CgnDetailScreen = (props: Props): ReactElement => {
       }
       cardFooter={
         <H4
+          color="black"
           style={{
             textAlign: "center",
             marginHorizontal: 16,

diff --git a/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx b/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx
@@ -46,6 +46,7 @@ import {
 } from "../../store/reducers/merchants";
 import { cgnOtpDataSelector } from "../../store/reducers/otp";
 import { getCgnUserAgeRange } from "../../utils/dates";
+import FocusAwareStatusBar from "../../../../../components/ui/FocusAwareStatusBar";
 
 const gradientSafeAreaHeight: IOSpacingScale = 96;
 
@@ -203,7 +204,8 @@ const CgnDiscountDetailScreen = () => {
     },
     backgroundColor,
     canGoBack: true,
-    supportRequest: true
+    supportRequest: true,
+    variant: "neutral"
   });
 
   useEffect(() => {
@@ -256,6 +258,10 @@ const CgnDiscountDetailScreen = () => {
   if (discountDetails && merchantDetails) {
     return (
       <>
+        <FocusAwareStatusBar
+          backgroundColor={backgroundColor}
+          barStyle={"dark-content"}
+        />
         <Animated.ScrollView
           style={{ flexGrow: 1 }}
           onScroll={scrollHandler}

diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx
@@ -5,7 +5,8 @@ import {
   H6,
   IOToast,
   ListItemAction,
-  ListItemNav
+  ListItemNav,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { useNavigation } from "@react-navigation/native";
@@ -27,6 +28,7 @@ import { cgnCategoriesListSelector } from "../../store/reducers/categories";
 import { getCategorySpecs } from "../../utils/filters";
 
 export const CgnMerchantCategoriesListScreen = () => {
+  const theme = useIOTheme();
   const insets = useSafeAreaInsets();
   const dispatch = useIODispatch();
   const [isPullRefresh, setIsPullRefresh] = useState(false);
@@ -110,7 +112,7 @@ export const CgnMerchantCategoriesListScreen = () => {
                 }
               );
             }}
-            iconColor="grey-300"
+            iconColor={theme["icon-decorative"]}
             icon={s.icon}
           />
         )