@pagopa/io-app-design-system 1.12.0 → 1.13.1

package/lib/typescript/components/pictograms/svg/PictogramBleedNotification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictogramBleedNotification.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/PictogramBleedNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,QAAA,MAAM,0BAA0B,oCAI7B,iBAAiB,sBA+BnB,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/lib/typescript/components/pictograms/svg/PictogramNotification.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { SVGPictogramProps } from "../Pictogram";
+declare const PictogramNotification: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
+export default PictogramNotification;
+//# sourceMappingURL=PictogramNotification.d.ts.map

package/lib/typescript/components/pictograms/svg/PictogramNotification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictogramNotification.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/PictogramNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,QAAA,MAAM,qBAAqB,oCAIxB,iBAAiB,sBA+BnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/lib/typescript/core/IOStyles.d.ts

@@ -72,6 +72,11 @@ export declare const IOButtonLegacyStyles: {
         paddingHorizontal: number;
         elevation: number;
     };
+    buttonInner: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
     label: {
         alignSelf: "center";
     };
@@ -92,6 +97,11 @@ export declare const IOButtonStyles: {
         paddingHorizontal: number;
         elevation: number;
     };
+    buttonInner: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
     buttonLink: {
         flexDirection: "row";
         alignItems: "center";

package/lib/typescript/core/IOStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOStyles.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEpE;;GAEG;AAEH,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,WAAW,CAAC;IAE9B,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAM9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAeH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAGxD,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;CAiC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDzB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC;AAEH;;GAEG;AAEH,UAAU,sBAAsB;IAC9B,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,EAAE,sBAOpC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAW3B,CAAC;AAEH;;GAEG;AAEH,UAAU,2BAA2B;IACnC,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC;IAC1B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,iCAAiC;IACzC,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,2BAA2B,EAAE,2BAMzC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBASlC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,iCAI7C,CAAC;AAEJ,UAAU,+BAA+B;IACvC,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,iBAAiB,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,+BAA+B,EAAE,+BAQ3C,CAAC;AAEJ,eAAO,MAAM,yBAAyB;;;;;;;;;;;CAWpC,CAAC"}
+{"version":3,"file":"IOStyles.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEpE;;GAEG;AAEH,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,WAAW,CAAC;IAE9B,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAM9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAeH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAGxD,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;CAsC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC;AAEH;;GAEG;AAEH,UAAU,sBAAsB;IAC9B,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,EAAE,sBAOpC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAW3B,CAAC;AAEH;;GAEG;AAEH,UAAU,2BAA2B;IACnC,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC;IAC1B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,iCAAiC;IACzC,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,2BAA2B,EAAE,2BAMzC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBASlC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,iCAI7C,CAAC;AAEJ,UAAU,+BAA+B;IACvC,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,iBAAiB,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,+BAA+B,EAAE,+BAQ3C,CAAC;AAEJ,eAAO,MAAM,yBAAyB;;;;;;;;;;;CAWpC,CAAC"}

package/lib/typescript/core/IOTransitions.d.ts

@@ -0,0 +1,58 @@
+/**
+A custom enter transition designed for the average size
+inner content of a button or module (e.g. text).
+The scaling effect is slight.
+*/
+export declare const enterTransitionInnerContent: () => {
+    initialValues: {
+        opacity: number;
+        transform: {
+            scale: number;
+        }[];
+    };
+    animations: {
+        opacity: 1;
+        transform: {
+            scale: 1;
+        }[];
+    };
+};
+/**
+A custom enter transition designed for the small size
+inner content of a button or module (e.g. loading spinner).
+The scaling effect is accentuated.
+*/
+export declare const enterTransitionInnerContentSmall: () => {
+    initialValues: {
+        opacity: number;
+        transform: {
+            scale: number;
+        }[];
+    };
+    animations: {
+        opacity: 1;
+        transform: {
+            scale: 1;
+        }[];
+    };
+};
+/**
+A custom exit transition designed for both small
+and average size inner content of a button or module.
+The scaling effect is slight.
+*/
+export declare const exitTransitionInnerContent: () => {
+    initialValues: {
+        opacity: number;
+        transform: {
+            scale: number;
+        }[];
+    };
+    animations: {
+        opacity: 0;
+        transform: {
+            scale: 0.9;
+        }[];
+    };
+};
+//# sourceMappingURL=IOTransitions.d.ts.map

package/lib/typescript/core/IOTransitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IOTransitions.d.ts","sourceRoot":"","sources":["../../../src/core/IOTransitions.ts"],"names":[],"mappings":"AAEA;;;;EAIE;AACF,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;CAwBvC,CAAC;AAEF;;;;EAIE;AACF,eAAO,MAAM,gCAAgC;;;;;;;;;;;;;CAwB5C,CAAC;AAEF;;;;EAIE;AACF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;CAwBtC,CAAC"}

package/lib/typescript/core/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./IOColors";
 export * from "./IOAnimations";
+export * from "./IOTransitions";
 export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";

package/lib/typescript/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mCAAmC,CAAC"}

package/lib/typescript/stories/ButtonDS.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").MemoExoticComponent<({ color, label, fullWidth, disabled, icon, iconPosition, onPress, accessibilityLabel, accessibilityHint, testID }: import("../components").ButtonSolidProps) => import("react").JSX.Element>;
+    component: import("react").MemoExoticComponent<({ color, label, fullWidth, disabled, loading, icon, iconPosition, onPress, accessibilityLabel, accessibilityHint, testID }: import("../components").ButtonSolidProps) => import("react").JSX.Element>;
     parameters: {
         layout: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/buttons/ButtonSolid.tsx

@@ -9,6 +9,7 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { WithTestID } from "../../utils/types";
 import { HSpacer } from "../spacer/Spacer";
@@ -19,8 +20,12 @@ import {
   IOColors,
   IOScaleValues,
   IOSpringValues,
+  enterTransitionInnerContent,
+  enterTransitionInnerContentSmall,
+  exitTransitionInnerContent,
   useIOExperimentalDesign
 } from "../../core";
+import { LoadingSpinner } from "../loadingSpinner";
 
 type ButtonSolidColor = "primary" | "danger" | "contrast";
 
@@ -65,6 +70,10 @@ export type ButtonSolidProps = WithTestID<{
    * @default false
    */
   fullWidth?: boolean;
+  /**
+   * @default false
+   */
+  loading?: boolean;
   /**
    * @default false
    */
@@ -152,6 +161,7 @@ export const ButtonSolid = React.memo(
     label,
     fullWidth = false,
     disabled = false,
+    loading = false,
     icon,
     iconPosition = "start",
     onPress,
@@ -211,6 +221,19 @@ export const ButtonSolid = React.memo(
       isPressed.value = 0;
     }, [isPressed]);
 
+    const handleOnPress = useCallback(
+      (event: GestureResponderEvent) => {
+        /* Don't call `onPress` if the button is
+        in loading state */
+        if (loading) {
+          return;
+        }
+        ReactNativeHapticFeedback.trigger("impactLight");
+        onPress(event);
+      },
+      [loading, onPress]
+    );
+
     // Label & Icons colors
     const foregroundColor: IOColors = disabled
       ? colorMap[color]?.label?.disabled
@@ -218,22 +241,23 @@ export const ButtonSolid = React.memo(
 
     return (
       <Pressable
+        testID={testID}
+        accessible={true}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
+        accessibilityState={{ busy: loading }}
         accessibilityRole={"button"}
-        testID={testID}
-        onPress={onPress}
+        onPress={handleOnPress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
-        accessible={true}
         disabled={disabled}
         style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
       >
         <Animated.View
           style={[
             buttonStyles.button,
+            { overflow: "hidden" },
             isExperimental && fullWidth && { paddingHorizontal: 16 },
-            iconPosition === "end" && { flexDirection: "row-reverse" },
             buttonStyles.buttonSizeDefault,
             disabled
               ? isExperimental
@@ -241,30 +265,51 @@ export const ButtonSolid = React.memo(
                 : legacyStyles.backgroundDisabled
               : { backgroundColor: colorMap[color]?.default },
             /* Prevent Reanimated from overriding background colors
-                    if button is disabled */
+              if button is disabled */
             !disabled && pressedAnimationStyle
           ]}
         >
-          {icon && (
-            <>
-              {/* If 'iconPosition' is set to 'end', we use 
+          {loading && (
+            <Animated.View
+              style={buttonStyles.buttonInner}
+              entering={enterTransitionInnerContentSmall}
+              exiting={exitTransitionInnerContent}
+            >
+              <LoadingSpinner color={foregroundColor} />
+            </Animated.View>
+          )}
+
+          {!loading && (
+            <Animated.View
+              style={[
+                buttonStyles.buttonInner,
+                iconPosition === "end" && { flexDirection: "row-reverse" }
+              ]}
+              entering={enterTransitionInnerContent}
+              exiting={exitTransitionInnerContent}
+            >
+              {icon && (
+                <>
+                  {/* If 'iconPosition' is set to 'end', we use 
             reverse flex property to invert the position */}
-              <Icon name={icon} size={iconSize} color={foregroundColor} />
-              {/* Once we have support for 'gap' property,
+                  <Icon name={icon} size={iconSize} color={foregroundColor} />
+                  {/* Once we have support for 'gap' property,
             we can get rid of that spacer */}
-              <HSpacer size={8} />
-            </>
+                  <HSpacer size={8} />
+                </>
+              )}
+              <ButtonText
+                color={foregroundColor}
+                style={IOButtonStyles.label}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                allowFontScaling={isExperimental}
+                maxFontSizeMultiplier={1.3}
+              >
+                {label}
+              </ButtonText>
+            </Animated.View>
           )}
-          <ButtonText
-            color={foregroundColor}
-            style={IOButtonStyles.label}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            allowFontScaling={isExperimental}
-            maxFontSizeMultiplier={1.3}
-          >
-            {label}
-          </ButtonText>
         </Animated.View>
       </Pressable>
     );

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -371,7 +371,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
   accessibilityRole="button"
   accessibilityState={
     {
-      "busy": undefined,
+      "busy": false,
       "checked": undefined,
       "disabled": false,
       "expanded": undefined,
@@ -416,7 +416,9 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           "paddingHorizontal": 16,
           "textAlignVertical": "center",
         },
-        false,
+        {
+          "overflow": "hidden",
+        },
         false,
         {
           "height": 40,
@@ -435,40 +437,55 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       ]
     }
   >
-    <Text
-      allowFontScaling={false}
-      color="white"
-      defaultColor="white"
-      defaultWeight="Bold"
-      ellipsizeMode="tail"
-      font="TitilliumWeb"
-      fontStyle={
-        {
-          "fontSize": 16,
-        }
-      }
-      maxFontSizeMultiplier={1.3}
-      numberOfLines={1}
+    <View
+      entering={[Function]}
+      exiting={[Function]}
       style={
         [
           {
-            "alignSelf": "center",
-          },
-          {
-            "fontSize": 16,
-          },
-          {
-            "color": "#FFFFFF",
-            "fontFamily": "Titillium Web",
-            "fontStyle": "normal",
-            "fontWeight": "700",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
+          false,
         ]
       }
-      weight="Bold"
     >
-      label
-    </Text>
+      <Text
+        allowFontScaling={false}
+        color="white"
+        defaultColor="white"
+        defaultWeight="Bold"
+        ellipsizeMode="tail"
+        font="TitilliumWeb"
+        fontStyle={
+          {
+            "fontSize": 16,
+          }
+        }
+        maxFontSizeMultiplier={1.3}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "fontSize": 16,
+            },
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Titillium Web",
+              "fontStyle": "normal",
+              "fontWeight": "700",
+            },
+          ]
+        }
+        weight="Bold"
+      >
+        label
+      </Text>
+    </View>
   </View>
 </View>
 `;

package/src/components/index.tsx

@@ -10,6 +10,7 @@ export * from "./featureInfo";
 export * from "./icons";
 export * from "./listitems";
 export * from "./logos";
+export * from "./loadingSpinner";
 export * from "./modules";
 export * from "./banner";
 export * from "./pictograms";

package/src/components/layout/BlockButtons.tsx

@@ -133,7 +133,7 @@ export const BlockButtons = (props: Props) => {
   );
 
   return (
-    <View style={{ ...IOStyles.flex, ...IOStyles.row }}>
+    <View style={IOStyles.row}>
       {renderLeftButton()}
       {renderMidButton()}
       {renderRightButton()}

package/src/components/layout/FooterWithButtons.tsx

@@ -4,6 +4,10 @@ import { StyleSheet, View } from "react-native";
 import { IOStyles } from "../../core";
 import { BlockButtons, BlockButtonsProps } from "./BlockButtons";
 
+type Props = BlockButtonsProps & {
+  sticky?: boolean;
+};
+
 // TODO: Refactor with an unique component like `FooterTopShadow` after bonus vacanze
 const styles = StyleSheet.create({
   container: {
@@ -11,7 +15,9 @@ const styles = StyleSheet.create({
     width: "100%",
     // This Magic number is an heritage of the app code-base, this component should be removed in favor of `GradientBottomAction`
     marginTop: -50,
-    paddingTop: 50,
+    paddingTop: 50
+  },
+  sticky: {
     position: "absolute",
     bottom: 0
   }
@@ -21,15 +27,15 @@ const styles = StyleSheet.create({
  * Implements a component that show buttons as sticky footer
  * It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf  or the inlineOneThird style
  */
-export const FooterWithButtons = (props: BlockButtonsProps) => (
+export const FooterWithButtons = ({ sticky = false, ...rest }: Props) => (
   <View
-    style={styles.container}
-    accessible={props.accessible}
+    style={{ ...styles.container, ...(sticky ? styles.sticky : {}) }}
+    accessible={rest.accessible}
     pointerEvents={"box-none"}
     testID="FooterWithButtons"
   >
     <View style={IOStyles.footer}>
-      <BlockButtons {...props} />
+      <BlockButtons {...rest} />
     </View>
   </View>
 );

package/src/components/layout/HeaderFirstLevel.tsx

@@ -10,6 +10,8 @@ import { ActionProp } from "./common";
 
 type CommonProps = WithTestID<{
   title: string;
+  // This Prop will be removed once all the screens on the first level routing will be refactored
+  backgroundColor?: "light" | "dark";
 }>;
 
 interface Base extends CommonProps {
@@ -42,7 +44,8 @@ interface ThreeActions extends CommonProps {
 
 export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;
 
-const HEADER_BG_COLOR: IOColors = "white";
+const HEADER_BG_COLOR_LIGHT: IOColors = "white";
+const HEADER_BG_COLOR_DARK: IOColors = "bluegrey";
 
 const styles = StyleSheet.create({
   headerInner: {
@@ -59,6 +62,7 @@ export const HeaderFirstLevel = ({
   title,
   type,
   testID,
+  backgroundColor = "light",
   firstAction,
   secondAction,
   thirdAction
@@ -69,33 +73,50 @@ export const HeaderFirstLevel = ({
     <View
       style={{
         paddingTop: insets.top,
-        backgroundColor: IOColors[HEADER_BG_COLOR]
+        backgroundColor:
+          backgroundColor === "light"
+            ? IOColors[HEADER_BG_COLOR_LIGHT]
+            : IOColors[HEADER_BG_COLOR_DARK]
       }}
       accessibilityRole="header"
       testID={testID}
     >
       <View style={styles.headerInner}>
-        <H3 style={{ flexShrink: 1 }} numberOfLines={1}>
+        <H3
+          style={{ flexShrink: 1 }}
+          numberOfLines={1}
+          color={backgroundColor === "dark" ? "white" : undefined}
+        >
           {title}
         </H3>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
-          {type !== "base" && <IconButton {...firstAction} color="neutral" />}
-          {(type === "twoActions" || type === "threeActions") && (
+          {type === "threeActions" && (
             <>
+              <IconButton
+                {...thirdAction}
+                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+              />
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
-              +.9+
               <HSpacer size={16} />
-              <IconButton {...secondAction} color="neutral" />
             </>
           )}
-          {type === "threeActions" && (
+          {(type === "twoActions" || type === "threeActions") && (
             <>
+              <IconButton
+                {...secondAction}
+                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+              />
               {/* Same as above */}
               <HSpacer size={16} />
-              <IconButton {...thirdAction} color="neutral" />
             </>
           )}
+          {type !== "base" && (
+            <IconButton
+              {...firstAction}
+              color={backgroundColor === "dark" ? "contrast" : "neutral"}
+            />
+          )}
         </View>
       </View>
     </View>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -179,25 +179,25 @@ export const HeaderSecondLevel = ({
           {title}
         </Animated.Text>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
-          {type !== "base" ? (
-            <IconButton {...firstAction} color="neutral" />
-          ) : (
-            <HSpacer size={iconBtnSizeSmall as IOSpacer} />
+          {type === "threeActions" && (
+            <>
+              <IconButton {...thirdAction} color="neutral" />
+              {/* Same as above */}
+              <HSpacer size={16} />
+            </>
           )}
           {(type === "twoActions" || type === "threeActions") && (
             <>
+              <IconButton {...secondAction} color="neutral" />
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
               <HSpacer size={16} />
-              <IconButton {...secondAction} color="neutral" />
             </>
           )}
-          {type === "threeActions" && (
-            <>
-              {/* Same as above */}
-              <HSpacer size={16} />
-              <IconButton {...thirdAction} color="neutral" />
-            </>
+          {type !== "base" ? (
+            <IconButton {...firstAction} color="neutral" />
+          ) : (
+            <HSpacer size={iconBtnSizeSmall as IOSpacer} />
           )}
         </View>
       </Animated.View>