From 14022a19439629b59dddbfa279cf5876f1d23d38 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 22 Nov 2024 17:44:52 +0100 Subject: [PATCH] chore(Cross): [IOAPPX-399] Extend dark mode to other parts of the app (#6285) > [!important] > This PR is not directly dependent on the following PR. However, it needs the new `IOText` to avoid unnecessary extra work: > * https://github.com/pagopa/io-app/pull/6076 ## Short description This PR extends dark mode support to some parts of the app ## List of changes proposed in this pull request - **General** - Adapt `LoadingSpinnerOverlay` - **Payments** - Adapt the payment biz event detail - Fix `ListItemTransaction` partial dark mode support - **Settings** - Adapt the fiscal code screen - Remove unnecessary `ContentWrapper` (by adding a new prop to `IOScrollViewWithLargeHeader`) - **Services** - Adapt the detail screens (footer actions not included because they need a general refactor) - **Messages** - Adapt `MessageDetailsFooter` ## How to test Run the app in the local environment, enable **Dark mode** and navigate through the entire app, in particular the screens mentioned above --------- Co-authored-by: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com> Co-authored-by: Alessandro --- ts/components/CalendarsListContainer.tsx | 35 +- ts/components/LoadingSpinnerOverlay.tsx | 5 +- ts/components/TosWebviewComponent.tsx | 11 +- .../LoadingSpinnerOverlay.test.tsx.snap | 30 +- .../WebviewComponent.test.tsx.snap | 15 +- .../screens/LoadingScreenContent.tsx | 34 +- .../LoadingScreenContent.test.tsx.snap | 96 +- ts/components/ui/BoxedRefreshIndicator.tsx | 10 +- .../ui/IOScrollViewWithLargeHeader.tsx | 8 +- .../__test__/BoxedRefreshIndicator.test.tsx | 8 +- .../BoxedRefreshIndicator.test.tsx.snap | 32 +- .../__snapshots__/IngressScreen.test.tsx.snap | 24 +- .../components/Home/DS/MessageListItem.tsx | 147 +- .../WrappedMessageListItem.test.tsx.snap | 16 +- .../__snapshots__/PdfViewer.test.tsx.snap | 15 +- .../MessageDetail/MessageDetailsFooter.tsx | 18 +- .../MessageDetailsFooter.test.tsx.snap | 32 +- .../messages/components/Search/EmptyList.tsx | 26 +- .../MessageAttachment.test.tsx.snap | 15 +- .../MessageRouterScreen.test.tsx.snap | 96 +- ...entsBizEventsTransactionHeadingSection.tsx | 37 +- ...aymentsBizEventsTransactionInfoSection.tsx | 36 +- ...aymentsBizEventsTransactionTotalAmount.tsx | 32 +- ...mentsTransactionBizEventsDetailsScreen.tsx | 9 +- .../screens/WalletPaymentDetailScreen.tsx | 34 +- ...ymentsMethodDetailsBaseScreenComponent.tsx | 6 +- .../WalletDetailsPaymentMethodSettings.tsx | 14 +- .../WalletTransactionHeadingSection.tsx | 15 +- .../WalletTransactionInfoSection.tsx | 28 +- .../WalletTransactionReceiptDivider.tsx | 22 + .../PaymentsTransactionDetailsScreen.tsx | 9 +- .../components/NotificationPreviewSample.tsx | 22 +- .../NotificationPreviewSample.test.tsx.snap | 556 +- ...ificationsPreferencesPreview.test.tsx.snap | 556 +- ...ProfileNotificationsSettings.test.tsx.snap | 17792 ++++++++-------- ...tificationsPreferencesScreen.test.tsx.snap | 695 +- .../common/components/ServicesHeader.tsx | 2 +- .../components/ServicesHeaderSection.tsx | 24 +- .../ServicesHeaderSection.test.tsx.snap | 32 +- .../components/CardWithMarkdownContent.tsx | 33 +- .../profile/CalendarsPreferencesScreen.tsx | 1 + .../profile/DownloadProfileDataScreen.tsx | 5 +- ts/screens/profile/EmailForwardingScreen.tsx | 32 +- ts/screens/profile/FiscalCodeScreen.tsx | 75 +- .../profile/LanguagesPreferencesScreen.tsx | 48 +- .../profile/ServicesPreferenceScreen.tsx | 13 +- ...tificationsPreferencesScreen.test.tsx.snap | 2544 +-- .../ShareDataFeatureInfos.tsx | 18 +- .../components/ShareDataComponent/index.tsx | 4 +- .../services/ServicesContactComponent.tsx | 9 +- 50 files changed, 12432 insertions(+), 10944 deletions(-) create mode 100644 ts/features/payments/transaction/components/WalletTransactionReceiptDivider.tsx 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 e0575d09b99..319b5f9794a 100644 --- a/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap +++ b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap @@ -341,11 +341,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", + }, + ] } > @@ -547,13 +554,6 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea - @@ -1144,13 +1151,6 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea - @@ -1741,13 +1748,6 @@ exports[`LoadingScreenContent should match the snapshot with title, no children, - @@ -2335,13 +2342,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`] = ` @@ -360,6 +364,9 @@ exports[`IngressScreen Should match the snapshot 1`] = ` style={ { "alignItems": "center", + "display": "flex", + "flexDirection": "column", + "rowGap": 24, } } > @@ -392,13 +399,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 0f01c394c83..dd521731092 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 @@ -611,7 +611,7 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, read message 1 "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -1559,7 +1559,7 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, unread message "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -2683,7 +2683,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -3662,7 +3662,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -4696,7 +4696,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains u "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -5546,7 +5546,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains u "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -6330,7 +6330,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, not a paym "lineHeight": 24, }, { - "flex": 1, + "flexGrow": 1, }, ] } @@ -7059,7 +7059,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 9e34bc373c4..dc4f4c5becb 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 @@ -32,15 +32,12 @@ exports[`PdfViewer should match the snapshot 1`] = ` > + {(serviceMetadata?.email || serviceMetadata?.phone) && ( @@ -871,10 +873,12 @@ exports[`MessageDetailsFooter component should match the snapshot, no service's "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -1404,10 +1408,12 @@ exports[`MessageDetailsFooter component should match the snapshot, no service's "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -1937,10 +1943,12 @@ exports[`MessageDetailsFooter component should match the snapshot, no service's "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -2470,10 +2478,12 @@ exports[`MessageDetailsFooter component should match the snapshot, with service' "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -3170,10 +3180,12 @@ exports[`MessageDetailsFooter component should match the snapshot, with service' "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -3870,10 +3882,12 @@ exports[`MessageDetailsFooter component should match the snapshot, with service' "paddingHorizontal": 24, }, { - "backgroundColor": "#F4F5F8", "marginBottom": "-75%", "paddingBottom": "75%", }, + { + "backgroundColor": "#F4F5F8", + }, ] } > @@ -4570,10 +4584,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 32c767334fc..ac344122513 100644 --- a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap +++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap @@ -221,15 +221,12 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1 > @@ -406,13 +413,6 @@ exports[`MessageRouterScreen should match snapshot before starting to retrieve m - @@ -1261,13 +1268,6 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was - @@ -3185,13 +3192,6 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval suc - @@ -4040,13 +4047,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 fa2dd971694..63b1f65deed 100644 --- a/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap +++ b/ts/features/pushNotifications/components/__tests__/__snapshots__/NotificationPreviewSample.test.tsx.snap @@ -333,18 +333,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 8f92832746f..dd6ca6cbd85 100644 --- a/ts/screens/profile/__test__/__snapshots__/NotificationsPreferencesScreen.test.tsx.snap +++ b/ts/screens/profile/__test__/__snapshots__/NotificationsPreferencesScreen.test.tsx.snap @@ -337,18 +337,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")} -