@pagopa/io-app-design-system 1.17.1 → 1.18.0

package/src/components/codeInput/CodeInput.tsx

@@ -1,15 +1,10 @@
 import React, { useEffect, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withSequence,
-  withTiming
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { IOColors, IOStyles } from "../../core";
 import { triggerHaptic } from "../../functions";
 import { HSpacer } from "../spacer";
+import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
 
 type CodeInputProps = {
   value: string;
@@ -56,12 +51,7 @@ export const CodeInput = ({
 }: CodeInputProps) => {
   const [status, setStatus] = React.useState<"default" | "error">("default");
 
-  const translate = useSharedValue(0);
-  const shakeOffset: number = 8;
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translate.value }]
-  }));
+  const { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
 
   const fillColor = useMemo(
     () =>
@@ -82,25 +72,7 @@ export const CodeInput = ({
         triggerHaptic("notificationError");
 
         // eslint-disable-next-line functional/immutable-data
-        translate.value = withSequence(
-          withTiming(shakeOffset, {
-            duration: 75,
-            easing: Easing.inOut(Easing.cubic)
-          }),
-          withTiming(-shakeOffset, {
-            duration: 75,
-            easing: Easing.inOut(Easing.cubic)
-          }),
-          withTiming(shakeOffset / 2, {
-            duration: 75,
-            easing: Easing.inOut(Easing.cubic)
-          }),
-          withTiming(-shakeOffset / 2, {
-            duration: 75,
-            easing: Easing.inOut(Easing.cubic)
-          }),
-          withTiming(0, { duration: 75, easing: Easing.inOut(Easing.cubic) })
-        );
+        translate.value = shakeAnimation();
 
         const timer = setTimeout(() => {
           setStatus("default");
@@ -110,7 +82,7 @@ export const CodeInput = ({
       }
     }
     return;
-  }, [value, onValidate, length, onValueChange, translate]);
+  }, [value, onValidate, length, onValueChange, translate, shakeAnimation]);
 
   return (
     <Animated.View style={[IOStyles.row, styles.wrapper, animatedStyle]}>

package/src/components/common/ScaleInOutAnimation.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable functional/immutable-data */
+import React from "react";
+import { ViewStyle } from "react-native";
+import Animated, {
+  LayoutAnimation,
+  WithSpringConfig,
+  withDelay,
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+
+type Props = {
+  visible?: boolean;
+  springConfig?: WithSpringConfig;
+  delayOut?: number;
+  delayIn?: number;
+  children: React.ReactNode;
+  style?: ViewStyle;
+};
+
+const ScaleInOutAnimation = ({
+  visible = true,
+  springConfig = { damping: 500, mass: 3, stiffness: 1000 },
+  delayOut = 0,
+  delayIn = 0,
+  children,
+  style
+}: Props) => {
+  const enteringAnimation = (): LayoutAnimation => {
+    "worklet";
+    return {
+      initialValues: {
+        transform: [{ scale: 0 }]
+      },
+      animations: {
+        transform: [{ scale: withDelay(delayIn, withSpring(1, springConfig)) }]
+      }
+    };
+  };
+
+  const exitingAnimation = (): LayoutAnimation => {
+    "worklet";
+    return {
+      initialValues: {
+        transform: [{ scale: 1 }]
+      },
+      animations: {
+        transform: [{ scale: withDelay(delayOut, withTiming(0)) }]
+      }
+    };
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      style={style}
+      entering={enteringAnimation}
+      exiting={exitingAnimation}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
+export { ScaleInOutAnimation };

package/src/components/icons/Icon.tsx

@@ -5,10 +5,12 @@ import { IOColors } from "../../core/IOColors";
 /* Icons */
 import IconAbacus from "./svg/IconAbacus";
 import IconAdd from "./svg/IconAdd";
+import IconAddSmall from "./svg/IconAddSmall";
 import IconAgreement from "./svg/IconAgreement";
 import IconAmount from "./svg/IconAmount";
 import IconAnalytics from "./svg/IconAnalytics";
 import IconArchive from "./svg/IconArchive";
+import IconArchiveFilled from "./svg/IconArchiveFilled";
 import IconArrowBottom from "./svg/IconArrowBottom";
 import IconArrowLeft from "./svg/IconArrowLeft";
 import IconArrowRight from "./svg/IconArrowRight";
@@ -37,6 +39,7 @@ import IconCategSustainability from "./svg/IconCategSustainability";
 import IconCategTelco from "./svg/IconCategTelco";
 import IconCategTravel from "./svg/IconCategTravel";
 import IconCategWellness from "./svg/IconCategWellness";
+import IconChange from "./svg/IconChange";
 import IconChat from "./svg/IconChat";
 import IconCheckTick from "./svg/IconCheckTick";
 import IconCheckTickBig from "./svg/IconCheckTickBig";
@@ -49,35 +52,63 @@ import IconCie from "./svg/IconCie";
 import IconCloseLarge from "./svg/IconCloseLarge";
 import IconCloseMedium from "./svg/IconCloseMedium";
 import IconCloseSmall from "./svg/IconCloseSmall";
+import IconCode from "./svg/IconCode";
 import IconCoggle from "./svg/IconCoggle";
+import IconCompare from "./svg/IconCompare";
+import IconContactless from "./svg/IconContactless";
 import IconCopy from "./svg/IconCopy";
 import IconCreditCard from "./svg/IconCreditCard";
+import IconCreditCardOff from "./svg/IconCreditCardOff";
 import IconDevice from "./svg/IconDevice";
+import IconDeviceVibration from "./svg/IconDeviceVibration";
+import IconDisabilityCard from "./svg/IconDisabilityCard";
+import IconDocGiacenza from "./svg/IconDocGiacenza";
+import IconDocPaymentCode from "./svg/IconDocPaymentCode";
+import IconDocPaymentTitle from "./svg/IconDocPaymentTitle";
 import IconDocument from "./svg/IconDocument";
 import IconDocumentAttachment from "./svg/IconDocumentAttachment";
 import IconDocumentAttachmentPDF from "./svg/IconDocumentAttachmentPDF";
 import IconDocumentSign from "./svg/IconDocumentSign";
 import IconDotMenu from "./svg/IconDotMenu";
+import IconDriverLicense from "./svg/IconDriverLicense";
 import IconEdit from "./svg/IconEdit";
 import IconEmail from "./svg/IconEmail";
 import IconEmailFill from "./svg/IconEmailFill";
 import IconEmojiHappy from "./svg/IconEmojiHappy";
 import IconEmojiSad from "./svg/IconEmojiSad";
+import IconEntityCode from "./svg/IconEntityCode";
 import IconErrorFilled from "./svg/IconErrorFilled";
 import IconExternalLink from "./svg/IconExternalLink";
+import IconExternalLinkSmall from "./svg/IconExternalLinkSmall";
 import IconEyeHide from "./svg/IconEyeHide";
 import IconEyeShow from "./svg/IconEyeShow";
+import IconFamilySharing from "./svg/IconFamilySharing";
+import IconFilterAndroid from "./svg/IconFilterAndroid";
+import IconFilterOffiOS from "./svg/IconFilterOffiOS";
+import IconFilterOniOS from "./svg/IconFilterOniOS";
+import IconFingerprint from "./svg/IconFingerprint";
 import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual";
+import IconFolder from "./svg/IconFolder";
 import IconFornitori from "./svg/IconFornitori";
+import IconForward from "./svg/IconForward";
 import IconGallery from "./svg/IconGallery";
+import IconHealthCard from "./svg/IconHealthCard";
+import IconHearthEmpty from "./svg/IconHearthEmpty";
+import IconHearthFilled from "./svg/IconHearthFilled";
 import IconHistory from "./svg/IconHistory";
 import IconHome from "./svg/IconHome";
 import IconHomeFill from "./svg/IconHomeFill";
 import IconHourglass from "./svg/IconHourglass";
+import IconInboxEmpty from "./svg/IconInboxEmpty";
+import IconInboxFilled from "./svg/IconInboxFilled";
 import IconInfo from "./svg/IconInfo";
 import IconInfoFilled from "./svg/IconInfoFilled";
 import IconInitiatives from "./svg/IconInitiatives";
 import IconInstitution from "./svg/IconInstitution";
+import IconInstruction from "./svg/IconInstruction";
+import IconKey from "./svg/IconKey";
+import IconKeyboard from "./svg/IconKeyboard";
+import IconKeyboardDown from "./svg/IconKeyboardDown";
 import IconLadybug from "./svg/IconLadybug";
 import IconLegalValue from "./svg/IconLegalValue";
 import IconLight from "./svg/IconLight";
@@ -91,6 +122,7 @@ import IconLockOn from "./svg/IconLockOn";
 import IconLogin from "./svg/IconLogin";
 import IconLogout from "./svg/IconLogout";
 import IconMagicWand from "./svg/IconMagicWand";
+import IconMapPin from "./svg/IconMapPin";
 import IconMerchant from "./svg/IconMerchant";
 import IconMessage from "./svg/IconMessage";
 import IconMessageLegal from "./svg/IconMessageLegal";
@@ -103,14 +135,19 @@ import IconNavServices from "./svg/IconNavServices";
 import IconNavServicesFocused from "./svg/IconNavServicesFocused";
 import IconNavWallet from "./svg/IconNavWallet";
 import IconNavWalletFocused from "./svg/IconNavWalletFocused";
+import IconNotes from "./svg/IconNotes";
 import IconNotice from "./svg/IconNotice";
 import IconNoticeFilled from "./svg/IconNoticeFilled";
+import IconNoticePlain from "./svg/IconNoticePlain";
+import IconNotification from "./svg/IconNotification";
 import IconOk from "./svg/IconOk";
+import IconOption from "./svg/IconOption";
 import IconPEC from "./svg/IconPEC";
 import IconPSP from "./svg/IconPSP";
 import IconPhone from "./svg/IconPhone";
 import IconPinOff from "./svg/IconPinOff";
 import IconPinOn from "./svg/IconPinOn";
+import IconPrint from "./svg/IconPrint";
 import IconProductIOApp from "./svg/IconProductIOApp";
 import IconProductIOAppBlueBg from "./svg/IconProductIOAppBlueBg";
 import IconProductPagoPA from "./svg/IconProductPagoPA";
@@ -119,6 +156,9 @@ import IconProfileAlt from "./svg/IconProfileAlt";
 import IconProfileFilled from "./svg/IconProfileFilled";
 import IconQrCode from "./svg/IconQrCode";
 import IconQuestion from "./svg/IconQuestion";
+import IconRead from "./svg/IconRead";
+import IconReceiptOff from "./svg/IconReceiptOff";
+import IconReceiptOn from "./svg/IconReceiptOn";
 import IconRefund from "./svg/IconRefund";
 import IconReload from "./svg/IconReload";
 import IconSave from "./svg/IconSave";
@@ -127,6 +167,8 @@ import IconSecurity from "./svg/IconSecurity";
 import IconSelfCertification from "./svg/IconSelfCertification";
 import IconShareAndroid from "./svg/IconShareAndroid";
 import IconShareiOs from "./svg/IconShareiOs";
+import IconSignal from "./svg/IconSignal";
+import IconSparkles from "./svg/IconSparkles";
 import IconSpid from "./svg/IconSpid";
 import IconStarEmpty from "./svg/IconStarEmpty";
 import IconStarFilled from "./svg/IconStarFilled";
@@ -134,63 +176,22 @@ import IconSuccess from "./svg/IconSuccess";
 import IconSwitchOff from "./svg/IconSwitchOff";
 import IconSystemAppsAndroid from "./svg/IconSystemAppsAndroid";
 import IconSystemNotificationsInstructions from "./svg/IconSystemNotificationsInstructions";
+import IconSystemPermissionsAndroid from "./svg/IconSystemPermissionsAndroid";
 import IconSystemSettingsAndroid from "./svg/IconSystemSettingsAndroid";
 import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS";
 import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions";
 import IconTag from "./svg/IconTag";
-import IconTransactionsBoxed from "./svg/IconTransactionsBoxed";
+import IconTerms from "./svg/IconTerms";
+import IconTouch from "./svg/IconTouch";
 import IconTransactions from "./svg/IconTransactions";
+import IconTransactionsBoxed from "./svg/IconTransactionsBoxed";
 import IconTrashcan from "./svg/IconTrashcan";
 import IconWarningFilled from "./svg/IconWarningFilled";
 import IconWebsite from "./svg/IconWebsite";
-import IconOption from "./svg/IconOption";
-import IconKey from "./svg/IconKey";
-import IconNotification from "./svg/IconNotification";
-import IconChange from "./svg/IconChange";
 import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
-import IconKeyboard from "./svg/IconKeyboard";
-import IconContactless from "./svg/IconContactless";
-import IconDisabilityCard from "./svg/IconDisabilityCard";
-import IconDriverLicense from "./svg/IconDriverLicense";
-import IconHealthCard from "./svg/IconHealthCard";
-import IconDocPaymentCode from "./svg/IconDocPaymentCode";
-import IconNotes from "./svg/IconNotes";
-import IconEntityCode from "./svg/IconEntityCode";
-import IconFolder from "./svg/IconFolder";
-import IconReceiptOn from "./svg/IconReceiptOn";
-import IconFingerprint from "./svg/IconFingerprint";
-import IconAddSmall from "./svg/IconAddSmall";
-import IconArchiveFilled from "./svg/IconArchiveFilled";
-import IconCode from "./svg/IconCode";
-import IconCompare from "./svg/IconCompare";
-import IconCreditCardOff from "./svg/IconCreditCardOff";
-import IconDeviceVibration from "./svg/IconDeviceVibration";
-import IconDocPaymentTitle from "./svg/IconDocPaymentTitle";
-import IconDocGiacenza from "./svg/IconDocGiacenza";
-import IconExternalLinkSmall from "./svg/IconExternalLinkSmall";
-import IconFamilySharing from "./svg/IconFamilySharing";
-import IconFilterOniOS from "./svg/IconFilterOniOS";
-import IconFilterOffiOS from "./svg/IconFilterOffiOS";
-import IconFilterAndroid from "./svg/IconFilterAndroid";
-import IconForward from "./svg/IconForward";
-import IconHearthEmpty from "./svg/IconHearthEmpty";
-import IconHearthFilled from "./svg/IconHearthFilled";
-import IconInboxEmpty from "./svg/IconInboxEmpty";
-import IconInboxFilled from "./svg/IconInboxFilled";
-import IconInstruction from "./svg/IconInstruction";
-import IconTerms from "./svg/IconTerms";
-import IconKeyboardDown from "./svg/IconKeyboardDown";
-import IconMapPin from "./svg/IconMapPin";
-import IconNoticePlain from "./svg/IconNoticePlain";
-import IconPrint from "./svg/IconPrint";
-import IconRead from "./svg/IconRead";
-import IconReceiptOff from "./svg/IconReceiptOff";
-import IconSignal from "./svg/IconSignal";
-import IconTouch from "./svg/IconTouch";
-import IconSparkles from "./svg/IconSparkles";
 
 export const IOIcons = {
   spid: IconSpid,
@@ -381,7 +382,8 @@ export const IOIcons = {
   systemSettingsiOS: IconSystemSettingsiOS,
   systemToggleInstructions: IconSystemToggleInstructions,
   systemAppsAndroid: IconSystemAppsAndroid,
-  systemNotificationsInstructions: IconSystemNotificationsInstructions
+  systemNotificationsInstructions: IconSystemNotificationsInstructions,
+  systemPermissionsAndroid: IconSystemPermissionsAndroid
 } as const;
 
 export type IOIcons = keyof typeof IOIcons;
@@ -649,7 +651,8 @@ const {
   systemSettingsiOS,
   systemToggleInstructions,
   systemAppsAndroid,
-  systemNotificationsInstructions
+  systemNotificationsInstructions,
+  systemPermissionsAndroid
 } = IOIcons;
 
 export const IOSystemIcons = {
@@ -657,7 +660,8 @@ export const IOSystemIcons = {
   systemSettingsiOS,
   systemToggleInstructions,
   systemAppsAndroid,
-  systemNotificationsInstructions
+  systemNotificationsInstructions,
+  systemPermissionsAndroid
 } as const;
 
 export type IOSystemIcons = keyof typeof IOSystemIcons;

package/src/components/icons/svg/IconSystemPermissionsAndroid.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Path, Rect, Svg } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconSystemPermissionsAndroid = ({
+  size,
+  style,
+  ...props
+}: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Rect width={size} height={size} fill="#636B82" rx="8" />
+    <Path
+      d="M12 15.75C12.825 15.75 13.5 15.075 13.5 14.25C13.5 13.425 12.825 12.75 12 12.75C11.175 12.75 10.5 13.425 10.5 14.25C10.5 15.075 11.175 15.75 12 15.75ZM16.5 9H15.75V7.5C15.75 5.43 14.07 3.75 12 3.75C9.93 3.75 8.25 5.43 8.25 7.5H9.675C9.675 6.2175 10.7175 5.175 12 5.175C13.2825 5.175 14.325 6.2175 14.325 7.5V9H7.5C6.675 9 6 9.675 6 10.5V18C6 18.825 6.675 19.5 7.5 19.5H16.5C17.325 19.5 18 18.825 18 18V10.5C18 9.675 17.325 9 16.5 9ZM16.5 18H7.5V10.5H16.5V18Z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+);
+
+export default IconSystemPermissionsAndroid;

package/src/components/index.tsx

@@ -16,6 +16,7 @@ export * from "./logos";
 export * from "./loadingSpinner";
 export * from "./modules";
 export * from "./numberpad";
+export * from "./otpInput";
 export * from "./pictograms";
 export * from "./radio";
 export * from "./spacer";

package/src/components/layout/ForceScrollDownView.tsx

@@ -0,0 +1,210 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet
+} from "react-native";
+import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
+import { IOSpringValues, IOVisualCostants } from "../../core";
+import { IconButtonSolid } from "../buttons";
+
+type ForceScrollDownViewProps = {
+  /**
+   * The content to display inside the scroll view.
+   */
+  children: React.ReactNode;
+  /**
+   * The distance from the bottom of the scrollable content at which the "scroll to bottom" button
+   * should become hidden. Defaults to 100.
+   */
+  threshold?: number;
+  /**
+   * A callback that will be called whenever the scroll view crosses the threshold. The callback
+   * is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
+   */
+  onThresholdCrossed?: (crossed: boolean) => void;
+} & Pick<
+  ScrollViewProps,
+  "style" | "contentContainerStyle" | "scrollEnabled" | "testID"
+>;
+
+/**
+ * A React Native component that displays a scroll view with a button that scrolls to the bottom of the content
+ * when pressed. The button is hidden when the scroll view reaches a certain threshold from the bottom, which is
+ * configurable by the `threshold` prop. The button, and the scrolling, can also be disabled by setting the
+ * `scrollEnabled` prop to `false`.
+ */
+const ForceScrollDownView = ({
+  children,
+  threshold = 100,
+  style,
+  contentContainerStyle,
+  scrollEnabled = true,
+  onThresholdCrossed
+}: ForceScrollDownViewProps) => {
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  /**
+   * The height of the scroll view, used to determine whether or not the scrollable content fits inside
+   * the scroll view and whether the "scroll to bottom" button should be displayed.
+   */
+  const [scrollViewHeight, setScrollViewHeight] = useState<number>();
+
+  /**
+   * The height of the scrollable content, used to determine whether or not the "scroll to bottom" button
+   * should be displayed.
+   */
+  const [contentHeight, setContentHeight] = useState<number>();
+
+  /**
+   * Whether or not the scroll view has crossed the threshold from the bottom.
+   */
+  const [isThresholdCrossed, setThresholdCrossed] = useState(false);
+
+  /**
+   * Whether or not the "scroll to bottom" button should be visible. This is controlled by the threshold
+   * and the current scroll position.
+   */
+  const [isButtonVisible, setButtonVisible] = useState(true);
+
+  /**
+   * A callback that is called whenever the scroll view is scrolled. It checks whether or not the
+   * scroll view has crossed the threshold from the bottom and updates the state accordingly.
+   * The callback is designed to updatr button visibility only when crossing the threshold.
+   */
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { layoutMeasurement, contentOffset, contentSize } =
+        event.nativeEvent;
+
+      const thresholdCrossed =
+        layoutMeasurement.height + contentOffset.y >=
+        contentSize.height - threshold;
+
+      setThresholdCrossed(previousState => {
+        if (!previousState && thresholdCrossed) {
+          setButtonVisible(false);
+        }
+        if (previousState && !thresholdCrossed) {
+          setButtonVisible(true);
+        }
+        return thresholdCrossed;
+      });
+    },
+    [threshold]
+  );
+
+  /**
+   * A side effect that calls the `onThresholdCrossed` callback whenever the value of `isThresholdCrossed` changes.
+   */
+  useEffect(() => {
+    onThresholdCrossed?.(isThresholdCrossed);
+  }, [onThresholdCrossed, isThresholdCrossed]);
+
+  /**
+   * A callback that is called whenever the size of the scrollable content changes. It updates the
+   * state with the new content height.
+   */
+  const handleContentSizeChange = useCallback(
+    (_contentWidth: number, contentHeight: number) => {
+      setContentHeight(contentHeight);
+    },
+    []
+  );
+
+  /**
+   * A callback that is called whenever the size of the scroll view changes. It updates the state
+   * with the new scroll view height.
+   */
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    setScrollViewHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  /**
+   * A callback that is called when the "scroll to bottom" button is pressed. It scrolls the
+   * scroll view to the bottom and hides the button.
+   */
+  const handleScrollDownPress = useCallback(() => {
+    setButtonVisible(false);
+    scrollViewRef.current?.scrollToEnd();
+  }, [scrollViewRef]);
+
+  /**
+   * Whether or not the "scroll to bottom" button needs to be displayed. It is only displayed
+   * when the scrollable content cannot fit inside the scroll view and the button is enabled
+   * (`scrollEnabled` is `true`).
+   */
+  const needsScroll = useMemo(
+    () =>
+      scrollViewHeight != null &&
+      contentHeight != null &&
+      scrollViewHeight < contentHeight,
+    [scrollViewHeight, contentHeight]
+  );
+
+  /**
+   * Whether or not to render the "scroll to bottom" button. It is only rendered when the scroll view
+   * is enabled, needs to be scrolled, and the button is visible (`isButtonVisible` is `true`).
+   */
+  const shouldRenderScrollButton =
+    scrollEnabled && needsScroll && isButtonVisible;
+
+  /**
+   * The "scroll to bottom" button component. It is wrapped in a reanimated view and has enter and exit
+   * animations applied to it.
+   */
+  const scrollDownButton = (
+    <ScaleInOutAnimation
+      springConfig={IOSpringValues.button}
+      style={styles.scrollDownButton}
+      visible={shouldRenderScrollButton}
+    >
+      <IconButtonSolid
+        testID={"ScrollDownButton"}
+        accessibilityLabel="Scroll to bottom"
+        icon="arrowBottom"
+        onPress={handleScrollDownPress}
+      />
+    </ScaleInOutAnimation>
+  );
+
+  return (
+    <>
+      <ScrollView
+        testID={"ScrollView"}
+        ref={scrollViewRef}
+        scrollIndicatorInsets={{ right: 1 }}
+        scrollEnabled={scrollEnabled}
+        onScroll={handleScroll}
+        scrollEventThrottle={400}
+        style={style}
+        onLayout={handleLayout}
+        onContentSizeChange={handleContentSizeChange}
+        contentContainerStyle={contentContainerStyle}
+      >
+        {children}
+      </ScrollView>
+      {scrollDownButton}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollDownButton: {
+    position: "absolute",
+    zIndex: 10,
+    right: IOVisualCostants.scrollDownButtonRight,
+    bottom: IOVisualCostants.scrollDownButtonBottom
+  }
+});
+
+export { ForceScrollDownView };

package/src/components/layout/HeaderFirstLevel.tsx

@@ -85,7 +85,7 @@ export const HeaderFirstLevel = ({
         <H3
           style={{ flexShrink: 1 }}
           numberOfLines={1}
-          color={backgroundColor === "dark" ? "white" : undefined}
+          color={backgroundColor === "dark" ? "white" : "black"}
         >
           {title}
         </H3>
@@ -94,7 +94,7 @@ export const HeaderFirstLevel = ({
             <>
               <IconButton
                 {...thirdAction}
-                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+                color={backgroundColor === "dark" ? "contrast" : "primary"}
               />
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
@@ -105,7 +105,7 @@ export const HeaderFirstLevel = ({
             <>
               <IconButton
                 {...secondAction}
-                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+                color={backgroundColor === "dark" ? "contrast" : "primary"}
               />
               {/* Same as above */}
               <HSpacer size={16} />
@@ -114,7 +114,7 @@ export const HeaderFirstLevel = ({
           {type !== "base" && (
             <IconButton
               {...firstAction}
-              color={backgroundColor === "dark" ? "contrast" : "neutral"}
+              color={backgroundColor === "dark" ? "contrast" : "primary"}
             />
           )}
         </View>