From b9d3233500766efa207716a2e5d3bb279612b84f Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 5 Dec 2024 15:46:04 +0100 Subject: [PATCH] chore(Cross): [IOAPPX-435] Improve overall UI typography + Update `io-app-design-system` to `4.0.1` (#6422) ## Short description This PR improves overall UI typography. ## List of changes proposed in this pull request - Update `io-app-design-system` to the new major `4.0.1` version - Update font weight in the `HeaderFirstLevel` to make the title bolder - Improve **Strong** markdown style by replacing `Bold` with the `Semibold` style - Decrease font weight of the subtitle in the `ServicesHeader` component - Improve formatting of the `MessageListItem` - Replace removed `Chip` typographic style with `LabelMini` - Replace removed `Label` typographic style with `Body` - Replace removed `LabelSmall` typographic style with the new `BodySmall` - **[extra]** Fix typo in the English locale (`CIEIdWizard`) > [!note] > **For the reviewers:** the default weight of `LabelSmall` was `Semibold`, while the default weight for `BodySmall` is `Regular`. That's why `LabelSmall` set without the `weight` prop was replaced by `BodySmall` with the `weight` prop set to `Semibold`. The same should happen to the `Label` typographic style ### Preview | Actual UI | New UI | |--------|--------| | ![Simulator Screenshot - iPhone 16 Pro - 2024-11-21 at 11 47 43](https://github.com/user-attachments/assets/70ddf413-a5a7-40be-ac54-d8d1d81ce040) | ![Simulator Screenshot - iPhone 16 Pro - 2024-11-21 at 11 52 44](https://github.com/user-attachments/assets/f1616c82-bd68-49f7-bda0-92947039b79f) | #### Old vs New
Messages Home

| Before | After | |--------|--------| | ![Simulator Screenshot - iPhone 16 Pro - 2024-12-05 at 15 19 58](https://github.com/user-attachments/assets/13dcd29c-a097-4fde-a010-c1517a73a299) | ![Simulator Screenshot - iPhone 16 Pro - 2024-12-05 at 15 22 33](https://github.com/user-attachments/assets/f10f92c9-8b49-4827-adac-9ed0d73561ac) |

Payments Home

| Before | After | |--------|--------| | ![Simulator Screenshot - iPhone 16 Pro - 2024-12-05 at 15 20 22](https://github.com/user-attachments/assets/10cae2b8-c71b-42ac-8e27-f3f328ab4bd8) | ![Simulator Screenshot - iPhone 16 Pro - 2024-12-05 at 15 23 51](https://github.com/user-attachments/assets/0ad36333-7cdc-4d0a-af13-cc442bb46577) |

### Related PRs * https://github.com/pagopa/io-app-design-system/pull/360 * https://github.com/pagopa/io-app-design-system/pull/361 ## How to test Check each DS component and navigate through the app to check if everything is OK --------- Co-authored-by: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com> Co-authored-by: Alice Di Rico <83651704+Ladirico@users.noreply.github.com> --- locales/en/index.yml | 2 +- package.json | 2 +- ts/components/AppVersion.tsx | 6 +- ts/components/BonusCard/BonusCard.tsx | 6 +- .../BonusCard/__tests__/BonusCard.test.tsx | 10 +- ts/components/IOMarkdown/renderRules.tsx | 12 +- .../__snapshots__/IOMarkdown.test.tsx.snap | 3 +- .../LoadingSpinnerOverlay.test.tsx.snap | 2 +- ts/components/debug/DebugPrettyPrint.tsx | 29 +- .../LoadingScreenContent.test.tsx.snap | 8 +- ...OperationResultScreenContent.test.tsx.snap | 4 +- ts/components/ui/BannerErrorState.tsx | 6 +- .../ui/IOScrollViewWithLargeHeader.tsx | 6 +- .../IOScrollViewCentredContent.test.tsx.snap | 108 ++--- .../IOScrollViewWithListItems.test.tsx.snap | 6 +- .../components/CameraPermissionView.tsx | 6 +- ts/features/bonus/cgn/components/CgnCard.tsx | 14 +- .../bonus/cgn/components/CgnCardStatus.tsx | 16 +- .../merchants/CgnModuleDiscount.tsx | 8 +- .../discount/CgnDiscountExpireProgressBar.tsx | 10 +- .../CGNDiscountExpiredScreen.test.tsx.snap | 2 +- .../CgnDiscountCodeScreen.test.tsx.snap | 4 +- .../components/BonusInformationComponent.tsx | 27 +- .../CieIdErrorScreen.test.tsx.snap | 8 +- .../CieIdNotInstalled.test.tsx.snap | 4 +- .../CieIdNotInstalledScreen.test.tsx.snap | 4 +- .../__snapshots__/wizards.test.tsx.snap | 28 +- .../CieIdAuthUrlError.test.tsx.snap | 2 +- ts/features/design-system/DesignSystem.tsx | 6 +- ts/features/design-system/core/DSBadges.tsx | 8 +- ts/features/design-system/core/DSColors.tsx | 6 +- .../core/DSDynamicBackground.tsx | 6 +- .../DSHeaderSecondLevelWithSectionTitle.tsx | 6 +- ts/features/design-system/core/DSLayout.tsx | 22 +- .../design-system/core/DSLegacyTextFields.tsx | 11 +- .../design-system/core/DSNumberPad.tsx | 9 +- .../design-system/core/DSSelection.tsx | 6 +- .../design-system/core/DSTypography.tsx | 107 ++--- .../fci/components/InfoScreenComponent.tsx | 14 +- ts/features/fci/components/LinkedText.tsx | 7 +- .../fci/components/SignatureFieldItem.tsx | 11 +- .../fci/components/SignatureRequestItem.tsx | 6 +- .../QtspClauseListItem.test.tsx.snap | 1 + .../SignatureFieldItem.test.tsx.snap | 1 + .../screens/valid/FciDataSharingScreen.tsx | 28 +- .../FimsUpdateAppAlert.test.tsx.snap | 4 +- .../components/FimsHistoryListItem.tsx | 10 +- .../components/FimsPrivacyInfo.tsx | 10 +- .../components/FimsSuccessBody.tsx | 19 +- .../BarcodeExpirationProgressBar.tsx | 10 +- .../screens/IdPayBarcodeResultScreen.tsx | 10 +- .../code/screens/IdPayCodeDisplayScreen.tsx | 7 +- .../code/screens/IdPayCodeRenewScreen.tsx | 5 +- .../screens/IbanOnboardingScreen.tsx | 6 +- .../InitiativeConfigurationIntroScreen.tsx | 6 +- .../components/BeneficiaryDetailsContent.tsx | 14 +- .../IdPayInitiativeLastUpdateCounter.tsx | 6 +- .../components/InitiativeRulesInfoBox.tsx | 5 +- .../InitiativeTimelineComponent.tsx | 6 +- .../screens/IdPayInitiativeDetailsScreen.tsx | 8 +- .../components/OnboardingPrivacyAdvice.tsx | 24 +- .../screens/BoolValuePrerequisitesScreen.tsx | 11 +- .../screens/MultiValuePrerequisitesScreen.tsx | 5 +- .../components/IDPayCardPreviewComponent.tsx | 6 +- .../idpay/wallet/components/IdPayCard.tsx | 10 +- .../__snapshots__/IdPayCard.test.tsx.snap | 2 + .../__snapshots__/IngressScreen.test.tsx.snap | 2 +- .../common/components/ItwMarkdown.tsx | 8 +- .../ItwSkeumorphicCard/ClaimLabel.tsx | 41 +- .../__snapshots__/CardData.test.tsx.snap | 440 +++++------------- .../ItwCredentialCard.test.tsx.snap | 76 +-- .../ItwFeedbackBanner.test.tsx.snap | 2 +- .../__snapshots__/ItwMarkdown.test.tsx.snap | 6 +- .../ItwDiscoveryBanner.test.tsx.snap | 4 +- .../screens/cie/ItwCiePinScreen.tsx | 19 +- .../components/ItwRequiredClaimsList.tsx | 6 +- ...wCredentialPreviewClaimsList.test.tsx.snap | 1 + ...uanceCredentialAsyncContinuationScreen.tsx | 2 +- ...ntialAsyncContinuationScreen.test.tsx.snap | 14 +- ...ItwPresentationClaimsSection.test.tsx.snap | 2 + ...wPresentationCredentialFiscalCodeModal.tsx | 6 +- .../screens/ItwCredentialTrustmarkScreen.tsx | 2 +- .../components/Home/DS/MessageListItem.tsx | 16 +- .../components/Home/PreconditionsFeedback.tsx | 6 +- .../__snapshots__/EmptyList.test.tsx.snap | 4 +- .../PreconditionsFooter.test.tsx.snap | 8 +- .../SecuritySuggestions.test.tsx.snap | 34 +- .../WrappedMessageListItem.test.tsx.snap | 316 +++++++------ .../MessageDetail/MessageDetailsHeader.tsx | 6 +- .../MessageDetail/OrganizationHeader.tsx | 20 +- ...MessageDetailsAttachmentItem.test.tsx.snap | 20 +- .../MessageDetailsFooter.test.tsx.snap | 24 +- .../MessageDetailsHeader.test.tsx.snap | 3 +- .../MessageDetailsPayment.test.tsx.snap | 4 +- .../MessageDetailsPaymentButton.test.tsx.snap | 2 +- .../MessageDetailsReminder.test.tsx.snap | 4 +- ...essageDetailsReminderExpired.test.tsx.snap | 1 + ...ssageDetailsReminderExpiring.test.tsx.snap | 3 +- .../MessageDetailsStickyFooter.test.tsx.snap | 18 +- .../MessagePaymentItem.test.tsx.snap | 10 +- .../OrganizationHeader.test.tsx.snap | 3 +- .../RemoteContentBanner.test.tsx.snap | 2 +- .../ShowMoreListItem.test.tsx.snap | 16 +- .../MessageAttachment.test.tsx.snap | 2 +- .../MessageGreenPassScreen.test.tsx.snap | 2 +- .../MessageRouterScreen.test.tsx.snap | 12 +- .../screens/WalletPaymentConfirmScreen.tsx | 6 +- .../WalletPaymentOutcomeScreen.test.tsx.snap | 352 +++++++------- .../common/components/PaymentCard.tsx | 21 +- .../common/components/PaymentCardBig.tsx | 10 +- .../common/components/PaymentCardSmall.tsx | 7 +- .../PaymentCardSmall.test.tsx.snap | 4 +- .../F24ListBottomSheetLink.test.tsx.snap | 61 ++- .../__snapshots__/F24Section.test.tsx.snap | 17 +- .../MessageBottomMenu.test.tsx.snap | 288 ++++++------ .../MessageCancelledContent.test.tsx.snap | 9 + .../MessageDetails.test.tsx.snap | 34 +- .../__snapshots__/MessageFooter.test.tsx.snap | 2 +- .../MessagePaymentBottomSheet.test.tsx.snap | 21 +- .../MessagePayments.test.tsx.snap | 112 +++-- .../TimelineListItem.test.tsx.snap | 8 +- .../MessageDetailsScreen.test.tsx.snap | 47 +- .../PaidPaymentScreen.test.tsx.snap | 2 +- .../components/NotificationPreviewSample.tsx | 4 +- .../PushNotificationsBanner.test.tsx.snap | 2 +- ...tificationsInfoScreenConsent.test.tsx.snap | 2 +- ...tificationsPreferencesScreen.test.tsx.snap | 8 +- ...otificationPermissionsScreen.test.tsx.snap | 8 +- .../components/ListItemSearchInstitution.tsx | 6 +- .../common/components/ServicesHeader.tsx | 6 +- .../ServicesHeader.test.tsx.snap | 2 +- .../ServicesHeaderSection.test.tsx.snap | 2 +- .../home/components/FeaturedServiceCard.tsx | 11 +- .../home/components/OrganizationNameLabel.tsx | 39 -- .../WalletEmptyScreenContent.test.tsx.snap | 2 +- ts/navigation/TabNavigator.tsx | 21 +- .../__snapshots__/LandingScreen.test.tsx.snap | 48 +- .../ActivateNfcScreen.test.tsx.snap | 4 +- .../authentication/cie/CiePinScreen.tsx | 17 +- ts/screens/modal/IdentificationLockModal.tsx | 10 +- ts/screens/modal/RootedDeviceModal.tsx | 6 +- .../profile/DownloadProfileDataScreen.tsx | 10 +- ts/screens/profile/FiscalCodeScreen.tsx | 4 +- .../profile/RemoveAccountInfoScreen.tsx | 2 +- ts/screens/profile/TrialSystemPlayground.tsx | 2 +- .../ProfileMainScreenTopBanner.test.tsx.snap | 5 +- .../ShareDataFeatureInfos.tsx | 19 +- .../components/ShareDataComponent/index.tsx | 11 +- .../SettingsDiscoveryBanner.test.tsx.snap | 2 +- .../services/ServicesContactComponent.tsx | 10 +- .../playgrounds/IdPayOnboardingPlayground.tsx | 10 +- .../playgrounds/MarkdownPlayground.tsx | 4 +- ts/utils/identification/index.tsx | 6 +- yarn.lock | 8 +- 154 files changed, 1585 insertions(+), 1656 deletions(-) delete mode 100644 ts/features/services/home/components/OrganizationNameLabel.tsx diff --git a/locales/en/index.yml b/locales/en/index.yml index 3aa184d6ec6..b29f7dcd351 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -667,7 +667,7 @@ authentication: wizards: cie_id_wizard: title: Do you have the CieID app? - description: "If you have the CieID app on your device, enter the code you have set for the CieID app or use your face or fingerprint.\n\nTo enter the IO app without physically using the Electronic Identity Card,you must first enable Level 1 and Level 2 access in the CieID application." + description: "If you have the CieID app on your device, enter the code you have set for the CieID app or use your face or fingerprint.\n\nTo enter the IO app without physically using the Electronic Identity Card, you must first enable Level 1 and Level 2 access in the CieID application." actions: primary: label: Yes, log in with CieID diff --git a/package.json b/package.json index ea80529caf7..6f22e26e5fc 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "dependencies": { "@babel/plugin-transform-regenerator": "^7.18.6", "@gorhom/bottom-sheet": "^4.1.5", - "@pagopa/io-app-design-system": "3.1.0", + "@pagopa/io-app-design-system": "4.0.1", "@pagopa/io-pagopa-commons": "^3.1.0", "@pagopa/io-react-native-cieid": "^0.3.5", "@pagopa/io-react-native-crypto": "^0.3.0", diff --git a/ts/components/AppVersion.tsx b/ts/components/AppVersion.tsx index 12a191500a1..08e433c9d41 100644 --- a/ts/components/AppVersion.tsx +++ b/ts/components/AppVersion.tsx @@ -5,7 +5,7 @@ import { StyleSheet, View } from "react-native"; -import { LabelSmall } from "@pagopa/io-app-design-system"; +import { BodySmall } from "@pagopa/io-app-design-system"; import I18n from "../i18n"; import { WithTestID } from "../types/WithTestID"; import { getAppVersion } from "../utils/appVersion"; @@ -33,9 +33,9 @@ const AppVersion = ({ onPress, testID }: AppVersion) => { accessibilityLabel={appVersionText} > - + {appVersionText} - + ); diff --git a/ts/components/BonusCard/BonusCard.tsx b/ts/components/BonusCard/BonusCard.tsx index d9dca3816b6..22f73c3da71 100644 --- a/ts/components/BonusCard/BonusCard.tsx +++ b/ts/components/BonusCard/BonusCard.tsx @@ -3,7 +3,7 @@ import { H2, HSpacer, IOColors, - LabelSmall, + BodySmall, VSpacer } from "@pagopa/io-app-design-system"; import React from "react"; @@ -72,12 +72,12 @@ const BonusCardContent = (props: BonusCard) => { {name} - {organizationName} - + {status} diff --git a/ts/components/BonusCard/__tests__/BonusCard.test.tsx b/ts/components/BonusCard/__tests__/BonusCard.test.tsx index e424c5c7eb6..1b0010f27aa 100644 --- a/ts/components/BonusCard/__tests__/BonusCard.test.tsx +++ b/ts/components/BonusCard/__tests__/BonusCard.test.tsx @@ -1,15 +1,15 @@ +import { LabelMini } from "@pagopa/io-app-design-system"; import { render } from "@testing-library/react-native"; import React from "react"; import { Provider } from "react-redux"; import configureMockStore from "redux-mock-store"; -import { Chip } from "@pagopa/io-app-design-system"; +import I18n from "../../../i18n"; import { applicationChangeState } from "../../../store/actions/application"; import { appReducer } from "../../../store/reducers"; import { GlobalState } from "../../../store/reducers/types"; +import { format } from "../../../utils/dates"; import { BonusCard } from "../BonusCard"; import { BonusCardCounter } from "../BonusCardCounter"; -import I18n from "../../../i18n"; -import { format } from "../../../utils/dates"; jest.mock("react-native-safe-area-context", () => { const useSafeAreaInsets = () => ({ top: 0 }); @@ -60,11 +60,11 @@ describe("Test BonusCard", () => { name: T_NAME, organizationName: T_ORG_NAME, status: ( - + {I18n.t("bonusCard.validUntil", { endDate: format(T_END_DATE, "DD/MM/YY") })} - + ), counters: [T_COUNTER_WITH_PROGRESS, T_COUNTER] }); diff --git a/ts/components/IOMarkdown/renderRules.tsx b/ts/components/IOMarkdown/renderRules.tsx index e41da7dcacc..090db9e1c8a 100644 --- a/ts/components/IOMarkdown/renderRules.tsx +++ b/ts/components/IOMarkdown/renderRules.tsx @@ -13,7 +13,6 @@ import { IOPictogramsBleed, IOStyles, IOToast, - Label, Nullable, VSpacer } from "@pagopa/io-app-design-system"; @@ -160,7 +159,7 @@ export const DEFAULT_RULES: IOMarkdownRenderRules = { */ Strong(strong: TxtStrongNode, render: Renderer) { return ( - + {strong.children.map(render)} ); @@ -186,9 +185,14 @@ export const DEFAULT_RULES: IOMarkdownRenderRules = { }; return ( - + ); }, /** diff --git a/ts/components/__tests__/__snapshots__/IOMarkdown.test.tsx.snap b/ts/components/__tests__/__snapshots__/IOMarkdown.test.tsx.snap index 466ed862c8a..09fa05dd049 100644 --- a/ts/components/__tests__/__snapshots__/IOMarkdown.test.tsx.snap +++ b/ts/components/__tests__/__snapshots__/IOMarkdown.test.tsx.snap @@ -78,7 +78,7 @@ exports[`IOMarkdown Should match snapshot 1`] = ` @@ -694,6 +694,7 @@ exports[`IOMarkdown Should match snapshot 1`] = ` - + {JSON.stringify(truncateObjectStrings(data), null, 2)} - + ); }, [data, expandable, expanded]); @@ -82,9 +88,9 @@ export const DebugPrettyPrint = withDebugEnabled( return ( - + {title} - + - useTypographyFactory({ - ...props, - defaultWeight: "Medium", - defaultColor: "bluegrey", - font: "DMMono", - fontStyle: { fontSize: 12, lineHeight: 18 } - }); - const styles = StyleSheet.create({ container: { borderRadius: 4, diff --git a/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap index e9a281adf22..9213e3c353a 100644 --- a/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap +++ b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap @@ -366,7 +366,7 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 24, + "gap": 24, } } > @@ -964,7 +964,7 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 24, + "gap": 24, } } > @@ -1562,7 +1562,7 @@ exports[`LoadingScreenContent should match the snapshot with title, no children, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 24, + "gap": 24, } } > @@ -2157,7 +2157,7 @@ exports[`LoadingScreenContent should match the snapshot with title, no children, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 24, + "gap": 24, } } > diff --git a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap index d1a598a2797..b7e20305557 100644 --- a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap +++ b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap @@ -542,7 +542,7 @@ exports[`OperationResultScreenContent should match the snapshot with default pro "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -658,7 +658,7 @@ exports[`OperationResultScreenContent should match the snapshot with default pro "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/components/ui/BannerErrorState.tsx b/ts/components/ui/BannerErrorState.tsx index 47a715b9c18..a403603dc43 100644 --- a/ts/components/ui/BannerErrorState.tsx +++ b/ts/components/ui/BannerErrorState.tsx @@ -1,4 +1,5 @@ import { + Body, ButtonLink, Icon, IOBannerBigSpacing, @@ -8,7 +9,6 @@ import { IOScaleValues, IOSpringValues, IOStyles, - Label, VSpacer, WithTestID } from "@pagopa/io-app-design-system"; @@ -135,9 +135,7 @@ export const BannerErrorState = ({ )} {label && ( <> - + {label} {actionText && } )} diff --git a/ts/components/ui/IOScrollViewWithLargeHeader.tsx b/ts/components/ui/IOScrollViewWithLargeHeader.tsx index ab9437beca7..7439b7f5fc6 100644 --- a/ts/components/ui/IOScrollViewWithLargeHeader.tsx +++ b/ts/components/ui/IOScrollViewWithLargeHeader.tsx @@ -6,7 +6,7 @@ import { H2, HeaderSecondLevel, IOStyles, - LabelSmall, + BodySmall, VSpacer, useIOTheme } from "@pagopa/io-app-design-system"; @@ -119,9 +119,9 @@ export const IOScrollViewWithLargeHeader = forwardRef( onLayout={getTitleHeight} > {title.section && ( - + {title.section} - + )}

@@ -507,7 +507,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -651,7 +651,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -898,7 +898,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -1295,7 +1295,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -1434,7 +1434,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -1578,7 +1578,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -1825,7 +1825,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -1932,7 +1932,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, [ @@ -2050,7 +2050,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -2447,7 +2447,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -2586,7 +2586,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -2730,7 +2730,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -2977,7 +2977,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -3091,7 +3091,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -3488,7 +3488,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -3627,7 +3627,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -3912,7 +3912,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -4309,7 +4309,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -4448,7 +4448,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -4733,7 +4733,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -4840,7 +4840,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, [ @@ -4958,7 +4958,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -5355,7 +5355,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -5494,7 +5494,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -5779,7 +5779,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -5893,7 +5893,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -6290,7 +6290,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -6429,7 +6429,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -6550,7 +6550,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -6797,7 +6797,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -7194,7 +7194,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -7333,7 +7333,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -7454,7 +7454,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -7701,7 +7701,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -7808,7 +7808,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, [ @@ -7926,7 +7926,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -8323,7 +8323,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -8462,7 +8462,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -8583,7 +8583,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -8830,7 +8830,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -8944,7 +8944,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -9341,7 +9341,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -9480,7 +9480,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -9742,7 +9742,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -10139,7 +10139,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -10278,7 +10278,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -10540,7 +10540,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -10647,7 +10647,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, [ @@ -10765,7 +10765,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -11162,7 +11162,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -11301,7 +11301,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -11563,7 +11563,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -11677,7 +11677,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without description, "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap index 33d89ce8219..0026edc4bae 100644 --- a/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap +++ b/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap @@ -865,7 +865,7 @@ exports[`IOScrollViewWithListItems Rendering renders correctly with default prop "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -1501,7 +1501,7 @@ exports[`IOScrollViewWithListItems Rendering renders correctly without optional "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -2443,7 +2443,7 @@ exports[`IOScrollViewWithListItems Rendering renders subtitle as array correctly "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { diff --git a/ts/features/barcode/components/CameraPermissionView.tsx b/ts/features/barcode/components/CameraPermissionView.tsx index 6dffe2ccc50..22bf89b5a95 100644 --- a/ts/features/barcode/components/CameraPermissionView.tsx +++ b/ts/features/barcode/components/CameraPermissionView.tsx @@ -7,7 +7,7 @@ import { Pictogram, IOPictograms, H6, - LabelSmall + BodySmall } from "@pagopa/io-app-design-system"; type Props = { @@ -25,9 +25,9 @@ const CameraPermissionView = (props: Props) => ( {props.title}

- + {props.body} - + {
{I18n.t("bonus.cgn.name")}
{isExpired && expiredTag} - + {I18n.t("bonus.cgn.departmentName")} - - + + {expireDate && I18n.t("bonusCard.validUntil", { endDate: format(expireDate, "MM/YY") })} - + {!isExpired && cngLogoComponent} {withEycaLogo && eycaLogoComponent} diff --git a/ts/features/bonus/cgn/components/CgnCardStatus.tsx b/ts/features/bonus/cgn/components/CgnCardStatus.tsx index 9cbfe743cad..cff1a453752 100644 --- a/ts/features/bonus/cgn/components/CgnCardStatus.tsx +++ b/ts/features/bonus/cgn/components/CgnCardStatus.tsx @@ -1,11 +1,11 @@ +import { LabelMini, Tag } from "@pagopa/io-app-design-system"; import React from "react"; -import { Tag, Chip } from "@pagopa/io-app-design-system"; +import { Card } from "../../../../../definitions/cgn/Card"; import { CardActivated } from "../../../../../definitions/cgn/CardActivated"; -import I18n from "../../../../i18n"; -import { CardRevoked } from "../../../../../definitions/cgn/CardRevoked"; import { CardExpired } from "../../../../../definitions/cgn/CardExpired"; +import { CardRevoked } from "../../../../../definitions/cgn/CardRevoked"; +import I18n from "../../../../i18n"; import { formatDateAsShortFormat } from "../../../../utils/dates"; -import { Card } from "../../../../../definitions/cgn/Card"; export function CgnCardStatus({ card }: { card: Card }) { return ( @@ -25,11 +25,15 @@ export function CgnCardStatus({ card }: { card: Card }) { /> )} {CardActivated.is(card) && ( - + {I18n.t("bonus.cgn.detail.status.date.valid_until", { date: formatDateAsShortFormat(card.expiration_date) })} - + )} ); diff --git a/ts/features/bonus/cgn/components/merchants/CgnModuleDiscount.tsx b/ts/features/bonus/cgn/components/merchants/CgnModuleDiscount.tsx index e3b5b2e504f..e2069ebd1fd 100644 --- a/ts/features/bonus/cgn/components/merchants/CgnModuleDiscount.tsx +++ b/ts/features/bonus/cgn/components/merchants/CgnModuleDiscount.tsx @@ -59,10 +59,10 @@ export const CategoryTag = ({ category }: CategoryTagProps) => { diff --git a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountExpireProgressBar.tsx b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountExpireProgressBar.tsx index 1e5808d4126..4b76548d257 100644 --- a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountExpireProgressBar.tsx +++ b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountExpireProgressBar.tsx @@ -1,4 +1,4 @@ -import { LabelSmall, VSpacer } from "@pagopa/io-app-design-system"; +import { BodySmall, VSpacer } from "@pagopa/io-app-design-system"; import { format } from "date-fns"; import * as React from "react"; import { StyleSheet, View } from "react-native"; @@ -39,12 +39,12 @@ export const CgnDiscountExpireProgressBar = ({ - + {I18n.t("idpay.barCode.resultScreen.success.expiresIn")} - - + + {formattedSecondsToExpiration} - + ); diff --git a/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap b/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap index 01edd3f3a26..a96b5ec7bbd 100644 --- a/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap +++ b/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap @@ -698,7 +698,7 @@ exports[`CGNDiscountExpiredScreen should render correctly 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { diff --git a/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap b/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap index a09134d4bc4..31ea5743252 100644 --- a/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap +++ b/ts/features/bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap @@ -679,7 +679,7 @@ exports[`CgnDiscountCodeScreen should render correctly 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -796,7 +796,7 @@ exports[`CgnDiscountCodeScreen should render correctly 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/features/bonus/common/components/BonusInformationComponent.tsx b/ts/features/bonus/common/components/BonusInformationComponent.tsx index 8502729db12..db42d0d16bb 100644 --- a/ts/features/bonus/common/components/BonusInformationComponent.tsx +++ b/ts/features/bonus/common/components/BonusInformationComponent.tsx @@ -1,9 +1,3 @@ -import * as AR from "fp-ts/lib/Array"; -import { constNull, pipe } from "fp-ts/lib/function"; -import * as O from "fp-ts/lib/Option"; -import * as React from "react"; -import { ComponentProps } from "react"; -import { Image } from "react-native"; import { Body, ButtonSolidProps, @@ -13,11 +7,15 @@ import { IOSpacer, IOSpacingScale, IOVisualCostants, - Label, VSpacer, buttonSolidHeight } from "@pagopa/io-app-design-system"; -import { useSafeAreaInsets } from "react-native-safe-area-context"; +import * as AR from "fp-ts/lib/Array"; +import { constNull, pipe } from "fp-ts/lib/function"; +import * as O from "fp-ts/lib/Option"; +import * as React from "react"; +import { ComponentProps } from "react"; +import { Image } from "react-native"; import Animated, { Easing, useAnimatedScrollHandler, @@ -25,16 +23,17 @@ import Animated, { useSharedValue, withTiming } from "react-native-reanimated"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { BonusAvailable } from "../../../../../definitions/content/BonusAvailable"; import { BonusAvailableContent } from "../../../../../definitions/content/BonusAvailableContent"; +import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader"; import { LightModalContext } from "../../../../components/ui/LightModal"; +import { Markdown } from "../../../../components/ui/Markdown/Markdown"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; import customVariables from "../../../../theme/variables"; -import { getRemoteLocale } from "../../../messages/utils/messages"; import { maybeNotNullyString } from "../../../../utils/strings"; -import { Markdown } from "../../../../components/ui/Markdown/Markdown"; -import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader"; -import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; +import { getRemoteLocale } from "../../../messages/utils/messages"; import TosBonusComponent from "./TosBonusComponent"; type OwnProps = { @@ -93,14 +92,14 @@ const getTosFooter = ( {I18n.t("bonus.bonusVacanze.advice")} - + ), // if tos and regulation url is defined diff --git a/ts/features/cie/__tests__/__snapshots__/CieIdErrorScreen.test.tsx.snap b/ts/features/cie/__tests__/__snapshots__/CieIdErrorScreen.test.tsx.snap index f785d90417c..b563c986d11 100644 --- a/ts/features/cie/__tests__/__snapshots__/CieIdErrorScreen.test.tsx.snap +++ b/ts/features/cie/__tests__/__snapshots__/CieIdErrorScreen.test.tsx.snap @@ -349,7 +349,7 @@ exports[`CieIdErrorScreen where device doesn't support NFC Should match the snap "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -466,7 +466,7 @@ exports[`CieIdErrorScreen where device doesn't support NFC Should match the snap "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -837,7 +837,7 @@ Insert the CIE PIN and bring it close to the device to allow the data to be read "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -954,7 +954,7 @@ Insert the CIE PIN and bring it close to the device to allow the data to be read "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalled.test.tsx.snap b/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalled.test.tsx.snap index f2fca277062..11d9e6452aa 100644 --- a/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalled.test.tsx.snap +++ b/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalled.test.tsx.snap @@ -335,7 +335,7 @@ exports[`CieIdNotInstalled Should match the snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -452,7 +452,7 @@ exports[`CieIdNotInstalled Should match the snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalledScreen.test.tsx.snap b/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalledScreen.test.tsx.snap index 3e32724a974..97006294ce7 100644 --- a/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalledScreen.test.tsx.snap +++ b/ts/features/cie/__tests__/__snapshots__/CieIdNotInstalledScreen.test.tsx.snap @@ -335,7 +335,7 @@ exports[`CieIdNotInstalledScreen Should match snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -452,7 +452,7 @@ exports[`CieIdNotInstalledScreen Should match snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/features/cie/__tests__/__snapshots__/wizards.test.tsx.snap b/ts/features/cie/__tests__/__snapshots__/wizards.test.tsx.snap index 941bf10566b..98caafee54e 100644 --- a/ts/features/cie/__tests__/__snapshots__/wizards.test.tsx.snap +++ b/ts/features/cie/__tests__/__snapshots__/wizards.test.tsx.snap @@ -92,7 +92,7 @@ exports[`CieIdWizard Should match the snapshot 1`] = ` > If you have the CieID app on your device, enter the code you have set for the CieID app or use your face or fingerprint. -To enter the IO app without physically using the Electronic Identity Card,you must first enable Level 1 and Level 2 access in the CieID application. +To enter the IO app without physically using the Electronic Identity Card, you must first enable Level 1 and Level 2 access in the CieID application. {

{title}

{description && ( - + {description} - + )} ); diff --git a/ts/features/design-system/core/DSBadges.tsx b/ts/features/design-system/core/DSBadges.tsx index cdcbdaca6e6..ec4b090a3d7 100644 --- a/ts/features/design-system/core/DSBadges.tsx +++ b/ts/features/design-system/core/DSBadges.tsx @@ -118,10 +118,10 @@ const renderTag = () => ( diff --git a/ts/features/design-system/core/DSColors.tsx b/ts/features/design-system/core/DSColors.tsx index e5901002e29..141b3ffb784 100644 --- a/ts/features/design-system/core/DSColors.tsx +++ b/ts/features/design-system/core/DSColors.tsx @@ -10,7 +10,7 @@ import { IOColorsTints, IOThemeDark, IOThemeLight, - LabelSmall, + BodySmall, VStack, hexToRgba, themeStatusColorsDarkMode, @@ -300,10 +300,10 @@ export const DSColors = () => {

Legacy palette (†2023)

- + Not moved to the “Legacy” category yet, because it's currently used everywhere - + diff --git a/ts/features/design-system/core/DSDynamicBackground.tsx b/ts/features/design-system/core/DSDynamicBackground.tsx index 010d7d2cc8a..6584301922f 100644 --- a/ts/features/design-system/core/DSDynamicBackground.tsx +++ b/ts/features/design-system/core/DSDynamicBackground.tsx @@ -8,7 +8,7 @@ import { HStack, IOColors, IOVisualCostants, - LabelSmall, + BodySmall, RadioGroup, VStack, hexToRgba, @@ -163,13 +163,13 @@ export const DSDynamicBackground = () => { />

{entityData?.name}

- {entityData?.name} - + diff --git a/ts/features/design-system/core/DSHeaderSecondLevelWithSectionTitle.tsx b/ts/features/design-system/core/DSHeaderSecondLevelWithSectionTitle.tsx index bc6ae69f1fc..686e80fd63d 100644 --- a/ts/features/design-system/core/DSHeaderSecondLevelWithSectionTitle.tsx +++ b/ts/features/design-system/core/DSHeaderSecondLevelWithSectionTitle.tsx @@ -13,15 +13,13 @@ import { HeaderSecondLevel, IOColors, IOVisualCostants, + makeFontStyleObject, VSpacer } from "@pagopa/io-app-design-system"; -import { makeFontStyleObject } from "../../../components/core/fonts"; const styles = StyleSheet.create({ sectionTitle: { - ...makeFontStyleObject("Regular", false, "ReadexPro"), - fontSize: 14, - lineHeight: 18, + ...makeFontStyleObject(14, "Titillio", 18, "Semibold"), color: IOColors["grey-700"] } }); diff --git a/ts/features/design-system/core/DSLayout.tsx b/ts/features/design-system/core/DSLayout.tsx index b6722f1b0c1..8ef0c147e53 100644 --- a/ts/features/design-system/core/DSLayout.tsx +++ b/ts/features/design-system/core/DSLayout.tsx @@ -8,7 +8,7 @@ import { IOAppMargin, IOColors, IOSpacer, - LabelSmall, + BodySmall, VStack, useIOTheme } from "@pagopa/io-app-design-system"; @@ -59,13 +59,13 @@ const Grid = () => { }} > Content example - {value} - + @@ -204,10 +204,10 @@ const VStackBlocks = () => { backgroundColor: IOColors[theme["appBackground-tertiary"]] }} > - {`Block n.${i + 1}`} + >{`Block n.${i + 1}`} ))} { backgroundColor: IOColors[theme["appBackground-tertiary"]] }} > - + Different height - + ); @@ -243,9 +243,9 @@ const HStackBlocks = () => { backgroundColor: IOColors[theme["appBackground-tertiary"]] }} > - {`${ + {`${ i + 1 - }`} + }`} ))} { backgroundColor: IOColors[theme["appBackground-tertiary"]] }} > - + Growing block - + ); diff --git a/ts/features/design-system/core/DSLegacyTextFields.tsx b/ts/features/design-system/core/DSLegacyTextFields.tsx index 51ea4adac5f..41f60c1097a 100644 --- a/ts/features/design-system/core/DSLegacyTextFields.tsx +++ b/ts/features/design-system/core/DSLegacyTextFields.tsx @@ -1,9 +1,4 @@ -import { - H4, - IOColors, - LabelSmall, - VSpacer -} from "@pagopa/io-app-design-system"; +import { H4, IOColors, BodySmall, VSpacer } from "@pagopa/io-app-design-system"; import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import React, { useState } from "react"; @@ -201,9 +196,9 @@ const LegacyTextFields = () => { accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants" > - + With two lines, this custom description breaks everything ¯\_(ツ)_/¯ - + diff --git a/ts/features/design-system/core/DSNumberPad.tsx b/ts/features/design-system/core/DSNumberPad.tsx index 3b67cc0aa38..7f9c551296e 100644 --- a/ts/features/design-system/core/DSNumberPad.tsx +++ b/ts/features/design-system/core/DSNumberPad.tsx @@ -7,7 +7,7 @@ import { NumberPad, VSpacer, hexToRgba, - LabelSmall, + BodySmall, IOVisualCostants, Pictogram, Body, @@ -96,9 +96,12 @@ export const DSNumberPad = () => { bottom: -32 }} > - + {value} - + > => [ { value: "Let's try with JSX description", description: ( - + Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti.{" "} Potrai sempre disattivare le comunicazioni che non ti interessano. - + ), id: "example-jsx-element" }, diff --git a/ts/features/design-system/core/DSTypography.tsx b/ts/features/design-system/core/DSTypography.tsx index d514e68b8db..5563710fdc8 100644 --- a/ts/features/design-system/core/DSTypography.tsx +++ b/ts/features/design-system/core/DSTypography.tsx @@ -3,7 +3,6 @@ import { BodyMonospace, ButtonText, Caption, - Chip, Divider, H1, H2, @@ -14,9 +13,8 @@ import { HStack, Hero, IOColors, - Label, LabelMini, - LabelSmall, + BodySmall, MdH1, MdH2, MdH3, @@ -45,12 +43,10 @@ export const DSTypography = () => ( - - + - @@ -93,7 +89,7 @@ const H3Row = () => { const theme = useIOTheme(); return ( - +

Header H3

Header H3

{ >

Header H3

 +

Header H3 Bold

 ); }; @@ -175,18 +172,6 @@ const CaptionRow = () => { ); }; -const ChipRow = () => { - const theme = useIOTheme(); - - return ( - - Chip - Chip - Chip - - ); -}; - const BodyRow = () => ( Body @@ -198,7 +183,6 @@ const BodyRow = () => ( eget pharetra mauris posuere semper. Body Semibold - Body Bold Body asLink @@ -206,53 +190,53 @@ const BodyRow = () => ( ); -export const LabelSmallRow = () => { +export const BodySmallRow = () => { const theme = useIOTheme(); return ( <> - - Label small - Label small + + Body small + Body small - Label small + Body small - - Label small asLink - + + Body small asLink + - - Label small SB - - Label small SB - + + Body small SB + + Body small SB + - - Label small SB - + + Body small SB + - - Label small SB asLink - + + Body small SB asLink + - Label small Regular - - Label small Regular - + Body small Regular + + Body small Regular + - - Label small Regular - + + Body small Regular + - - Label small Regular asLink - + + Body small Regular asLink + ); @@ -263,7 +247,7 @@ export const LabelMiniRow = () => { return ( <> - + Label mini Label mini { - + Label mini Regular Label mini Regular @@ -302,27 +286,6 @@ export const LabelMiniRow = () => { ); }; -export const LabelRow = () => { - const theme = useIOTheme(); - - return ( - - - - - - - - - ); -}; - export const MdH1Row = () => ( {getTitle("Markdown H1")} diff --git a/ts/features/fci/components/InfoScreenComponent.tsx b/ts/features/fci/components/InfoScreenComponent.tsx index 3de7fb637de..1ef5c015964 100644 --- a/ts/features/fci/components/InfoScreenComponent.tsx +++ b/ts/features/fci/components/InfoScreenComponent.tsx @@ -1,8 +1,8 @@ -import * as React from "react"; -import { Linking, StyleSheet, Text, View } from "react-native"; +import { Body, H2, VSpacer } from "@pagopa/io-app-design-system"; import { EmailString } from "@pagopa/ts-commons/lib/strings"; -import { Body, H2, Label, VSpacer } from "@pagopa/io-app-design-system"; import { useFocusEffect } from "@react-navigation/native"; +import * as React from "react"; +import { Linking, StyleSheet, Text, View } from "react-native"; import themeVariables from "../../../theme/variables"; import { setAccessibilityFocus } from "../../../utils/accessibility"; @@ -35,9 +35,13 @@ const renderNode = (body: string | React.ReactNode, email?: EmailString) => { {email && <> } {email && ( - + )} ); diff --git a/ts/features/fci/components/LinkedText.tsx b/ts/features/fci/components/LinkedText.tsx index 5eaad1b03e1..596f74fa992 100644 --- a/ts/features/fci/components/LinkedText.tsx +++ b/ts/features/fci/components/LinkedText.tsx @@ -1,4 +1,4 @@ -import { H4, H6, Label, WithTestID } from "@pagopa/io-app-design-system"; +import { Body, H4, H6, WithTestID } from "@pagopa/io-app-design-system"; import * as O from "fp-ts/lib/Option"; import * as React from "react"; @@ -63,7 +63,8 @@ const LinkedText = (props: Props) => { const textToBeLinked = splitted[1]; const url = splitted[2]; return ( - + ); }; diff --git a/ts/features/fci/components/SignatureFieldItem.tsx b/ts/features/fci/components/SignatureFieldItem.tsx index 6c12dcd1b15..cfb421f08b1 100644 --- a/ts/features/fci/components/SignatureFieldItem.tsx +++ b/ts/features/fci/components/SignatureFieldItem.tsx @@ -1,11 +1,11 @@ -import * as React from "react"; -import { View, StyleSheet } from "react-native"; import { + Body, IOColors, IOStyles, - Label, ListItemCheckbox } from "@pagopa/io-app-design-system"; +import * as React from "react"; +import { StyleSheet, View } from "react-native"; import I18n from "../../../i18n"; type Props = { @@ -49,7 +49,8 @@ const SignatureFieldItem = (props: Props) => { accessibilityLabel={props.title} /> - + ); diff --git a/ts/features/fci/components/SignatureRequestItem.tsx b/ts/features/fci/components/SignatureRequestItem.tsx index d0ecdc51e17..a894641e7b3 100644 --- a/ts/features/fci/components/SignatureRequestItem.tsx +++ b/ts/features/fci/components/SignatureRequestItem.tsx @@ -5,7 +5,7 @@ import { Divider, H6, HSpacer, - LabelSmall + BodySmall } from "@pagopa/io-app-design-system"; import { SignatureRequestListView } from "../../../../definitions/fci/SignatureRequestListView"; import { SignatureRequestStatusEnum } from "../../../../definitions/fci/SignatureRequestStatus"; @@ -66,13 +66,13 @@ const SignatureRequestItem = (props: Props) => { >
{item.dossier_title}
- + {I18n.t("features.fci.requests.itemSubtitle", { date: item.created_at.toLocaleDateString(), time: item.created_at.toLocaleTimeString(), id: item.id })} - + {renderStatusLabel()} diff --git a/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap index 12ae6680253..af453cd0b02 100644 --- a/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap +++ b/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap @@ -391,6 +391,7 @@ exports[`Test QtspClauseListItem component should render a QtspClauseListItem co {
{I18n.t("features.fci.shareDataScreen.alertText")} - +
diff --git a/ts/features/fims/common/components/__tests__/__snapshots__/FimsUpdateAppAlert.test.tsx.snap b/ts/features/fims/common/components/__tests__/__snapshots__/FimsUpdateAppAlert.test.tsx.snap index d365ab68457..be61cdcb5c6 100644 --- a/ts/features/fims/common/components/__tests__/__snapshots__/FimsUpdateAppAlert.test.tsx.snap +++ b/ts/features/fims/common/components/__tests__/__snapshots__/FimsUpdateAppAlert.test.tsx.snap @@ -680,7 +680,7 @@ exports[`FimsUpdateAppAlert should match snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -797,7 +797,7 @@ exports[`FimsUpdateAppAlert should match snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/features/fims/history/components/FimsHistoryListItem.tsx b/ts/features/fims/history/components/FimsHistoryListItem.tsx index e0f96d7fcdf..e098e64ec9e 100644 --- a/ts/features/fims/history/components/FimsHistoryListItem.tsx +++ b/ts/features/fims/history/components/FimsHistoryListItem.tsx @@ -5,7 +5,7 @@ import { Icon, IOListItemStyles, IOStyles, - LabelSmall, + BodySmall, useIOTheme, VSpacer } from "@pagopa/io-app-design-system"; @@ -52,9 +52,9 @@ const SuccessListItem = ({ serviceData, consent }: SuccessListItemProps) => {
{serviceData.organization_name}
- + {consent.redirect?.display_name} - + ); }; @@ -82,9 +82,9 @@ const FailureListItem = ({ item }: BaseHistoryListItemProps) => { - + {I18n.t("FIMS.history.errorStates.dataUnavailable")} - + diff --git a/ts/features/fims/singleSignOn/components/FimsPrivacyInfo.tsx b/ts/features/fims/singleSignOn/components/FimsPrivacyInfo.tsx index a4be01dc420..301746b2fab 100644 --- a/ts/features/fims/singleSignOn/components/FimsPrivacyInfo.tsx +++ b/ts/features/fims/singleSignOn/components/FimsPrivacyInfo.tsx @@ -1,4 +1,4 @@ -import { Label } from "@pagopa/io-app-design-system"; +import { Body } from "@pagopa/io-app-design-system"; import * as React from "react"; import { LoadingSkeleton } from "../../../../components/ui/Markdown/LoadingSkeleton"; import I18n from "../../../../i18n"; @@ -6,12 +6,12 @@ import { openWebUrl } from "../../../../utils/url"; export const FimsPrivacyInfo = ({ privacyUrl }: PrivacyInfoProps) => privacyUrl !== undefined ? ( - + + ) : ( ); diff --git a/ts/features/fims/singleSignOn/components/FimsSuccessBody.tsx b/ts/features/fims/singleSignOn/components/FimsSuccessBody.tsx index 99ce219bcb3..51a4c2607fc 100644 --- a/ts/features/fims/singleSignOn/components/FimsSuccessBody.tsx +++ b/ts/features/fims/singleSignOn/components/FimsSuccessBody.tsx @@ -10,7 +10,6 @@ import { Icon, IOColors, IOStyles, - Label, ListItemHeader, VSpacer } from "@pagopa/io-app-design-system"; @@ -20,6 +19,7 @@ import * as O from "fp-ts/Option"; import * as React from "react"; import { StyleSheet, View } from "react-native"; import { ServiceId } from "../../../../../definitions/backend/ServiceId"; +import { Consent } from "../../../../../definitions/fims_sso/Consent"; import { FooterActions } from "../../../../components/ui/FooterActions"; import { LoadingSkeleton } from "../../../../components/ui/Markdown/LoadingSkeleton"; import I18n from "../../../../i18n"; @@ -27,13 +27,12 @@ import { useIODispatch, useIOStore } from "../../../../store/hooks"; import { useIOBottomSheetModal } from "../../../../utils/hooks/bottomSheet"; import { openWebUrl } from "../../../../utils/url"; import { logoForService } from "../../../services/home/utils"; -import { useAutoFetchingServiceByIdPot } from "../../common/hooks"; -import { fimsGetRedirectUrlAndOpenIABAction } from "../store/actions"; import { computeAndTrackDataShare, computeAndTrackDataShareAccepted } from "../../common/analytics"; -import { Consent } from "../../../../../definitions/fims_sso/Consent"; +import { useAutoFetchingServiceByIdPot } from "../../common/hooks"; +import { fimsGetRedirectUrlAndOpenIABAction } from "../store/actions"; import { FimsClaimsList } from "./FimsClaims"; import { FimsSSOFullScreenError } from "./FimsFullScreenErrors"; import { FimsPrivacyInfo } from "./FimsPrivacyInfo"; @@ -87,9 +86,9 @@ export const FimsFlowSuccessBody = ({ serviceData !== undefined ? ( {I18n.t("FIMS.consentsScreen.subtitle")} - {serviceData.organization_name} + {serviceData.organization_name} {I18n.t("FIMS.consentsScreen.subtitle2")} - {consents.redirect.display_name ?? ""}. + {consents.redirect.display_name ?? ""}. ) : ( @@ -178,11 +177,9 @@ const generateBottomSheetProps = ( title: I18n.t("FIMS.consentsScreen.bottomSheet.title"), component: ( <> - + {I18n.t("FIMS.consentsScreen.bottomSheet.body")} - + ), snapPoint: [340] diff --git a/ts/features/idpay/barcode/components/BarcodeExpirationProgressBar.tsx b/ts/features/idpay/barcode/components/BarcodeExpirationProgressBar.tsx index 97b8a4669af..f240d3391f9 100644 --- a/ts/features/idpay/barcode/components/BarcodeExpirationProgressBar.tsx +++ b/ts/features/idpay/barcode/components/BarcodeExpirationProgressBar.tsx @@ -1,4 +1,4 @@ -import { LabelSmall, VSpacer } from "@pagopa/io-app-design-system"; +import { BodySmall, VSpacer } from "@pagopa/io-app-design-system"; import { format } from "date-fns"; import * as React from "react"; import { StyleSheet, View } from "react-native"; @@ -42,12 +42,12 @@ export const IdPayBarcodeExpireProgressBar = ({ - + {I18n.t("idpay.barCode.resultScreen.success.expiresIn")} - - + + {formattedSecondsToExpiration} - + ); diff --git a/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx b/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx index aae2b61bf31..48e92f02046 100644 --- a/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx +++ b/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx @@ -7,7 +7,7 @@ import { IOColors, IOStyles, IOVisualCostants, - LabelSmall, + BodySmall, VSpacer } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; @@ -146,12 +146,12 @@ const SuccessContent = ({ goBack, barcode }: SuccessContentProps) => { - + {I18n.t("idpay.barCode.resultScreen.success.validUpTo")} - - + + {formatNumberCurrencyCents(barcode.residualBudgetCents)} - + diff --git a/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx b/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx index 2664c5e4c5c..7fbc2f5a4e3 100644 --- a/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx +++ b/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx @@ -7,7 +7,6 @@ import { H3, IOColors, IOStyles, - Label, VSpacer } from "@pagopa/io-app-design-system"; import { RouteProp, useNavigation, useRoute } from "@react-navigation/native"; @@ -87,12 +86,12 @@ const IdPayCodeDisplayScreen = () => { {I18n.t("idpay.code.onboarding.body1")} - + {I18n.t("idpay.code.onboarding.bodyBold")} - + diff --git a/ts/features/idpay/code/screens/IdPayCodeRenewScreen.tsx b/ts/features/idpay/code/screens/IdPayCodeRenewScreen.tsx index edeb4794277..3be24d5b275 100644 --- a/ts/features/idpay/code/screens/IdPayCodeRenewScreen.tsx +++ b/ts/features/idpay/code/screens/IdPayCodeRenewScreen.tsx @@ -2,7 +2,6 @@ import { Body, H2, IOStyles, - Label, ListItemAction, VSpacer } from "@pagopa/io-app-design-system"; @@ -68,9 +67,9 @@ export const IdPayCodeRenewScreen = () => {

{I18n.t("idpay.code.renew.screen.header")}

{I18n.t("idpay.code.renew.screen.body")} - + { > - + {I18n.t("idpay.configuration.iban.onboarding.bottomLabel")} - + { )}
{props.title}
- + {props.subTitle} - + ); diff --git a/ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx b/ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx index 63a665e419d..71349c27c27 100644 --- a/ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx +++ b/ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx @@ -1,4 +1,4 @@ -import { Label, LabelSmall, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, BodySmall, VSpacer } from "@pagopa/io-app-design-system"; import { NonEmptyString } from "@pagopa/ts-commons/lib/strings"; import { useNavigation } from "@react-navigation/native"; import { sequenceS } from "fp-ts/lib/Apply"; @@ -235,9 +235,9 @@ const BeneficiaryDetailsContent = (props: BeneficiaryDetailsProps) => { ]} /> - + {lastUpdateString} - + { /> - + - + diff --git a/ts/features/idpay/details/components/IdPayInitiativeLastUpdateCounter.tsx b/ts/features/idpay/details/components/IdPayInitiativeLastUpdateCounter.tsx index b0ae5bab252..3cb515316cd 100644 --- a/ts/features/idpay/details/components/IdPayInitiativeLastUpdateCounter.tsx +++ b/ts/features/idpay/details/components/IdPayInitiativeLastUpdateCounter.tsx @@ -1,4 +1,4 @@ -import { LabelSmall } from "@pagopa/io-app-design-system"; +import { BodySmall } from "@pagopa/io-app-design-system"; import { format } from "date-fns"; import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; @@ -26,7 +26,7 @@ const IdPayInitiativeLastUpdateCounter = (props: Props) => { ); return ( - { "idpay.initiative.details.initiativeDetailsScreen.configured.lastUpdated" )} {lastUpdateString} - + ); }; diff --git a/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx b/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx index 2b5eb2cba61..4b01d37103a 100644 --- a/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx +++ b/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx @@ -6,7 +6,6 @@ import { HSpacer, IOColors, Icon, - Label, VSpacer } from "@pagopa/io-app-design-system"; import React from "react"; @@ -60,9 +59,9 @@ const InitiativeRulesInfoBox = (props: Props) => { - + diff --git a/ts/features/idpay/details/components/InitiativeTimelineComponent.tsx b/ts/features/idpay/details/components/InitiativeTimelineComponent.tsx index 31d8e070747..dfc3214da2a 100644 --- a/ts/features/idpay/details/components/InitiativeTimelineComponent.tsx +++ b/ts/features/idpay/details/components/InitiativeTimelineComponent.tsx @@ -2,7 +2,7 @@ import { Body, Divider, H6, - LabelSmall, + BodySmall, VSpacer } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; @@ -108,7 +108,7 @@ const TimelineComponentSkeleton = ({ size = 3 }: Pick) => ( ); const EmptyTimelineComponent = () => ( - ( {I18n.t( "idpay.initiative.details.initiativeDetailsScreen.configured.yourOperationsSubtitle" )} - + ); const InitiativeTimelineComponentSkeleton = ({ diff --git a/ts/features/idpay/details/screens/IdPayInitiativeDetailsScreen.tsx b/ts/features/idpay/details/screens/IdPayInitiativeDetailsScreen.tsx index 2f9a8729d96..600926af957 100644 --- a/ts/features/idpay/details/screens/IdPayInitiativeDetailsScreen.tsx +++ b/ts/features/idpay/details/screens/IdPayInitiativeDetailsScreen.tsx @@ -1,9 +1,9 @@ import { Body, ButtonSolid, - Chip, ContentWrapper, H6, + LabelMini, Pictogram, Tag, VSpacer @@ -36,6 +36,7 @@ import { format } from "../../../../utils/dates"; import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder"; import { IdPayCodeCieBanner } from "../../code/components/IdPayCodeCieBanner"; import { IdPayConfigurationRoutes } from "../../configuration/navigation/routes"; +import { ConfigurationMode } from "../../configuration/types"; import { IdPayInitiativeLastUpdateCounter } from "../components/IdPayInitiativeLastUpdateCounter"; import { InitiativeDiscountSettingsComponent } from "../components/InitiativeDiscountSettingsComponent"; import { InitiativeRefundSettingsComponent } from "../components/InitiativeRefundSettingsComponent"; @@ -51,7 +52,6 @@ import { initiativeNeedsConfigurationSelector } from "../store"; import { idpayInitiativeGet, idpayTimelinePageGet } from "../store/actions"; -import { ConfigurationMode } from "../../configuration/types"; export type IdPayInitiativeDetailsScreenParams = { initiativeId: string; @@ -361,11 +361,11 @@ export function IdPayCardStatus({ switch (getInitiativeStatus()) { case "ACTIVE": return ( - + {I18n.t("bonusCard.validUntil", { endDate: format(initiative.endDate, "DD/MM/YY") })} - + ); case "EXPIRING": return ( diff --git a/ts/features/idpay/onboarding/components/OnboardingPrivacyAdvice.tsx b/ts/features/idpay/onboarding/components/OnboardingPrivacyAdvice.tsx index 3b70ff545f9..87cde38f709 100644 --- a/ts/features/idpay/onboarding/components/OnboardingPrivacyAdvice.tsx +++ b/ts/features/idpay/onboarding/components/OnboardingPrivacyAdvice.tsx @@ -1,4 +1,4 @@ -import { Body, IOToast, LabelSmall } from "@pagopa/io-app-design-system"; +import { Body, IOToast, BodySmall } from "@pagopa/io-app-design-system"; import * as React from "react"; import I18n from "../../../../i18n"; import { openWebUrl } from "../../../../utils/url"; @@ -19,26 +19,28 @@ const OnboardingPrivacyAdvice = (props: OnboardingPrivacyAdviceProps) => { return ( - + {I18n.t("idpay.onboarding.beforeContinue.text1")} - - + {I18n.t("idpay.onboarding.beforeContinue.tosLink")} - - + + {I18n.t("idpay.onboarding.beforeContinue.text2")} - - + {I18n.t("idpay.onboarding.beforeContinue.privacyLink")} - + ); }; diff --git a/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx index 9004111688a..80a51189161 100644 --- a/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx +++ b/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx @@ -2,7 +2,6 @@ import { Body, FooterWithButtons, H2, - Label, VSpacer } from "@pagopa/io-app-design-system"; import React from "react"; @@ -17,13 +16,13 @@ import I18n from "../../../../i18n"; import { dpr28Dec2000Url } from "../../../../urls"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; import { openWebUrl } from "../../../../utils/url"; +import { isLoadingSelector } from "../../common/machine/selectors"; import { IdPayOnboardingMachineContext } from "../machine/provider"; import { areAllSelfDeclarationsToggledSelector, boolRequiredCriteriaSelector, selectSelfDeclarationBoolAnswers } from "../machine/selectors"; -import { isLoadingSelector } from "../../common/machine/selectors"; const InitiativeSelfDeclarationsScreen = () => { const { useActorRef, useSelector } = IdPayOnboardingMachineContext; @@ -64,9 +63,13 @@ const InitiativeSelfDeclarationsScreen = () => {

{I18n.t("idpay.onboarding.boolPrerequisites.header")}

{I18n.t("idpay.onboarding.boolPrerequisites.body")} - + {selfCriteriaBool.map((criteria, index) => ( diff --git a/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx index 15625551be8..3c3019ea0b7 100644 --- a/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx +++ b/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx @@ -7,7 +7,6 @@ import { IOColors, IOStyles, Icon, - Label, PressableListItemBase, VSpacer } from "@pagopa/io-app-design-system"; @@ -101,9 +100,9 @@ const MultiValuePrerequisiteItemScreenContent = ({ {/* TODO: Add a proper `onPress` function to the following link. It was a `` without anything else before */} {/* eslint-disable-next-line @typescript-eslint/no-empty-function */} - +
{selfDeclaration.description}
diff --git a/ts/features/idpay/wallet/components/IDPayCardPreviewComponent.tsx b/ts/features/idpay/wallet/components/IDPayCardPreviewComponent.tsx index 7eba032cbe3..c76a67c0a87 100644 --- a/ts/features/idpay/wallet/components/IDPayCardPreviewComponent.tsx +++ b/ts/features/idpay/wallet/components/IDPayCardPreviewComponent.tsx @@ -2,7 +2,7 @@ import { H6, HSpacer, IOColors, - LabelSmall, + BodySmall, VSpacer, hexToRgba } from "@pagopa/io-app-design-system"; @@ -83,9 +83,9 @@ const IDPayCardPreviewComponent = (props: Props) => { {initiativeName} - + {availableAmount} - + {logoComponent} diff --git a/ts/features/idpay/wallet/components/IdPayCard.tsx b/ts/features/idpay/wallet/components/IdPayCard.tsx index 4c4e7c85db8..1a23c68fc70 100644 --- a/ts/features/idpay/wallet/components/IdPayCard.tsx +++ b/ts/features/idpay/wallet/components/IdPayCard.tsx @@ -1,4 +1,4 @@ -import { Avatar, H3, H6, Label, VSpacer } from "@pagopa/io-app-design-system"; +import { Avatar, Body, H3, H6, VSpacer } from "@pagopa/io-app-design-system"; import { format } from "date-fns"; import React from "react"; import { ImageURISource, StyleSheet, View } from "react-native"; @@ -37,16 +37,18 @@ export const IdPayCard = (props: IdPayCardProps) => ( - + + Disponibile +

{formatNumberCentsToAmount(props.amount, true, "right")}

- + ); diff --git a/ts/features/idpay/wallet/components/__tests__/__snapshots__/IdPayCard.test.tsx.snap b/ts/features/idpay/wallet/components/__tests__/__snapshots__/IdPayCard.test.tsx.snap index e3dd7db6aec..851b1724177 100644 --- a/ts/features/idpay/wallet/components/__tests__/__snapshots__/IdPayCard.test.tsx.snap +++ b/ts/features/idpay/wallet/components/__tests__/__snapshots__/IdPayCard.test.tsx.snap @@ -130,6 +130,7 @@ exports[`IdPayCard should match the snapshot 1`] = ` /> diff --git a/ts/features/itwallet/common/components/ItwMarkdown.tsx b/ts/features/itwallet/common/components/ItwMarkdown.tsx index 02050f2665c..74ac212e99d 100644 --- a/ts/features/itwallet/common/components/ItwMarkdown.tsx +++ b/ts/features/itwallet/common/components/ItwMarkdown.tsx @@ -14,7 +14,6 @@ import { H6, h6FontSize, IOToast, - Label, VSpacer } from "@pagopa/io-app-design-system"; import _ from "lodash"; @@ -74,12 +73,13 @@ const getRules = (onLinkOpen?: ItwMarkdownProps["onLinkOpen"]) => ({ ), strong: (node: ASTNode, children: Array) => ( - + {children} ), link: (node: ASTNode, children: Array) => ( - + ) }); diff --git a/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx b/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx index 0bba0582a05..bbf501e3b62 100644 --- a/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx +++ b/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx @@ -1,13 +1,7 @@ -import { - IOFontWeight, - useTypographyFactory -} from "@pagopa/io-app-design-system"; +import { IOFontWeight, IOText } from "@pagopa/io-app-design-system"; import React from "react"; import { TextStyle, useWindowDimensions } from "react-native"; -const defaultFontSize = 11; -const defaultFontWeight: IOFontWeight = "Semibold"; - export type ClaimLabelProps = { fontSize?: number; fontWeight?: IOFontWeight; @@ -20,8 +14,8 @@ export type ClaimLabelProps = { export const ClaimLabel: React.FunctionComponent< React.PropsWithChildren > = ({ - fontSize = defaultFontSize, - fontWeight = defaultFontWeight, + fontSize = 11, + fontWeight = "Semibold", textTransform = "none", ...props }) => { @@ -32,16 +26,21 @@ export const ClaimLabel: React.FunctionComponent< // and then we scale it to the current screen width const fontScale = width / 360; - return useTypographyFactory({ - ...props, - defaultWeight: fontWeight, - defaultColor: "black", - font: "TitilliumSansPro", - fontStyle: { fontSize: fontSize * fontScale, textTransform }, - lineBreakMode: "head", - numberOfLines: 1, - // This text should not be read by the voiceover. - // If you want to make it accessible use the parent components - accessible: false - }); + return ( + + {props.children} + + ); }; diff --git a/ts/features/itwallet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap b/ts/features/itwallet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap index a3823f556ae..81f440866c0 100644 --- a/ts/features/itwallet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap +++ b/ts/features/itwallet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap @@ -210,35 +210,25 @@ exports[`CardData should match snapshot for DC front data 1`] = ` Marco @@ -260,35 +250,25 @@ exports[`CardData should match snapshot for DC front data 1`] = ` Rossi @@ -310,35 +290,25 @@ exports[`CardData should match snapshot for DC front data 1`] = ` 15/03/90 @@ -360,35 +330,25 @@ exports[`CardData should match snapshot for DC front data 1`] = ` 10008581 @@ -410,35 +370,25 @@ exports[`CardData should match snapshot for DC front data 1`] = ` 23/03/32 @@ -474,35 +424,25 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` 23/01/35 @@ -524,35 +464,25 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` 16/02/35 @@ -574,35 +504,25 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` 23/01/35 @@ -624,35 +544,25 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` 16/02/35 @@ -674,35 +584,25 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` 78 @@ -724,35 +624,25 @@ exports[`CardData should match snapshot for MDL back data 1`] = ` 71 MS5118113X @@ -821,35 +711,25 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` ROSSI @@ -871,35 +751,25 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` MARCO @@ -921,35 +791,25 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` 22/09/92 @@ -971,35 +831,25 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` MILANO (MI) @@ -1021,35 +871,25 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` 08/01/2025 @@ -1071,35 +911,25 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` MC-RM @@ -1121,35 +951,25 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` 16/02/2035 @@ -1171,35 +991,25 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` RM8375131N @@ -1221,35 +1031,25 @@ exports[`CardData should match snapshot for MDL front data 1`] = ` AM B diff --git a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap index 1464f9d7b14..8d91beb17e5 100644 --- a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap +++ b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap @@ -61,9 +61,9 @@ exports[`ItwCredentialCard should match snapshot when credential type is "Europe @@ -227,9 +227,9 @@ exports[`ItwCredentialCard should match snapshot when credential type is "Europe @@ -393,9 +393,9 @@ exports[`ItwCredentialCard should match snapshot when credential type is "MDL" 1 @@ -559,9 +559,9 @@ exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] = @@ -587,19 +587,23 @@ exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] = @@ -887,19 +891,23 @@ exports[`ItwCredentialCard should match snapshot when status is "expiring" 1`] = @@ -1325,9 +1333,9 @@ exports[`ItwCredentialCard should match snapshot when status is "valid" 1`] = ` @@ -1496,9 +1504,9 @@ exports[`ItwCredentialCard should render the preview 1`] = ` diff --git a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwFeedbackBanner.test.tsx.snap b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwFeedbackBanner.test.tsx.snap index 18f046d6870..9b9228e4363 100644 --- a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwFeedbackBanner.test.tsx.snap +++ b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwFeedbackBanner.test.tsx.snap @@ -562,7 +562,7 @@ exports[`ItwFeedbackBanner should match the snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwMarkdown.test.tsx.snap b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwMarkdown.test.tsx.snap index 5d0a691980e..78eaf28d469 100644 --- a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwMarkdown.test.tsx.snap +++ b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwMarkdown.test.tsx.snap @@ -242,7 +242,7 @@ exports[`ItwMarkdown should match snapshot 1`] = ` style={ [ { - "fontSize": 18, + "fontSize": 16, }, {}, ] @@ -406,7 +406,7 @@ exports[`ItwMarkdown should match snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 24, }, ] @@ -459,6 +459,7 @@ exports[`ItwMarkdown should match snapshot 1`] = ` ( {I18n.t("bottomSheets.ciePin.content")} - + ); @@ -132,7 +132,8 @@ export const ItwCiePinScreen = () => {

{I18n.t("authentication.cie.pin.pinCardTitle")}

- + ( - + {I18n.t("features.itWallet.generic.dataSource.single", { credentialSource: source })} - + diff --git a/ts/features/itwallet/issuance/components/__tests__/__snapshots__/ItwCredentialPreviewClaimsList.test.tsx.snap b/ts/features/itwallet/issuance/components/__tests__/__snapshots__/ItwCredentialPreviewClaimsList.test.tsx.snap index 7232f0c149b..a0fb98b4367 100644 --- a/ts/features/itwallet/issuance/components/__tests__/__snapshots__/ItwCredentialPreviewClaimsList.test.tsx.snap +++ b/ts/features/itwallet/issuance/components/__tests__/__snapshots__/ItwCredentialPreviewClaimsList.test.tsx.snap @@ -1895,6 +1895,7 @@ exports[`ItwCredentialPreviewClaimsList should match the snapshot 1`] = ` { { text: I18n.t(`${ns}.body`) }, { text: I18n.t(`${ns}.bodyBold`), - weight: "Bold" + weight: "Semibold" } ]} pictogram="itWallet" diff --git a/ts/features/itwallet/issuance/screens/__tests__/__snapshots__/ItwIssuanceCredentialAsyncContinuationScreen.test.tsx.snap b/ts/features/itwallet/issuance/screens/__tests__/__snapshots__/ItwIssuanceCredentialAsyncContinuationScreen.test.tsx.snap index b564fb6c06f..81ee5055f42 100644 --- a/ts/features/itwallet/issuance/screens/__tests__/__snapshots__/ItwIssuanceCredentialAsyncContinuationScreen.test.tsx.snap +++ b/ts/features/itwallet/issuance/screens/__tests__/__snapshots__/ItwIssuanceCredentialAsyncContinuationScreen.test.tsx.snap @@ -660,7 +660,7 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the activ "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 24, }, ] @@ -783,7 +783,7 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the activ "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -899,7 +899,7 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the activ "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -1674,7 +1674,7 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the docum "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -1790,7 +1790,7 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the docum "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -2518,7 +2518,7 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the gener "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -3247,7 +3247,7 @@ exports[`ItwIssuanceCredentialAsyncContinuationScreen it should render the gener "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { diff --git a/ts/features/itwallet/presentation/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap b/ts/features/itwallet/presentation/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap index 29368bd5845..9dc57a7f25a 100644 --- a/ts/features/itwallet/presentation/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap +++ b/ts/features/itwallet/presentation/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap @@ -1859,6 +1859,7 @@ exports[`ItwPresentationClaimsSection should match the snapshot when claims are { ]} > - {nameSurname} + + {nameSurname} + { // Format the expiration time to mm:ss and show a placeholder if the expiration time is undefined const formattedExpirationTime = expirationSeconds !== undefined ? ( - + {format(new Date(expirationSeconds * 1000), "mm:ss")} ) : ( diff --git a/ts/features/messages/components/Home/DS/MessageListItem.tsx b/ts/features/messages/components/Home/DS/MessageListItem.tsx index 400d9769334..40f986a871c 100644 --- a/ts/features/messages/components/Home/DS/MessageListItem.tsx +++ b/ts/features/messages/components/Home/DS/MessageListItem.tsx @@ -1,14 +1,12 @@ import { AnimatedMessageCheckbox, Avatar, - Body, H6, HSpacer, IOColors, IOStyles, IOVisualCostants, - Label, - LabelSmall, + BodySmall, Tag, useIOTheme, WithTestID @@ -147,19 +145,19 @@ export const MessageListItem = ({ > {organizationName} - {formattedDate} - + - - - - + + {`${serviceName} · `} + {messageTitle} + {!isRead && ( diff --git a/ts/features/messages/components/Home/PreconditionsFeedback.tsx b/ts/features/messages/components/Home/PreconditionsFeedback.tsx index 5ebc887acfe..7b7bdafdad9 100644 --- a/ts/features/messages/components/Home/PreconditionsFeedback.tsx +++ b/ts/features/messages/components/Home/PreconditionsFeedback.tsx @@ -1,7 +1,7 @@ import { H3, IOPictograms, - LabelSmall, + BodySmall, Pictogram, useIOTheme, VSpacer @@ -45,13 +45,13 @@ export const PreconditionsFeedback = ({ {subtitle && ( <> - {subtitle} - + )} diff --git a/ts/features/messages/components/Home/__tests__/__snapshots__/EmptyList.test.tsx.snap b/ts/features/messages/components/Home/__tests__/__snapshots__/EmptyList.test.tsx.snap index 91a1373e484..c70b7985845 100644 --- a/ts/features/messages/components/Home/__tests__/__snapshots__/EmptyList.test.tsx.snap +++ b/ts/features/messages/components/Home/__tests__/__snapshots__/EmptyList.test.tsx.snap @@ -1231,7 +1231,7 @@ exports[`EmptyList should match snapshot, ARCHIVE category, pot.noneError 1`] = "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -6882,7 +6882,7 @@ exports[`EmptyList should match snapshot, INBOX category, pot.noneError 1`] = "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { diff --git a/ts/features/messages/components/Home/__tests__/__snapshots__/PreconditionsFooter.test.tsx.snap b/ts/features/messages/components/Home/__tests__/__snapshots__/PreconditionsFooter.test.tsx.snap index c62a92b6193..5eeac957262 100644 --- a/ts/features/messages/components/Home/__tests__/__snapshots__/PreconditionsFooter.test.tsx.snap +++ b/ts/features/messages/components/Home/__tests__/__snapshots__/PreconditionsFooter.test.tsx.snap @@ -477,7 +477,7 @@ exports[`PreconditionsFooter should match snapshot for 'content' footer category "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -592,7 +592,7 @@ exports[`PreconditionsFooter should match snapshot for 'content' footer category "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -1442,7 +1442,7 @@ exports[`PreconditionsFooter should match snapshot for 'update' footer category "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -1557,7 +1557,7 @@ exports[`PreconditionsFooter should match snapshot for 'update' footer category "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/features/messages/components/Home/__tests__/__snapshots__/SecuritySuggestions.test.tsx.snap b/ts/features/messages/components/Home/__tests__/__snapshots__/SecuritySuggestions.test.tsx.snap index 6f339de58f2..8e2b8735309 100644 --- a/ts/features/messages/components/Home/__tests__/__snapshots__/SecuritySuggestions.test.tsx.snap +++ b/ts/features/messages/components/Home/__tests__/__snapshots__/SecuritySuggestions.test.tsx.snap @@ -466,7 +466,7 @@ exports[`SecuritySuggestions should match snapshot 1`] = ` >

{subject}

- + {localeDateFormat( createdAt, I18n.t("global.dateFormats.fullFormatShortMonthLiteralWithTime") )} - + ); diff --git a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx index 47cf0372a5a..44d59ab6921 100644 --- a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx +++ b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx @@ -1,17 +1,17 @@ -import React, { useCallback } from "react"; -import { ImageURISource, StyleSheet, View } from "react-native"; import { Avatar, + Body, IOSpacingScale, IOStyles, - Label, - LabelSmall, + BodySmall, useIOTheme } from "@pagopa/io-app-design-system"; +import React, { useCallback } from "react"; +import { ImageURISource, StyleSheet, View } from "react-native"; import { ServiceId } from "../../../../../definitions/backend/ServiceId"; import { useIONavigation } from "../../../../navigation/params/AppParamsList"; -import { SERVICES_ROUTES } from "../../../services/common/navigation/routes"; import { useIOSelector } from "../../../../store/hooks"; +import { SERVICES_ROUTES } from "../../../services/common/navigation/routes"; import { messagePaymentDataSelector } from "../../store/reducers/detailsById"; import { UIMessageId } from "../../types"; import { DoubleAvatar } from "../Home/DS/DoubleAvatar"; @@ -64,14 +64,16 @@ export const OrganizationHeader = ({ return ( - - + {organizationName} + + {serviceName} - + {paymentData ? ( diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachmentItem.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachmentItem.test.tsx.snap index aadd2c681b6..5e35b465d4c 100644 --- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachmentItem.test.tsx.snap +++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachmentItem.test.tsx.snap @@ -358,9 +358,9 @@ exports[`MessageDetailsAttachmentItem Should match snapshot when is fetching the style={ { "alignItems": "center", - "columnGap": 8, "display": "flex", "flexDirection": "row", + "gap": 8, } } > @@ -372,12 +372,13 @@ exports[`MessageDetailsAttachmentItem Should match snapshot when is fetching the "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -1049,12 +1050,13 @@ exports[`MessageDetailsAttachmentItem Should match snapshot when the attachment "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -1569,12 +1571,13 @@ exports[`MessageDetailsAttachmentItem Should match snapshot with all parameters "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -2136,12 +2139,13 @@ exports[`MessageDetailsAttachmentItem Should match snapshot with required parame "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -866,7 +866,7 @@ exports[`MessageDetailsPayment Should match snapshot when there are payment data { "display": "flex", "flexDirection": "column", - "rowGap": 4, + "gap": 4, } } > diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap index b87c92560e0..466eed9cc26 100644 --- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap +++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap @@ -1029,7 +1029,7 @@ exports[`MessageDetailsPaymentButton should match snapshot when not loading 1`] "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminder.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminder.test.tsx.snap index 75a9fd404be..9b51a1dac7b 100644 --- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminder.test.tsx.snap +++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminder.test.tsx.snap @@ -1543,6 +1543,7 @@ exports[`MessageDetailsReminder should match snapshot when the reminder is visib @@ -386,7 +386,7 @@ exports[`MessagePaymentItem component Should match the snapshot for a loading it { "display": "flex", "flexDirection": "column", - "rowGap": 4, + "gap": 4, } } > @@ -878,9 +878,9 @@ exports[`MessagePaymentItem component Should match the snapshot for a payable it @@ -915,6 +915,7 @@ exports[`MessagePaymentItem component Should match the snapshot for a payable it @@ -1484,6 +1485,7 @@ exports[`MessagePaymentItem component Should match the snapshot for a processed @@ -1081,7 +1081,7 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 24, + "gap": 24, } } > @@ -2268,7 +2268,7 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval fai "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -2384,7 +2384,7 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval fai "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -3007,7 +3007,7 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval suc "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 24, + "gap": 24, } } > @@ -3863,7 +3863,7 @@ exports[`MessageRouterScreen should match snapshot while retrieving message data "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 24, + "gap": 24, } } > diff --git a/ts/features/payments/checkout/screens/WalletPaymentConfirmScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentConfirmScreen.tsx index 72f748e71fa..1e2560f2192 100644 --- a/ts/features/payments/checkout/screens/WalletPaymentConfirmScreen.tsx +++ b/ts/features/payments/checkout/screens/WalletPaymentConfirmScreen.tsx @@ -1,6 +1,5 @@ import { Body, - Label, ListItemHeader, ModuleCheckout, VSpacer @@ -225,7 +224,8 @@ const WalletPaymentConfirmScreen = () => { {I18n.t("payment.confirm.termsAndConditions")}{" "} - + ); diff --git a/ts/features/payments/checkout/screens/___tests___/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap b/ts/features/payments/checkout/screens/___tests___/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap index 2b865bed3fe..8dfa441ea14 100644 --- a/ts/features/payments/checkout/screens/___tests___/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap +++ b/ts/features/payments/checkout/screens/___tests___/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap @@ -539,7 +539,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -812,7 +812,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -979,7 +979,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -1831,7 +1831,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -1842,6 +1842,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -1932,7 +1933,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -2688,7 +2689,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -2961,7 +2962,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -3128,7 +3129,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -3980,7 +3981,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -3991,6 +3992,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -4081,7 +4083,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -4818,7 +4820,7 @@ Controlla di aver seguito correttamente le istruzioni della tua banca. "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -5091,7 +5093,7 @@ Controlla di aver seguito correttamente le istruzioni della tua banca. "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -5258,7 +5260,7 @@ Controlla di aver seguito correttamente le istruzioni della tua banca. "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -6110,7 +6112,7 @@ Controlla di aver seguito correttamente le istruzioni della tua banca. @@ -6121,6 +6123,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -6211,7 +6214,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -6933,7 +6936,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -7206,7 +7209,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -7373,7 +7376,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -8225,7 +8228,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -8236,6 +8239,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -8326,7 +8330,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -9062,7 +9066,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -9335,7 +9339,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -9502,7 +9506,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -10354,7 +10358,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -10365,6 +10369,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -10455,7 +10460,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -11147,7 +11152,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -11263,7 +11268,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -11535,7 +11540,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -11702,7 +11707,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -12554,7 +12559,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -12565,6 +12570,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -12655,7 +12661,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -13319,7 +13325,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -13435,7 +13441,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -13707,7 +13713,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -13874,7 +13880,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -14726,7 +14732,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -14737,6 +14743,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -14827,7 +14834,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -15549,7 +15556,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -15822,7 +15829,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -15989,7 +15996,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -16841,7 +16848,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -16852,6 +16859,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -16942,7 +16950,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -17614,7 +17622,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -17887,7 +17895,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -18054,7 +18062,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -18906,7 +18914,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -18917,6 +18925,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -19007,7 +19016,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -19763,7 +19772,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -20036,7 +20045,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -20203,7 +20212,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -21055,7 +21064,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -21066,6 +21075,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -21156,7 +21166,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -21892,7 +21902,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -22165,7 +22175,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -22332,7 +22342,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -23184,7 +23194,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -23195,6 +23205,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -23285,7 +23296,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -24041,7 +24052,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -24314,7 +24325,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -24481,7 +24492,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -25333,7 +25344,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -25344,6 +25355,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -25434,7 +25446,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -26126,7 +26138,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -26242,7 +26254,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -26514,7 +26526,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -26681,7 +26693,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -27533,7 +27545,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -27544,6 +27556,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -27634,7 +27647,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -28390,7 +28403,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -28663,7 +28676,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -28830,7 +28843,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -29682,7 +29695,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -29693,6 +29706,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -29783,7 +29797,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -30539,7 +30553,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -30812,7 +30826,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -30979,7 +30993,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -31831,7 +31845,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -31842,6 +31856,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -31932,7 +31947,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -32696,7 +32711,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -32969,7 +32984,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -33136,7 +33151,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -33988,7 +34003,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -33999,6 +34014,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -34089,7 +34105,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -34825,7 +34841,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -35098,7 +35114,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -35265,7 +35281,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -36117,7 +36133,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -36128,6 +36144,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -36218,7 +36235,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -36912,7 +36929,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -37028,7 +37045,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -37300,7 +37317,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -37467,7 +37484,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -38319,7 +38336,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -38330,6 +38347,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -38420,7 +38438,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -39156,7 +39174,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -39429,7 +39447,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -39596,7 +39614,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -40448,7 +40466,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -40459,6 +40477,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -40549,7 +40568,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -41291,7 +41310,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -41407,7 +41426,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -41679,7 +41698,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -41846,7 +41865,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -42698,7 +42717,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -42709,6 +42728,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -42799,7 +42819,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -43694,7 +43714,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -43967,7 +43987,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -44134,7 +44154,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -44986,7 +45006,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -44997,6 +45017,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -45087,7 +45108,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -45782,7 +45803,7 @@ Se il problema persiste, prova a usare un altro metodo o gestore del pagamento. "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -45898,7 +45919,7 @@ Se il problema persiste, prova a usare un altro metodo o gestore del pagamento. "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -46170,7 +46191,7 @@ Se il problema persiste, prova a usare un altro metodo o gestore del pagamento. "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -46337,7 +46358,7 @@ Se il problema persiste, prova a usare un altro metodo o gestore del pagamento. "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -47189,7 +47210,7 @@ Se il problema persiste, prova a usare un altro metodo o gestore del pagamento. @@ -47200,6 +47221,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -47290,7 +47312,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -48046,7 +48068,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -48162,7 +48184,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -48434,7 +48456,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -48601,7 +48623,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -49453,7 +49475,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -49464,6 +49486,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -49554,7 +49577,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -50276,7 +50299,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -50549,7 +50572,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -50716,7 +50739,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -51568,7 +51591,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -51579,6 +51602,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -51669,7 +51693,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -52433,7 +52457,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -52706,7 +52730,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -52873,7 +52897,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -53725,7 +53749,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -53736,6 +53760,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -53826,7 +53851,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il @@ -54562,7 +54587,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -54835,7 +54860,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] @@ -55002,7 +55027,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -55854,7 +55879,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay @@ -55865,6 +55890,7 @@ Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci t @@ -55955,7 +55981,7 @@ Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il diff --git a/ts/features/payments/common/components/PaymentCard.tsx b/ts/features/payments/common/components/PaymentCard.tsx index 5a5e0f416c2..0994f2a190f 100644 --- a/ts/features/payments/common/components/PaymentCard.tsx +++ b/ts/features/payments/common/components/PaymentCard.tsx @@ -1,7 +1,7 @@ import { H6, IOColors, - LabelSmall, + BodySmall, Tag, VSpacer, WithTestID @@ -45,42 +45,45 @@ const PaymentCard = (props: PaymentCardComponentProps) => { ); const holderNameText = props.holderName && ( - {props.holderName} - + ); const expireDateText = props.expireDate && ( - + {I18n.t("wallet.creditCard.validUntil", { expDate: format(props.expireDate, "MM/YY") })} - + ); const maskedEmailText = props.holderEmail && ( - {props.holderEmail} - + ); const maskedPhoneText = props.holderPhone && ( - {props.holderPhone} - + ); const renderBankLogo = () => { diff --git a/ts/features/payments/common/components/PaymentCardBig.tsx b/ts/features/payments/common/components/PaymentCardBig.tsx index c7eab3d4f63..fd1181d73d2 100644 --- a/ts/features/payments/common/components/PaymentCardBig.tsx +++ b/ts/features/payments/common/components/PaymentCardBig.tsx @@ -4,7 +4,7 @@ import { IOColors, IOLogoPaymentExtType, IOStyles, - LabelSmall, + BodySmall, LogoPaymentExt, VSpacer } from "@pagopa/io-app-design-system"; @@ -45,7 +45,7 @@ const BigPaymentCardBottomSection = (props: PaymentCardStandardProps) => { case "BANCOMATPAY": return ( - { weight="Regular" > {props.phoneNumber} - + { return ( <> - + {I18n.t("wallet.creditCard.validUntil", { expDate: format(expDate, "MM/YY") })} - + ); } diff --git a/ts/features/payments/common/components/PaymentCardSmall.tsx b/ts/features/payments/common/components/PaymentCardSmall.tsx index a7956fb7f30..7ba6922e333 100644 --- a/ts/features/payments/common/components/PaymentCardSmall.tsx +++ b/ts/features/payments/common/components/PaymentCardSmall.tsx @@ -1,8 +1,8 @@ import { - Chip, IOColors, IOStyles, Icon, + LabelMini, VSpacer } from "@pagopa/io-app-design-system"; import * as React from "react"; @@ -81,13 +81,14 @@ const PaymentCardSmall = ({ )} - {labelText} - + ); diff --git a/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardSmall.test.tsx.snap b/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardSmall.test.tsx.snap index 772e70b1544..10ae048795d 100644 --- a/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardSmall.test.tsx.snap +++ b/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardSmall.test.tsx.snap @@ -497,7 +497,7 @@ exports[`PaymentCardSmall should match the snapshot 1`] = ` /> @@ -561,12 +561,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -784,12 +785,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -1007,12 +1009,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -1230,12 +1233,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -1453,12 +1457,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -1676,12 +1681,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -1899,12 +1905,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -2122,12 +2129,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -2345,12 +2353,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -2568,12 +2577,13 @@ exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -3779,12 +3789,13 @@ exports[`F24ListBottomSheetLink should be snapshot for an 1 item F24 list 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -714,12 +714,13 @@ exports[`F24Section should match snapshot when there are more than one F24 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -937,12 +938,13 @@ exports[`F24Section should match snapshot when there are more than one F24 1`] = "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -2695,12 +2697,13 @@ exports[`F24Section should match snapshot when there is a single F24 1`] = ` "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -859,6 +859,7 @@ exports[`MessagePaymentBottomSheet should match snapshot, six payments 1`] = ` @@ -1083,6 +1084,7 @@ exports[`MessagePaymentBottomSheet should match snapshot, six payments 1`] = ` @@ -1332,6 +1334,7 @@ exports[`MessagePaymentBottomSheet should match snapshot, six payments 1`] = ` @@ -1581,6 +1584,7 @@ exports[`MessagePaymentBottomSheet should match snapshot, six payments 1`] = ` @@ -1830,6 +1834,7 @@ exports[`MessagePaymentBottomSheet should match snapshot, six payments 1`] = ` @@ -2079,6 +2084,7 @@ exports[`MessagePaymentBottomSheet should match snapshot, six payments 1`] = ` @@ -2328,6 +2334,7 @@ exports[`MessagePaymentBottomSheet should match snapshot, six payments 1`] = ` @@ -922,6 +922,7 @@ exports[`MessagePayments should match snapshot when cancelled, with payments, wi @@ -1172,6 +1173,7 @@ exports[`MessagePayments should match snapshot when cancelled, with payments, wi @@ -1422,6 +1424,7 @@ exports[`MessagePayments should match snapshot when cancelled, with payments, wi @@ -1672,6 +1675,7 @@ exports[`MessagePayments should match snapshot when cancelled, with payments, wi @@ -1922,6 +1926,7 @@ exports[`MessagePayments should match snapshot when cancelled, with payments, wi @@ -2172,6 +2177,7 @@ exports[`MessagePayments should match snapshot when cancelled, with payments, wi @@ -2422,6 +2428,7 @@ exports[`MessagePayments should match snapshot when cancelled, with payments, wi @@ -3153,6 +3160,7 @@ exports[`MessagePayments should match snapshot when cancelled, without payments, @@ -3403,6 +3411,7 @@ exports[`MessagePayments should match snapshot when cancelled, without payments, @@ -3653,6 +3662,7 @@ exports[`MessagePayments should match snapshot when cancelled, without payments, @@ -3903,6 +3913,7 @@ exports[`MessagePayments should match snapshot when cancelled, without payments, @@ -4153,6 +4164,7 @@ exports[`MessagePayments should match snapshot when cancelled, without payments, @@ -4403,6 +4415,7 @@ exports[`MessagePayments should match snapshot when cancelled, without payments, @@ -4653,6 +4666,7 @@ exports[`MessagePayments should match snapshot when cancelled, without payments, @@ -5720,6 +5734,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -5944,6 +5959,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -6193,6 +6209,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -6442,6 +6459,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -6691,6 +6709,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -7414,6 +7433,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -7638,6 +7658,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -7887,6 +7908,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -8136,6 +8158,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -8385,6 +8408,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with five (ma @@ -9108,6 +9132,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -9332,6 +9357,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -9581,6 +9607,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -9830,6 +9857,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -10079,6 +10107,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -10922,6 +10951,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -11146,6 +11176,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -11395,6 +11426,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -11644,6 +11676,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -11893,6 +11926,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with more-tha @@ -12736,6 +12770,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with one paya @@ -13434,6 +13469,7 @@ exports[`MessagePayments should match snapshot when not cancelled, with one paya @@ -858,12 +863,13 @@ exports[`MessageDetailsScreen should match the snapshot when everything went fin "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } > @@ -1081,12 +1087,13 @@ exports[`MessageDetailsScreen should match the snapshot when everything went fin "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "rowGap": 4, + "gap": 4, } } >
{I18n.t(titleKey)}
- {I18n.t(messageKey)} + {I18n.t(messageKey)} ); diff --git a/ts/features/pushNotifications/components/__tests__/__snapshots__/PushNotificationsBanner.test.tsx.snap b/ts/features/pushNotifications/components/__tests__/__snapshots__/PushNotificationsBanner.test.tsx.snap index 8dce179b3a2..9d02edad6b8 100644 --- a/ts/features/pushNotifications/components/__tests__/__snapshots__/PushNotificationsBanner.test.tsx.snap +++ b/ts/features/pushNotifications/components/__tests__/__snapshots__/PushNotificationsBanner.test.tsx.snap @@ -233,7 +233,7 @@ exports[`PushNotificationsBanner should render correctly 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap b/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap index d9d375b2cf4..da4aa5324ec 100644 --- a/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap +++ b/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsInfoScreenConsent.test.tsx.snap @@ -1391,7 +1391,7 @@ exports[`OnboardingNotificationsInfoScreenConsent should match snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { diff --git a/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsPreferencesScreen.test.tsx.snap b/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsPreferencesScreen.test.tsx.snap index 9d806b702df..88bb67e2e1d 100644 --- a/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsPreferencesScreen.test.tsx.snap +++ b/ts/features/pushNotifications/screens/__tests__/__snapshots__/OnboardingNotificationsPreferencesScreen.test.tsx.snap @@ -1184,7 +1184,7 @@ exports[`OnboardingNotificationsPreferencesScreen should match snapshot when not "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -2647,7 +2647,7 @@ exports[`OnboardingNotificationsPreferencesScreen should match snapshot when not "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -4110,7 +4110,7 @@ exports[`OnboardingNotificationsPreferencesScreen should match snapshot when not "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -5573,7 +5573,7 @@ exports[`OnboardingNotificationsPreferencesScreen should match snapshot when not "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { diff --git a/ts/features/pushNotifications/screens/__tests__/__snapshots__/SystemNotificationPermissionsScreen.test.tsx.snap b/ts/features/pushNotifications/screens/__tests__/__snapshots__/SystemNotificationPermissionsScreen.test.tsx.snap index f21dd7216db..56a21285ba5 100644 --- a/ts/features/pushNotifications/screens/__tests__/__snapshots__/SystemNotificationPermissionsScreen.test.tsx.snap +++ b/ts/features/pushNotifications/screens/__tests__/__snapshots__/SystemNotificationPermissionsScreen.test.tsx.snap @@ -368,7 +368,7 @@ exports[`SystemNotificationPermissionsScreen Should match snapshot 1`] = ` "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 16, + "gap": 16, } } > @@ -563,7 +563,7 @@ exports[`SystemNotificationPermissionsScreen Should match snapshot 1`] = ` "alignItems": "center", "display": "flex", "flexDirection": "column", - "rowGap": 8, + "gap": 8, } } > @@ -849,7 +849,7 @@ exports[`SystemNotificationPermissionsScreen Should match snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -964,7 +964,7 @@ exports[`SystemNotificationPermissionsScreen Should match snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/features/services/common/components/ListItemSearchInstitution.tsx b/ts/features/services/common/components/ListItemSearchInstitution.tsx index 927a48434cf..ca345a83641 100644 --- a/ts/features/services/common/components/ListItemSearchInstitution.tsx +++ b/ts/features/services/common/components/ListItemSearchInstitution.tsx @@ -20,7 +20,7 @@ import { IOSpringValues, IOStyles, Icon, - LabelSmall, + BodySmall, WithTestID, hexToRgba, useIOExperimentalDesign, @@ -71,9 +71,9 @@ export const ListItemSearchInstitution = memo( {description && ( <> {typeof description === "string" ? ( - + {description} - + ) : ( description )} diff --git a/ts/features/services/common/components/ServicesHeader.tsx b/ts/features/services/common/components/ServicesHeader.tsx index 49e0982aefc..7df6bc1903d 100644 --- a/ts/features/services/common/components/ServicesHeader.tsx +++ b/ts/features/services/common/components/ServicesHeader.tsx @@ -5,7 +5,7 @@ import { IOSpacingScale, IOStyles, IOVisualCostants, - LabelSmall, + BodySmall, useIOTheme, VSpacer } from "@pagopa/io-app-design-system"; @@ -48,9 +48,9 @@ export const ServicesHeader = ({

{title}

- + {subTitle} - + ); diff --git a/ts/features/services/common/components/__tests__/__snapshots__/ServicesHeader.test.tsx.snap b/ts/features/services/common/components/__tests__/__snapshots__/ServicesHeader.test.tsx.snap index 2caf65eb367..edf42ac3dc6 100644 --- a/ts/features/services/common/components/__tests__/__snapshots__/ServicesHeader.test.tsx.snap +++ b/ts/features/services/common/components/__tests__/__snapshots__/ServicesHeader.test.tsx.snap @@ -111,7 +111,7 @@ exports[`ServicesHeader component should match the snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 14, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "400", "lineHeight": 21, }, ] 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 0b9c393df78..dc504cf25c6 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 @@ -292,7 +292,7 @@ exports[`ServicesHeaderSection component should match the snapshot for service h "fontFamily": "Titillium Sans Pro", "fontSize": 14, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "400", "lineHeight": 21, }, ] diff --git a/ts/features/services/home/components/FeaturedServiceCard.tsx b/ts/features/services/home/components/FeaturedServiceCard.tsx index b66830e309b..1009d135bf8 100644 --- a/ts/features/services/home/components/FeaturedServiceCard.tsx +++ b/ts/features/services/home/components/FeaturedServiceCard.tsx @@ -1,6 +1,7 @@ import { Avatar, Badge, + BodySmall, H4, IOColors, IOSpacingScale, @@ -15,7 +16,6 @@ import I18n from "../../../../i18n"; import { WithTestID } from "../../../../types/WithTestID"; import { CardPressableBase } from "../../common/components/CardPressableBase"; import { logoForService } from "../utils"; -import OrganizationNameLabel from "./OrganizationNameLabel"; export type FeaturedServiceCardProps = WithTestID<{ id: string; @@ -96,7 +96,14 @@ const FeaturedServiceCard = ({ {organizationName && ( <> - {organizationName} + + {organizationName} + )} diff --git a/ts/features/services/home/components/OrganizationNameLabel.tsx b/ts/features/services/home/components/OrganizationNameLabel.tsx deleted file mode 100644 index 92888d9ce53..00000000000 --- a/ts/features/services/home/components/OrganizationNameLabel.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { - IOColors, - useIOExperimentalDesign, - useTypographyFactory, - type IOFontFamily, - type IOFontWeight -} from "@pagopa/io-app-design-system"; -import * as React from "react"; -import { Text } from "react-native"; - -type AllowedWeight = Extract; -type AllowedColors = Extract; - -const fontName: IOFontFamily = "Titillio"; -const legacyFontName: IOFontFamily = "TitilliumSansPro"; -const fontSize = 14; - -type OrganizationNameLabelProps = Omit< - React.ComponentPropsWithRef, - "style" ->; - -// Custom Typography component to show the name of Department on CGN card component -const OrganizationNameLabel: React.FunctionComponent< - OrganizationNameLabelProps -> = props => { - const { isExperimental } = useIOExperimentalDesign(); - return useTypographyFactory({ - ...props, - defaultWeight: "Regular", - defaultColor: "grey-650", - font: isExperimental ? fontName : legacyFontName, - fontStyle: { fontSize }, - lineBreakMode: "head", - numberOfLines: 1 - }); -}; - -export default OrganizationNameLabel; diff --git a/ts/features/wallet/components/__tests__/__snapshots__/WalletEmptyScreenContent.test.tsx.snap b/ts/features/wallet/components/__tests__/__snapshots__/WalletEmptyScreenContent.test.tsx.snap index 775c7f07271..c08c7ccc438 100644 --- a/ts/features/wallet/components/__tests__/__snapshots__/WalletEmptyScreenContent.test.tsx.snap +++ b/ts/features/wallet/components/__tests__/__snapshots__/WalletEmptyScreenContent.test.tsx.snap @@ -700,7 +700,7 @@ exports[`WalletEmptyScreenContent should match the snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { diff --git a/ts/navigation/TabNavigator.tsx b/ts/navigation/TabNavigator.tsx index aa602433ba6..e2da8347df7 100644 --- a/ts/navigation/TabNavigator.tsx +++ b/ts/navigation/TabNavigator.tsx @@ -1,8 +1,11 @@ -import { IOColors, useIOTheme } from "@pagopa/io-app-design-system"; +import { + IOColors, + makeFontStyleObject, + useIOTheme +} from "@pagopa/io-app-design-system"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import React from "react"; import LoadingSpinnerOverlay from "../components/LoadingSpinnerOverlay"; -import { makeFontStyleObject } from "../components/core/fonts"; import { TabIconComponent } from "../components/ui/TabIconComponent"; import { MESSAGES_ROUTES } from "../features/messages/navigation/routes"; import { MessagesHomeScreen } from "../features/messages/screens/MessagesHomeScreen"; @@ -47,14 +50,12 @@ export const MainTabNavigator = () => { currentRouteName={route.name as keyof MainTabParamsList} /> ), - tabBarLabelStyle: { - fontSize: isDesignSystemEnabled ? 10 : 12, - ...makeFontStyleObject( - "Regular", - false, - isDesignSystemEnabled ? "ReadexPro" : "TitilliumSansPro" - ) - }, + tabBarLabelStyle: makeFontStyleObject( + 11, + isDesignSystemEnabled ? "Titillio" : "TitilliumSansPro", + 11, + "Regular" + ), tabBarHideOnKeyboard: true, tabBarAllowFontScaling: false, tabBarActiveTintColor: IOColors[theme["interactiveElem-default"]], diff --git a/ts/screens/authentication/__tests__/__snapshots__/LandingScreen.test.tsx.snap b/ts/screens/authentication/__tests__/__snapshots__/LandingScreen.test.tsx.snap index 7cb822c0182..d10e456c04f 100644 --- a/ts/screens/authentication/__tests__/__snapshots__/LandingScreen.test.tsx.snap +++ b/ts/screens/authentication/__tests__/__snapshots__/LandingScreen.test.tsx.snap @@ -1375,7 +1375,7 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -1565,7 +1565,7 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -1678,7 +1678,7 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { @@ -1775,9 +1775,9 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` style={ { "alignItems": "center", - "columnGap": 8, "display": "flex", "flexDirection": "row", + "gap": 8, } } > @@ -1785,11 +1785,11 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` style={ { "alignItems": "center", - "columnGap": 12, "display": "flex", "flexDirection": "row", "flexGrow": 1, "flexShrink": 1, + "gap": 12, } } > @@ -1887,7 +1887,7 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` @@ -2053,11 +2053,11 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` style={ { "alignItems": "center", - "columnGap": 12, "display": "flex", "flexDirection": "row", "flexGrow": 1, "flexShrink": 1, + "gap": 12, } } > @@ -2152,7 +2152,7 @@ exports[`LandingScreen with CieID FF enabled Should match the snapshot 1`] = ` @@ -4637,11 +4637,11 @@ exports[`LandingScreen with both local and remote CieID FF disabled Should match style={ { "alignItems": "center", - "columnGap": 12, "display": "flex", "flexDirection": "row", "flexGrow": 1, "flexShrink": 1, + "gap": 12, } } > @@ -4739,7 +4739,7 @@ exports[`LandingScreen with both local and remote CieID FF disabled Should match @@ -4905,11 +4905,11 @@ exports[`LandingScreen with both local and remote CieID FF disabled Should match style={ { "alignItems": "center", - "columnGap": 12, "display": "flex", "flexDirection": "row", "flexGrow": 1, "flexShrink": 1, + "gap": 12, } } > @@ -5004,7 +5004,7 @@ exports[`LandingScreen with both local and remote CieID FF disabled Should match { {I18n.t("bottomSheets.ciePin.content")} - + ), @@ -218,7 +218,8 @@ const CiePinScreen = () => {

{I18n.t("authentication.cie.pin.pinCardTitle")}

- + { - + {waitMessageText} - - {timerCount}s + + + {` ${timerCount}s`} + ); diff --git a/ts/screens/modal/RootedDeviceModal.tsx b/ts/screens/modal/RootedDeviceModal.tsx index d8254504903..7d625ce2783 100644 --- a/ts/screens/modal/RootedDeviceModal.tsx +++ b/ts/screens/modal/RootedDeviceModal.tsx @@ -3,7 +3,7 @@ import { ButtonOutline, ContentWrapper, H3, - LabelSmall, + BodySmall, Pictogram, VSpacer } from "@pagopa/io-app-design-system"; @@ -57,13 +57,13 @@ const RootedDeviceModal = () => { - {I18n.t("rooted.body")} - + diff --git a/ts/screens/profile/DownloadProfileDataScreen.tsx b/ts/screens/profile/DownloadProfileDataScreen.tsx index a89a6731548..95d3cb5d59b 100644 --- a/ts/screens/profile/DownloadProfileDataScreen.tsx +++ b/ts/screens/profile/DownloadProfileDataScreen.tsx @@ -99,7 +99,7 @@ const DownloadProfileDataScreen = () => { ); const titleProps = useMemo>( - () => ({ weight: "Bold" }), + () => ({ weight: "Semibold" }), [] ); @@ -110,7 +110,7 @@ const DownloadProfileDataScreen = () => { }, { text: I18n.t("profile.main.privacy.exportData.detail.paragraph2.part2"), - weight: "Bold" + weight: "Semibold" }, { text: I18n.t("profile.main.privacy.exportData.detail.paragraph2.part3") @@ -146,7 +146,11 @@ const DownloadProfileDataScreen = () => { {I18n.t("profile.main.privacy.exportData.detail.paragraph3.part1")} - + {I18n.t("profile.main.privacy.exportData.detail.paragraph3.link")} diff --git a/ts/screens/profile/FiscalCodeScreen.tsx b/ts/screens/profile/FiscalCodeScreen.tsx index 31f6e26f43e..48adabdd2ee 100644 --- a/ts/screens/profile/FiscalCodeScreen.tsx +++ b/ts/screens/profile/FiscalCodeScreen.tsx @@ -1,7 +1,7 @@ import { H3, + BodySmall, IOColors, - LabelSmall, useIOTheme, VSpacer } from "@pagopa/io-app-design-system"; @@ -98,7 +98,7 @@ const FiscalCodeScreen = () => { ]} testID="barcode-box" > - {nameSurname} + {nameSurname} { "profile.main.privacy.removeAccount.info.body.p2.firstPart" )} - + {I18n.t("profile.main.privacy.removeAccount.info.body.p2.lastPart")} diff --git a/ts/screens/profile/TrialSystemPlayground.tsx b/ts/screens/profile/TrialSystemPlayground.tsx index f2858249f0f..18a6ede5201 100644 --- a/ts/screens/profile/TrialSystemPlayground.tsx +++ b/ts/screens/profile/TrialSystemPlayground.tsx @@ -62,7 +62,7 @@ const TrialSystemPlayground = () => { {"Stato attuale: "} - + {trialStatus ? trialStatus : "Non presente"} diff --git a/ts/screens/profile/__test__/__snapshots__/ProfileMainScreenTopBanner.test.tsx.snap b/ts/screens/profile/__test__/__snapshots__/ProfileMainScreenTopBanner.test.tsx.snap index c349275d524..87d29c6df00 100644 --- a/ts/screens/profile/__test__/__snapshots__/ProfileMainScreenTopBanner.test.tsx.snap +++ b/ts/screens/profile/__test__/__snapshots__/ProfileMainScreenTopBanner.test.tsx.snap @@ -160,6 +160,7 @@ exports[`ProfileMainScreenTopBanner should match snapshot for all possible resul { () => ( {I18n.t("profile.main.privacy.shareData.screen.why.description.one")} - + {`${I18n.t( "profile.main.privacy.shareData.screen.why.description.three" )}`} @@ -114,11 +109,11 @@ const SecurityFeatureInfo = ({ trackAction }: FeatureProps) => { {I18n.t( "profile.main.privacy.shareData.screen.security.description.one" )} - + {I18n.t( "profile.main.privacy.shareData.screen.security.description.three" )} @@ -144,11 +139,11 @@ const GDPRFeatureInfo = ({ trackAction }: FeatureProps) => { body={ {I18n.t("profile.main.privacy.shareData.screen.gdpr.description.one")} - + } action={{ diff --git a/ts/screens/profile/components/ShareDataComponent/index.tsx b/ts/screens/profile/components/ShareDataComponent/index.tsx index 25612412ea7..7eac0ba175a 100644 --- a/ts/screens/profile/components/ShareDataComponent/index.tsx +++ b/ts/screens/profile/components/ShareDataComponent/index.tsx @@ -1,4 +1,4 @@ -import { Body, Label, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, VSpacer } from "@pagopa/io-app-design-system"; import React, { memo } from "react"; import { tosConfigSelector } from "../../../../features/tos/store/selectors"; import I18n from "../../../../i18n"; @@ -41,11 +41,16 @@ export const ShareDataComponent = memo(({ trackAction }: FeatureProps) => { {I18n.t( "profile.main.privacy.shareData.screen.additionalInformation.description" )} - + ); diff --git a/ts/screens/profile/components/__test__/__snapshots__/SettingsDiscoveryBanner.test.tsx.snap b/ts/screens/profile/components/__test__/__snapshots__/SettingsDiscoveryBanner.test.tsx.snap index 2054efcbcd1..1fef98442f2 100644 --- a/ts/screens/profile/components/__test__/__snapshots__/SettingsDiscoveryBanner.test.tsx.snap +++ b/ts/screens/profile/components/__test__/__snapshots__/SettingsDiscoveryBanner.test.tsx.snap @@ -535,7 +535,7 @@ exports[`settingsDiscoveryBanner should match snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/ts/screens/profile/components/services/ServicesContactComponent.tsx b/ts/screens/profile/components/services/ServicesContactComponent.tsx index cf5fb021ae1..fc9d48c7092 100644 --- a/ts/screens/profile/components/services/ServicesContactComponent.tsx +++ b/ts/screens/profile/components/services/ServicesContactComponent.tsx @@ -1,4 +1,4 @@ -import { LabelSmall, RadioGroup } from "@pagopa/io-app-design-system"; +import { BodySmall, RadioGroup } from "@pagopa/io-app-design-system"; import React, { ReactElement, useCallback, useEffect, useState } from "react"; import { ServicesPreferencesModeEnum } from "../../../../../definitions/backend/ServicesPreferencesMode"; import I18n from "../../../../i18n"; @@ -19,12 +19,12 @@ const ServicesContactComponent = (props: Props): ReactElement => { value: I18n.t("services.optIn.preferences.quickConfig.title"), id: ServicesPreferencesModeEnum.AUTO, description: ( - + {I18n.t("services.optIn.preferences.quickConfig.body.text1")}{" "} - + {I18n.t("services.optIn.preferences.quickConfig.body.text2")} - - + + ) }, { diff --git a/ts/screens/profile/playgrounds/IdPayOnboardingPlayground.tsx b/ts/screens/profile/playgrounds/IdPayOnboardingPlayground.tsx index 50dfd2fe47d..b5c97421a27 100644 --- a/ts/screens/profile/playgrounds/IdPayOnboardingPlayground.tsx +++ b/ts/screens/profile/playgrounds/IdPayOnboardingPlayground.tsx @@ -3,8 +3,7 @@ import { BodyMonospace, H4, IOColors, - Label, - LabelSmall, + BodySmall, PressableListItemBase, VSpacer } from "@pagopa/io-app-design-system"; @@ -176,9 +175,10 @@ const TestServiceItem = (props: TestServiceItemProps) => { alignItems: "center" }} > - + + {label}{" "} + {willFail ? "❌" : "✅"} + {serviceId} diff --git a/ts/screens/profile/playgrounds/MarkdownPlayground.tsx b/ts/screens/profile/playgrounds/MarkdownPlayground.tsx index 335dea36d93..6303db9ca70 100644 --- a/ts/screens/profile/playgrounds/MarkdownPlayground.tsx +++ b/ts/screens/profile/playgrounds/MarkdownPlayground.tsx @@ -5,7 +5,7 @@ import { IOColors, IOVisualCostants, IconButtonSolid, - LabelSmall, + BodySmall, VSpacer } from "@pagopa/io-app-design-system"; import { useLinkTo } from "@react-navigation/native"; @@ -179,7 +179,7 @@ const MarkdownPlayground = () => { - {isMarkdownSet && {ctaMessage}} + {isMarkdownSet && {ctaMessage}} {O.isSome(maybeCTA) && ( diff --git a/ts/utils/identification/index.tsx b/ts/utils/identification/index.tsx index 991663f5b90..d8c7b6d4489 100644 --- a/ts/utils/identification/index.tsx +++ b/ts/utils/identification/index.tsx @@ -96,7 +96,7 @@ export const IdentificationInstructionsComponent = (props: { {unlockCodePrefix} - + {` ${unlockCode}`} @@ -106,7 +106,7 @@ export const IdentificationInstructionsComponent = (props: { {fingerprintPrefix} - {` ${fingerprint}`} + {` ${fingerprint}`} ); @@ -114,7 +114,7 @@ export const IdentificationInstructionsComponent = (props: { {faceIdPrefix} - {` ${faceId}`} + {` ${faceId}`} ); diff --git a/yarn.lock b/yarn.lock index 2ebb70870cc..2dbc083b2c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2215,10 +2215,10 @@ dependencies: "@types/node" ">= 8" -"@pagopa/io-app-design-system@3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-3.1.0.tgz#6766851f53e11c06b0bcfee4786ed5dfbd79d950" - integrity sha512-bsncsKZ5Pm8P31E1IHObBzx9ptSAkODewnmtB/drVAwNwMnSjbUJ2/M2RKcAs0rl+Fq3nKnFzbh1giyZ1CgEOg== +"@pagopa/io-app-design-system@4.0.1": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-4.0.1.tgz#1f939232e3662fa519eba9d2334b33a597643ebb" + integrity sha512-CSaWgbkZ9Tjzz7qdCKz6wnRQ1c3/rej6ordgDeDH0faIlMwCkzNqpduwUWF3j91dIirLpSRCJPhKMfnOkhQsAA== dependencies: "@testing-library/jest-native" "^5.4.2" "@types/react-test-renderer" "^18.0.0"