diff --git a/ts/components/CalendarsListContainer.tsx b/ts/components/CalendarsListContainer.tsx index 3beb2f99a9f..4ce306c152d 100644 --- a/ts/components/CalendarsListContainer.tsx +++ b/ts/components/CalendarsListContainer.tsx @@ -2,7 +2,6 @@ import * as pot from "@pagopa/ts-commons/lib/pot"; import React, { memo, useCallback, useEffect, useState } from "react"; import RNCalendarEvents, { Calendar } from "react-native-calendar-events"; import { - ContentWrapper, ListItemHeader, RadioGroup, VSpacer, @@ -132,25 +131,21 @@ const CalendarsListContainer = ({ }, [fetchCalendars]); return ( - - {pot.isSome(calendarsByAccount) && - calendarsByAccount.value.map((section, index) => ( - - - - type="radioListItem" - key={`radio_group_${index}`} - items={mapData(section.data)} - selectedItem={selectedCalendar?.id} - onPress={onPressRadio} - /> - {/* not show the end spacer if the element is the last */} - {index < calendarsByAccount.value.length - 1 && ( - - )} - - ))} - + pot.isSome(calendarsByAccount) && + calendarsByAccount.value.map((section, index) => ( + + + + type="radioListItem" + key={`radio_group_${index}`} + items={mapData(section.data)} + selectedItem={selectedCalendar?.id} + onPress={onPressRadio} + /> + {/* not show the end spacer if the element is the last */} + {index < calendarsByAccount.value.length - 1 && } + + )) ); }; diff --git a/ts/components/LoadingSpinnerOverlay.tsx b/ts/components/LoadingSpinnerOverlay.tsx index 83e20815a18..f90cb318c3e 100644 --- a/ts/components/LoadingSpinnerOverlay.tsx +++ b/ts/components/LoadingSpinnerOverlay.tsx @@ -40,7 +40,10 @@ const LoadingSpinnerOverlay = ({ return ( = ({ /> {shouldRenderFooter && onAcceptTos && ( - { return ( - + { )} -

{contentTitle}

-
+
{children}
diff --git a/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap index 56fcbeed199..d681155d455 100644 --- a/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap +++ b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap @@ -343,11 +343,15 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea } } style={ - { - "backgroundColor": "#FFFFFF", - "flex": 1, - "justifyContent": "center", - } + [ + { + "flex": 1, + "justifyContent": "center", + }, + { + "backgroundColor": "#FFFFFF", + }, + ] } > @@ -549,13 +556,6 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea
- @@ -1148,13 +1155,6 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea
- @@ -1747,13 +1754,6 @@ exports[`LoadingScreenContent should match the snapshot with title, no children,
- @@ -2343,13 +2350,6 @@ exports[`LoadingScreenContent should match the snapshot with title, no children,
- ( - +const BoxedRefreshIndicator = ({ action, caption }: Props) => ( + {caption ? caption : null} {action ? action : null} diff --git a/ts/components/ui/IOScrollViewWithLargeHeader.tsx b/ts/components/ui/IOScrollViewWithLargeHeader.tsx index dd1ce6d2075..ab9437beca7 100644 --- a/ts/components/ui/IOScrollViewWithLargeHeader.tsx +++ b/ts/components/ui/IOScrollViewWithLargeHeader.tsx @@ -40,6 +40,7 @@ type Props = WithTestID< ignoreSafeAreaMargin?: ComponentProps< typeof HeaderSecondLevel >["ignoreSafeAreaMargin"]; + includeContentMargins?: boolean; headerActionsProp?: HeaderActionsProps; canGoback?: boolean; excludeEndContentMargin?: boolean; @@ -64,6 +65,7 @@ export const IOScrollViewWithLargeHeader = forwardRef( contextualHelpMarkdown, faqCategories, ignoreSafeAreaMargin = false, + includeContentMargins = false, headerActionsProp = {}, excludeEndContentMargin, testID @@ -144,7 +146,11 @@ export const IOScrollViewWithLargeHeader = forwardRef( {children && ( <> - {children} + {includeContentMargins ? ( + {children} + ) : ( + children + )} )} diff --git a/ts/components/ui/__test__/BoxedRefreshIndicator.test.tsx b/ts/components/ui/__test__/BoxedRefreshIndicator.test.tsx index 3245dc4e74d..4280076184c 100644 --- a/ts/components/ui/__test__/BoxedRefreshIndicator.test.tsx +++ b/ts/components/ui/__test__/BoxedRefreshIndicator.test.tsx @@ -17,16 +17,14 @@ describe("BoxedRefreshIndicator", () => { it("Should match all-properties snapshot", () => { const action = This is the action; const caption = This is the caption; - const white = true; - const component = renderComponent(action, caption, white); + const component = renderComponent(action, caption); expect(component.toJSON()).toMatchSnapshot(); }); }); const renderComponent = ( action?: React.ReactNode, - caption?: React.ReactNode, - white?: boolean + caption?: React.ReactNode ) => { const initialState = appReducer(undefined, applicationChangeState("active")); const dsState = appReducer( @@ -37,7 +35,7 @@ const renderComponent = ( const store: ReturnType = mockStore(dsState); return render( - + ); }; diff --git a/ts/components/ui/__test__/__snapshots__/BoxedRefreshIndicator.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/BoxedRefreshIndicator.test.tsx.snap index 352e4530e95..f559fcfe454 100644 --- a/ts/components/ui/__test__/__snapshots__/BoxedRefreshIndicator.test.tsx.snap +++ b/ts/components/ui/__test__/__snapshots__/BoxedRefreshIndicator.test.tsx.snap @@ -3,17 +3,12 @@ exports[`BoxedRefreshIndicator Should match all-properties snapshot 1`] = ` @@ -362,6 +366,9 @@ exports[`IngressScreen Should match the snapshot 1`] = ` style={ { "alignItems": "center", + "display": "flex", + "flexDirection": "column", + "rowGap": 24, } } > @@ -394,13 +401,6 @@ exports[`IngressScreen Should match the snapshot 1`] = ` useNativeLooping={false} /> - ( - - - - - {doubleAvatar ? ( - - ) : ( - - )} +}: MessageListItemProps) => { + const theme = useIOTheme(); + + return ( + + + - + {doubleAvatar ? ( + + ) : ( + + )} + + + - - - -
- {organizationName} -
- - {formattedDate} - -
- - - - - - {!isRead && ( - - + + +
+ {organizationName} +
+ + {formattedDate} + +
+ + + + + + {!isRead && ( + + + + )} + + {badgeText && badgeVariant && ( + + + {badgeVariant === "legalMessage" && ( + <> + + + + )} )}
- {badgeText && badgeVariant && ( - - - {badgeVariant === "legalMessage" && ( - <> - - - - )} - - )}
-
-
-); +
+ ); +}; diff --git a/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap b/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap index 00c9c98ae13..ae6759fbbc9 100644 --- a/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap +++ b/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap @@ -613,7 +613,7 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, read message 1 "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -1565,7 +1565,7 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, unread message "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -2694,7 +2694,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -3677,7 +3677,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -4715,7 +4715,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains u "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -5568,7 +5568,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains u "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -6354,7 +6354,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, not a paym "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -7085,7 +7085,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, not a paym "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } diff --git a/ts/features/messages/components/MessageAttachment/__test__/__snapshots__/PdfViewer.test.tsx.snap b/ts/features/messages/components/MessageAttachment/__test__/__snapshots__/PdfViewer.test.tsx.snap index e9bafe05cc0..30f39aa81e5 100644 --- a/ts/features/messages/components/MessageAttachment/__test__/__snapshots__/PdfViewer.test.tsx.snap +++ b/ts/features/messages/components/MessageAttachment/__test__/__snapshots__/PdfViewer.test.tsx.snap @@ -31,15 +31,12 @@ exports[`PdfViewer should match the snapshot 1`] = ` > + {(serviceMetadata?.email || serviceMetadata?.phone) && ( @@ -876,10 +878,12 @@ exports[`MessageDetailsFooter component should match the snapshot, no service's "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -1412,10 +1416,12 @@ exports[`MessageDetailsFooter component should match the snapshot, no service's "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -1948,10 +1954,12 @@ exports[`MessageDetailsFooter component should match the snapshot, no service's "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -2484,10 +2492,12 @@ exports[`MessageDetailsFooter component should match the snapshot, with service' "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -3188,10 +3198,12 @@ exports[`MessageDetailsFooter component should match the snapshot, with service' "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -3892,10 +3904,12 @@ exports[`MessageDetailsFooter component should match the snapshot, with service' "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -4596,10 +4610,12 @@ exports[`MessageDetailsFooter component should match the snapshot, with service' "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > diff --git a/ts/features/messages/components/Search/EmptyList.tsx b/ts/features/messages/components/Search/EmptyList.tsx index 63d65b7c0b5..7817f4dd3c6 100644 --- a/ts/features/messages/components/Search/EmptyList.tsx +++ b/ts/features/messages/components/Search/EmptyList.tsx @@ -1,23 +1,12 @@ import { + ContentWrapper, H6, IOPictograms, - IOStyles, - IOVisualCostants, Pictogram, - VSpacer, + VStack, WithTestID } from "@pagopa/io-app-design-system"; import React from "react"; -import { StyleSheet, View } from "react-native"; - -const styles = StyleSheet.create({ - container: { - marginHorizontal: IOVisualCostants.appMarginDefault - }, - text: { - textAlign: "center" - } -}); export type EmptyListProps = WithTestID<{ pictogram: IOPictograms; @@ -25,11 +14,10 @@ export type EmptyListProps = WithTestID<{ }>; export const EmptyList = ({ pictogram, title, testID }: EmptyListProps) => ( - - + + - - -
{title}
-
+
{title}
+ + ); diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap index e18991ff47d..edc008b5f90 100644 --- a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap +++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap @@ -222,15 +222,12 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1 > @@ -408,13 +415,6 @@ exports[`MessageRouterScreen should match snapshot before starting to retrieve m - @@ -1267,13 +1274,6 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was
- @@ -3199,13 +3206,6 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval suc
- @@ -4058,13 +4065,6 @@ exports[`MessageRouterScreen should match snapshot while retrieving message data
- (); + const theme = useIOTheme(); + const backgroundColor = IOColors[theme["appBackground-primary"]]; + const transactionInfo = transaction?.infoNotice; const handlePressTransactionDetails = (cartItem: CartItem) => { @@ -81,24 +91,21 @@ export const PaymentsBizEventsTransactionHeadingSection = ({ const totalAmount = calculateTotalAmount(transactionInfo); return ( - - - - {totalAmount && ( - <> + + + + {totalAmount && ( - - - )} - - + )} + + ); }; diff --git a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx index 353a08214fc..f0d6c12bc32 100644 --- a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx +++ b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx @@ -1,28 +1,31 @@ -import { capitalize } from "lodash"; -import * as React from "react"; -import { StyleSheet, View } from "react-native"; -import Placeholder from "rn-placeholder"; import { Alert, Divider, + IOColors, IOLogoPaymentType, IORadiusScale, IOVisualCostants, ListItemHeader, ListItemInfo, ListItemInfoCopy, + useIOTheme, VSpacer } from "@pagopa/io-app-design-system"; +import { capitalize } from "lodash"; +import * as React from "react"; +import { StyleSheet, View } from "react-native"; +import Placeholder from "rn-placeholder"; + +import { OriginEnum } from "../../../../../definitions/pagopa/biz-events/InfoNotice"; +import { NoticeDetailResponse } from "../../../../../definitions/pagopa/biz-events/NoticeDetailResponse"; +import { WalletInfo } from "../../../../../definitions/pagopa/biz-events/WalletInfo"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import I18n from "../../../../i18n"; -import { format } from "../../../../utils/dates"; import { clipboardSetStringWithFeedback } from "../../../../utils/clipboard"; -import TransactionReceiptDivider from "../../../../../img/features/wallet/transaction-receipt-divider.svg"; -import { WalletInfo } from "../../../../../definitions/pagopa/biz-events/WalletInfo"; -import { getPayerInfoLabel } from "../utils"; -import { NoticeDetailResponse } from "../../../../../definitions/pagopa/biz-events/NoticeDetailResponse"; -import { OriginEnum } from "../../../../../definitions/pagopa/biz-events/InfoNotice"; +import { format } from "../../../../utils/dates"; import { capitalizeTextName } from "../../../../utils/strings"; +import { WalletTransactionReceiptDivider } from "../../transaction/components/WalletTransactionReceiptDivider"; +import { getPayerInfoLabel } from "../utils"; type PaymentsBizEventsTransactionInfoSectionProps = { transaction?: NoticeDetailResponse; @@ -36,7 +39,6 @@ const styles = StyleSheet.create({ }, contentCard: { ...IOStyles.horizontalContentPadding, - ...IOStyles.bgWhite, borderRadius: IORadiusScale["1"], marginVertical: IOVisualCostants.appMarginDefault } @@ -49,16 +51,16 @@ const PaymentsBizEventsTransactionInfoSection = ({ transaction, loading }: PaymentsBizEventsTransactionInfoSectionProps) => { + const theme = useIOTheme(); + const backgroundColor = IOColors[theme["appBackground-primary"]]; + const transactionInfo = transaction?.infoNotice; + return ( <> - + - + ( - -
{I18n.t("transaction.details.totalAmount")}
- {loading && ( - - - - )} - {!loading && totalAmount &&

{formatAmountText(totalAmount)}

} -
-); +}: TotalAmountSectionProps) => { + const theme = useIOTheme(); + + return ( + +
+ {I18n.t("transaction.details.totalAmount")} +
+ {loading && ( + + + + )} + {!loading && totalAmount &&

{formatAmountText(totalAmount)}

} +
+ ); +}; diff --git a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsDetailsScreen.tsx b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsDetailsScreen.tsx index fe744d9d82d..6d9aa6abb85 100644 --- a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsDetailsScreen.tsx +++ b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsDetailsScreen.tsx @@ -1,4 +1,4 @@ -import { IOColors, useIOToast } from "@pagopa/io-app-design-system"; +import { IOColors, useIOTheme, useIOToast } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; import { RouteProp, useRoute } from "@react-navigation/native"; import * as React from "react"; @@ -78,6 +78,9 @@ const PaymentsTransactionBizEventsDetailsScreen = () => { const transactionDetails = pot.toUndefined(transactionDetailsPot); const animatedScrollViewRef = useAnimatedRef(); + const theme = useIOTheme(); + const backgroundColor = IOColors[theme["appBackground-secondary"]]; + useOnFirstRender(() => { fetchTransactionDetails(); }); @@ -175,9 +178,9 @@ const PaymentsTransactionBizEventsDetailsScreen = () => { } > - + {/* The following line is used to show the background color gray that overlay the basic one which is white */} - + handleOnCopy(orgFiscalCode)} /> {amountInfoBottomSheet.bottomSheet} - + ); }; diff --git a/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx b/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx index e470d05e68c..f5990dbf38d 100644 --- a/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx +++ b/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx @@ -3,6 +3,7 @@ import { IOColors, IOSpacingScale, IOVisualCostants, + useIOTheme, VSpacer } from "@pagopa/io-app-design-system"; import * as React from "react"; @@ -39,6 +40,9 @@ const PaymentsMethodDetailsBaseScreenComponent = ({ const insets = useSafeAreaInsets(); const translationY = useSharedValue(0); const [titleHeight, setTitleHeight] = React.useState(0); + + const theme = useIOTheme(); + const backgroundColor = IOColors[theme["appBackground-primary"]]; const blueHeaderColor = isDSenabled ? IOColors["blueIO-600"] : IOColors.blue; const animatedScrollViewRef = useAnimatedRef(); @@ -78,7 +82,7 @@ const PaymentsMethodDetailsBaseScreenComponent = ({ contentContainerStyle={{ flexGrow: 1, paddingBottom: 48, - backgroundColor: IOColors.white + backgroundColor }} ref={animatedScrollViewRef} > diff --git a/ts/features/payments/details/components/WalletDetailsPaymentMethodSettings.tsx b/ts/features/payments/details/components/WalletDetailsPaymentMethodSettings.tsx index 0406600d583..6f29a7fdec2 100644 --- a/ts/features/payments/details/components/WalletDetailsPaymentMethodSettings.tsx +++ b/ts/features/payments/details/components/WalletDetailsPaymentMethodSettings.tsx @@ -1,14 +1,11 @@ -import { H6, IOSpacingScale } from "@pagopa/io-app-design-system"; +import { Divider, ListItemHeader } from "@pagopa/io-app-design-system"; import * as React from "react"; import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo"; -import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent"; import I18n from "../../../../i18n"; import WalletDetailsPagoPaPaymentCapability from "./WalletDetailsPagoPaPaymentCapability"; type Props = { paymentMethod: WalletInfo }; -const componentVerticalSpacing: IOSpacingScale = 12; - /** * This component allows the user to choose and change the common settings for a payment methods * @param props @@ -18,14 +15,9 @@ const WalletDetailsPaymentMethodSettings = ( props: Props ): React.ReactElement => ( <> -
- {I18n.t("global.buttons.settings")} -
+ - + ); diff --git a/ts/features/payments/transaction/components/WalletTransactionHeadingSection.tsx b/ts/features/payments/transaction/components/WalletTransactionHeadingSection.tsx index 9947b1d636d..db1ca13379d 100644 --- a/ts/features/payments/transaction/components/WalletTransactionHeadingSection.tsx +++ b/ts/features/payments/transaction/components/WalletTransactionHeadingSection.tsx @@ -1,4 +1,10 @@ -import { Body, IOStyles, VSpacer } from "@pagopa/io-app-design-system"; +import { + Body, + IOColors, + IOStyles, + useIOTheme, + VSpacer +} from "@pagopa/io-app-design-system"; import { useNavigation } from "@react-navigation/native"; import React from "react"; import { View } from "react-native"; @@ -25,6 +31,9 @@ export const WalletTransactionHeadingSection = ({ }: Props) => { const navigation = useNavigation(); + const theme = useIOTheme(); + const backgroundColor = IOColors[theme["appBackground-primary"]]; + const handlePressTransactionDetails = (operationDetails: Dettaglio) => { if (transaction) { navigation.navigate( @@ -72,8 +81,8 @@ export const WalletTransactionHeadingSection = ({ }; return ( - - + + { const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector); + const theme = useIOTheme(); + const backgroundColor = IOColors[theme["appBackground-primary"]]; + return ( <> - + - + { + const theme = useIOTheme(); + + return ( + + + + ); +}; diff --git a/ts/features/payments/transaction/screens/PaymentsTransactionDetailsScreen.tsx b/ts/features/payments/transaction/screens/PaymentsTransactionDetailsScreen.tsx index 41496dcca59..516cbbbec93 100644 --- a/ts/features/payments/transaction/screens/PaymentsTransactionDetailsScreen.tsx +++ b/ts/features/payments/transaction/screens/PaymentsTransactionDetailsScreen.tsx @@ -1,4 +1,4 @@ -import { IOColors } from "@pagopa/io-app-design-system"; +import { IOColors, useIOTheme } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; import { RouteProp, useRoute } from "@react-navigation/native"; import * as React from "react"; @@ -56,6 +56,9 @@ const PaymentsTransactionDetailsScreen = () => { const isLoading = pot.isLoading(transactionDetailsPot); const transactionDetails = pot.toUndefined(transactionDetailsPot); + const theme = useIOTheme(); + const backgroundColor = IOColors[theme["appBackground-secondary"]]; + useOnFirstRender(() => { dispatch(getPaymentsTransactionDetailsAction.request({ transactionId })); }); @@ -83,9 +86,9 @@ const PaymentsTransactionDetailsScreen = () => { headerActionsProp={{ showHelp: true }} > - + {/* The following line is used to show the background color gray that overlay the basic one which is white */} - + - + +
{I18n.t(titleKey)}
diff --git a/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap b/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap index 7500f4cf1d4..ab152481da8 100644 --- a/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap +++ b/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap @@ -335,18 +335,23 @@ exports[`NotificationPreviewSample should match snapshot, preview off, reminder > - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + +

{title}

- + {subTitle}
diff --git a/ts/features/services/common/components/ServicesHeaderSection.tsx b/ts/features/services/common/components/ServicesHeaderSection.tsx index 507d3e5e9fd..c9d8b3b9ad6 100644 --- a/ts/features/services/common/components/ServicesHeaderSection.tsx +++ b/ts/features/services/common/components/ServicesHeaderSection.tsx @@ -1,9 +1,10 @@ import React, { ComponentProps } from "react"; -import { Dimensions, StyleSheet, View } from "react-native"; +import { Dimensions, View } from "react-native"; import { useHeaderHeight } from "@react-navigation/elements"; import { ContentWrapper, IOColors, + useIOTheme, VSpacer, WithTestID } from "@pagopa/io-app-design-system"; @@ -11,12 +12,6 @@ import { ServicesHeader, ServicesHeaderSkeleton } from "./ServicesHeader"; const WINDOW_HEIGHT = Dimensions.get("window").height; -const styles = StyleSheet.create({ - container: { - backgroundColor: IOColors["grey-50"] - } -}); - export type ServicesHeaderSectionProps = WithTestID< | ({ isLoading?: false; @@ -33,17 +28,16 @@ export const ServicesHeaderSection = ({ ...rest }: ServicesHeaderSectionProps) => { const headerHeight = useHeaderHeight(); + const theme = useIOTheme(); return ( {rest.isLoading ? ( diff --git a/ts/features/services/common/components/__tests__/__snapshots__/ServicesHeaderSection.test.tsx.snap b/ts/features/services/common/components/__tests__/__snapshots__/ServicesHeaderSection.test.tsx.snap index f0a259671a2..0b9c393df78 100644 --- a/ts/features/services/common/components/__tests__/__snapshots__/ServicesHeaderSection.test.tsx.snap +++ b/ts/features/services/common/components/__tests__/__snapshots__/ServicesHeaderSection.test.tsx.snap @@ -3,16 +3,12 @@ exports[`ServicesHeaderSection component should match snapshot for loading 1`] = ` { + const theme = useIOTheme(); + + return ( + + {children} + + ); +}; + const CardWithMarkdownContent = memo( ({ content }: CardWithMarkdownContentProps) => ( - + {content} - + ) ); const CardWithMarkdownContentSkeleton = () => ( - + - + ); export { CardWithMarkdownContent, CardWithMarkdownContentSkeleton }; diff --git a/ts/screens/profile/CalendarsPreferencesScreen.tsx b/ts/screens/profile/CalendarsPreferencesScreen.tsx index ef40c631ed4..e86b568e2a7 100644 --- a/ts/screens/profile/CalendarsPreferencesScreen.tsx +++ b/ts/screens/profile/CalendarsPreferencesScreen.tsx @@ -44,6 +44,7 @@ const CalendarsPreferencesScreen = () => { return ( { {I18n.t("profile.main.privacy.exportData.detail.paragraph3.part1")} - + diff --git a/ts/screens/profile/EmailForwardingScreen.tsx b/ts/screens/profile/EmailForwardingScreen.tsx index 2684e56988d..6a5f9608ccf 100644 --- a/ts/screens/profile/EmailForwardingScreen.tsx +++ b/ts/screens/profile/EmailForwardingScreen.tsx @@ -1,28 +1,27 @@ /** * A screens to express the preferences related to email forwarding. */ -import React, { useCallback, useEffect, useRef, useState } from "react"; -import * as pot from "@pagopa/ts-commons/lib/pot"; -import * as O from "fp-ts/lib/Option"; -import { pipe } from "fp-ts/lib/function"; import { BodyProps, - ContentWrapper, ListItemSwitch, useIOToast } from "@pagopa/io-app-design-system"; +import * as pot from "@pagopa/ts-commons/lib/pot"; +import * as O from "fp-ts/lib/Option"; +import { pipe } from "fp-ts/lib/function"; import _ from "lodash"; +import React, { useCallback, useEffect, useRef, useState } from "react"; +import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent"; import { IOScrollViewWithLargeHeader } from "../../components/ui/IOScrollViewWithLargeHeader"; import I18n from "../../i18n"; +import { customEmailChannelSetEnabled } from "../../store/actions/persistedPreferences"; +import { profileUpsert } from "../../store/actions/profile"; import { useIODispatch, useIOSelector } from "../../store/hooks"; import { isEmailEnabledSelector, profileEmailSelector, profileSelector } from "../../store/reducers/profile"; -import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent"; -import { profileUpsert } from "../../store/actions/profile"; -import { customEmailChannelSetEnabled } from "../../store/actions/persistedPreferences"; import { usePrevious } from "../../utils/hooks/usePrevious"; const contextualHelpMarkdown: ContextualHelpPropsMarkdown = { @@ -129,21 +128,20 @@ const EmailForwardingScreen = () => { return ( - - - + ); }; diff --git a/ts/screens/profile/FiscalCodeScreen.tsx b/ts/screens/profile/FiscalCodeScreen.tsx index 200e3c01f58..31f6e26f43e 100644 --- a/ts/screens/profile/FiscalCodeScreen.tsx +++ b/ts/screens/profile/FiscalCodeScreen.tsx @@ -1,28 +1,28 @@ -import React, { useState, useCallback, useRef } from "react"; -import { View, StyleSheet } from "react-native"; import { - IOColors, - VSpacer, - ContentWrapper, H3, - LabelSmall + IOColors, + LabelSmall, + useIOTheme, + VSpacer } from "@pagopa/io-app-design-system"; -import Barcode from "react-native-barcode-builder"; -import { useFocusEffect } from "@react-navigation/native"; import { Millisecond } from "@pagopa/ts-commons/lib/units"; +import { useFocusEffect } from "@react-navigation/native"; +import React, { useCallback, useRef, useState } from "react"; +import { StyleSheet, View } from "react-native"; +import Barcode from "react-native-barcode-builder"; import { withLightModalContext } from "../../components/helpers/withLightModalContext"; import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent"; +import { IOScrollViewWithLargeHeader } from "../../components/ui/IOScrollViewWithLargeHeader"; import I18n from "../../i18n"; +import { useIOSelector } from "../../store/hooks"; import { profileFiscalCodeSelector, profileNameSurnameSelector } from "../../store/reducers/profile"; -import { IOScrollViewWithLargeHeader } from "../../components/ui/IOScrollViewWithLargeHeader"; -import { FAQsCategoriesType } from "../../utils/faq"; -import { useIOSelector } from "../../store/hooks"; -import { useMaxBrightness } from "../../utils/brightness"; import { setAccessibilityFocus } from "../../utils/accessibility"; +import { useMaxBrightness } from "../../utils/brightness"; import { clipboardSetStringWithFeedback } from "../../utils/clipboard"; +import { FAQsCategoriesType } from "../../utils/faq"; const FAQ_CATEGORIES: ReadonlyArray = ["profile"]; @@ -37,6 +37,8 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = { const FiscalCodeScreen = () => { useMaxBrightness(); + const theme = useIOTheme(); + const titleRef = useRef(null); const [isCFCopied, setIsCFCopied] = useState(false); @@ -61,6 +63,7 @@ const FiscalCodeScreen = () => { return ( { contextualHelpMarkdown={contextualHelpMarkdown} faqCategories={FAQ_CATEGORIES} > - + {fiscalCode && ( - - - - {nameSurname} - - -

{fiscalCode}

-
-
+ + {nameSurname} + +

{fiscalCode}

+
)}
); }; const styles = StyleSheet.create({ - box: { + card: { borderRadius: 8, - borderColor: IOColors.bluegreyLight, + borderCurve: "continuous", borderStyle: "solid", borderWidth: 1, display: "flex", diff --git a/ts/screens/profile/LanguagesPreferencesScreen.tsx b/ts/screens/profile/LanguagesPreferencesScreen.tsx index abed062a006..e4ee9eb72bc 100644 --- a/ts/screens/profile/LanguagesPreferencesScreen.tsx +++ b/ts/screens/profile/LanguagesPreferencesScreen.tsx @@ -1,6 +1,5 @@ import { Banner, - ContentWrapper, RadioGroup, RadioItem, useIOToast, @@ -197,6 +196,7 @@ const LanguagesPreferencesScreen = () => { return ( { headerActionsProp={{ showHelp: true }} contextualHelpMarkdown={contextualHelpMarkdown} > - - - - type="radioListItem" - items={renderedItem} - selectedItem={selectedItem} - onPress={onLanguageSelected} + + + type="radioListItem" + items={renderedItem} + selectedItem={selectedItem} + onPress={onLanguageSelected} + /> + + {isBannerVisible && ( + + openWebUrl(bannerInfoSelector.web_url?.[getFullLocale()] || "") + } /> - - {isBannerVisible && ( - - openWebUrl(bannerInfoSelector.web_url?.[getFullLocale()] || "") - } - /> - )} - + )} ); diff --git a/ts/screens/profile/ServicesPreferenceScreen.tsx b/ts/screens/profile/ServicesPreferenceScreen.tsx index 74d489645de..23993adaf09 100644 --- a/ts/screens/profile/ServicesPreferenceScreen.tsx +++ b/ts/screens/profile/ServicesPreferenceScreen.tsx @@ -1,4 +1,4 @@ -import { ContentWrapper, useIOToast } from "@pagopa/io-app-design-system"; +import { useIOToast } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; import React, { ReactElement, useCallback, useEffect } from "react"; import { ServicesPreferencesModeEnum } from "../../../definitions/backend/ServicesPreferencesMode"; @@ -107,18 +107,17 @@ const ServicesPreferenceScreen = (): ReactElement => { return ( - - - + {manualConfigBottomSheet} diff --git a/ts/screens/profile/__test__/__snapshots__/NotificationsPreferencesScreen.test.tsx.snap b/ts/screens/profile/__test__/__snapshots__/NotificationsPreferencesScreen.test.tsx.snap index 52b4a0e14f9..25e351f1fdd 100644 --- a/ts/screens/profile/__test__/__snapshots__/NotificationsPreferencesScreen.test.tsx.snap +++ b/ts/screens/profile/__test__/__snapshots__/NotificationsPreferencesScreen.test.tsx.snap @@ -338,18 +338,23 @@ exports[`NotificationsPreferencesScreen should match snapshot, disabled preview /> - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - - - + + + + + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - + - - + - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + - - - + - - + + + mask="a" + > + + void; @@ -69,7 +69,7 @@ const AnalyticsFeatureInfo = ({ trackAction }: FeatureProps) => { () => ( {I18n.t("profile.main.privacy.shareData.screen.why.description.one")} -