Fix some inconsistencies in the Profile related screens

pagopa · Oct 22, 2024 · dc6db52 · dc6db52
1 parent 11d44b2
commit dc6db52
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 33 deletions.
diff --git a/ts/features/pushNotifications/components/NotificationPreviewSample.tsx b/ts/features/pushNotifications/components/NotificationPreviewSample.tsx
@@ -5,7 +5,8 @@ import {
   IOSpacingScale,
   IOStyles,
   Icon,
-  LabelSmall
+  LabelSmall,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 import React from "react";
 import { StyleSheet, View } from "react-native";
@@ -20,10 +21,9 @@ const styles = StyleSheet.create({
   notification: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: IOColors.white,
     borderWidth: 1,
-    borderColor: IOColors.bluegreyLight,
-    borderRadius: 8,
+    borderRadius: 16,
+    borderCurve: "continuous",
     minHeight: 90,
     marginVertical: notificationMarginVertical,
     paddingVertical: notificationPaddingVertical,
@@ -72,9 +72,19 @@ export const NotificationPreviewSample = ({
     remindersEnabled
   );
 
+  const theme = useIOTheme();
+
   return (
-    <View style={styles.notification}>
-      <Icon color="blueIO-450" name="productIOApp" />
+    <View
+      style={[
+        styles.notification,
+        {
+          backgroundColor: IOColors[theme["appBackground-primary"]],
+          borderColor: IOColors[theme["cardBorder-default"]]
+        }
+      ]}
+    >
+      <Icon size={24} name="productIOAppBlueBg" />
       <HSpacer />
       <View style={IOStyles.flex}>
         <H6>{I18n.t(titleKey)}</H6>

diff --git a/ts/screens/profile/DownloadProfileDataScreen.tsx b/ts/screens/profile/DownloadProfileDataScreen.tsx
@@ -1,7 +1,6 @@
 import {
   Body,
   ContentWrapper,
-  Label,
   VSpacer,
   useIOToast
 } from "@pagopa/io-app-design-system";
@@ -149,9 +148,9 @@ const DownloadProfileDataScreen = () => {
         <VSpacer />
         <Body accessibilityRole="link" onPress={handleNavigateToProfilePrivacy}>
           {I18n.t("profile.main.privacy.exportData.detail.paragraph3.part1")}
-          <Label asLink onPress={handleNavigateToProfilePrivacy}>
+          <Body asLink onPress={handleNavigateToProfilePrivacy}>
             {I18n.t("profile.main.privacy.exportData.detail.paragraph3.link")}
-          </Label>
+          </Body>
         </Body>
       </ContentWrapper>
     </IOScrollViewWithLargeHeader>

diff --git a/ts/screens/profile/FiscalCodeScreen.tsx b/ts/screens/profile/FiscalCodeScreen.tsx
@@ -98,9 +98,7 @@ const FiscalCodeScreen = () => {
           ]}
           testID="barcode-box"
         >
-          <LabelSmall weight="Semibold" color="black">
-            {nameSurname}
-          </LabelSmall>
+          <LabelSmall weight="Semibold">{nameSurname}</LabelSmall>
           <Barcode
             value={fiscalCode}
             width={1.3}

diff --git a/ts/screens/profile/components/ShareDataComponent/ShareDataFeatureInfos.tsx b/ts/screens/profile/components/ShareDataComponent/ShareDataFeatureInfos.tsx
@@ -1,20 +1,20 @@
 import {
-  Label,
   Body,
   FeatureInfo,
+  Label,
   VSpacer
 } from "@pagopa/io-app-design-system";
+import { Millisecond } from "@pagopa/ts-commons/lib/units";
 import React, { useCallback, useMemo, useRef } from "react";
 import { View } from "react-native";
-import { Millisecond } from "@pagopa/ts-commons/lib/units";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import I18n from "../../../../i18n";
 import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
+import I18n from "../../../../i18n";
+import { ioSuppliersUrl } from "../../../../urls";
+import { setAccessibilityFocus } from "../../../../utils/accessibility";
 import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
 import { openWebUrl } from "../../../../utils/url";
-import { ioSuppliersUrl } from "../../../../urls";
 import { TrackingInfo } from "../../analytics/mixpanel/mixpanelAnalytics";
-import { setAccessibilityFocus } from "../../../../utils/accessibility";
 
 export type FeatureProps = {
   trackAction: (info: TrackingInfo) => void;
@@ -69,7 +69,7 @@ const AnalyticsFeatureInfo = ({ trackAction }: FeatureProps) => {
     () => (
       <Body ref={bodyRef}>
         {I18n.t("profile.main.privacy.shareData.screen.why.description.one")}
-        <Label color="info-850">
+        <Label weight="Semibold">
           {I18n.t("profile.main.privacy.shareData.screen.why.description.two")}
         </Label>
         {`${I18n.t(
@@ -114,7 +114,7 @@ const SecurityFeatureInfo = ({ trackAction }: FeatureProps) => {
           {I18n.t(
             "profile.main.privacy.shareData.screen.security.description.one"
           )}
-          <Label color="info-850">
+          <Label weight="Semibold">
             {I18n.t(
               "profile.main.privacy.shareData.screen.security.description.two"
             )}
@@ -144,7 +144,7 @@ const GDPRFeatureInfo = ({ trackAction }: FeatureProps) => {
       body={
         <Body>
           {I18n.t("profile.main.privacy.shareData.screen.gdpr.description.one")}
-          <Label color="info-850">
+          <Label weight="Semibold">
             {I18n.t(
               "profile.main.privacy.shareData.screen.gdpr.description.two"
             )}
@@ -159,4 +159,4 @@ const GDPRFeatureInfo = ({ trackAction }: FeatureProps) => {
   );
 };
 
-export { AnalyticsFeatureInfo, SecurityFeatureInfo, GDPRFeatureInfo };
+export { AnalyticsFeatureInfo, GDPRFeatureInfo, SecurityFeatureInfo };
diff --git a/ts/screens/profile/components/ShareDataComponent/index.tsx b/ts/screens/profile/components/ShareDataComponent/index.tsx
@@ -1,12 +1,10 @@
-import { VSpacer } from "@pagopa/io-app-design-system";
+import { Body, VSpacer } from "@pagopa/io-app-design-system";
 import React, { memo } from "react";
-import { Body } from "../../../../components/core/typography/Body";
-import { Link } from "../../../../components/core/typography/Link";
+import { tosConfigSelector } from "../../../../features/tos/store/selectors";
 import I18n from "../../../../i18n";
+import { useIOSelector } from "../../../../store/hooks";
 import { openWebUrl } from "../../../../utils/url";
 import { TrackingInfo } from "../../analytics/mixpanel/mixpanelAnalytics";
-import { useIOSelector } from "../../../../store/hooks";
-import { tosConfigSelector } from "../../../../features/tos/store/selectors";
 import {
   AnalyticsFeatureInfo,
   FeatureProps,
@@ -43,11 +41,11 @@ export const ShareDataComponent = memo(({ trackAction }: FeatureProps) => {
         {I18n.t(
           "profile.main.privacy.shareData.screen.additionalInformation.description"
         )}
-        <Link onPress={handleOnPress} testID="additionalInformation">
+        <Body asLink onPress={handleOnPress} testID="additionalInformation">
           {I18n.t(
             "profile.main.privacy.shareData.screen.additionalInformation.cta"
           )}
-        </Link>
+        </Body>
       </Body>
     </>
   );

diff --git a/ts/screens/profile/components/services/ServicesContactComponent.tsx b/ts/screens/profile/components/services/ServicesContactComponent.tsx
@@ -1,6 +1,5 @@
+import { LabelSmall, RadioGroup } from "@pagopa/io-app-design-system";
 import React, { ReactElement, useCallback, useEffect, useState } from "react";
-import { IOColors, LabelSmall, RadioGroup } from "@pagopa/io-app-design-system";
-import { Text } from "react-native";
 import { ServicesPreferencesModeEnum } from "../../../../../definitions/backend/ServicesPreferencesMode";
 import I18n from "../../../../i18n";
 import { usePrevious } from "../../../../utils/hooks/usePrevious";
@@ -20,11 +19,11 @@ const ServicesContactComponent = (props: Props): ReactElement => {
       value: I18n.t("services.optIn.preferences.quickConfig.title"),
       id: ServicesPreferencesModeEnum.AUTO,
       description: (
-        <LabelSmall color="grey-700" weight="Regular">
+        <LabelSmall weight="Regular">
           {I18n.t("services.optIn.preferences.quickConfig.body.text1")}{" "}
-          <Text style={{ color: IOColors["grey-700"], fontWeight: "600" }}>
+          <LabelSmall weight="Semibold">
             {I18n.t("services.optIn.preferences.quickConfig.body.text2")}
-          </Text>
+          </LabelSmall>
         </LabelSmall>
       )
     },