fix: [PE-959,PE-960,PE-961,PE-962] Remove transparent header in CGN (…

…#6709)

## Short description
This pull request enhances the accessibility of the header in the `CGN`.
The implementation follows the same approach used in PR
#6675


## List of changes proposed in this pull request
- Replace the `transparent` prop with `backgroundColor` 
- Removed the redundant `discountColor` variable and used the new
`backgroundColor` variable directly in the component

## How to test
- Using a real device 📱, go in each of these screens:
`CGN_CATEGORIES`/`CGN_MERCHANTS_LIST_BY_CATEGORY`/`CGN_MERCHANTS_DETAIL`/`CGN_MERCHANTS_DISCOUNT_SCREEN`
- Turn on the TalkBack accessibility tool
- Ensure the header action are now reachable

---------

Co-authored-by: Alessandro <[email protected]>

ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx

@@ -191,13 +191,17 @@ const CgnDiscountDetailScreen = () => {
     }
   };
 
+  const { backgroundColor } = discountDetails?.isNew
+    ? styles.backgroundNewItem
+    : styles.backgroundDefault;
+
   useHeaderSecondLevel({
     title: discountDetails?.name || "",
     scrollValues: {
       contentOffsetY: translationY,
       triggerOffset: titleHeight
     },
-    transparent: true,
+    backgroundColor,
     canGoBack: true,
     supportRequest: true
   });
@@ -249,10 +253,6 @@ const CgnDiscountDetailScreen = () => {
     );
   };
 
-  const discountColor = discountDetails?.isNew
-    ? styles.backgroundNewItem
-    : styles.backgroundDefault;
-
   if (discountDetails && merchantDetails) {
     return (
       <>
@@ -272,7 +272,7 @@ const CgnDiscountDetailScreen = () => {
               style={{
                 position: "absolute",
                 height: 1000,
-                backgroundColor: discountColor.backgroundColor,
+                backgroundColor,
                 top: -1000,
                 right: 0,
                 left: 0

ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx

@@ -152,7 +152,7 @@ const CgnMerchantsListByCategory = () => {
       contentOffsetY: translationY,
       triggerOffset: titleHeight
     },
-    transparent: true,
+    backgroundColor: categorySpecs?.colors,
     supportRequest: true,
     secondAction: {
       icon: "search",
@@ -195,14 +195,12 @@ const CgnMerchantsListByCategory = () => {
           style={[
             IOStyles.horizontalContentPadding,
             {
-              paddingTop: insets.top,
               backgroundColor: categorySpecs.colors,
               paddingBottom: 24
             }
           ]}
         >
-          <VSpacer size={48} />
-          <VSpacer size={32} />
+          <VSpacer size={24} />
           <View style={[IOStyles.row, { alignItems: "center" }]}>
             <View
               style={{