diff --git a/docs/icomoon-font-export.png b/docs/icomoon-font-export.png deleted file mode 100644 index 6b341251861..00000000000 Binary files a/docs/icomoon-font-export.png and /dev/null differ diff --git a/img/assistance/battery.svg b/img/assistance/battery.svg deleted file mode 100644 index 2d0f4219e91..00000000000 --- a/img/assistance/battery.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/img/assistance/card.svg b/img/assistance/card.svg deleted file mode 100644 index fb1183a224f..00000000000 --- a/img/assistance/card.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/img/assistance/email.svg b/img/assistance/email.svg deleted file mode 100644 index f0fa9ce3443..00000000000 --- a/img/assistance/email.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/img/assistance/gallery.svg b/img/assistance/gallery.svg deleted file mode 100644 index 493bdd7448d..00000000000 --- a/img/assistance/gallery.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/img/assistance/giacenza.svg b/img/assistance/giacenza.svg deleted file mode 100644 index c1e3c05cafa..00000000000 --- a/img/assistance/giacenza.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/img/assistance/history.svg b/img/assistance/history.svg deleted file mode 100644 index 35f891d04bb..00000000000 --- a/img/assistance/history.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/img/assistance/info.svg b/img/assistance/info.svg deleted file mode 100644 index 5415e2a80d6..00000000000 --- a/img/assistance/info.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/img/assistance/login.svg b/img/assistance/login.svg deleted file mode 100644 index 81de685001a..00000000000 --- a/img/assistance/login.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/img/assistance/nameSurname.svg b/img/assistance/nameSurname.svg deleted file mode 100644 index be23dbfd900..00000000000 --- a/img/assistance/nameSurname.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/img/assistance/telefonia.svg b/img/assistance/telefonia.svg deleted file mode 100644 index 89e18837af3..00000000000 --- a/img/assistance/telefonia.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/img/assistance/website.svg b/img/assistance/website.svg deleted file mode 100644 index 5dcddbeaacd..00000000000 --- a/img/assistance/website.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/img/icons/Eye.svg b/img/icons/Eye.svg deleted file mode 100644 index 9ec691274da..00000000000 --- a/img/icons/Eye.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/img/icons/openweburl.svg b/img/icons/openweburl.svg deleted file mode 100644 index ee3c7fa72ab..00000000000 --- a/img/icons/openweburl.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/img/wallet/payment-methods/paypal/edit.svg b/img/wallet/payment-methods/paypal/edit.svg deleted file mode 100644 index b250e12c3ac..00000000000 --- a/img/wallet/payment-methods/paypal/edit.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/img/wallet/payment-methods/paypal/label.svg b/img/wallet/payment-methods/paypal/label.svg deleted file mode 100644 index 01ac294c9ab..00000000000 --- a/img/wallet/payment-methods/paypal/label.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/img/wallet/payment-methods/paypal/money_down.svg b/img/wallet/payment-methods/paypal/money_down.svg deleted file mode 100644 index e229312606e..00000000000 --- a/img/wallet/payment-methods/paypal/money_down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ts/components/AdviceComponent.tsx b/ts/components/AdviceComponent.tsx index 6a7e83e8741..dd6848d2671 100644 --- a/ts/components/AdviceComponent.tsx +++ b/ts/components/AdviceComponent.tsx @@ -1,17 +1,18 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; -import themeVariables from "../theme/variables"; -import { HSpacer } from "./core/spacer/Spacer"; +import { Icon, IOIcons } from "./core/icons"; +import type { IOColors } from "./core/variables/IOColors"; import { IOStyles } from "./core/variables/IOStyles"; -import IconFont from "./ui/IconFont"; +import { HSpacer } from "./core/spacer/Spacer"; import { Body } from "./core/typography/Body"; type Props = { text: string; - iconName?: string; + iconName?: IOIcons; iconSize?: number; - iconColor?: string; + iconColor?: IOColors; }; + const styles = StyleSheet.create({ icon: { marginTop: 4 @@ -25,12 +26,13 @@ const defaultIconSize = 18; */ const AdviceComponent: React.FunctionComponent = (props: Props) => ( - + + + {props.text} diff --git a/ts/components/CalendarsListContainer.tsx b/ts/components/CalendarsListContainer.tsx index 6f63e41e40e..0e00faf88da 100644 --- a/ts/components/CalendarsListContainer.tsx +++ b/ts/components/CalendarsListContainer.tsx @@ -93,7 +93,7 @@ class CalendarsListContainer extends React.PureComponent { title={convertLocalCalendarName(item.title)} hideIcon={!isDefaultCalendar} iconSize={12} - iconName={isDefaultCalendar ? "io-tick-big" : undefined} + iconName={isDefaultCalendar ? "legCompleted" : undefined} onPress={() => isDefaultCalendar && this.props.onCalendarRemove ? this.props.onCalendarRemove() diff --git a/ts/components/ChooserListContainer.tsx b/ts/components/ChooserListContainer.tsx index 1e5637e246a..bb6ed88e42e 100644 --- a/ts/components/ChooserListContainer.tsx +++ b/ts/components/ChooserListContainer.tsx @@ -27,7 +27,7 @@ import { import { LabelledItem } from "./LabelledItem"; import AppHeader from "./ui/AppHeader"; import FooterWithButtons from "./ui/FooterWithButtons"; -import IconFont from "./ui/IconFont"; +import { Icon } from "./core/icons/Icon"; type OwnProps = { items: ReadonlyArray; @@ -153,8 +153,8 @@ class ChooserListContainer extends React.PureComponent, State> { onPress={this.handleSearchPress} transparent={true} > - diff --git a/ts/components/ChooserListItem.tsx b/ts/components/ChooserListItem.tsx index 8860c5c5bf9..416d89baf42 100644 --- a/ts/components/ChooserListItem.tsx +++ b/ts/components/ChooserListItem.tsx @@ -3,11 +3,11 @@ import { pipe } from "fp-ts/lib/function"; import * as React from "react"; import { View, StyleSheet } from "react-native"; import customVariables from "../theme/variables"; -import ButtonDefaultOpacity from "./ButtonDefaultOpacity"; import { VSpacer } from "./core/spacer/Spacer"; import { H3 } from "./core/typography/H3"; import TouchableDefaultOpacity from "./TouchableDefaultOpacity"; -import IconFont from "./ui/IconFont"; +import { IOColors } from "./core/variables/IOColors"; +import { IOIcons, Icon } from "./core/icons"; type Props = Readonly<{ itemTitle: string; @@ -46,10 +46,8 @@ export default class ChooserListItem extends React.Component { public render() { const { isItemSelected, itemIconComponent, itemId, itemTitle } = this.props; - const iconName = isItemSelected ? "io-checkbox-on" : "io-checkbox-off"; - const iconColor = isItemSelected - ? customVariables.selectedColor - : customVariables.unselectedColor; + const iconName: IOIcons = isItemSelected ? "legCheckOn" : "legCheckOff"; + const iconColor: IOColors = isItemSelected ? "blue" : "bluegrey"; const icon = itemIconComponent ? pipe( @@ -68,9 +66,9 @@ export default class ChooserListItem extends React.Component { {itemTitle} - - - + + + ); diff --git a/ts/components/ContextualInfo.tsx b/ts/components/ContextualInfo.tsx index c765876b351..9b1300d5107 100644 --- a/ts/components/ContextualInfo.tsx +++ b/ts/components/ContextualInfo.tsx @@ -2,10 +2,10 @@ import { Body, Container, Content, Right } from "native-base"; import * as React from "react"; import { BackHandler, NativeEventSubscription, StyleSheet } from "react-native"; import themeVariables from "../theme/variables"; -import IconFont from "./ui/IconFont"; -import ButtonDefaultOpacity from "./ButtonDefaultOpacity"; import AppHeader from "./ui/AppHeader"; import { H1 } from "./core/typography/H1"; +import { Icon } from "./core/icons"; +import TouchableDefaultOpacity from "./TouchableDefaultOpacity"; type Props = Readonly<{ title: string; @@ -50,12 +50,12 @@ export default class ContextualInfo extends React.Component { - this.props.onClose()} - transparent={true} + testID="contextualInfo_closeButton" > - - + + { private getIconName = () => this.props.isSelectionModeEnabled ? this.props.isItemSelected - ? "io-checkbox-on" - : "io-checkbox-off" - : "io-right"; + ? "legCheckOn" + : "legCheckOff" + : "chevronRightListItem"; shouldComponentUpdate(nextProps: Readonly): boolean { // assuming that: @@ -158,11 +158,7 @@ export default class DetailedlistItemComponent extends React.Component { /> )} - + {this.props.children} diff --git a/ts/components/EmailReadComponent.tsx b/ts/components/EmailReadComponent.tsx index 0f6eaae0deb..56f6c514b99 100644 --- a/ts/components/EmailReadComponent.tsx +++ b/ts/components/EmailReadComponent.tsx @@ -11,10 +11,10 @@ import TopScreenComponent from "./screens/TopScreenComponent"; import SectionStatusComponent from "./SectionStatus"; import { BlockButtonsProps } from "./ui/BlockButtons"; import FooterWithButtons from "./ui/FooterWithButtons"; -import IconFont from "./ui/IconFont"; import { Body } from "./core/typography/Body"; import { VSpacer } from "./core/spacer/Spacer"; import { H3 } from "./core/typography/H3"; +import { Icon } from "./core/icons/Icon"; const styles = StyleSheet.create({ flex: { @@ -61,13 +61,14 @@ const EmailReadComponent = ({ handleGoBack, footerProps }: Props) => { {I18n.t("email.insert.label")} - + + + {O.isSome(optionEmail) &&

{optionEmail.value}

} diff --git a/ts/components/FiscalCodeLandscapeOverlay.tsx b/ts/components/FiscalCodeLandscapeOverlay.tsx index 8975b7aa074..1d1089f1415 100644 --- a/ts/components/FiscalCodeLandscapeOverlay.tsx +++ b/ts/components/FiscalCodeLandscapeOverlay.tsx @@ -13,7 +13,6 @@ import { } from "react-native"; import { InitializedProfile } from "../../definitions/backend/InitializedProfile"; import { Municipality } from "../../definitions/content/Municipality"; -import IconFont from "../components/ui/IconFont"; import I18n from "../i18n"; import customVariables from "../theme/variables"; import { useMaxBrightness } from "../utils/brightness"; @@ -21,6 +20,7 @@ import FiscalCodeComponent from "./FiscalCodeComponent"; import AppHeader from "./ui/AppHeader"; import { IOColors } from "./core/variables/IOColors"; import { VSpacer } from "./core/spacer/Spacer"; +import { Icon } from "./core/icons/Icon"; export type Props = Readonly<{ onCancel: () => void; @@ -94,7 +94,7 @@ const FiscalCodeLandscapeOverlay: React.FunctionComponent = ( accessibilityRole={"button"} accessibilityLabel={I18n.t("global.buttons.close")} > - + diff --git a/ts/components/GoBackButton.tsx b/ts/components/GoBackButton.tsx index 8077ffb46c7..57c5783018b 100644 --- a/ts/components/GoBackButton.tsx +++ b/ts/components/GoBackButton.tsx @@ -3,9 +3,8 @@ import * as React from "react"; import { BackHandler, NativeEventSubscription } from "react-native"; import I18n from "../i18n"; import NavigationService from "../navigation/NavigationService"; -import { IOColors } from "../components/core/variables/IOColors"; import ButtonDefaultOpacity from "./ButtonDefaultOpacity"; -import IconFont from "./ui/IconFont"; +import { Icon } from "./core/icons"; interface OwnProps { [k: string]: any; @@ -61,10 +60,7 @@ class GoBackButton extends React.PureComponent { {...buttonProps} accessibilityLabel={I18n.t("global.buttons.back")} > - + ); } diff --git a/ts/components/IdpSuccessfulAuthentication.tsx b/ts/components/IdpSuccessfulAuthentication.tsx index a037335e63a..39cf4eab3b8 100644 --- a/ts/components/IdpSuccessfulAuthentication.tsx +++ b/ts/components/IdpSuccessfulAuthentication.tsx @@ -5,8 +5,7 @@ import * as React from "react"; import { View, StatusBar, StyleSheet } from "react-native"; import variables from "../theme/variables"; -import IconFont from "./ui/IconFont"; -import { IOColors } from "./core/variables/IOColors"; +import { Icon } from "./core/icons"; const styles = StyleSheet.create({ container: { @@ -17,7 +16,7 @@ const styles = StyleSheet.create({ } }); -const tickSize = variables.iconSize6 * 2; +const ICON_SIZE = 96; export const IdpSuccessfulAuthentication = () => ( @@ -25,6 +24,6 @@ export const IdpSuccessfulAuthentication = () => ( barStyle="light-content" backgroundColor={styles.container.backgroundColor} /> - + ); diff --git a/ts/components/LabelledItem/Icon.tsx b/ts/components/LabelledItem/Icon.tsx index b5aafa2ae7b..227c6111bfa 100644 --- a/ts/components/LabelledItem/Icon.tsx +++ b/ts/components/LabelledItem/Icon.tsx @@ -8,7 +8,6 @@ import { import { isString } from "lodash"; import { IconProps } from "react-native-vector-icons/Icon"; import IconFont from "../ui/IconFont"; -import variables from "../../theme/variables"; import ButtonDefaultOpacity from "../ButtonDefaultOpacity"; const styles = StyleSheet.create({ @@ -54,7 +53,7 @@ export const Icon: React.FC = ({ > {isString(icon) ? ( { const { color } = this.props; return ( { - public render() { - const { backgroundColor, iconProps } = this.props; - return ( - - - - - {this.props.children} - - ); - } -} - -export default NoticeBox; diff --git a/ts/components/PinCreationForm.tsx b/ts/components/PinCreationForm.tsx index 208c055636d..407958ca076 100644 --- a/ts/components/PinCreationForm.tsx +++ b/ts/components/PinCreationForm.tsx @@ -179,7 +179,7 @@ export const PinCreationForm = ({ onSubmit }: Props) => { - + diff --git a/ts/components/Pinpad/KeyPad.tsx b/ts/components/Pinpad/KeyPad.tsx index 034ddb36559..22ace892f9c 100644 --- a/ts/components/Pinpad/KeyPad.tsx +++ b/ts/components/Pinpad/KeyPad.tsx @@ -3,18 +3,17 @@ import * as E from "fp-ts/lib/Either"; import { pipe } from "fp-ts/lib/function"; import { Col, Grid, Row, Text as NBButtonText } from "native-base"; import * as React from "react"; -import { Platform, StyleSheet } from "react-native"; +import { Platform, StyleSheet, View } from "react-native"; import { makeFontStyleObject } from "../../theme/fonts"; -import customVariables from "../../theme/variables"; import ButtonDefaultOpacity from "../ButtonDefaultOpacity"; import { hexToRgba, IOColors } from "../core/variables/IOColors"; -import StyledIconFont from "../ui/IconFont"; +import { IOIcons, Icon } from "../core/icons/Icon"; // left -> the string to represent as text // right -> the icon to represent with name and size export type DigitRpr = E.Either< string, - { name: string; size: number; accessibilityLabel: string } + { name: IOIcons; size: number; accessibilityLabel: string } >; type Digit = ITuple2 void> | undefined; @@ -109,16 +108,13 @@ const renderPinCol = ( ), ic => ( - + + + ) ) )} diff --git a/ts/components/Pinpad/index.tsx b/ts/components/Pinpad/index.tsx index 7567d6b0e06..8eea622b6aa 100644 --- a/ts/components/Pinpad/index.tsx +++ b/ts/components/Pinpad/index.tsx @@ -53,7 +53,7 @@ const styles = StyleSheet.create({ } }); -const SMALL_ICON_WIDTH = 17; +const CANCEL_ICON_WIDTH = 24; const ICON_WIDTH = 48; const SHAKE_ANIMATION_DURATION = 600 as Millisecond; const INPUT_MARGIN = 36; @@ -77,7 +77,7 @@ class Pinpad extends React.PureComponent { case "BIOMETRICS": case "TOUCH_ID": return E.right({ - name: "io-fingerprint", + name: "biomFingerprint", size: ICON_WIDTH, accessibilityLabel: I18n.t( "identification.unlockCode.accessibility.fingerprint" @@ -85,7 +85,7 @@ class Pinpad extends React.PureComponent { }); case "FACE_ID": return E.right({ - name: "io-face-id", + name: "biomFaceID", size: ICON_WIDTH, accessibilityLabel: I18n.t( "identification.unlockCode.accessibility.faceId" @@ -163,8 +163,8 @@ class Pinpad extends React.PureComponent { ), Tuple2( E.right({ - name: "io-cancel", - size: SMALL_ICON_WIDTH, + name: "cancel", + size: CANCEL_ICON_WIDTH, accessibilityLabel: I18n.t( "identification.unlockCode.accessibility.delete" ) diff --git a/ts/components/ProfileTabIcon.tsx b/ts/components/ProfileTabIcon.tsx index d516d74935d..1e9d3a8caac 100644 --- a/ts/components/ProfileTabIcon.tsx +++ b/ts/components/ProfileTabIcon.tsx @@ -1,12 +1,13 @@ import React from "react"; import { connect } from "react-redux"; +import { ColorValue } from "react-native"; import { GlobalState } from "../store/reducers/types"; -import IconFont from "./ui/IconFont"; +import { AnimatedIcon } from "./core/icons/Icon"; type OwnProps = { size?: number; - color?: string; + color?: ColorValue; }; type Props = OwnProps & ReturnType; @@ -21,10 +22,12 @@ class ProfileTabIcon extends React.PureComponent { // when new experimental features will be avaible, pick this flag from props const isExperimentalFeaturesEnabled = false; return ( - ); } diff --git a/ts/components/RegionServiceWebView.tsx b/ts/components/RegionServiceWebView.tsx index e9c98efcf34..4dea5a2595a 100644 --- a/ts/components/RegionServiceWebView.tsx +++ b/ts/components/RegionServiceWebView.tsx @@ -1,7 +1,13 @@ import * as E from "fp-ts/lib/Either"; import { pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; -import { Body, Container, Content, Right } from "native-base"; +import { + Body, + Container, + Content, + Right, + Text as NBButtonText +} from "native-base"; import * as React from "react"; import { View, Alert, Image, StyleSheet } from "react-native"; import WebView, { WebViewMessageEvent } from "react-native-webview"; @@ -12,7 +18,6 @@ import { import URLParse from "url-parse"; import brokenLinkImage from "../../img/broken-link.png"; import I18n from "../i18n"; -import customVariables from "../theme/variables"; import { WebviewMessage } from "../types/WebviewMessage"; import { getRemoteLocale } from "../utils/messages"; import { showToast } from "../utils/showToast"; @@ -23,13 +28,13 @@ import { } from "../utils/webview"; import ButtonDefaultOpacity from "./ButtonDefaultOpacity"; import { VSpacer } from "./core/spacer/Spacer"; -import { Body as BodyText } from "./core/typography/Body"; import { Label } from "./core/typography/Label"; import { withLightModalContext } from "./helpers/withLightModalContext"; import LoadingSpinnerOverlay from "./LoadingSpinnerOverlay"; import AppHeader from "./ui/AppHeader"; -import IconFont from "./ui/IconFont"; import { LightModalContextInterface } from "./ui/LightModal"; +import { Icon } from "./core/icons/Icon"; +import { IOStyles } from "./core/variables/IOStyles"; type Props = { onWebviewClose: () => void; @@ -39,8 +44,6 @@ type Props = { const styles = StyleSheet.create({ itemsCenter: { alignItems: "center" }, - selfCenter: { alignSelf: "center" }, - flex1: { flex: 1 }, errorContainer: { flex: 1, alignItems: "center" @@ -77,17 +80,14 @@ const RegionServiceWebView: React.FunctionComponent = (props: Props) => { - + - - + + + + @@ -104,19 +104,15 @@ const RegionServiceWebView: React.FunctionComponent = (props: Props) => { - + - - + + + + - @@ -151,7 +147,7 @@ const RegionServiceWebView: React.FunctionComponent = (props: Props) => { light={true} bordered={true} > - {I18n.t("global.buttons.cancel")} + {I18n.t("global.buttons.cancel")} { @@ -218,15 +218,15 @@ class RemindEmailValidationOverlay extends React.PureComponent { {I18n.t("global.actions.retry")} - { this.setState({ displayError: false }); }} - color={IOColors.white} accessible={true} accessibilityLabel={I18n.t("global.buttons.close")} - /> + > + + ); @@ -260,13 +260,13 @@ class RemindEmailValidationOverlay extends React.PureComponent { accessibilityLabel={I18n.t("global.buttons.back")} accessibilityRole={"button"} > - + ); private onMainProps: TopScreenComponentProps = { customRightIcon: { - iconName: "io-close", + iconName: "legClose", onPress: this.props.navigateBack } }; @@ -356,9 +356,9 @@ class RemindEmailValidationOverlay extends React.PureComponent { O.getOrElse(() => EMPTY_EMAIL) ); - const icon = this.state.emailHasBeenValidate - ? "io-email-validated" - : "io-email-to-validate"; + const illustration: IOPictograms = this.state.emailHasBeenValidate + ? "emailValidation" + : "emailToValidate"; const title = this.state.emailHasBeenValidate ? I18n.t("email.validate.validated") @@ -374,12 +374,13 @@ class RemindEmailValidationOverlay extends React.PureComponent { > - + + + {title} diff --git a/ts/components/SectionStatus/StatusContent.tsx b/ts/components/SectionStatus/StatusContent.tsx index 922b88c957e..57b97742b1d 100644 --- a/ts/components/SectionStatus/StatusContent.tsx +++ b/ts/components/SectionStatus/StatusContent.tsx @@ -1,9 +1,9 @@ import { AccessibilityRole, StyleSheet, View } from "react-native"; import React, { ComponentProps } from "react"; import { WithTestID } from "../../types/WithTestID"; -import IconFont from "../ui/IconFont"; import { Label } from "../core/typography/Label"; import { IOColors } from "../core/variables/IOColors"; +import { IOIcons, Icon } from "../core/icons/Icon"; const iconSize = 24; @@ -28,10 +28,9 @@ type Props = WithTestID<{ accessibilityLabel?: string; accessibilityRole?: AccessibilityRole; backgroundColor: IOColors; - iconColor: string; - iconName: string; + iconName: IOIcons; viewRef: React.RefObject; - labelColor: ComponentProps["color"]; + foregroundColor: ComponentProps["color"]; labelPaddingVertical?: number; }>; @@ -42,10 +41,9 @@ const StatusContent: React.FC = ({ accessibilityRole, backgroundColor, children, - iconColor, iconName, viewRef, - labelColor, + foregroundColor, labelPaddingVertical }) => ( = ({ style={[styles.container, { backgroundColor: IOColors[backgroundColor] }]} testID={"SectionStatusContent"} > - + + + = { [LevelEnum.warning]: "orange" }; -export const statusIconMap: Record = { - [LevelEnum.normal]: "io-complete", - [LevelEnum.critical]: "io-warning", - [LevelEnum.warning]: "io-info" +export const statusIconMap: Record = { + [LevelEnum.normal]: "ok", + [LevelEnum.critical]: "legWarning", + [LevelEnum.warning]: "info" }; // map the text background color with the relative text color -const textDefaultColor = "white"; export const getStatusTextColor = ( level: LevelEnum ): "bluegreyDark" | "white" => - level === LevelEnum.normal ? "bluegreyDark" : textDefaultColor; + level === LevelEnum.normal ? "bluegreyDark" : "white"; export const InnerSectionStatus = ( props: Omit & { @@ -84,11 +84,10 @@ export const InnerSectionStatus = ( "global.accessibility.alert" )}`} backgroundColor={backgroundColor} - iconColor={IOColors[color]} iconName={iconName} testID={"SectionStatusComponentContent"} viewRef={viewRef} - labelColor={color} + foregroundColor={color} > {`${sectionStatus.message[locale]} `} @@ -109,10 +108,9 @@ export const InnerSectionStatus = ( // disable accessibility to prevent the override of the container accessible={false} backgroundColor={backgroundColor} - iconColor={IOColors[color]} iconName={iconName} viewRef={viewRef} - labelColor={color} + foregroundColor={color} > {`${sectionStatus.message[locale]} `} { public render() { - return ( - - ); + return ; } } diff --git a/ts/components/WalletTabIcon.tsx b/ts/components/WalletTabIcon.tsx index f8d0dffcda5..474aec3932b 100644 --- a/ts/components/WalletTabIcon.tsx +++ b/ts/components/WalletTabIcon.tsx @@ -1,11 +1,12 @@ import React from "react"; import { connect } from "react-redux"; +import { ColorValue } from "react-native"; import { getSafeUnreadTransactionsNumSelector } from "../store/reducers/entities/readTransactions"; import { GlobalState } from "../store/reducers/types"; import TabIconComponent from "./ui/TabIconComponent"; type OwnProps = { - color?: string; + color?: ColorValue; }; type Props = OwnProps & ReturnType; @@ -18,7 +19,7 @@ class WalletTabIcon extends React.PureComponent { const { color, unreadTransactions } = this.props; return ( diff --git a/ts/components/__tests__/ContextualInfo.test.tsx b/ts/components/__tests__/ContextualInfo.test.tsx index c9e8fa4a364..c943e03904a 100644 --- a/ts/components/__tests__/ContextualInfo.test.tsx +++ b/ts/components/__tests__/ContextualInfo.test.tsx @@ -38,18 +38,20 @@ const options = { }; describe("ContextualInfo component", () => { - it("should render a button with the 'io-close' icon", () => { + it("should render a close button", () => { const component = renderComponent(options); - // ensure that the close icon is inside an accessible button - expect(buttonByIconName("io-close", component)).toBeDefined(); + expect( + component.queryByTestId("contextualInfo_closeButton") + ).not.toBeNull(); }); describe("when the close button is pressed", () => { it("should call `onClose`", () => { const onClose = jest.fn(); const component = renderComponent({ ...options, onClose }); - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const closeButton = buttonByIconName("io-close", component)!; + const closeButton = component.queryByTestId( + "contextualInfo_closeButton" + )!; fireEvent(closeButton, "onPress"); expect(onClose).toHaveBeenCalledTimes(1); }); diff --git a/ts/components/bottomSheet/BottomSheetHeader.tsx b/ts/components/bottomSheet/BottomSheetHeader.tsx index dda010ae087..181fa2011e7 100644 --- a/ts/components/bottomSheet/BottomSheetHeader.tsx +++ b/ts/components/bottomSheet/BottomSheetHeader.tsx @@ -5,10 +5,10 @@ import { Millisecond } from "@pagopa/ts-commons/lib/units"; import I18n from "../../i18n"; import ButtonDefaultOpacity from "../ButtonDefaultOpacity"; import { H3 } from "../core/typography/H3"; -import IconFont from "../ui/IconFont"; import { IOStyles } from "../core/variables/IOStyles"; import { IOColors } from "../core/variables/IOColors"; import { setAccessibilityFocus } from "../../utils/accessibility"; +import { Icon } from "../core/icons"; const styles = StyleSheet.create({ row: { @@ -24,9 +24,6 @@ const styles = StyleSheet.create({ modalClose: { paddingRight: 0, justifyContent: "flex-end" - }, - icon: { - paddingRight: 0 } }); @@ -68,7 +65,7 @@ export const BottomSheetHeader: React.FunctionComponent = ({ accessibilityRole={"button"} accessibilityLabel={I18n.t("global.buttons.close")} > - + ); diff --git a/ts/components/box/InfoBox.tsx b/ts/components/box/InfoBox.tsx index 19e0e6cfb5c..965cec62756 100644 --- a/ts/components/box/InfoBox.tsx +++ b/ts/components/box/InfoBox.tsx @@ -1,12 +1,12 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; -import IconFont from "../ui/IconFont"; import { IOColors } from "../core/variables/IOColors"; import { HSpacer } from "../core/spacer/Spacer"; +import { IOIcons, Icon } from "../core/icons"; type Props = { - iconName?: string; - iconColor?: string; + iconName?: IOIcons; + iconColor?: IOColors; iconSize?: number; alignedCentral?: boolean; }; @@ -35,18 +35,15 @@ const ICON_SIZE = 32; * @constructor */ export const InfoBox: React.FunctionComponent = props => { - const iconName = props.iconName ?? "io-notice"; - const iconColor = props.iconColor ?? IOColors.blue; + const iconName = props.iconName ?? "notice"; + const iconColor = props.iconColor ?? "blue"; const iconSize = props.iconSize ?? ICON_SIZE; const centralAlignment = props.alignedCentral ? styles.alignedCentral : {}; return ( - + + + {props.children} diff --git a/ts/components/cie/CieNotSupported.tsx b/ts/components/cie/CieNotSupported.tsx index 468186994d3..ef965cda21d 100644 --- a/ts/components/cie/CieNotSupported.tsx +++ b/ts/components/cie/CieNotSupported.tsx @@ -1,12 +1,12 @@ import { Body, List, ListItem } from "native-base"; import * as React from "react"; import { useState } from "react"; -import { Platform } from "react-native"; +import { Platform, View } from "react-native"; import I18n from "../../i18n"; -import customVariables from "../../theme/variables"; import { VSpacer } from "../core/spacer/Spacer"; -import IconFont from "../ui/IconFont"; import Markdown from "../ui/Markdown"; +import { IOIcons, Icon } from "../core/icons"; +import { IOColors } from "../core/variables/IOColors"; type Props = { hasCieApiLevelSupport: boolean; @@ -14,10 +14,10 @@ type Props = { }; const ICON_SIZE = 24; -const okColor = customVariables.brandSuccess; -const koColor = customVariables.brandDanger; -const okIcon = "io-complete"; -const koIcon = "io-error"; +const okColor: IOColors = "green"; +const koColor: IOColors = "red"; +const okIcon: IOIcons = "ok"; +const koIcon: IOIcons = "legError"; const markDownElements = 2; const CieNotSupported: React.FunctionComponent = props => { const [markdownLoaded, setMarkdownLoaded] = useState(0); @@ -38,9 +38,9 @@ const CieNotSupported: React.FunctionComponent = props => { {markdownLoaded === markDownElements && ( - @@ -50,12 +50,13 @@ const CieNotSupported: React.FunctionComponent = props => { - + + + {I18n.t( "authentication.landing.cie_unsupported.nfc_incompatible" diff --git a/ts/components/cie/CieReadingCardAnimation.tsx b/ts/components/cie/CieReadingCardAnimation.tsx index b69ca23d675..a3fc71df409 100644 --- a/ts/components/cie/CieReadingCardAnimation.tsx +++ b/ts/components/cie/CieReadingCardAnimation.tsx @@ -4,8 +4,8 @@ import { View, Animated, Easing, Image, StyleSheet } from "react-native"; import ProgressCircle from "react-native-progress-circle"; import customVariables from "../../theme/variables"; import AnimatedRing from "../animations/AnimatedRing"; -import IconFont from "../ui/IconFont"; import { IOColors } from "../core/variables/IOColors"; +import { Icon } from "../core/icons/Icon"; export enum ReadingState { "reading" = "reading", @@ -215,12 +215,9 @@ export default class CieReadingCardAnimation extends React.PureComponent< /> {this.props.readingState === ReadingState.completed && ( - + + + )} diff --git a/ts/components/core/accordion/RawAccordion.tsx b/ts/components/core/accordion/RawAccordion.tsx index a6070735232..1aa6bbf6e5a 100644 --- a/ts/components/core/accordion/RawAccordion.tsx +++ b/ts/components/core/accordion/RawAccordion.tsx @@ -13,8 +13,8 @@ import { import I18n from "../../../i18n"; import customVariables from "../../../theme/variables"; import { isAndroid } from "../../../utils/platform"; -import IconFont from "../../ui/IconFont"; import { IOStyles } from "../variables/IOStyles"; +import { Icon } from "../icons/Icon"; // TODO: handle external initial open/closed state type Props = { @@ -65,7 +65,7 @@ export const RawAccordion: React.FunctionComponent = props => { const arrowAngle = shouldAnimate ? animatedController.interpolate({ inputRange: [0, 1], - outputRange: ["-90deg", "-270deg"] + outputRange: ["0deg", "-180deg"] }) : getDegree(isOpen); @@ -110,11 +110,7 @@ export const RawAccordion: React.FunctionComponent = props => { transform: [{ rotateZ: arrowAngle }] }} > - + diff --git a/ts/components/core/icons/Icon.tsx b/ts/components/core/icons/Icon.tsx index 219f369f07c..3af82375ac0 100644 --- a/ts/components/core/icons/Icon.tsx +++ b/ts/components/core/icons/Icon.tsx @@ -40,6 +40,7 @@ import IconSave from "./svg/IconSave"; import IconCompleted from "./svg/IconCompleted"; import IconSuccess from "./svg/IconSuccess"; import IconOk from "./svg/IconOk"; +import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual"; import IconCreditCard from "./svg/IconCreditCard"; import IconBonus from "./svg/IconBonus"; import IconTransactions from "./svg/IconTransactions"; @@ -158,7 +159,6 @@ import LegIconCompleted from "./svg/LegIconCompleted"; import LegIconCreditCard from "./svg/LegIconCreditCard"; import LegIconBonus from "./svg/LegIconBonus"; import LegIconDocumentAttachment from "./svg/LegIconDocumentAttachment"; -import LegIconTransactions from "./svg/LegIconTransactions"; import LegIconAmount from "./svg/LegIconAmount"; import LegIconCoggle from "./svg/LegIconCoggle"; import LegIconLocation from "./svg/LegIconLocation"; @@ -166,7 +166,6 @@ import LegIconWarning from "./svg/LegIconWarning"; import LegIconNotice from "./svg/LegIconNotice"; import LegIconHistory from "./svg/LegIconHistory"; import LegIconEdit from "./svg/LegIconEdit"; -import LegIconBattery from "./svg/LegIconBattery"; import LegIconTrashcan from "./svg/LegIconTrashcan"; import LegIconCalendar from "./svg/LegIconCalendar"; import LegIconProfile from "./svg/LegIconProfile"; @@ -175,52 +174,52 @@ import LegIconMagicWand from "./svg/LegIconMagicWand"; import LegIconStarFilled from "./svg/LegIconStarFilled"; import LegIconStarEmpty from "./svg/LegIconStarEmpty"; import LegIconSwitchOff from "./svg/LegIconSwitchOff"; -import LegIconDotMenu from "./svg/LegIconDotMenu"; import LegIconBarcode from "./svg/LegIconBarcode"; import LegIconSave from "./svg/LegIconSave"; -import LegIconLogin from "./svg/LegIconLogin"; import LegIconLadybug from "./svg/LegIconLadybug"; import LegIconTag from "./svg/LegIconTag"; -import LegIconGallery from "./svg/LegIconGallery"; import LegIconExternalLink from "./svg/LegIconExternalLink"; import LegIconUnknownGdo from "./svg/LegIconUnknownGdo"; -import LegIconCancel from "./svg/LegIconCancel"; -import LegIconDevice from "./svg/LegIconDevice"; import LegIconQuestion from "./svg/LegIconQuestion"; import LegIconSearch from "./svg/LegIconSearch"; import LegIconClose from "./svg/LegIconClose"; import LegIconCloseSmall from "./svg/LegIconCloseSmall"; +import LegIconChevronLeft from "./svg/LegIconChevronLeft"; import LegIconGiacenza from "./svg/LegIconGiacenza"; import LegIconPSP from "./svg/LegIconPSP"; import LegIconError from "./svg/LegIconError"; +import LegIconRadioOn from "./svg/LegIconRadioOn"; +import LegIconRadioOff from "./svg/LegIconRadioOff"; +import LegIconCheckOn from "./svg/LegIconCheckOn"; +import LegIconCheckOff from "./svg/LegIconCheckOff"; export const IOIcons = { spid: IconSpid, cie: IconCie /* io-cie */, qrCode: IconQrCode, - legQrCode: LegIconQrCode /* io-qr */, + legQrCode: LegIconQrCode, bell: IconBell, website: IconWebsite, legWebsite: LegIconWebsite, abacus: IconAbacus, - legAbacus: LegIconAbacus /* io-abacus */, + legAbacus: LegIconAbacus, home: IconHome, homeFill: IconHomeFill, legHome: LegIconHome, copy: IconCopy, - legCopy: LegIconCopy /* io-copy */, + legCopy: LegIconCopy, selfCert: IconSelfCertification, institution: IconInstitution, legInstitution: LegIconInstitution, hourglass: IconHourglass, - legHourglass: LegIconHourglass /* io-hourglass */, + legHourglass: LegIconHourglass, shareiOs: IconShareiOs, shareAndroid: IconShareAndroid, - legShare: LegIconShare /* io-share */, + legShare: LegIconShare, locked: IconLockOn, unlocked: IconLockOff, - legLocked: LegIconLockOn /* io-locker-closed */ /* io-lucchetto */, - legUnlocked: LegIconLockOff /* io-locker-open */, + legLocked: LegIconLockOn /* io-lucchetto */, + legUnlocked: LegIconLockOff, initiatives: IconInitiatives, legInitiatives: LegIconInitiatives, analytics: IconAnalytics, @@ -237,8 +236,8 @@ export const IOIcons = { legPinOn: LegIconPinOn, emojiSad: IconEmojiSad, emojiHappy: IconEmojiHappy, - legEmojiSad: LegIconEmojiSad /* io-sad */, - legEmojiHappy: LegIconEmojiHappy /* io-happy */, + legEmojiSad: LegIconEmojiSad, + legEmojiHappy: LegIconEmojiHappy, phone: IconPhone, legPhone: LegIconPhone /* io-phone */, email: IconEmail, @@ -249,7 +248,7 @@ export const IOIcons = { messageLegal: IconMessageLegal, legMessageLegal: LegIconMessageLegal, message: IconMessage, - legMessage: LegIconMessage /* io-send-message */, + legMessage: LegIconMessage, chat: IconChat, legChat: LegIconChat, doc: IconDocument, @@ -265,17 +264,17 @@ export const IOIcons = { attachment: IconAttachment, legAttachment: LegIconAttachment, add: IconAdd, - legAdd: LegIconAdd /* io-plus */, + legAdd: LegIconAdd, completed: IconCompleted, - legCompleted: LegIconCompleted /* io-tick-big */, - success: IconSuccess /* io-success */, - ok: IconOk /* io-complete */, + legCompleted: LegIconCompleted, + success: IconSuccess, + ok: IconOk, + fiscalCodeIndividual: IconFiscalCodeIndividual, creditCard: IconCreditCard, legCreditCard: LegIconCreditCard /* io-carta */, bonus: IconBonus, legBonus: LegIconBonus, - transactions: IconTransactions /* io-transactions */, - legTransactions: LegIconTransactions, + transactions: IconTransactions, amount: IconAmount, legAmount: LegIconAmount, psp: IconPSP, @@ -285,27 +284,26 @@ export const IOIcons = { locationAndroid: IconLocationAndroid, legLocation: LegIconLocation, coggle: IconCoggle, - legCoggle: LegIconCoggle /* io-coggle */ /* io-preferenze */, + legCoggle: LegIconCoggle, warningFilled: IconWarningFilled, legWarning: LegIconWarning /* io-warning */, - notice: IconNotice /* io-notice */, + notice: IconNotice, noticeFilled: IconNoticeFilled, legNotice: LegIconNotice, - info: IconInfo /* io-info */, + info: IconInfo, infoFilled: IconInfoFilled, canceled: IconCanceled, - legError: LegIconError /* io-error */, + legError: LegIconError, errorFilled: IconErrorFilled, refund: IconRefund, - reload: IconReload /* io-reload */, + reload: IconReload, history: IconHistory, legHistory: LegIconHistory, edit: IconEdit, - legEdit: LegIconEdit /* io-edit */, + legEdit: LegIconEdit, battery: IconBattery, - legBattery: LegIconBattery, trashcan: IconTrashcan, - legTrashcan: LegIconTrashcan /* io-trash */, + legTrashcan: LegIconTrashcan, calendar: IconCalendar, legCalendar: LegIconCalendar /* io-calendar */ /* io-calendario */, profile: IconProfile, @@ -313,48 +311,44 @@ export const IOIcons = { profileAlt: IconProfileAlt /* io-titolare */, legProfile: LegIconProfile, profileExperiment: IconProfileExperiment, - legProfileExperiment: LegIconProfileExperiment /* io-profilo-exp */, + legProfileExperiment: LegIconProfileExperiment, magicWand: IconMagicWand, legMagicWand: LegIconMagicWand, starFilled: IconStarFilled, starEmpty: IconStarEmpty, - legStarFilled: LegIconStarFilled /* io-filled-star */, - legStarEmpty: LegIconStarEmpty /* io-empty-star */, + legStarFilled: LegIconStarFilled, + legStarEmpty: LegIconStarEmpty, switchOff: IconSwitchOff, legSwitchOff: LegIconSwitchOff, device: IconDevice, - legDevice: LegIconDevice, dotMenu: IconDotMenu, - legDotMenu: LegIconDotMenu /* io-more */, barcode: IconBarcode, legBarcode: LegIconBarcode, - save: IconSave /* io-save */, - legSave: LegIconSave /* io-save */, + save: IconSave, + legSave: LegIconSave, login: IconLogin, logout: IconLogout, - legLogin: LegIconLogin, ladybug: IconLadybug, legLadybug: LegIconLadybug, tag: IconTag, legTag: LegIconTag, gallery: IconGallery, - legGallery: LegIconGallery, externalLink: IconExternalLink, legExternalLink: LegIconExternalLink, unknownGdo: IconUnknownGdo, legUnknownGdo: LegIconUnknownGdo, - cancel: IconCancel /* io-cancel */, - legCancel: LegIconCancel /* io-cancel */, - help: IconQuestion /* io-question */, + cancel: IconCancel, + help: IconQuestion, legHelp: LegIconQuestion /* io-question */, - search: IconSearch /* io-search */, + search: IconSearch, legSearch: LegIconSearch /* io-search */, - chevronRight: IconChevronRight /* io-right */, - chevronLeft: IconChevronLeft /* io-back */, + chevronRight: IconChevronRight, + chevronLeft: IconChevronLeft, chevronBottom: IconChevronBottom, chevronTop: IconChevronTop, chevronRightListItem: IconChevronRightListItem, - close: IconClose /* io-close */, + legChevronLeft: LegIconChevronLeft, + close: IconClose, legClose: LegIconClose /* io-close */, closeSmall: IconCloseSmall, legCloseSmall: LegIconCloseSmall, @@ -364,11 +358,15 @@ export const IOIcons = { arrowRight: IconArrowRight, backiOS: IconBackiOS, backAndroid: IconBackAndroid, - navMessages: IconNavMessages /* io-messaggi */, - navWallet: IconNavWallet /* io-portafoglio */, + legRadioOn: LegIconRadioOn, + legRadioOff: LegIconRadioOff, + legCheckOn: LegIconCheckOn, + legCheckOff: LegIconCheckOff, + navMessages: IconNavMessages, + navWallet: IconNavWallet, navDocuments: IconNavDocuments, navServices: IconNavServices, - navProfile: IconNavProfile /* io-profilo */, + navProfile: IconNavProfile, biomFingerprint: IconBiomFingerprint /* io-fingerprint */, biomFaceID: IconBiomFaceID /* io-face-id */, categCulture: IconCategCulture, @@ -383,7 +381,7 @@ export const IOIcons = { categJobOffers: IconCategJobOffers, categShopping: IconCategShopping, categSustainability: IconCategSustainability, - productIOApp: IconProductIOApp /* io-logo */, + productIOApp: IconProductIOApp, productPagoPA: IconProductPagoPA /* io-pagopa */ } as const; @@ -393,11 +391,23 @@ export type IOIconsProps = { name: IOIcons; color?: IOColors; size?: number | "100%"; + testID?: string; + accessible?: boolean; + accessibilityLabel?: string; }; export type SVGIconProps = { size: number | "100%"; style: StyleProp; + accessible: boolean; + accessibilityElementsHidden: boolean; + accessibilityLabel: string; + importantForAccessibility: + | "auto" + | "yes" + | "no" + | "no-hide-descendants" + | undefined; }; /* @@ -408,11 +418,21 @@ export const Icon = ({ name, color = "bluegrey", size = 24, + accessible = false, + accessibilityLabel = "", ...props }: IOIconsProps) => { const IconElement = IOIcons[name]; return ( - + ); }; @@ -425,16 +445,28 @@ type IOAnimatedIconsProps = { name: IOIcons; color?: ColorValue; size?: number | "100%"; + accessible?: boolean; }; export const AnimatedIcon = ({ name, color = IOColors.bluegrey, size = 24, + accessible = false, ...props }: IOAnimatedIconsProps) => { const IconElement = IOIcons[name]; - return ; + return ( + + ); }; /* Make component animatable. Reanimated supports class components only, @@ -489,6 +521,7 @@ const { attachment, add, completed, + fiscalCodeIndividual, creditCard, bonus, transactions, @@ -586,6 +619,7 @@ export const IOIconsNew = { attachment, add, completed, + fiscalCodeIndividual, creditCard, bonus, transactions, diff --git a/ts/components/core/icons/svg/IconAbacus.tsx b/ts/components/core/icons/svg/IconAbacus.tsx index c7ecaaea620..bd1d2b010e1 100644 --- a/ts/components/core/icons/svg/IconAbacus.tsx +++ b/ts/components/core/icons/svg/IconAbacus.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const IconAbacus = ({ size, style }: SVGIconProps) => ( - +const IconAbacus = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconAdd = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconAgreement = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconAmount = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconAnalytics = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconArrowBottom = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconArrowLeft = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconArrowRight = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconArrowUp = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconAttachment = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconBackAndroid = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconBackiOS = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconBarcode = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconBattery = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconBell = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconBiomFaceID = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconBiomFingerprint = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconBonus = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCalendar = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCancel = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCanceled = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategCulture = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategFinance = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategHome = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategJobOffers = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategLearning = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategMobility = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategShopping = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategSport = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategSustainability = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategCulture = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategTravel = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCategWellness = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconChat = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconChevronBottom = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconChevronLeft = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconChevronRight = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconChevronRightListItem = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconChevronTop = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCie = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconClose = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCloseSmall = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCoggle = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCompleted = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCopy = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconCreditCard = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconDevice = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconDocument = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconDocumentAttachment = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconDocumentAttachmentPDF = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconDocumentSign = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconDotMenu = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconEdit = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconEmail = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconEmailFill = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconEmailLegal = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconEmojiHappy = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconEmojiSad = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconErrorFilled = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconExternalLink = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconEyeHide = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconEyeShow = ({ size, style, ...props }: SVGIconProps) => ( + ( + + + +); + +export default IconFiscalCodeIndividual; diff --git a/ts/components/core/icons/svg/IconFornitori.tsx b/ts/components/core/icons/svg/IconFornitori.tsx index 7e4f3c605f5..91ef0e07ff1 100644 --- a/ts/components/core/icons/svg/IconFornitori.tsx +++ b/ts/components/core/icons/svg/IconFornitori.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const IconFornitori = ({ size, style }: SVGIconProps) => ( - +const IconFornitori = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconGallery = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconGiacenza = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconHistory = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconHome = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconHomeFill = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconHourglass = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconInfo = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconInfoFilled = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconInitiatives = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconInstitution = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconLadybug = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconLocationAndroid = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconLocationiOS = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconLocationiOSFilled = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconLockOff = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconLockOn = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconLogin = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconLogout = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconMagicWand = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconMessage = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconMessageLegal = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconNavDocuments = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconNavMessages = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconNavProfile = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconNavServices = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconNavWallet = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconNotice = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconNoticeFilled = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconOk = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconPEC = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconPSP = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconPhone = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconPinOff = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconPinOn = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconProductIOApp = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconProductPagoPA = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconProfile = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconProfileAlt = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconProfileExperiment = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconProfileFilled = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconQrCode = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconQuestion = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconRefund = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconReload = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconSave = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconSearch = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconSecurity = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconSelfCertification = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconShareAndroid = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconShareiOs = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconSpid = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconStarEmpty = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconStarFilled = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconSuccess = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconSwitchOff = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconTag = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconTransactions = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconTrashcan = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconUnknownGdo = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconWarningFilled = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const IconWebsite = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconAbacus = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconAdd = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconAmount = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconAnalytics = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconAttachment = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconBarcode = ({ size, style, ...props }: SVGIconProps) => ( + ( - - - - -); - -export default LegIconBattery; diff --git a/ts/components/core/icons/svg/LegIconBonus.tsx b/ts/components/core/icons/svg/LegIconBonus.tsx index 83546437153..e258a6609c3 100644 --- a/ts/components/core/icons/svg/LegIconBonus.tsx +++ b/ts/components/core/icons/svg/LegIconBonus.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const LegIconBonus = ({ size, style }: SVGIconProps) => ( - +const LegIconBonus = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconCalendar = ({ size, style, ...props }: SVGIconProps) => ( + ( - - - - - - -); - -export default LegIconCancel; diff --git a/ts/components/core/icons/svg/LegIconChat.tsx b/ts/components/core/icons/svg/LegIconChat.tsx index 8148990c1b8..b87401744b9 100644 --- a/ts/components/core/icons/svg/LegIconChat.tsx +++ b/ts/components/core/icons/svg/LegIconChat.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const LegIconChat = ({ size, style }: SVGIconProps) => ( - +const LegIconChat = ({ size, style, ...props }: SVGIconProps) => ( + ( + + + +); + +export default LegIconCheckOff; diff --git a/ts/components/core/icons/svg/LegIconCheckOn.tsx b/ts/components/core/icons/svg/LegIconCheckOn.tsx new file mode 100644 index 00000000000..c2093cbd39f --- /dev/null +++ b/ts/components/core/icons/svg/LegIconCheckOn.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGIconProps } from "../Icon"; + +const LegIconCheckOn = ({ size, style, ...props }: SVGIconProps) => ( + + + + + + +); + +export default LegIconCheckOn; diff --git a/ts/components/core/icons/svg/LegIconChevronLeft.tsx b/ts/components/core/icons/svg/LegIconChevronLeft.tsx new file mode 100644 index 00000000000..e6d87d87d9c --- /dev/null +++ b/ts/components/core/icons/svg/LegIconChevronLeft.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGIconProps } from "../Icon"; + +const LegIconChevronLeft = ({ size, style, ...props }: SVGIconProps) => ( + + + +); + +export default LegIconChevronLeft; diff --git a/ts/components/core/icons/svg/LegIconClose.tsx b/ts/components/core/icons/svg/LegIconClose.tsx index bbbcd3ac944..b61393b4aee 100644 --- a/ts/components/core/icons/svg/LegIconClose.tsx +++ b/ts/components/core/icons/svg/LegIconClose.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const LegIconClose = ({ size, style }: SVGIconProps) => ( - +const LegIconClose = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconCloseSmall = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconCoggle = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconCompleted = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconCopy = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconCreditCard = ({ size, style, ...props }: SVGIconProps) => ( + ( - - - -); - -export default LegIconDevice; diff --git a/ts/components/core/icons/svg/LegIconDocumentAttachment.tsx b/ts/components/core/icons/svg/LegIconDocumentAttachment.tsx index 44e74f6e29a..51791e0388c 100644 --- a/ts/components/core/icons/svg/LegIconDocumentAttachment.tsx +++ b/ts/components/core/icons/svg/LegIconDocumentAttachment.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const LegIconDocumentAttachment = ({ size, style }: SVGIconProps) => ( - +const LegIconDocumentAttachment = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconDocumentAttachmentPDF = ({ + size, + style, + ...props +}: SVGIconProps) => ( + ( - - - - -); - -export default LegIconDotMenu; diff --git a/ts/components/core/icons/svg/LegIconEdit.tsx b/ts/components/core/icons/svg/LegIconEdit.tsx index 71105c355f2..ed3d61161ee 100644 --- a/ts/components/core/icons/svg/LegIconEdit.tsx +++ b/ts/components/core/icons/svg/LegIconEdit.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const LegIconEdit = ({ size, style }: SVGIconProps) => ( - +const LegIconEdit = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconEmail = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconEmojiHappy = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconEmojiSad = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconError = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconExternalLink = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconEyeHide = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconEyeShow = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconFornitori = ({ size, style, ...props }: SVGIconProps) => ( + ( - - - -); - -export default LegIconGallery; diff --git a/ts/components/core/icons/svg/LegIconGiacenza.tsx b/ts/components/core/icons/svg/LegIconGiacenza.tsx index 2e67d928d14..df7fcdb8217 100644 --- a/ts/components/core/icons/svg/LegIconGiacenza.tsx +++ b/ts/components/core/icons/svg/LegIconGiacenza.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const LegIconGiacenza = ({ size, style }: SVGIconProps) => ( - +const LegIconGiacenza = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconHistory = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconHome = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconHourglass = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconInitiatives = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconInstitution = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconLadybug = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconLocation = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconLockOff = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconLockOn = ({ size, style, ...props }: SVGIconProps) => ( + ( - - - - - -); - -export default LegIconLogin; diff --git a/ts/components/core/icons/svg/LegIconMagicWand.tsx b/ts/components/core/icons/svg/LegIconMagicWand.tsx index 36c0a319ec0..a3b1c93bc3a 100644 --- a/ts/components/core/icons/svg/LegIconMagicWand.tsx +++ b/ts/components/core/icons/svg/LegIconMagicWand.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const LegIconMagicWand = ({ size, style }: SVGIconProps) => ( - +const LegIconMagicWand = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconMessage = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconMessageLegal = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconNotice = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconPEC = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconPSP = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconPhone = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconPinOff = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconPinOn = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconProfile = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconProfileExperiment = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconQrCode = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconQuestion = ({ size, style, ...props }: SVGIconProps) => ( + ( + + + +); + +export default LegIconRadioOff; diff --git a/ts/components/core/icons/svg/LegIconRadioOn.tsx b/ts/components/core/icons/svg/LegIconRadioOn.tsx new file mode 100644 index 00000000000..2aec0c816da --- /dev/null +++ b/ts/components/core/icons/svg/LegIconRadioOn.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGIconProps } from "../Icon"; + +const LegIconRadioOn = ({ size, style, ...props }: SVGIconProps) => ( + + + + + + +); + +export default LegIconRadioOn; diff --git a/ts/components/core/icons/svg/LegIconSave.tsx b/ts/components/core/icons/svg/LegIconSave.tsx index 4482cd3b402..0f7697865af 100644 --- a/ts/components/core/icons/svg/LegIconSave.tsx +++ b/ts/components/core/icons/svg/LegIconSave.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const LegIconSave = ({ size, style }: SVGIconProps) => ( - +const LegIconSave = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconSearch = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconShare = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconStarEmpty = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconStarFilled = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconSwitchOff = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconTag = ({ size, style, ...props }: SVGIconProps) => ( + ( - - - - - - -); - -export default LegIconTransactions; diff --git a/ts/components/core/icons/svg/LegIconTrashcan.tsx b/ts/components/core/icons/svg/LegIconTrashcan.tsx index 71426e1770d..0eebd0d6c91 100644 --- a/ts/components/core/icons/svg/LegIconTrashcan.tsx +++ b/ts/components/core/icons/svg/LegIconTrashcan.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGIconProps } from "../Icon"; -const LegIconTrashcan = ({ size, style }: SVGIconProps) => ( - +const LegIconTrashcan = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconUnknownGdo = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconWarning = ({ size, style, ...props }: SVGIconProps) => ( + ( - +const LegIconWebsite = ({ size, style, ...props }: SVGIconProps) => ( + - - diff --git a/ts/components/core/icons/svg/originals/IconFiscalCodeIndividual.svg b/ts/components/core/icons/svg/originals/IconFiscalCodeIndividual.svg new file mode 100644 index 00000000000..0f621b0c7b5 --- /dev/null +++ b/ts/components/core/icons/svg/originals/IconFiscalCodeIndividual.svg @@ -0,0 +1,8 @@ + + + diff --git a/ts/components/core/icons/svg/originals/IconTransactions.svg b/ts/components/core/icons/svg/originals/IconTransactions.svg deleted file mode 100644 index f023e33bb59..00000000000 --- a/ts/components/core/icons/svg/originals/IconTransactions.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/ts/components/core/icons/svg/originals/LegIconBattery.svg b/ts/components/core/icons/svg/originals/LegIconBattery.svg deleted file mode 100644 index a4080092155..00000000000 --- a/ts/components/core/icons/svg/originals/LegIconBattery.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - diff --git a/ts/components/core/icons/svg/originals/LegIconCancel.svg b/ts/components/core/icons/svg/originals/LegIconCancel.svg deleted file mode 100644 index 8545ba5f532..00000000000 --- a/ts/components/core/icons/svg/originals/LegIconCancel.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - diff --git a/ts/components/core/icons/svg/originals/LegIconCheckOff.svg b/ts/components/core/icons/svg/originals/LegIconCheckOff.svg new file mode 100644 index 00000000000..393249e4774 --- /dev/null +++ b/ts/components/core/icons/svg/originals/LegIconCheckOff.svg @@ -0,0 +1,8 @@ + + + diff --git a/ts/components/core/icons/svg/originals/LegIconCheckOn.svg b/ts/components/core/icons/svg/originals/LegIconCheckOn.svg new file mode 100644 index 00000000000..ceef443d300 --- /dev/null +++ b/ts/components/core/icons/svg/originals/LegIconCheckOn.svg @@ -0,0 +1,22 @@ + + + + + + diff --git a/ts/components/core/icons/svg/originals/LegIconChevronLeft.svg b/ts/components/core/icons/svg/originals/LegIconChevronLeft.svg new file mode 100644 index 00000000000..4ffb75a2f95 --- /dev/null +++ b/ts/components/core/icons/svg/originals/LegIconChevronLeft.svg @@ -0,0 +1,6 @@ + + + diff --git a/ts/components/core/icons/svg/originals/LegIconDotMenu.svg b/ts/components/core/icons/svg/originals/LegIconDotMenu.svg deleted file mode 100644 index dc871852040..00000000000 --- a/ts/components/core/icons/svg/originals/LegIconDotMenu.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - diff --git a/ts/components/core/icons/svg/originals/LegIconGallery.svg b/ts/components/core/icons/svg/originals/LegIconGallery.svg deleted file mode 100644 index 09469217f15..00000000000 --- a/ts/components/core/icons/svg/originals/LegIconGallery.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - diff --git a/ts/components/core/icons/svg/originals/LegIconLogin.svg b/ts/components/core/icons/svg/originals/LegIconLogin.svg deleted file mode 100644 index 1dcabeb6faa..00000000000 --- a/ts/components/core/icons/svg/originals/LegIconLogin.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/ts/components/core/icons/svg/originals/LegIconRadioOff.svg b/ts/components/core/icons/svg/originals/LegIconRadioOff.svg new file mode 100644 index 00000000000..52ab385c030 --- /dev/null +++ b/ts/components/core/icons/svg/originals/LegIconRadioOff.svg @@ -0,0 +1,8 @@ + + + diff --git a/ts/components/core/icons/svg/originals/LegIconRadioOn.svg b/ts/components/core/icons/svg/originals/LegIconRadioOn.svg new file mode 100644 index 00000000000..0260d8d14a6 --- /dev/null +++ b/ts/components/core/icons/svg/originals/LegIconRadioOn.svg @@ -0,0 +1,22 @@ + + + + + + diff --git a/ts/components/core/icons/svg/originals/LegIconTransactions.svg b/ts/components/core/icons/svg/originals/LegIconTransactions.svg deleted file mode 100644 index 0dd8f84929a..00000000000 --- a/ts/components/core/icons/svg/originals/LegIconTransactions.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - diff --git a/ts/components/core/pictograms/PictogramSection.tsx b/ts/components/core/pictograms/PictogramSection.tsx index 8aaa64958d6..7e5cdb76eb5 100644 --- a/ts/components/core/pictograms/PictogramSection.tsx +++ b/ts/components/core/pictograms/PictogramSection.tsx @@ -14,7 +14,7 @@ export const IOSectionPictograms = { messages: PictogramSectionMessages /* io-home-messaggi */, payments: PictogramSectionPayments, documents: PictogramSectionDocuments, - services: PictogramSectionServices /* io-home-servizi */, + services: PictogramSectionServices, profile: PictogramSectionProfile, settings: PictogramSectionSettings }; diff --git a/ts/components/core/selection/RadioButtonList.tsx b/ts/components/core/selection/RadioButtonList.tsx index e40bd5a0907..f750bc17e6b 100644 --- a/ts/components/core/selection/RadioButtonList.tsx +++ b/ts/components/core/selection/RadioButtonList.tsx @@ -5,8 +5,7 @@ import { H4 } from "../typography/H4"; import { IOStyles } from "../variables/IOStyles"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; import { IOColors } from "../variables/IOColors"; -import IconFont from "./../../ui/IconFont"; -import themeVariables from "./../../../theme/variables"; +import { Icon } from "../icons/Icon"; export type RadioItem = { body: ReactNode; @@ -119,18 +118,21 @@ export const RadioButtonList = (props: Props) => ( ]} testID={`pspItemTestID_${item.id}`} > - props.onPress(item.id)} style={[ styles.icon, props.rightSideSelection && styles.rightSideIcon ]} - /> + > + + {getBody(item, () => props.onPress(item.id))} ))} diff --git a/ts/components/core/selection/RemoteSwitch.tsx b/ts/components/core/selection/RemoteSwitch.tsx index 45771948997..3fdc0d356d0 100644 --- a/ts/components/core/selection/RemoteSwitch.tsx +++ b/ts/components/core/selection/RemoteSwitch.tsx @@ -4,11 +4,10 @@ import { View, ActivityIndicator } from "react-native"; import I18n from "../../../i18n"; import { TestID } from "../../../types/WithTestID"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; -import IconFont from "../../ui/IconFont"; import Switch from "../../ui/Switch"; import { calculateSlop } from "../accessibility"; -import { IOColors } from "../variables/IOColors"; import { IOStyleVariables } from "../variables/IOStyleVariables"; +import { Icon } from "../icons/Icon"; type Props = { value: pot.Pot; @@ -55,15 +54,9 @@ const NoneErrorVersion = (props: NoneErrorProps) => ( accessibilityLabel={I18n.t("global.genericRetry")} hitSlop={{ bottom: slop, left: slop, right: slop, top: slop }} onPress={props.onRetry} - style={{ width: IOStyleVariables.switchWidth }} + style={{ width: IOStyleVariables.switchWidth, alignItems: "center" }} > - + ); diff --git a/ts/components/core/selection/__test__/__snapshots__/RemoteSwitch.test.tsx.snap b/ts/components/core/selection/__test__/__snapshots__/RemoteSwitch.test.tsx.snap index ec4881593a0..56d389d3df0 100644 --- a/ts/components/core/selection/__test__/__snapshots__/RemoteSwitch.test.tsx.snap +++ b/ts/components/core/selection/__test__/__snapshots__/RemoteSwitch.test.tsx.snap @@ -39,48 +39,66 @@ exports[`RemoteSwitch tests Snapshot for pot.noneError 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { + "alignItems": "center", "opacity": 1, "width": 51, } } > - -  - + + + + `; diff --git a/ts/components/core/selection/checkbox/RawCheckBox.tsx b/ts/components/core/selection/checkbox/RawCheckBox.tsx index a4624d808b7..ceb454c1d09 100644 --- a/ts/components/core/selection/checkbox/RawCheckBox.tsx +++ b/ts/components/core/selection/checkbox/RawCheckBox.tsx @@ -1,11 +1,11 @@ import * as React from "react"; -import { StyleSheet } from "react-native"; +import { StyleSheet, View } from "react-native"; import TouchableDefaultOpacity, { TouchableDefaultOpacityProps } from "../../../TouchableDefaultOpacity"; -import IconFont from "../../../ui/IconFont"; import { calculateSlop } from "../../accessibility"; import { IOColors } from "../../variables/IOColors"; +import { Icon } from "../../icons/Icon"; type Props = { // the value of the checkbox @@ -15,20 +15,21 @@ type Props = { type OwnProps = Props & Pick; -const size = 24; +const SIZE: number = 24; +const BORDER_WIDTH: number = 2; -const offColor = IOColors.bluegrey; -const onColor = IOColors.blue; -const slop = calculateSlop(size); -const tickSize = size * 0.85; +const offColor: IOColors = "bluegrey"; +const onColor: IOColors = "blue"; +const slop = calculateSlop(SIZE); +const tickSize = SIZE; const styles = StyleSheet.create({ checkBox: { - width: size, - height: size, + width: SIZE, + height: SIZE, backgroundColor: IOColors.white, borderColor: IOColors.blue, - borderWidth: 2, + borderWidth: BORDER_WIDTH, borderRadius: 4 } }); @@ -54,10 +55,15 @@ export const RawCheckBox: React.FunctionComponent = props => { testID="RawCheckbox" onPress={props.onPress} hitSlop={{ bottom: slop, left: slop, right: slop, top: slop }} - style={[styles.checkBox, { borderColor: getBorderColor(checked) }]} + style={[ + styles.checkBox, + { borderColor: IOColors[getBorderColor(checked)] } + ]} > {checked && ( - + + + )} ); diff --git a/ts/components/infoScreen/imageRendering.tsx b/ts/components/infoScreen/imageRendering.tsx index b2046485c11..3a38ad02c58 100644 --- a/ts/components/infoScreen/imageRendering.tsx +++ b/ts/components/infoScreen/imageRendering.tsx @@ -6,8 +6,6 @@ import { StyleSheet } from "react-native"; import { heightPercentageToDP } from "react-native-responsive-screen"; -import customVariables from "../../theme/variables"; -import IconFont from "../ui/IconFont"; const infoImageSize = 102; const screenHeight = Dimensions.get("screen").height; @@ -40,14 +38,3 @@ export const renderInfoRasterImage = (image: ImageSourcePropType) => ( testID={"rasterImage"} /> ); - -export const renderInfoIconImage = ( - image: string, - iconSize: number = infoImageSize -) => ( - -); diff --git a/ts/components/messages/MessageDetail/DueDateBar.tsx b/ts/components/messages/MessageDetail/DueDateBar.tsx index 2de3f9bb2e0..beb317c123f 100644 --- a/ts/components/messages/MessageDetail/DueDateBar.tsx +++ b/ts/components/messages/MessageDetail/DueDateBar.tsx @@ -12,10 +12,9 @@ import { MessagePaymentExpirationInfo } from "../../../utils/messages"; import { IOColors } from "../../core/variables/IOColors"; -import IconFont from "../../ui/IconFont"; - import { localeDateFormat } from "../../../utils/locale"; import { HSpacer, VSpacer } from "../../core/spacer/Spacer"; +import { Icon } from "../../core/icons"; import { Body } from "../../core/typography/Body"; import { IOStyles } from "../../core/variables/IOStyles"; import CalendarIconComponent from "./common/CalendarIconComponent"; @@ -161,7 +160,7 @@ const DueDateBar: React.FunctionComponent = ({ if (isPaid) { return ( - + {I18n.t("wallet.errors.DUPLICATED")} diff --git a/ts/components/messages/MessageDetail/__tests__/__snapshots__/DueDate.test.tsx.snap b/ts/components/messages/MessageDetail/__tests__/__snapshots__/DueDate.test.tsx.snap index eb591990f4d..0c47369b3f7 100644 --- a/ts/components/messages/MessageDetail/__tests__/__snapshots__/DueDate.test.tsx.snap +++ b/ts/components/messages/MessageDetail/__tests__/__snapshots__/DueDate.test.tsx.snap @@ -8071,36 +8071,102 @@ exports[`the \`DueDateBar\` component when \`isPaid\` is true should match the } } > - -  - + + + + + + + - - $ - + + + + + - - $ - + + + + + - - $ - + + + + + { ); const { small, disabled, medium } = this.props; const iconName = this.state.isEventInDeviceCalendar - ? "io-tick-big" - : "io-plus"; + ? "legCompleted" + : "legAdd"; return ( { bordered={!disabled} style={this.props.small ? styles.oneThird : styles.button} > - + {/* This condition doesn't make sense. We should replace it using + a different component (e.g. ButtonOutline) */} + {reminderText} ); diff --git a/ts/components/messages/MessageDetail/index.tsx b/ts/components/messages/MessageDetail/index.tsx index 3abf0885179..fed7e877cc9 100644 --- a/ts/components/messages/MessageDetail/index.tsx +++ b/ts/components/messages/MessageDetail/index.tsx @@ -91,9 +91,8 @@ const renderThirdPartyAttachmentsError = (viewRef: React.RefObject) => ( <> diff --git a/ts/components/messages/MessageList/Item.tsx b/ts/components/messages/MessageList/Item.tsx index 4c7db1318f1..c83490de765 100644 --- a/ts/components/messages/MessageList/Item.tsx +++ b/ts/components/messages/MessageList/Item.tsx @@ -27,7 +27,7 @@ import { IOColors } from "../../core/variables/IOColors"; import { IOStyles } from "../../core/variables/IOStyles"; import { BadgeComponent } from "../../screens/BadgeComponent"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; -import IconFont from "../../ui/IconFont"; +import { Icon } from "../../core/icons/Icon"; const ICON_WIDTH = 24; @@ -249,7 +249,6 @@ const MessageListItem = ({ message.organizationName || UNKNOWN_SERVICE_DATA.organizationName; const serviceName = message.serviceName || UNKNOWN_SERVICE_DATA.serviceName; const messageTitle = message.title || I18n.t("messages.errorLoading.noTitle"); - const iconName = isSelected ? "io-checkbox-on" : "io-checkbox-off"; const hasQrCode = category?.tag === "EU_COVID_CERT"; const showQrCode = hasQrCode && !isSelectionModeEnabled; @@ -310,10 +309,10 @@ const MessageListItem = ({ hasQrCode && styles.qrCheckBoxContainer ]} > - ) : ( diff --git a/ts/components/messages/MessageList/__tests__/__snapshots__/Item.test.tsx.snap b/ts/components/messages/MessageList/__tests__/__snapshots__/Item.test.tsx.snap index a06e4e41dfa..b0ae8fe3281 100644 --- a/ts/components/messages/MessageList/__tests__/__snapshots__/Item.test.tsx.snap +++ b/ts/components/messages/MessageList/__tests__/__snapshots__/Item.test.tsx.snap @@ -538,38 +538,60 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and ] } > - - R - + + + + @@ -872,38 +894,102 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and ] } > - - S - + + + + + + + diff --git a/ts/components/screens/BaseHeader.tsx b/ts/components/screens/BaseHeader.tsx index 563d713e641..0924f9531ec 100644 --- a/ts/components/screens/BaseHeader.tsx +++ b/ts/components/screens/BaseHeader.tsx @@ -30,6 +30,7 @@ import { IOColors } from "../core/variables/IOColors"; import GoBackButton from "../GoBackButton"; import SearchButton, { SearchType } from "../search/SearchButton"; import AppHeader from "../ui/AppHeader"; +import { IOIcons, Icon } from "../core/icons/Icon"; type HelpButtonProps = { onShowHelp: () => void; @@ -88,7 +89,7 @@ interface OwnProps { }; showChat?: boolean; customRightIcon?: { - iconName: string; + iconName: IOIcons; onPress: () => void; accessibilityLabel?: string; }; @@ -280,7 +281,7 @@ class BaseHeaderComponent extends React.PureComponent { accessibilityLabel={customRightIcon.accessibilityLabel} > {!isStringNullyOrEmpty(customRightIcon.iconName) && ( - + )} )} @@ -323,11 +324,11 @@ class BaseHeaderComponent extends React.PureComponent { const { isSearchEnabled, appLogo, primary, dark, isPagoPATestEnabled } = this.props; - const iconColor = isPagoPATestEnabled - ? variables.colorHighlight + const iconColor: IOColors = isPagoPATestEnabled + ? "aqua" : primary || dark - ? IOColors.white - : variables.brandPrimary; + ? "white" + : "blue"; return ( !isSearchEnabled && @@ -339,7 +340,7 @@ class BaseHeaderComponent extends React.PureComponent { importantForAccessibility="no-hide-descendants" style={{ marginLeft: 8 }} > - + ) : ( diff --git a/ts/components/screens/ListItemComponent.tsx b/ts/components/screens/ListItemComponent.tsx index 2e4b739fdd8..8a37f54aafd 100644 --- a/ts/components/screens/ListItemComponent.tsx +++ b/ts/components/screens/ListItemComponent.tsx @@ -12,13 +12,12 @@ import { import Switch from "../../components/ui/Switch"; import customVariables from "../../theme/variables"; import { makeFontStyleObject } from "../core/fonts"; -import { Icon } from "../core/icons"; import { IOBadge } from "../core/IOBadge"; import { HSpacer } from "../core/spacer/Spacer"; import { Body } from "../core/typography/Body"; import { IOColors } from "../core/variables/IOColors"; +import { IOIcons, Icon } from "../core/icons"; import { IOStyles } from "../core/variables/IOStyles"; -import IconFont from "./../ui/IconFont"; import { BadgeComponent } from "./BadgeComponent"; type Props = Readonly<{ @@ -30,7 +29,7 @@ type Props = Readonly<{ isFirstItem?: boolean; isLastItem?: boolean; hasBadge?: boolean; - iconName?: string; + iconName?: IOIcons; smallIconSize?: boolean; iconOnTop?: boolean; iconSize?: number; @@ -175,11 +174,10 @@ export default class ListItemComponent extends React.Component { {this.props.iconName !== undefined && this.props.hideIcon !== true && ( - )} diff --git a/ts/components/screens/TopScreenComponent.tsx b/ts/components/screens/TopScreenComponent.tsx index be861309b9a..673fd29730b 100644 --- a/ts/components/screens/TopScreenComponent.tsx +++ b/ts/components/screens/TopScreenComponent.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { ComponentProps } from "../../types/react"; import { FAQsCategoriesType } from "../../utils/faq"; import type { IOColors } from "../core/variables/IOColors"; +import type { IOIcons } from "../core/icons"; import { AccessibilityEvents } from "./BaseHeader"; import BaseScreenComponent from "./BaseScreenComponent"; @@ -10,7 +11,7 @@ interface OwnProps { onAccessibilityNavigationHeaderFocus?: () => void; headerTitle?: string; customRightIcon?: { - iconName: string; + iconName: IOIcons; onPress: () => void; }; faqCategories?: ReadonlyArray; diff --git a/ts/components/search/SearchButton.tsx b/ts/components/search/SearchButton.tsx index d69c5ec9e73..da4a131712b 100644 --- a/ts/components/search/SearchButton.tsx +++ b/ts/components/search/SearchButton.tsx @@ -14,14 +14,15 @@ import { import { Dispatch } from "../../store/actions/types"; import ButtonDefaultOpacity from "../ButtonDefaultOpacity"; import { LabelledItem } from "../LabelledItem"; -import IconFont from "../ui/IconFont"; +import { IOColors } from "../core/variables/IOColors"; +import { Icon } from "../core/icons"; export const MIN_CHARACTER_SEARCH_TEXT = 3; export type SearchType = "Messages" | "Services"; interface OwnProps { - color?: string; + color?: IOColors; searchType?: SearchType; // if this handler is defined it will be called in place of dispatching actions about search activation (see handleSearchPress) onSearchTap?: () => void; @@ -69,7 +70,7 @@ class SearchButton extends React.Component { transparent={true} accessibilityLabel={I18n.t("global.buttons.search")} > - + )} diff --git a/ts/components/services/ContactPreferencesToggles/PreferenceToggleRow.tsx b/ts/components/services/ContactPreferencesToggles/PreferenceToggleRow.tsx index 8b4796b765e..04cf590a86d 100644 --- a/ts/components/services/ContactPreferencesToggles/PreferenceToggleRow.tsx +++ b/ts/components/services/ContactPreferencesToggles/PreferenceToggleRow.tsx @@ -3,12 +3,11 @@ import { View, StyleSheet } from "react-native"; import Switch from "../../ui/Switch"; import { H4 } from "../../core/typography/H4"; import { IOStyles } from "../../core/variables/IOStyles"; -import IconFont from "../../ui/IconFont"; -import { IOColors } from "../../core/variables/IOColors"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; import I18n from "../../../i18n"; import { WithTestID } from "../../../types/WithTestID"; import ActivityIndicator from "../../ui/ActivityIndicator"; +import { Icon } from "../../core/icons/Icon"; type Props = WithTestID<{ label: string; @@ -56,7 +55,7 @@ const PreferenceToggleRow = ({ accessibilityRole={"button"} accessibilityLabel={I18n.t("global.accessibility.reload")} > - + ); case "ready": diff --git a/ts/components/services/ContactPreferencesToggles/index.tsx b/ts/components/services/ContactPreferencesToggles/index.tsx index c6449554c70..fc6bcabb960 100644 --- a/ts/components/services/ContactPreferencesToggles/index.tsx +++ b/ts/components/services/ContactPreferencesToggles/index.tsx @@ -116,7 +116,7 @@ const ContactPreferencesToggle: React.FC = (props: Props) => { return ( <> {/* diff --git a/ts/components/services/SectionHeader.tsx b/ts/components/services/SectionHeader.tsx index e50d9ab3c26..13216f7ef2a 100644 --- a/ts/components/services/SectionHeader.tsx +++ b/ts/components/services/SectionHeader.tsx @@ -4,23 +4,20 @@ import { StyleSheet, View } from "react-native"; import { TranslationKeys } from "../../../locales/locales"; import I18n from "../../i18n"; -import IconFont from "../ui/IconFont"; import { H3 } from "../core/typography/H3"; -import { IOColors } from "../core/variables/IOColors"; +import { HSpacer } from "../core/spacer/Spacer"; +import { IOIcons, Icon } from "../core/icons"; const styles = StyleSheet.create({ header: { flexDirection: "row", paddingVertical: 8, alignItems: "center" - }, - icon: { - marginRight: 8 } }); type Props = { - iconName: string; + iconName: IOIcons; title: TranslationKeys; }; @@ -29,12 +26,8 @@ type Props = { */ const sectionHeader: React.FC = ({ iconName, title }) => ( - + +

{I18n.t(title)}

diff --git a/ts/components/services/ServiceMetadata/index.tsx b/ts/components/services/ServiceMetadata/index.tsx index 1151113ab95..7f1eb635ff7 100644 --- a/ts/components/services/ServiceMetadata/index.tsx +++ b/ts/components/services/ServiceMetadata/index.tsx @@ -56,7 +56,7 @@ const ServiceMetadataComponent: React.FC = ({ } = servicesMetadata || {}; return ( <> - + {/* links */} {web_url && } diff --git a/ts/components/services/TosAndPrivacyBox.tsx b/ts/components/services/TosAndPrivacyBox.tsx index 786fce24e8c..633de0796c5 100644 --- a/ts/components/services/TosAndPrivacyBox.tsx +++ b/ts/components/services/TosAndPrivacyBox.tsx @@ -19,10 +19,7 @@ const TosAndPrivacy: React.FC = ({ tosUrl, privacyUrl }) => { } return ( - + {tosUrl && } {privacyUrl && } diff --git a/ts/components/services/__tests__/SectionHeader.test.tsx b/ts/components/services/__tests__/SectionHeader.test.tsx index f9b17d15432..ee1e8309d17 100644 --- a/ts/components/services/__tests__/SectionHeader.test.tsx +++ b/ts/components/services/__tests__/SectionHeader.test.tsx @@ -6,7 +6,7 @@ import SectionHeader from "../SectionHeader"; describe("SectionHeader component", () => { it("should match the snapshot", () => { const component = render( - + ); expect(component.toJSON()).toMatchSnapshot(); }); diff --git a/ts/components/services/__tests__/__snapshots__/SectionHeader.test.tsx.snap b/ts/components/services/__tests__/__snapshots__/SectionHeader.test.tsx.snap index 1bfa1643986..f51873c86fb 100644 --- a/ts/components/services/__tests__/__snapshots__/SectionHeader.test.tsx.snap +++ b/ts/components/services/__tests__/__snapshots__/SectionHeader.test.tsx.snap @@ -10,43 +10,67 @@ exports[`SectionHeader component should match the snapshot 1`] = ` } } > - -  - + + + + + = (props: Props) => { {title} - + + + {!expanded && } diff --git a/ts/components/ui/DateTimePicker.tsx b/ts/components/ui/DateTimePicker.tsx index 61d7546796c..c9a43a7a934 100644 --- a/ts/components/ui/DateTimePicker.tsx +++ b/ts/components/ui/DateTimePicker.tsx @@ -5,12 +5,11 @@ import { StyleSheet, View } from "react-native"; import { H5 } from "../core/typography/H5"; import { H4 } from "../core/typography/H4"; import { IOColors } from "../core/variables/IOColors"; -import variables from "../../theme/variables"; import { formatDateAsLocal } from "../../utils/dates"; import TouchableDefaultOpacity from "../TouchableDefaultOpacity"; import I18n from "../../i18n"; import { VSpacer } from "../core/spacer/Spacer"; -import IconFont from "./IconFont"; +import { Icon } from "../core/icons"; type Props = { date: Date | undefined; @@ -26,11 +25,6 @@ const styles = StyleSheet.create({ flex: 1, flexDirection: "row", justifyContent: "space-between" - }, - icon: { - height: 24, - width: 24, - marginBottom: 5 } }); @@ -63,14 +57,10 @@ const DateTimePicker: React.FunctionComponent = (props: Props) => { ? formatDateAsLocal(props.date, true, true) : I18n.t("global.dateFormats.dateTimePicker")} - diff --git a/ts/components/ui/Markdown/index.tsx b/ts/components/ui/Markdown/index.tsx index d30910b7692..c34a77913d3 100644 --- a/ts/components/ui/Markdown/index.tsx +++ b/ts/components/ui/Markdown/index.tsx @@ -117,7 +117,7 @@ div.custom-block.io-demo-block .custom-block-body::after { position: absolute; right: 0; font-family: 'io-icon-font'; - font-size: ${customVariables.iconSize6}px; + font-size: 48px; font-weight: normal; content: "\\50"; } diff --git a/ts/components/ui/TabIconComponent.tsx b/ts/components/ui/TabIconComponent.tsx index 16edf028ed1..0c0546df7b6 100644 --- a/ts/components/ui/TabIconComponent.tsx +++ b/ts/components/ui/TabIconComponent.tsx @@ -1,13 +1,11 @@ -import { View } from "react-native"; +import { ColorValue, View } from "react-native"; import React from "react"; -import variables from "../../theme/variables"; +import { IONavIcons, AnimatedIcon } from "../core/icons"; import CustomBadge from "./CustomBadge"; -import IconFont from "./IconFont"; - type Props = { - iconName: string; - color?: string; + iconName: IONavIcons; + color?: ColorValue; badgeValue?: number; }; @@ -20,7 +18,7 @@ class TabIconComponent extends React.PureComponent { return ( // accessibilityLabel={""} in order to read the font icon, without modify the library element - + ); diff --git a/ts/components/ui/TextboxWithSuggestion.tsx b/ts/components/ui/TextboxWithSuggestion.tsx index bb21b22321e..8c4050124ce 100644 --- a/ts/components/ui/TextboxWithSuggestion.tsx +++ b/ts/components/ui/TextboxWithSuggestion.tsx @@ -10,9 +10,9 @@ import { IOStyles } from "../core/variables/IOStyles"; import { LabelledItem } from "../LabelledItem"; import ButtonDefaultOpacity from "../ButtonDefaultOpacity"; import { HSpacer, VSpacer } from "../core/spacer/Spacer"; +import { Icon } from "../core/icons"; import AppHeader from "./AppHeader"; import { LightModalContext } from "./LightModal"; -import IconFont from "./IconFont"; const styles = StyleSheet.create({ container: { @@ -66,7 +66,7 @@ const TextboxWithSuggestionModal = (props: ModalProps) => { - + diff --git a/ts/components/wallet/AddPaymentMethodButton.tsx b/ts/components/wallet/AddPaymentMethodButton.tsx deleted file mode 100644 index fbc6cb4e423..00000000000 --- a/ts/components/wallet/AddPaymentMethodButton.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Text as NBButtonText } from "native-base"; -import * as React from "react"; -import { StyleSheet } from "react-native"; -import I18n from "../../i18n"; -import customVariables from "../../theme/variables"; -import TouchableDefaultOpacity from "../TouchableDefaultOpacity"; -import IconFont from "../ui/IconFont"; -import { IOColors } from "../core/variables/IOColors"; - -const styles = StyleSheet.create({ - button: { - flexDirection: "row", - alignItems: "center", - justifyContent: "flex-end" - }, - label: { - marginLeft: customVariables.fontSizeBase / 4, - color: IOColors.white - } -}); - -interface Props { - onPress: () => void; - iconSize?: number; - labelSize?: number; -} - -export const AddPaymentMethodButton: React.SFC = ({ - onPress, - iconSize, - labelSize -}) => ( - - - - {I18n.t("wallet.newPaymentMethod.add").toUpperCase()} - - -); diff --git a/ts/components/wallet/CameraMarker.tsx b/ts/components/wallet/CameraMarker.tsx index 4ade2a845fe..12b27cc7857 100644 --- a/ts/components/wallet/CameraMarker.tsx +++ b/ts/components/wallet/CameraMarker.tsx @@ -2,10 +2,8 @@ import { Col, Grid, Row } from "native-base"; import * as React from "react"; import { StyleSheet, View } from "react-native"; -import IconFont from "../ui/IconFont"; - -import variables from "../../theme/variables"; import { IOColors } from "../core/variables/IOColors"; +import { Icon } from "../core/icons/Icon"; type MarkerState = "SCANNING" | "VALID" | "INVALID"; @@ -20,13 +18,6 @@ type Props = { * This is overlayed on the camera preview of the QR code scanner. */ export const CameraMarker: React.SFC = ({ screenWidth, state }) => { - const iconName = - state === "INVALID" - ? "io-close" - : state === "VALID" - ? "io-tick-big" - : undefined; - const sideLength = screenWidth / 2; const borderLength = screenWidth / 6; @@ -89,34 +80,19 @@ export const CameraMarker: React.SFC = ({ screenWidth, state }) => { left: 0, bottom: 0, justifyContent: "center", - alignItems: "center" - }, - - icon: { - fontSize: sideLength, - lineHeight: sideLength, + alignItems: "center", opacity: 0.7 - }, - - iconValid: { - color: variables.brandSuccess - }, - - iconInvalid: { - color: variables.brandDanger } }); return ( - {iconName && ( + {(state === "VALID" || state === "INVALID") && ( - )} diff --git a/ts/components/wallet/PayWebViewModal.tsx b/ts/components/wallet/PayWebViewModal.tsx index 5cfe58fcbf6..3dd878243a9 100644 --- a/ts/components/wallet/PayWebViewModal.tsx +++ b/ts/components/wallet/PayWebViewModal.tsx @@ -9,7 +9,6 @@ import { v4 as uuid } from "uuid"; import { InfoBox } from "../../components/box/InfoBox"; import { Label } from "../../components/core/typography/Label"; -import { IOColors } from "../../components/core/variables/IOColors"; import { useHardwareBackButton } from "../../hooks/useHardwareBackButton"; import I18n from "../../i18n"; import { WithTestID } from "../../types/WithTestID"; @@ -187,11 +186,7 @@ export const PayWebViewModal = (props: Props) => { style={styles.descriptionContainer} testID={"PayWebViewModal-description"} > - + diff --git a/ts/components/wallet/PaymentHistoryItem.tsx b/ts/components/wallet/PaymentHistoryItem.tsx index 4ca5e98ee98..96df87a3054 100644 --- a/ts/components/wallet/PaymentHistoryItem.tsx +++ b/ts/components/wallet/PaymentHistoryItem.tsx @@ -7,7 +7,7 @@ import { Body } from "../core/typography/Body"; import { IOStyles } from "../core/variables/IOStyles"; import { BadgeComponent } from "../screens/BadgeComponent"; import TouchableDefaultOpacity from "../TouchableDefaultOpacity"; -import IconFont from "../ui/IconFont"; +import { Icon } from "../core/icons"; type Props = Readonly<{ text11: string; @@ -40,8 +40,6 @@ const styles = StyleSheet.create({ } }); -const ICON_WIDTH = 24; - export default class PaymentHistoryItem extends React.PureComponent { public render() { return ( @@ -66,11 +64,7 @@ export default class PaymentHistoryItem extends React.PureComponent { - + {this.props.children} diff --git a/ts/components/wallet/PaymentMethodsList.tsx b/ts/components/wallet/PaymentMethodsList.tsx index eef8f39b4b7..15520506481 100644 --- a/ts/components/wallet/PaymentMethodsList.tsx +++ b/ts/components/wallet/PaymentMethodsList.tsx @@ -29,11 +29,10 @@ import { IOBadge, IOBadgeOutlineColors } from "../core/IOBadge"; import { HSpacer, VSpacer } from "../core/spacer/Spacer"; import { H3 } from "../core/typography/H3"; import { H5 } from "../core/typography/H5"; -import { IOColors } from "../core/variables/IOColors"; import { IOStyles } from "../core/variables/IOStyles"; import { withLightModalContext } from "../helpers/withLightModalContext"; -import IconFont from "../ui/IconFont"; import { LightModalContextInterface } from "../ui/LightModal"; +import { Icon } from "../core/icons"; type OwnProps = Readonly<{ paymentMethods: ReadonlyArray; @@ -170,7 +169,7 @@ const renderListItem = ( {itemInfo.item.description} - + ); } diff --git a/ts/components/wallet/WalletHomeHeader.tsx b/ts/components/wallet/WalletHomeHeader.tsx index b91b501fab0..d6b8df28f0a 100644 --- a/ts/components/wallet/WalletHomeHeader.tsx +++ b/ts/components/wallet/WalletHomeHeader.tsx @@ -8,7 +8,6 @@ import NavigationService from "../../navigation/NavigationService"; import { navigateToWalletAddPaymentMethod } from "../../store/actions/navigation"; import { Dispatch } from "../../store/actions/types"; import { GlobalState } from "../../store/reducers/types"; -import customVariables from "../../theme/variables"; import { useIOBottomSheetModal } from "../../utils/hooks/bottomSheet"; import ButtonDefaultOpacity from "../ButtonDefaultOpacity"; import { HSpacer } from "../core/spacer/Spacer"; @@ -20,7 +19,7 @@ import { IOColors } from "../core/variables/IOColors"; import { IOStyles } from "../core/variables/IOStyles"; import ItemSeparatorComponent from "../ItemSeparatorComponent"; import TouchableDefaultOpacity from "../TouchableDefaultOpacity"; -import IconFont from "../ui/IconFont"; +import { Icon } from "../core/icons"; type Props = ReturnType & ReturnType; @@ -91,7 +90,7 @@ const WalletHomeHeader = (props: Props) => { {item.subtitle} - + @@ -128,11 +127,7 @@ const WalletHomeHeader = (props: Props) => { accessibilityLabel={I18n.t("wallet.accessibility.addElement")} accessibilityRole="button" > - +

{I18n.t("wallet.newPaymentMethod.add").toUpperCase()} diff --git a/ts/components/wallet/__test__/PayWebViewModal.test.tsx b/ts/components/wallet/__test__/PayWebViewModal.test.tsx index 5dff215b3b6..5c1aa3b0875 100644 --- a/ts/components/wallet/__test__/PayWebViewModal.test.tsx +++ b/ts/components/wallet/__test__/PayWebViewModal.test.tsx @@ -89,7 +89,7 @@ describe("PayWebViewModal component", () => { expect( component .getByTestId("PayWebViewModal-description") - .find(node => node.props.iconName === "io-info") + .find(node => node.props.iconName === "info") ).toBeDefined(); }); }); diff --git a/ts/components/wallet/card/CardComponent.tsx b/ts/components/wallet/card/CardComponent.tsx index 45194197bd9..ed146942bbf 100644 --- a/ts/components/wallet/card/CardComponent.tsx +++ b/ts/components/wallet/card/CardComponent.tsx @@ -25,12 +25,13 @@ import { isPaymentMethodExpired } from "../../../utils/paymentMethod"; import { buildExpirationDate } from "../../../utils/stringBuilder"; import { FOUR_UNICODE_CIRCLES } from "../../../utils/wallet"; import ButtonDefaultOpacity from "../../ButtonDefaultOpacity"; -import { VSpacer } from "../../core/spacer/Spacer"; +import { HSpacer, VSpacer } from "../../core/spacer/Spacer"; import { Body } from "../../core/typography/Body"; import { H5 } from "../../core/typography/H5"; import { Label } from "../../core/typography/Label"; import { IOColors } from "../../core/variables/IOColors"; -import IconFont from "../../ui/IconFont"; +import { Icon } from "../../core/icons/Icon"; +import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; import Logo, { cardIcons } from "./Logo"; interface BaseProps { @@ -132,9 +133,6 @@ const styles = StyleSheet.create({ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }, - paddedIcon: { - paddingLeft: 10 - }, paddedTop: { paddingTop: 10 } @@ -209,29 +207,23 @@ export default class CardComponent extends React.Component { return ( {!hideFavoriteIcon && isFavorite !== undefined && ( - + + + )} {!hideMenu && ( - + + @@ -358,6 +350,8 @@ export default class CardComponent extends React.Component { const footerTextStyle = isFullCard ? styles.transactionsText : styles.pickPaymentText; + + const footerIconColor: IOColors = isFullCard ? "blue" : "white"; const text = I18n.t( isFullCard ? "cardComponent.detailsAndTransactions" : "cardComponent.pick" ); @@ -370,11 +364,7 @@ export default class CardComponent extends React.Component { onPress={this.handleOnCardPress} > {text} - + ); } diff --git a/ts/components/wallet/card/SectionCardComponent.tsx b/ts/components/wallet/card/SectionCardComponent.tsx index 6af243714f3..cdd8c819335 100644 --- a/ts/components/wallet/card/SectionCardComponent.tsx +++ b/ts/components/wallet/card/SectionCardComponent.tsx @@ -6,9 +6,7 @@ import { StyleSheet, ViewStyle } from "react-native"; -import IconFont from "../../../components/ui/IconFont"; import I18n from "../../../i18n"; -import customVariables from "../../../theme/variables"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; import { hexToRgba, IOColors } from "../../core/variables/IOColors"; import { IOBadge } from "../../core/IOBadge"; @@ -89,11 +87,7 @@ const SectionCardComponent: React.FunctionComponent = (props: Props) => { case "add": return ( <> - + - + ); case "show": @@ -127,12 +121,7 @@ const SectionCardComponent: React.FunctionComponent = (props: Props) => { {I18n.t("wallet.newPaymentMethod.show").toUpperCase()} - + ); } diff --git a/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx b/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx index b355fa4b505..4014c73f362 100644 --- a/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx +++ b/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx @@ -12,12 +12,12 @@ import { } from "../../../store/reducers/wallet/creditCard"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; import { BadgeComponent } from "../../screens/BadgeComponent"; -import IconFont from "../../ui/IconFont"; import customVariables from "../../../theme/variables"; import { Label } from "../../core/typography/Label"; import { IOStyles } from "../../core/variables/IOStyles"; import { IOColors } from "../../core/variables/IOColors"; import { VSpacer } from "../../core/spacer/Spacer"; +import { Icon } from "../../core/icons/Icon"; import { Body } from "../../core/typography/Body"; type Props = Readonly<{ @@ -122,10 +122,10 @@ export const CreditCardAttemptsList: React.FC = (props: Props) => { - diff --git a/ts/components/wallet/payment/PickAvailablePaymentMethodListItem.tsx b/ts/components/wallet/payment/PickAvailablePaymentMethodListItem.tsx index 04e8619d5b1..80d0eb453c5 100644 --- a/ts/components/wallet/payment/PickAvailablePaymentMethodListItem.tsx +++ b/ts/components/wallet/payment/PickAvailablePaymentMethodListItem.tsx @@ -12,9 +12,8 @@ import { GlobalState } from "../../../store/reducers/types"; import { getFavoriteWalletId } from "../../../store/reducers/wallet/wallets"; import { PaymentMethod } from "../../../types/pagopa"; import { getPickPaymentMethodDescription } from "../../../utils/payment"; -import { IOColors } from "../../core/variables/IOColors"; -import IconFont from "../../ui/IconFont"; import { getCardIconFromBrandLogo } from "../card/Logo"; +import { Icon } from "../../core/icons/Icon"; import PickPaymentMethodBaseListItem from "./PickPaymentMethodBaseListItem"; type Props = { @@ -93,7 +92,7 @@ const PickAvailablePaymentMethodListItem: React.FC = (props: Props) => { description={description} rightElement={ props.rightElement ?? ( - + ) } onPress={props.onPress} diff --git a/ts/components/wallet/payment/PickNotAvailablePaymentMethodListItem.tsx b/ts/components/wallet/payment/PickNotAvailablePaymentMethodListItem.tsx index d506a2cd3df..6813fcbbf45 100644 --- a/ts/components/wallet/payment/PickNotAvailablePaymentMethodListItem.tsx +++ b/ts/components/wallet/payment/PickNotAvailablePaymentMethodListItem.tsx @@ -15,9 +15,8 @@ import { getPickPaymentMethodDescription } from "../../../utils/payment"; import { getPaypalAccountEmail } from "../../../utils/paypal"; import { VSpacer } from "../../core/spacer/Spacer"; import { H4 } from "../../core/typography/H4"; -import { IOColors } from "../../core/variables/IOColors"; -import IconFont from "../../ui/IconFont"; import { getCardIconFromBrandLogo } from "../card/Logo"; +import { Icon } from "../../core/icons/Icon"; import PickPaymentMethodBaseListItem from "./PickPaymentMethodBaseListItem"; type Props = { @@ -185,9 +184,7 @@ const PickNotAvailablePaymentMethodListItem: React.FC = ( logo={logo} title={title} description={description} - rightElement={ - - } + rightElement={} onPress={present} /> diff --git a/ts/components/wallet/payment/PickPaymentMethodBaseListItem.tsx b/ts/components/wallet/payment/PickPaymentMethodBaseListItem.tsx index cf25a1c8a04..e8ab58b2139 100644 --- a/ts/components/wallet/payment/PickPaymentMethodBaseListItem.tsx +++ b/ts/components/wallet/payment/PickPaymentMethodBaseListItem.tsx @@ -3,11 +3,10 @@ import { ListItem } from "native-base"; import { View, Image, ImageSourcePropType, StyleSheet } from "react-native"; import { H4 } from "../../core/typography/H4"; import { H5 } from "../../core/typography/H5"; -import { IOColors } from "../../core/variables/IOColors"; -import IconFont from "../../ui/IconFont"; import { IOStyles } from "../../core/variables/IOStyles"; import { WithTestID } from "../../../types/WithTestID"; import { VSpacer } from "../../core/spacer/Spacer"; +import { Icon } from "../../core/icons/Icon"; type Props = WithTestID<{ isFirst: boolean; @@ -50,7 +49,12 @@ const PickPaymentMethodBaseListItem: React.FC = ({ onPress, testID }) => ( - + @@ -65,9 +69,7 @@ const PickPaymentMethodBaseListItem: React.FC = ({ - {isFavourite && ( - - )} + {isFavourite && } {rightElement} diff --git a/ts/components/wallet/payment/PspComponent.tsx b/ts/components/wallet/payment/PspComponent.tsx index 088eeed24ae..fe237f2de7e 100644 --- a/ts/components/wallet/payment/PspComponent.tsx +++ b/ts/components/wallet/payment/PspComponent.tsx @@ -10,7 +10,7 @@ import { formatNumberCentsToAmount } from "../../../utils/stringBuilder"; import { Body } from "../../core/typography/Body"; import { H4 } from "../../core/typography/H4"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; -import IconFont from "../../ui/IconFont"; +import { Icon } from "../../core/icons"; const ICON_SIZE = 24; const IMAGE_WIDTH = 100; @@ -73,11 +73,7 @@ export const PspComponent: FC = ({ psp, onPress }) => { )}

{cost}

- + diff --git a/ts/features/bonus/bonusVacanze/components/ActiveBonus.tsx b/ts/features/bonus/bonusVacanze/components/ActiveBonus.tsx index 27bb1968fb2..32cb0d81240 100644 --- a/ts/features/bonus/bonusVacanze/components/ActiveBonus.tsx +++ b/ts/features/bonus/bonusVacanze/components/ActiveBonus.tsx @@ -8,11 +8,11 @@ import { H3 } from "../../../../components/core/typography/H3"; import { Label } from "../../../../components/core/typography/Label"; import { IOColors } from "../../../../components/core/variables/IOColors"; import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity"; -import IconFont from "../../../../components/ui/IconFont"; import I18n from "../../../../i18n"; import customVariables from "../../../../theme/variables"; import { formatNumberAmount } from "../../../../utils/stringBuilder"; import { validityInterval } from "../utils/bonus"; +import { Icon } from "../../../../components/core/icons/Icon"; type Props = { bonus: BonusActivationWithQrCode; @@ -107,7 +107,7 @@ const ActiveBonus: React.FunctionComponent = (props: Props) => {

- + diff --git a/ts/features/bonus/bonusVacanze/components/BonusCardComponent.tsx b/ts/features/bonus/bonusVacanze/components/BonusCardComponent.tsx index c8d90d981a4..c45f08a1acb 100644 --- a/ts/features/bonus/bonusVacanze/components/BonusCardComponent.tsx +++ b/ts/features/bonus/bonusVacanze/components/BonusCardComponent.tsx @@ -22,7 +22,6 @@ import { } from "../../../../components/core/variables/IOColors"; import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent"; import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity"; -import IconFont from "../../../../components/ui/IconFont"; import { HSpacer, VSpacer } from "../../../../components/core/spacer/Spacer"; import I18n from "../../../../i18n"; import { makeFontStyleObject } from "../../../../components/core/fonts"; @@ -38,6 +37,7 @@ import { H2 } from "../../../../components/core/typography/H2"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import { Body } from "../../../../components/core/typography/Body"; import { H3 } from "../../../../components/core/typography/H3"; +import { Icon } from "../../../../components/core/icons/Icon"; import { IOBadge } from "../../../../components/core/IOBadge"; type Props = { @@ -202,7 +202,7 @@ const BonusCardComponent: React.FunctionComponent = (props: Props) => { > - + diff --git a/ts/features/bonus/bonusVacanze/screens/ActiveBonusScreen.tsx b/ts/features/bonus/bonusVacanze/screens/ActiveBonusScreen.tsx index 4be6321f63d..ea787627323 100644 --- a/ts/features/bonus/bonusVacanze/screens/ActiveBonusScreen.tsx +++ b/ts/features/bonus/bonusVacanze/screens/ActiveBonusScreen.tsx @@ -31,7 +31,6 @@ import DarkLayout from "../../../../components/screens/DarkLayout"; import { EdgeBorderComponent } from "../../../../components/screens/EdgeBorderComponent"; import GenericErrorComponent from "../../../../components/screens/GenericErrorComponent"; import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity"; -import IconFont from "../../../../components/ui/IconFont"; import { LightModalContextInterface } from "../../../../components/ui/LightModal"; import I18n from "../../../../i18n"; import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList"; @@ -75,6 +74,7 @@ import { validityInterval } from "../utils/bonus"; import { HSpacer, VSpacer } from "../../../../components/core/spacer/Spacer"; +import { IOIcons, Icon } from "../../../../components/core/icons"; import { H3 } from "../../../../components/core/typography/H3"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import { Body } from "../../../../components/core/typography/Body"; @@ -129,9 +129,6 @@ const styles = StyleSheet.create({ justifyContent: "center", maxWidth: 327 }, - icon: { - paddingLeft: 12 - }, paddedContentLeft: { paddingLeft: variables.contentPadding }, @@ -143,7 +140,6 @@ const styles = StyleSheet.create({ backgroundColor: IOColors.white }, footerButton: { flex: 1, alignItems: "center" }, - footerButtonIcon: { color: IOColors.blue, marginBottom: 6, fontSize: 24 }, hover: { minWidth: "100%", minHeight: "100%", @@ -216,7 +212,7 @@ const screenShortInitialState: ScreenShotState = { type FooterButtonProp = { label: string; - iconName: string; + iconName: IOIcons; onPress: () => void; }; @@ -231,7 +227,8 @@ const FooterButton: React.FunctionComponent = ( props: FooterButtonProp ) => ( - + + ); @@ -401,7 +398,7 @@ const ActiveBonusScreen: React.FunctionComponent = (props: Props) => { = (props: Props) => { isShareEnabled() ? { label: I18n.t("global.genericShare").toLowerCase(), - iconName: "io-share", + iconName: "legShare", onPress: handleShare } : undefined } thirdButton={{ label: I18n.t("global.genericSave").toLowerCase(), - iconName: "io-save", + iconName: "legSave", onPress: saveScreenShot }} /> @@ -428,9 +425,9 @@ const ActiveBonusScreen: React.FunctionComponent = (props: Props) => { bonus && isBonusActive(bonus) && renderBonusActiveButtons(); const renderInformationBlock = ( - icon: string, + icon: IOIcons, text: string, - iconColor?: string + iconColor?: IOColors ) => { const now = new Date(); return ( @@ -454,16 +451,7 @@ const ActiveBonusScreen: React.FunctionComponent = (props: Props) => { IOStyles.centerJustified ]} > - variables.textColor) - )} - size={variables.iconSize3} - style={styles.icon} - /> + @@ -481,7 +469,7 @@ const ActiveBonusScreen: React.FunctionComponent = (props: Props) => { switch (bonus.status) { case BonusActivationStatusEnum.ACTIVE: return renderInformationBlock( - "io-calendario", + "legCalendar", I18n.t("bonus.bonusVacanze.statusInfo.validBetween", { from: pipe( bonusValidityInterval, @@ -501,7 +489,7 @@ const ActiveBonusScreen: React.FunctionComponent = (props: Props) => { ); case BonusActivationStatusEnum.REDEEMED: return renderInformationBlock( - "io-complete", + "ok", I18n.t("bonus.bonusVacanze.statusInfo.redeemed", { date: formatDateAsLocal( pipe( @@ -512,11 +500,11 @@ const ActiveBonusScreen: React.FunctionComponent = (props: Props) => { true ) }), - variables.brandSuccess + "green" ); case BonusActivationStatusEnum.FAILED: return renderInformationBlock( - "io-notice", + "notice", I18n.t("bonus.bonusVacanze.statusInfo.bonusRejected") ); default: diff --git a/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusDiscrepancies.tsx b/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusDiscrepancies.tsx index 5efbe564f9e..5f25de4840c 100644 --- a/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusDiscrepancies.tsx +++ b/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusDiscrepancies.tsx @@ -3,8 +3,8 @@ import { View, StyleSheet } from "react-native"; import { HSpacer } from "../../../../../../components/core/spacer/Spacer"; import { Body } from "../../../../../../components/core/typography/Body"; import { IOStyles } from "../../../../../../components/core/variables/IOStyles"; -import IconFont from "../../../../../../components/ui/IconFont"; import themeVariables from "../../../../../../theme/variables"; +import { Icon } from "../../../../../../components/core/icons/Icon"; type Props = { text: string; @@ -37,7 +37,7 @@ export const ActivateBonusDiscrepancies: React.FunctionComponent = IOStyles.horizontalContentPadding ]} > - + diff --git a/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusReminder.tsx b/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusReminder.tsx index 367ae7928bb..4bd20a1256c 100644 --- a/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusReminder.tsx +++ b/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusReminder.tsx @@ -1,10 +1,9 @@ import * as React from "react"; import { View } from "react-native"; -import IconFont from "../../../../../../components/ui/IconFont"; -import { IOColors } from "../../../../../../components/core/variables/IOColors"; import { HSpacer } from "../../../../../../components/core/spacer/Spacer"; import { IOStyles } from "../../../../../../components/core/variables/IOStyles"; import { Body } from "../../../../../../components/core/typography/Body"; +import { Icon } from "../../../../../../components/core/icons/Icon"; type Props = { text: string; @@ -17,7 +16,7 @@ type Props = { */ export const ActivateBonusReminder: React.FunctionComponent = props => ( - + {props.text} diff --git a/ts/features/bonus/bpd/components/BaseDailyTransactionHeader.tsx b/ts/features/bonus/bpd/components/BaseDailyTransactionHeader.tsx index 3923271456f..19396323b22 100644 --- a/ts/features/bonus/bpd/components/BaseDailyTransactionHeader.tsx +++ b/ts/features/bonus/bpd/components/BaseDailyTransactionHeader.tsx @@ -3,9 +3,9 @@ import { View, StyleSheet } from "react-native"; import I18n from "../../../../i18n"; import { H3 } from "../../../../components/core/typography/H3"; import { H5 } from "../../../../components/core/typography/H5"; -import IconFont from "../../../../components/ui/IconFont"; import { IOColors } from "../../../../components/core/variables/IOColors"; import { formatIntegerNumber } from "../../../../utils/stringBuilder"; +import { Icon } from "../../../../components/core/icons"; type Props = { date: string; @@ -37,11 +37,7 @@ const BaseDailyTransactionHeader: React.FunctionComponent = ( - +
{` ${I18n.t( "bonus.bpd.details.components.transactionsCountOverview.label", diff --git a/ts/features/bonus/bpd/components/BpdTransactionSummaryComponent.tsx b/ts/features/bonus/bpd/components/BpdTransactionSummaryComponent.tsx index 1c2647e3119..ec171b8eb4d 100644 --- a/ts/features/bonus/bpd/components/BpdTransactionSummaryComponent.tsx +++ b/ts/features/bonus/bpd/components/BpdTransactionSummaryComponent.tsx @@ -77,7 +77,7 @@ const BpdTransactionSummaryComponent: React.FunctionComponent = ( const { present, bottomSheet } = useIOBottomSheetModal( <> - +

{I18n.t( "bonus.bpd.details.transaction.detail.summary.calendarBlock.text1" @@ -104,7 +104,7 @@ const BpdTransactionSummaryComponent: React.FunctionComponent = ( return ( <> - +

{I18n.t("bonus.bpd.details.transaction.detail.summary.lastUpdated")}

{props.lastUpdateDate}

diff --git a/ts/features/bonus/bpd/components/bpdCardComponent/BpdCardComponent.tsx b/ts/features/bonus/bpd/components/bpdCardComponent/BpdCardComponent.tsx index fee463fe1ba..6a0abf41786 100644 --- a/ts/features/bonus/bpd/components/bpdCardComponent/BpdCardComponent.tsx +++ b/ts/features/bonus/bpd/components/bpdCardComponent/BpdCardComponent.tsx @@ -22,12 +22,12 @@ import { IOColors } from "../../../../../components/core/variables/IOColors"; import TouchableDefaultOpacity from "../../../../../components/TouchableDefaultOpacity"; -import IconFont from "../../../../../components/ui/IconFont"; import I18n from "../../../../../i18n"; import { localeDateFormat } from "../../../../../utils/locale"; import { formatNumberAmount } from "../../../../../utils/stringBuilder"; import { BpdAmount } from "../../saga/networking/amount"; import { BpdPeriod, BpdPeriodStatus } from "../../store/actions/periods"; +import { Icon } from "../../../../../components/core/icons"; import { makeFontStyleObject } from "../../../../../components/core/fonts"; import { IOBadge } from "../../../../../components/core/IOBadge"; @@ -151,7 +151,7 @@ type BadgeDefinition = { label: string; }; -type IconType = "io-locker-closed" | "io-locker-open" | "io-fireworks"; +type IconType = "legLocked" | "legUnlocked" | "ok"; type GraphicalState = { amount: ReadonlyArray; @@ -163,7 +163,7 @@ type GraphicalState = { const initialGraphicalState: GraphicalState = { amount: ["0", "00"], isInGracePeriod: false, - iconName: "io-locker-closed", + iconName: "legLocked", statusBadge: { label: "-" } @@ -172,7 +172,7 @@ const initialGraphicalState: GraphicalState = { /** * Closed lock must be shown if period is Inactive or the transactionNumber didn't reach the minimum target * Open lock must be shown if period is Closed or Active and the transactionNumber reach the minimum target - * Fireworks must be shown if period is Closed or Active and the totalCashback reach the maxAmount + * "Ok" (was Fireworks) must be shown if period is Closed or Active and the totalCashback reach the maxAmount * * @param period * @param totalAmount @@ -185,12 +185,12 @@ const iconHandler = (period: BpdPeriod, totalAmount: BpdAmount): IconType => { case "Active": case "Closed": return reachMinTransaction && reachMaxAmount - ? "io-fireworks" + ? "ok" : reachMinTransaction - ? "io-locker-open" - : "io-locker-closed"; + ? "legUnlocked" + : "legLocked"; default: - return "io-locker-closed"; + return "legLocked"; } }; @@ -320,7 +320,7 @@ export const BpdCardComponent: React.FunctionComponent = ( {amount[1]} - +
{I18n.t("bonus.bpd.earned")} @@ -374,7 +374,7 @@ export const BpdCardComponent: React.FunctionComponent = (
{isPeriodClosed && ( - + )} @@ -388,7 +388,7 @@ export const BpdCardComponent: React.FunctionComponent = ( styles.justifyContentCenter ]} > - + {isInGracePeriod || isPeriodInactive ? ( = props => { case "ready": case "update": return props.graphicalValue.value === "notActivable" ? ( - + + + ) : ( ( /> - + {I18n.t("bonus.bpd.details.paymentMethods.error")} diff --git a/ts/features/bonus/bpd/screens/details/components/summary/ranking/SuperCashbackRankingSummary.tsx b/ts/features/bonus/bpd/screens/details/components/summary/ranking/SuperCashbackRankingSummary.tsx index d6f69cfec07..a7b022a6e66 100644 --- a/ts/features/bonus/bpd/screens/details/components/summary/ranking/SuperCashbackRankingSummary.tsx +++ b/ts/features/bonus/bpd/screens/details/components/summary/ranking/SuperCashbackRankingSummary.tsx @@ -1,13 +1,11 @@ import * as React from "react"; -import { StyleSheet, TouchableOpacity } from "react-native"; +import { StyleSheet, TouchableOpacity, View } from "react-native"; import { connect } from "react-redux"; import { Dispatch } from "redux"; import { VSpacer } from "../../../../../../../../components/core/spacer/Spacer"; import { H2 } from "../../../../../../../../components/core/typography/H2"; import { H5 } from "../../../../../../../../components/core/typography/H5"; -import { IOColors } from "../../../../../../../../components/core/variables/IOColors"; import { IOStyles } from "../../../../../../../../components/core/variables/IOStyles"; -import IconFont from "../../../../../../../../components/ui/IconFont"; import I18n from "../../../../../../../../i18n"; import { bpdRankingEnabledSelector } from "../../../../../../../../store/reducers/backendStatus"; import { GlobalState } from "../../../../../../../../store/reducers/types"; @@ -20,6 +18,7 @@ import { isBpdRankingReady } from "../../../../../store/reducers/details/periods"; import { BpdBaseShadowBoxLayout } from "../base/BpdBaseShadowBoxLayout"; +import { Icon } from "../../../../../../../../components/core/icons"; import { useRankingNotReadyBottomSheet } from "./RankingNotReadyBottomSheet"; const loadLocales = () => ({ @@ -31,8 +30,7 @@ const loadLocales = () => ({ const styles = StyleSheet.create({ title: { textAlign: "center" - }, - center: { alignSelf: "center" } + } }); type OwnProps = { @@ -102,12 +100,9 @@ const SuperCashbackRankingNotReady = (): React.ReactElement => { row2={ <> - + + + } diff --git a/ts/features/bonus/bpd/screens/details/components/summary/textualSummary/ActiveTextualSummary.tsx b/ts/features/bonus/bpd/screens/details/components/summary/textualSummary/ActiveTextualSummary.tsx index 449b2669ccd..bb4fe994d07 100644 --- a/ts/features/bonus/bpd/screens/details/components/summary/textualSummary/ActiveTextualSummary.tsx +++ b/ts/features/bonus/bpd/screens/details/components/summary/textualSummary/ActiveTextualSummary.tsx @@ -14,7 +14,7 @@ type Props = React.ComponentProps; * Display a warning for the current period if transactions < minTransaction and status === "Active" */ const Warning = (props: { period: BpdPeriod }) => ( - + {I18n.t( "bonus.bpd.details.components.transactionsCountOverview.currentPeriodKOBody.one" @@ -38,7 +38,7 @@ const Warning = (props: { period: BpdPeriod }) => ( * Display a message informing the user that the cashback is unlocked for the current period */ const Unlock = (props: Props) => ( - + {I18n.t( "bonus.bpd.details.components.transactionsCountOverview.currentPeriodUnlockBody", @@ -55,7 +55,7 @@ const Unlock = (props: Props) => ( * Display a message informing the user that he reached the max cashback amount for the current period */ const MaxAmount = (props: { name: string | undefined }) => ( - + {I18n.t( "bonus.bpd.details.components.transactionsCountOverview.currentPeriodMaxAmount", @@ -71,7 +71,7 @@ const MaxAmount = (props: { name: string | undefined }) => ( * Display a message informing the user that at the moment he may be eligible for supercashback */ const SuperCashback = (props: { superCashbackAmount: number }) => ( - + {I18n.t( "bonus.bpd.details.components.transactionsCountOverview.currentPeriodSuperCashback", diff --git a/ts/features/bonus/bpd/screens/details/components/summary/textualSummary/ClosedTextualSummary.tsx b/ts/features/bonus/bpd/screens/details/components/summary/textualSummary/ClosedTextualSummary.tsx index f6442081845..cd071a1f84b 100644 --- a/ts/features/bonus/bpd/screens/details/components/summary/textualSummary/ClosedTextualSummary.tsx +++ b/ts/features/bonus/bpd/screens/details/components/summary/textualSummary/ClosedTextualSummary.tsx @@ -22,7 +22,7 @@ type Props = React.ComponentProps; * @constructor */ const GracePeriod = (props: { period: BpdPeriod }) => ( - + {I18n.t( "bonus.bpd.details.components.transactionsCountOverview.gracePeriodBody", @@ -43,7 +43,7 @@ const GracePeriod = (props: { period: BpdPeriod }) => ( * @constructor */ const KO = (props: Props) => ( - + {I18n.t( "bonus.bpd.details.components.transactionsCountOverview.closedPeriodKOBody", @@ -109,7 +109,7 @@ const enhanceOkText = (props: Props): O.Option => { * @constructor */ const OK = (props: Props) => ( - + {I18n.t( "bonus.bpd.details.components.transactionsCountOverview.closedPeriodOKBody", diff --git a/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeComponent.tsx b/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeComponent.tsx index 2f0d6918373..197e4110cda 100644 --- a/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeComponent.tsx +++ b/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeComponent.tsx @@ -2,10 +2,9 @@ import { View } from "react-native"; import * as React from "react"; import { VSpacer } from "../../../../../../../components/core/spacer/Spacer"; import { H3 } from "../../../../../../../components/core/typography/H3"; -import { IOColors } from "../../../../../../../components/core/variables/IOColors"; -import IconFont from "../../../../../../../components/ui/IconFont"; import Markdown from "../../../../../../../components/ui/Markdown"; import I18n from "../../../../../../../i18n"; +import { Icon } from "../../../../../../../components/core/icons"; const iconSize = 64; @@ -16,7 +15,7 @@ const iconSize = 64; export const UnsubscribeComponent = (): React.ReactElement => ( - +

{I18n.t("bonus.bpd.unsubscribe.body1")}

diff --git a/ts/features/bonus/bpd/screens/details/transaction/BpdAvailableTransactionsScreen.tsx b/ts/features/bonus/bpd/screens/details/transaction/BpdAvailableTransactionsScreen.tsx index 1f059b9e711..054ae5aca1d 100644 --- a/ts/features/bonus/bpd/screens/details/transaction/BpdAvailableTransactionsScreen.tsx +++ b/ts/features/bonus/bpd/screens/details/transaction/BpdAvailableTransactionsScreen.tsx @@ -206,7 +206,7 @@ const renderSectionHeader = (info: { export const NoPaymentMethodAreActiveWarning = () => ( - +

{I18n.t("bonus.bpd.details.transaction.noPaymentMethod.text1")}

diff --git a/ts/features/bonus/bpd/screens/details/transaction/BpdEmptyTransactionsList.tsx b/ts/features/bonus/bpd/screens/details/transaction/BpdEmptyTransactionsList.tsx index 40e6c95ceaa..a45a3f19301 100644 --- a/ts/features/bonus/bpd/screens/details/transaction/BpdEmptyTransactionsList.tsx +++ b/ts/features/bonus/bpd/screens/details/transaction/BpdEmptyTransactionsList.tsx @@ -9,14 +9,14 @@ import { BottomSheetBpdTransactionsBody } from "../../../components/BpdTransacti const BpdEmptyTransactionsList: React.FunctionComponent = () => ( <> - +

{I18n.t("bonus.bpd.details.transaction.detail.empty.text1")}

{I18n.t("bonus.bpd.details.transaction.detail.empty.text2")} - +

{I18n.t( "bonus.bpd.details.transaction.detail.summary.calendarBlock.text1" diff --git a/ts/features/bonus/bpd/screens/details/transaction/GoToTransactions.tsx b/ts/features/bonus/bpd/screens/details/transaction/GoToTransactions.tsx index 3603a03ddef..73d553cc156 100644 --- a/ts/features/bonus/bpd/screens/details/transaction/GoToTransactions.tsx +++ b/ts/features/bonus/bpd/screens/details/transaction/GoToTransactions.tsx @@ -3,8 +3,9 @@ import { getBottomSpace, isIphoneX } from "react-native-iphone-x-helper"; import DeviceInfo from "react-native-device-info"; import ButtonDefaultOpacity from "../../../../../../components/ButtonDefaultOpacity"; import { Label } from "../../../../../../components/core/typography/Label"; -import IconFont from "../../../../../../components/ui/IconFont"; import I18n from "../../../../../../i18n"; +import { Icon } from "../../../../../../components/core/icons"; +import { HSpacer } from "../../../../../../components/core/spacer/Spacer"; type Props = { goToTransactions: () => void }; @@ -29,7 +30,8 @@ const GoToTransactions: React.FunctionComponent = props => ( : 0 }} > - + + diff --git a/ts/features/bonus/bpd/screens/onboarding/ErrorPaymentMethodsScreen.tsx b/ts/features/bonus/bpd/screens/onboarding/ErrorPaymentMethodsScreen.tsx index b652fec5130..02b7c0e0de8 100644 --- a/ts/features/bonus/bpd/screens/onboarding/ErrorPaymentMethodsScreen.tsx +++ b/ts/features/bonus/bpd/screens/onboarding/ErrorPaymentMethodsScreen.tsx @@ -5,16 +5,15 @@ import { Dispatch } from "redux"; import { VSpacer } from "../../../../../components/core/spacer/Spacer"; import { Body } from "../../../../../components/core/typography/Body"; import { H2 } from "../../../../../components/core/typography/H2"; -import { IOColors } from "../../../../../components/core/variables/IOColors"; import { IOStyles } from "../../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent"; import FooterWithButtons from "../../../../../components/ui/FooterWithButtons"; -import IconFont from "../../../../../components/ui/IconFont"; import I18n from "../../../../../i18n"; import { navigateToWalletHome } from "../../../../../store/actions/navigation"; import { GlobalState } from "../../../../../store/reducers/types"; import { emptyContextualHelp } from "../../../../../utils/emptyContextualHelp"; import { confirmButtonProps } from "../../../bonusVacanze/components/buttons/ButtonConfigurations"; +import { Icon } from "../../../../../components/core/icons/Icon"; export type Props = ReturnType & ReturnType; @@ -46,12 +45,7 @@ const ErrorPaymentMethodsScreen: React.FunctionComponent = props => { - +

{title}

diff --git a/ts/features/bonus/bpd/screens/optInPaymentMethods/OptInPaymentMethodsCashbackUpdateScreen.tsx b/ts/features/bonus/bpd/screens/optInPaymentMethods/OptInPaymentMethodsCashbackUpdateScreen.tsx index 4f3a7388243..4f2d853b059 100644 --- a/ts/features/bonus/bpd/screens/optInPaymentMethods/OptInPaymentMethodsCashbackUpdateScreen.tsx +++ b/ts/features/bonus/bpd/screens/optInPaymentMethods/OptInPaymentMethodsCashbackUpdateScreen.tsx @@ -47,17 +47,13 @@ const OptInPaymentMethodsCashbackUpdateScreen = () => { }; return ( - // The void customRightIcon and customGoBack are needed to have a centered header title + // The void customGoBack is needed to have a centered header title true - }} customGoBack={ true} transparent={true} /> } diff --git a/ts/features/bonus/bpd/screens/optInPaymentMethods/OptInPaymentMethodsChoiceScreen.tsx b/ts/features/bonus/bpd/screens/optInPaymentMethods/OptInPaymentMethodsChoiceScreen.tsx index fdd7e45a9be..dd0d09f5842 100644 --- a/ts/features/bonus/bpd/screens/optInPaymentMethods/OptInPaymentMethodsChoiceScreen.tsx +++ b/ts/features/bonus/bpd/screens/optInPaymentMethods/OptInPaymentMethodsChoiceScreen.tsx @@ -166,15 +166,11 @@ const OptInPaymentMethodsChoiceScreen = () => { (isReady(showOptInChoice) && !showOptInChoice.value) } > - {/* The void customRightIcon and customGoBack are needed to have a centered header title */} + {/* The void customGoBack are needed to have a centered header title */} true - }} customGoBack={ true} transparent={true} /> } diff --git a/ts/features/bonus/cdc/components/CdcServiceCTA.tsx b/ts/features/bonus/cdc/components/CdcServiceCTA.tsx index 5d99c482a3e..6de01f8ac29 100644 --- a/ts/features/bonus/cdc/components/CdcServiceCTA.tsx +++ b/ts/features/bonus/cdc/components/CdcServiceCTA.tsx @@ -8,7 +8,6 @@ import { BonusVisibilityEnum } from "../../../../../definitions/content/BonusVis import ButtonDefaultOpacity from "../../../../components/ButtonDefaultOpacity"; import { VSpacer } from "../../../../components/core/spacer/Spacer"; import { Label } from "../../../../components/core/typography/Label"; -import { IOColors } from "../../../../components/core/variables/IOColors"; import SectionStatusComponent from "../../../../components/SectionStatus"; import StatusContent from "../../../../components/SectionStatus/StatusContent"; import ActivityIndicator from "../../../../components/ui/ActivityIndicator"; @@ -90,10 +89,9 @@ const ErrorButton = (props: ErrorButtonProp) => { "bonus.cdc.serviceCta.error.status" )} ${I18n.t("global.accessibility.alert")}`} backgroundColor={"orange"} - iconColor={IOColors.white} - iconName={"io-warning"} + foregroundColor={"white"} + iconName={"legWarning"} viewRef={viewRef} - labelColor={"white"} > {I18n.t("bonus.cdc.serviceCta.error.status")} diff --git a/ts/features/bonus/cgn/components/detail/eyca/EycaErrorComponent.tsx b/ts/features/bonus/cgn/components/detail/eyca/EycaErrorComponent.tsx index b11da26189d..de260b70a33 100644 --- a/ts/features/bonus/cgn/components/detail/eyca/EycaErrorComponent.tsx +++ b/ts/features/bonus/cgn/components/detail/eyca/EycaErrorComponent.tsx @@ -2,12 +2,12 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; import { H4 } from "../../../../../../components/core/typography/H4"; import I18n from "../../../../../../i18n"; -import IconFont from "../../../../../../components/ui/IconFont"; -import { IOColors } from "../../../../../../components/core/variables/IOColors"; import ButtonDefaultOpacity from "../../../../../../components/ButtonDefaultOpacity"; import { Label } from "../../../../../../components/core/typography/Label"; import { InfoBox } from "../../../../../../components/box/InfoBox"; import { VSpacer } from "../../../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../../../components/core/icons/Icon"; +import TouchableDefaultOpacity from "../../../../../../components/TouchableDefaultOpacity"; type Props = { onRetry: () => void; @@ -35,15 +35,12 @@ const EycaErrorComponent = (props: Props) => ( testID={"eyca-error-component"} >

{I18n.t("bonus.cgn.detail.status.eycaCircuit")}

- + + + - +

{I18n.t("bonus.cgn.detail.status.eycaError")}

diff --git a/ts/features/bonus/cgn/components/detail/eyca/EycaPendingComponent.tsx b/ts/features/bonus/cgn/components/detail/eyca/EycaPendingComponent.tsx index 07fe6c7fe54..2863b7e6fff 100644 --- a/ts/features/bonus/cgn/components/detail/eyca/EycaPendingComponent.tsx +++ b/ts/features/bonus/cgn/components/detail/eyca/EycaPendingComponent.tsx @@ -2,14 +2,14 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; import { H4 } from "../../../../../../components/core/typography/H4"; import I18n from "../../../../../../i18n"; -import IconFont from "../../../../../../components/ui/IconFont"; -import { IOColors } from "../../../../../../components/core/variables/IOColors"; import ButtonDefaultOpacity from "../../../../../../components/ButtonDefaultOpacity"; import { Label } from "../../../../../../components/core/typography/Label"; import { InfoBox } from "../../../../../../components/box/InfoBox"; import { openWebUrl } from "../../../../../../utils/url"; import { showToast } from "../../../../../../utils/showToast"; import { VSpacer } from "../../../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../../../components/core/icons/Icon"; +import TouchableDefaultOpacity from "../../../../../../components/TouchableDefaultOpacity"; type Props = { openBottomSheet: () => void; @@ -35,15 +35,12 @@ const EycaStatusDetailsComponent = (props: Props) => ( testID={"eyca-pending-component"} >

{I18n.t("bonus.cgn.detail.status.eycaCircuit")}

- + + + - +

{I18n.t("bonus.cgn.detail.status.eycaPending")}

diff --git a/ts/features/bonus/cgn/components/detail/eyca/EycaStatusDetailsComponent.tsx b/ts/features/bonus/cgn/components/detail/eyca/EycaStatusDetailsComponent.tsx index 5a9fdd1adcb..fcffdc2c5ed 100644 --- a/ts/features/bonus/cgn/components/detail/eyca/EycaStatusDetailsComponent.tsx +++ b/ts/features/bonus/cgn/components/detail/eyca/EycaStatusDetailsComponent.tsx @@ -3,8 +3,6 @@ import { View, StyleSheet } from "react-native"; import { EycaCardActivated } from "../../../../../../../definitions/cgn/EycaCardActivated"; import { H4 } from "../../../../../../components/core/typography/H4"; import I18n from "../../../../../../i18n"; -import IconFont from "../../../../../../components/ui/IconFont"; -import { IOColors } from "../../../../../../components/core/variables/IOColors"; import { IOStyles } from "../../../../../../components/core/variables/IOStyles"; import { Monospace } from "../../../../../../components/core/typography/Monospace"; import { EycaCardExpired } from "../../../../../../../definitions/cgn/EycaCardExpired"; @@ -18,6 +16,8 @@ import { HSpacer, VSpacer } from "../../../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../../../components/core/icons/Icon"; +import TouchableDefaultOpacity from "../../../../../../components/TouchableDefaultOpacity"; import { IOBadge } from "../../../../../../components/core/IOBadge"; type Props = { @@ -77,12 +77,9 @@ const EycaStatusDetailsComponent = (props: Props) => {

{I18n.t("bonus.cgn.detail.status.eyca")}

- + + + {badgeByStatus()} diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx index d926131dd47..73a239745c9 100644 --- a/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx +++ b/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx @@ -10,10 +10,10 @@ import { DiscountCodeType } from "../../../../../../definitions/cgn/merchants/Di import { useCgnDiscountDetailBottomSheet } from "../../hooks/useCgnDiscountDetailBottomSheet"; import { Label } from "../../../../../components/core/typography/Label"; import { IOColors } from "../../../../../components/core/variables/IOColors"; -import IconFont from "../../../../../components/ui/IconFont"; import TouchableDefaultOpacity from "../../../../../components/TouchableDefaultOpacity"; import { IOBadge } from "../../../../../components/core/IOBadge"; import I18n from "../../../../../i18n"; +import { Icon } from "../../../../../components/core/icons"; import { HSpacer } from "../../../../../components/core/spacer/Spacer"; type Props = { @@ -69,7 +69,7 @@ const CgnMerchantDiscountItem: React.FunctionComponent = ({ )} - + {cgnDiscountDetail} diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantsFilters.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantsFilters.tsx index 32d89e05bc8..bf21805016a 100644 --- a/ts/features/bonus/cgn/components/merchants/CgnMerchantsFilters.tsx +++ b/ts/features/bonus/cgn/components/merchants/CgnMerchantsFilters.tsx @@ -12,7 +12,6 @@ import { } from "react-native"; import AppHeader from "../../../../../components/ui/AppHeader"; import ButtonDefaultOpacity from "../../../../../components/ButtonDefaultOpacity"; -import IconFont from "../../../../../components/ui/IconFont"; import { H5 } from "../../../../../components/core/typography/H5"; import I18n from "../../../../../i18n"; import { IOStyles } from "../../../../../components/core/variables/IOStyles"; @@ -26,6 +25,7 @@ import { } from "../../../bonusVacanze/components/buttons/ButtonConfigurations"; import { LabelledItem } from "../../../../../components/LabelledItem"; import { VSpacer } from "../../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../../components/core/icons/Icon"; import CategoryCheckbox from "./search/CategoryCheckbox"; import OrderOption from "./search/OrderOption"; import { DistanceSlider } from "./search/DistanceSlider"; @@ -102,7 +102,7 @@ const CgnMerchantsFilters: React.FunctionComponent = (props: Props) => { - + diff --git a/ts/features/bonus/cgn/components/merchants/__test__/__snapshots__/CgnDiscountDetail.test.tsx.snap b/ts/features/bonus/cgn/components/merchants/__test__/__snapshots__/CgnDiscountDetail.test.tsx.snap index d5717975ba3..38fabaa237d 100644 --- a/ts/features/bonus/cgn/components/merchants/__test__/__snapshots__/CgnDiscountDetail.test.tsx.snap +++ b/ts/features/bonus/cgn/components/merchants/__test__/__snapshots__/CgnDiscountDetail.test.tsx.snap @@ -121,11 +121,92 @@ exports[`when rendering on match snapshot for OTP discount 1`] = ` > •••••••••• - + > + + + + + + •••••••••• - + > + + + + + + { return ( <> @@ -155,12 +153,13 @@ const CgnBucketCodeContent = (props: ContentProps) => { onPress={handleCopyPress} content={bucketResponse.value.value.code} icon={ - + + + } /> ); @@ -170,13 +169,7 @@ const CgnBucketCodeContent = (props: ContentProps) => { - } + icon={} /> ); }; diff --git a/ts/features/bonus/cgn/components/merchants/discount/CgnOTPCodeComponent.tsx b/ts/features/bonus/cgn/components/merchants/discount/CgnOTPCodeComponent.tsx index 4c91a7ccda2..26234971c68 100644 --- a/ts/features/bonus/cgn/components/merchants/discount/CgnOTPCodeComponent.tsx +++ b/ts/features/bonus/cgn/components/merchants/discount/CgnOTPCodeComponent.tsx @@ -3,17 +3,16 @@ import { TouchableWithoutFeedback } from "@gorhom/bottom-sheet"; import { View, StyleSheet } from "react-native"; import I18n from "../../../../../../i18n"; import { BaseTypography } from "../../../../../../components/core/typography/BaseTypography"; -import { IOColors } from "../../../../../../components/core/variables/IOColors"; import { useIODispatch, useIOSelector } from "../../../../../../store/hooks"; import { cgnOtpDataSelector } from "../../../store/reducers/otp"; import { isError, isLoading, isReady } from "../../../../bpd/model/RemoteValue"; import { cgnGenerateOtp, resetOtpState } from "../../../store/actions/otp"; -import Eye from "../../../../../../../img/icons/Eye.svg"; import ActivityIndicator from "../../../../../../components/ui/ActivityIndicator"; import { Link } from "../../../../../../components/core/typography/Link"; import { IOStyles } from "../../../../../../components/core/variables/IOStyles"; import { H3 } from "../../../../../../components/core/typography/H3"; import { H4 } from "../../../../../../components/core/typography/H4"; +import { Icon } from "../../../../../../components/core/icons/Icon"; import { OtpCodeComponent } from "./OtpCodeComponent"; const styles = StyleSheet.create({ @@ -102,11 +101,7 @@ const CgnOTPCodeContent = ({ onCodePress }: Props) => { {"••••••••••"} - + ); diff --git a/ts/features/bonus/cgn/components/merchants/discount/CgnStaticCodeComponent.tsx b/ts/features/bonus/cgn/components/merchants/discount/CgnStaticCodeComponent.tsx index d415b5ea3af..2e1cdf5e004 100644 --- a/ts/features/bonus/cgn/components/merchants/discount/CgnStaticCodeComponent.tsx +++ b/ts/features/bonus/cgn/components/merchants/discount/CgnStaticCodeComponent.tsx @@ -4,13 +4,11 @@ import * as React from "react"; import { useCallback } from "react"; import { View, StyleSheet } from "react-native"; import { Discount } from "../../../../../../../definitions/cgn/merchants/Discount"; -import Eye from "../../../../../../../img/icons/Eye.svg"; import { BaseTypography } from "../../../../../../components/core/typography/BaseTypography"; import { H3 } from "../../../../../../components/core/typography/H3"; -import { IOColors } from "../../../../../../components/core/variables/IOColors"; -import IconFont from "../../../../../../components/ui/IconFont"; import I18n from "../../../../../../i18n"; import { clipboardSetStringWithFeedback } from "../../../../../../utils/clipboard"; +import { Icon } from "../../../../../../components/core/icons/Icon"; type Props = { staticCode: Discount["staticCode"]; @@ -83,18 +81,15 @@ const CgnStaticCodeComponent: React.FunctionComponent = ({ {isCodeVisible ? ( - + + + ) : ( - + )} diff --git a/ts/features/bonus/cgn/components/merchants/discount/OtpCodeComponent.tsx b/ts/features/bonus/cgn/components/merchants/discount/OtpCodeComponent.tsx index 46545f8e722..4825f6800ca 100644 --- a/ts/features/bonus/cgn/components/merchants/discount/OtpCodeComponent.tsx +++ b/ts/features/bonus/cgn/components/merchants/discount/OtpCodeComponent.tsx @@ -8,11 +8,11 @@ import { BaseTypography } from "../../../../../../components/core/typography/Bas import { H5 } from "../../../../../../components/core/typography/H5"; import { IOColors } from "../../../../../../components/core/variables/IOColors"; import TouchableDefaultOpacity from "../../../../../../components/TouchableDefaultOpacity"; -import IconFont from "../../../../../../components/ui/IconFont"; import I18n from "../../../../../../i18n"; import { clipboardSetStringWithFeedback } from "../../../../../../utils/clipboard"; import { isTestEnv } from "../../../../../../utils/environment"; import { addEvery } from "../../../../../../utils/strings"; +import { Icon } from "../../../../../../components/core/icons"; type ProgressConfig = { startPercentage: number; @@ -192,7 +192,7 @@ export const OtpCodeComponent = (props: Props) => { > {OtpCode(formattedCode)} - + •••••••••• - + > + + + + + + , (

{text}

- ); diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantDetailScreen.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantDetailScreen.tsx index 11ef01ec1be..08a838ea1e3 100644 --- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantDetailScreen.tsx +++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantDetailScreen.tsx @@ -16,16 +16,13 @@ import { connect } from "react-redux"; import { Address } from "../../../../../../definitions/cgn/merchants/Address"; import { Discount } from "../../../../../../definitions/cgn/merchants/Discount"; import { Merchant } from "../../../../../../definitions/cgn/merchants/Merchant"; -import OpenWeb from "../../../../../../img/icons/openweburl.svg"; import { VSpacer } from "../../../../../components/core/spacer/Spacer"; import { H1 } from "../../../../../components/core/typography/H1"; import { H2 } from "../../../../../components/core/typography/H2"; import { H4 } from "../../../../../components/core/typography/H4"; -import { IOColors } from "../../../../../components/core/variables/IOColors"; import { IOStyles } from "../../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent"; import TouchableDefaultOpacity from "../../../../../components/TouchableDefaultOpacity"; -import IconFont from "../../../../../components/ui/IconFont"; import I18n from "../../../../../i18n"; import { Dispatch } from "../../../../../store/actions/types"; import { GlobalState } from "../../../../../store/reducers/types"; @@ -38,6 +35,7 @@ import { isLoading, isReady } from "../../../bpd/model/RemoteValue"; import CgnMerchantDiscountItem from "../../components/merchants/CgnMerchantsDiscountItem"; import { cgnSelectedMerchant } from "../../store/actions/merchants"; import { cgnSelectedMerchantSelector } from "../../store/reducers/merchants"; +import { Icon } from "../../../../../components/core/icons/Icon"; export type CgnMerchantDetailScreenNavigationParams = Readonly<{ merchantID: Merchant["id"]; @@ -58,6 +56,7 @@ const styles = StyleSheet.create({ }); const COPY_ICON_SIZE = 24; +const EXTERNAL_LINK_ICON_SIZE = 20; const CgnMerchantDetailScreen: React.FunctionComponent = ( props: Props @@ -90,12 +89,9 @@ const CgnMerchantDetailScreen: React.FunctionComponent = (

{item.full_address}

- + + + ); @@ -158,10 +154,10 @@ const CgnMerchantDetailScreen: React.FunctionComponent = (

{url}

- ) diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantLandingWebview.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantLandingWebview.tsx index ecef60a6c65..7a9af0e4d79 100644 --- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantLandingWebview.tsx +++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantLandingWebview.tsx @@ -36,7 +36,7 @@ const CgnMerchantLandingWebview: React.FunctionComponent = ( return ( props.navigation.goBack() }} > diff --git a/ts/features/bonus/common/components/TosBonusComponent.tsx b/ts/features/bonus/common/components/TosBonusComponent.tsx index 7368f82701a..4c6977eb3f1 100644 --- a/ts/features/bonus/common/components/TosBonusComponent.tsx +++ b/ts/features/bonus/common/components/TosBonusComponent.tsx @@ -17,9 +17,9 @@ import { IOStyles } from "../../../../components/core/variables/IOStyles"; import { withLoadingSpinner } from "../../../../components/helpers/withLoadingSpinner"; import AppHeader from "../../../../components/ui/AppHeader"; import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; -import IconFont from "../../../../components/ui/IconFont"; import I18n from "../../../../i18n"; import { AVOID_ZOOM_JS, closeInjectedScript } from "../../../../utils/webview"; +import { Icon } from "../../../../components/core/icons/Icon"; type Props = { onClose: () => void; @@ -111,7 +111,7 @@ const TosBonusComponent: React.FunctionComponent = props => { - + diff --git a/ts/features/bonus/siciliaVola/components/SvVoucherListFilters.tsx b/ts/features/bonus/siciliaVola/components/SvVoucherListFilters.tsx index 8bf335064bd..7d4b8dd9a22 100644 --- a/ts/features/bonus/siciliaVola/components/SvVoucherListFilters.tsx +++ b/ts/features/bonus/siciliaVola/components/SvVoucherListFilters.tsx @@ -6,7 +6,6 @@ import { Body, Container, Left, ListItem, Right } from "native-base"; import { View, Keyboard, SafeAreaView, ScrollView } from "react-native"; import AppHeader from "../../../../components/ui/AppHeader"; import ButtonDefaultOpacity from "../../../../components/ButtonDefaultOpacity"; -import IconFont from "../../../../components/ui/IconFont"; import { H5 } from "../../../../components/core/typography/H5"; import I18n from "../../../../i18n"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; @@ -24,10 +23,10 @@ import { possibleVoucherStateSelector } from "../store/reducers/voucherList/poss import { isReady } from "../../bpd/model/RemoteValue"; import { StatoVoucherBean } from "../../../../../definitions/api_sicilia_vola/StatoVoucherBean"; import { H4 } from "../../../../components/core/typography/H4"; -import { IOColors } from "../../../../components/core/variables/IOColors"; import { svSetFilter } from "../store/actions/voucherList"; import { FilterState } from "../store/reducers/voucherList/filters"; import { VSpacer } from "../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../components/core/icons"; type Props = ReturnType & ReturnType & { @@ -65,10 +64,10 @@ const PossibleVoucherStateOption = ({

{text}

- ); @@ -138,7 +137,7 @@ const SvVoucherListFilters: React.FunctionComponent = (props: Props) => { - + diff --git a/ts/features/design-system/core/DSAdvice.tsx b/ts/features/design-system/core/DSAdvice.tsx index d302411d67a..2f575fec330 100644 --- a/ts/features/design-system/core/DSAdvice.tsx +++ b/ts/features/design-system/core/DSAdvice.tsx @@ -7,8 +7,6 @@ import { InfoBox } from "../../../components/box/InfoBox"; /* Types */ import { ImportoEuroCents } from "../../../../definitions/backend/ImportoEuroCents"; import { IOStyles } from "../../../components/core/variables/IOStyles"; -import { IOColors } from "../../../components/core/variables/IOColors"; - import { Label } from "../../../components/core/typography/Label"; import { ActivateBonusReminder } from "../../bonus/bonusVacanze/screens/activation/request/ActivateBonusReminder"; import { DesignSystemScreen } from "../components/DesignSystemScreen"; @@ -103,11 +101,7 @@ export const DSAdvice = () => ( - +
{ "Per verificare la tua carta, tratteniamo € 0.02. Non preoccuparti: ti restituiremo l'importo al più presto." @@ -140,7 +134,7 @@ export const DSAdvice = () => ( /> - + ); diff --git a/ts/features/design-system/core/DSListItems.tsx b/ts/features/design-system/core/DSListItems.tsx index 06bd928e8a5..a1837d6f168 100644 --- a/ts/features/design-system/core/DSListItems.tsx +++ b/ts/features/design-system/core/DSListItems.tsx @@ -13,7 +13,6 @@ import CgnMerchantDiscountItem from "../../bonus/cgn/components/merchants/CgnMer /* Icons */ import BooksIcon from "../../../../img/bonus/cgn/categories/books.svg"; import CultureIcon from "../../../../img/bonus/cgn/categories/culture.svg"; -import InfoIcon from "../../../../img/assistance/info.svg"; import OrderOption from "../../bonus/cgn/components/merchants/search/OrderOption"; import ZendeskItemPermissionComponent from "../../zendesk/components/ZendeskItemPermissionComponent"; @@ -24,6 +23,7 @@ import { TimelineOperationListItem } from "../../idpay/initiative/details/compon import { OperationTypeEnum } from "../../../../definitions/idpay/TransactionOperationDTO"; import { DesignSystemScreen } from "../components/DesignSystemScreen"; import { VSpacer } from "../../../components/core/spacer/Spacer"; +import { Icon } from "../../../components/core/icons/Icon"; export const DSListItems = () => ( @@ -95,7 +95,7 @@ export const DSListItems = () => ( alert("Action triggered")} /> @@ -113,7 +113,7 @@ export const DSListItems = () => ( alert("Action triggered")} @@ -173,7 +173,7 @@ export const DSListItems = () => ( } + icon={} title="Storico versioni dell'app" value="Per capire se il problema dipende dall'ultimo aggiornamento" testId="TestID" diff --git a/ts/features/euCovidCert/screens/valid/EuCovidCertValidScreen.tsx b/ts/features/euCovidCert/screens/valid/EuCovidCertValidScreen.tsx index 716b5f02067..05781104143 100644 --- a/ts/features/euCovidCert/screens/valid/EuCovidCertValidScreen.tsx +++ b/ts/features/euCovidCert/screens/valid/EuCovidCertValidScreen.tsx @@ -17,7 +17,6 @@ import { H5 } from "../../../../components/core/typography/H5"; import { IOColors } from "../../../../components/core/variables/IOColors"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; -import IconFont from "../../../../components/ui/IconFont"; import I18n from "../../../../i18n"; import { mixpanelTrack } from "../../../../mixpanel"; import { GlobalState } from "../../../../store/reducers/types"; @@ -47,6 +46,7 @@ import { BaseEuCovidCertificateLayout } from "../BaseEuCovidCertificateLayout"; import { EUCovidContext } from "../EuCovidCertificateRouterScreen"; import { EuCovidCertHeader } from "../../components/EuCovidCertHeader"; import { VSpacer } from "../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../components/core/icons/Icon"; type OwnProps = { validCertificate: ValidCertificate; @@ -159,7 +159,7 @@ const addBottomSheetItem = (config: { {config.subTitle}
- + diff --git a/ts/features/fci/components/DocumentWithSignature.tsx b/ts/features/fci/components/DocumentWithSignature.tsx index dff470772aa..be437c3c0ad 100644 --- a/ts/features/fci/components/DocumentWithSignature.tsx +++ b/ts/features/fci/components/DocumentWithSignature.tsx @@ -282,12 +282,8 @@ const DocumentWithSignature = (props: Props) => { currentPage, totalPages })} - iconLeftColor={ - currentPage === 1 ? IOColors.bluegreyLight : IOColors.blue - } - iconRightColor={ - currentPage === totalPages ? IOColors.bluegreyLight : IOColors.blue - } + iconLeftColor={currentPage === 1 ? "bluegreyLight" : "blue"} + iconRightColor={currentPage === totalPages ? "bluegreyLight" : "blue"} onPrevious={onPrevious} onNext={onNext} disabled={false} diff --git a/ts/features/fci/components/DocumentsNavigationBar.tsx b/ts/features/fci/components/DocumentsNavigationBar.tsx index 4059b3d8fae..c5c026f85a5 100644 --- a/ts/features/fci/components/DocumentsNavigationBar.tsx +++ b/ts/features/fci/components/DocumentsNavigationBar.tsx @@ -1,12 +1,12 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity"; -import IconFont from "../../../components/ui/IconFont"; import { H4 } from "../../../components/core/typography/H4"; import { IOColors } from "../../../components/core/variables/IOColors"; import { WithTestID } from "../../../types/WithTestID"; import { IOStyles } from "../../../components/core/variables/IOStyles"; import { HSpacer } from "../../../components/core/spacer/Spacer"; +import { Icon } from "../../../components/core/icons/Icon"; const styles = StyleSheet.create({ container: { @@ -23,9 +23,6 @@ const styles = StyleSheet.create({ paddingBottom: 0, paddingTop: 0 }, - icon: { - paddingRight: 0 - }, shadow: { // iOS shadowColor: IOColors.black, @@ -48,8 +45,8 @@ export type IndicatorPositionEnum = "left" | "right"; type Props = WithTestID<{ titleRight: string; titleLeft: string; - iconRightColor?: string; - iconLeftColor?: string; + iconRightColor?: IOColors; + iconLeftColor?: IOColors; disabled?: boolean; indicatorPosition: IndicatorPositionEnum; onPrevious: () => void; @@ -69,10 +66,10 @@ const renderNavigationComponent = ( disabled={disabled} testID={"DocumentsNavigationBarLeftButtonTestID"} > - @@ -85,10 +82,10 @@ const renderNavigationComponent = ( disabled={disabled} testID={"DocumentsNavigationBarRightButtonTestID"} > - diff --git a/ts/features/fci/components/QtspClauseListItem.tsx b/ts/features/fci/components/QtspClauseListItem.tsx index 3a61b9fe479..47e90d4d0bd 100644 --- a/ts/features/fci/components/QtspClauseListItem.tsx +++ b/ts/features/fci/components/QtspClauseListItem.tsx @@ -1,12 +1,11 @@ import * as React from "react"; import { StyleSheet, View } from "react-native"; import { useSelector } from "react-redux"; -import IconFont from "../../../components/ui/IconFont"; import { IOStyles } from "../../../components/core/variables/IOStyles"; -import { IOColors } from "../../../components/core/variables/IOColors"; import TouchableDefaultOpacity from "../../../components/TouchableDefaultOpacity"; import { QtspClause } from "../../../../definitions/fci/QtspClause"; import { fciQtspFilledDocumentUrlSelector } from "../store/reducers/fciQtspFilledDocument"; +import { Icon } from "../../../components/core/icons/Icon"; import LinkedText from "./LinkedText"; type Props = { @@ -57,10 +56,10 @@ const QtspClauseListItem = (props: Props) => { }} > - diff --git a/ts/features/fci/components/SignatureFieldItem.tsx b/ts/features/fci/components/SignatureFieldItem.tsx index a8473bfd1ff..cde0c552231 100644 --- a/ts/features/fci/components/SignatureFieldItem.tsx +++ b/ts/features/fci/components/SignatureFieldItem.tsx @@ -1,12 +1,12 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; import { H4 } from "../../../components/core/typography/H4"; -import IconFont from "../../../components/ui/IconFont"; import { IOStyles } from "../../../components/core/variables/IOStyles"; import { IOColors } from "../../../components/core/variables/IOColors"; import TouchableDefaultOpacity from "../../../components/TouchableDefaultOpacity"; import { Link } from "../../../components/core/typography/Link"; import I18n from "../../../i18n"; +import { Icon } from "../../../components/core/icons/Icon"; type Props = { title: string; @@ -60,15 +60,15 @@ const SignatureFieldItem = (props: Props) => { disabled={props.disabled} style={{ alignSelf: "center" }} > - diff --git a/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx b/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx index 23d3593604d..2c555644d70 100644 --- a/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx +++ b/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx @@ -8,8 +8,8 @@ import { IOColors } from "../../../../components/core/variables/IOColors"; type Props = { titleRight: string; titleLeft: string; - iconRightColor?: string; - iconLeftColor?: string; + iconRightColor?: IOColors; + iconLeftColor?: IOColors; disabled?: boolean; indicatorPosition: IndicatorPositionEnum; onPrevious: () => void; @@ -21,8 +21,8 @@ describe("Test DocumentsNavigationBar component", () => { const props: Props = { titleRight: "Pagina 1 di 2", titleLeft: "Documento 1 di 2", - iconRightColor: IOColors.blue, - iconLeftColor: IOColors.blue, + iconRightColor: "blue", + iconLeftColor: "blue", indicatorPosition: "left", onPrevious: jest.fn(), onNext: jest.fn() diff --git a/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap index 554259f90c5..abecc0e98b7 100644 --- a/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap +++ b/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap @@ -81,41 +81,60 @@ exports[`Test DocumentsNavigationBar component should render a DocumentsNavigati } testID="DocumentsNavigationBarLeftButtonTestID" > - - v - + + + + - - t - + + + + - - R - + + + + { style={[styles.verticalPadding, styles.alertTextContainer]} testID="FciDataSharingScreenAlertTextTestID" > - +

{I18n.t("features.fci.shareDataScreen.alertText")} diff --git a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx index f61e17dfbc3..8424d0e1cf8 100644 --- a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx +++ b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx @@ -3,10 +3,8 @@ import React from "react"; import { SafeAreaView, StyleSheet } from "react-native"; import * as O from "fp-ts/lib/Option"; import * as S from "fp-ts/lib/string"; -import { IOColors } from "../../../../components/core/variables/IOColors"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity"; -import IconFont from "../../../../components/ui/IconFont"; import I18n from "../../../../i18n"; import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; @@ -22,6 +20,7 @@ import { } from "../../store/actions"; import { fciDownloadPathSelector } from "../../store/reducers/fciDownloadPreview"; import GenericErrorComponent from "../../components/GenericErrorComponent"; +import { Icon } from "../../../../components/core/icons/Icon"; export type FciDocumentPreviewScreenNavigationParams = Readonly<{ documentUrl: string; @@ -81,7 +80,7 @@ export const FciDocumentPreviewScreen = ( accessibilityLabel={I18n.t("global.buttons.back")} accessibilityRole={"button"} > - + ); @@ -114,11 +113,9 @@ export const FciDocumentPreviewScreen = ( currentPage, totalPages })} - iconLeftColor={currentDoc === 0 ? IOColors.bluegreyLight : IOColors.blue} + iconLeftColor={currentDoc === 0 ? "bluegreyLight" : "blue"} iconRightColor={ - currentDoc === documents.length - 1 - ? IOColors.bluegreyLight - : IOColors.blue + currentDoc === documents.length - 1 ? "bluegreyLight" : "blue" } onPrevious={onPrevious} onNext={onNext} diff --git a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx index cbe39b6cc63..cf8cae49fce 100644 --- a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx +++ b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx @@ -13,7 +13,6 @@ import { useNavigation, useRoute } from "@react-navigation/native"; -import IconFont from "../../../../components/ui/IconFont"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import { IOColors } from "../../../../components/core/variables/IOColors"; @@ -35,6 +34,7 @@ import { } from "../../store/actions"; import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; +import { Icon } from "../../../../components/core/icons/Icon"; import { fciDownloadPathSelector } from "../../store/reducers/fciDownloadPreview"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; import { trackFciDocOpeningSuccess, trackFciSigningDoc } from "../../analytics"; @@ -201,7 +201,7 @@ const FciDocumentsScreen = () => { accessibilityLabel={I18n.t("global.buttons.back")} accessibilityRole={"button"} > - + ); @@ -226,12 +226,8 @@ const FciDocumentsScreen = () => { currentPage, totalPages })} - iconLeftColor={ - currentPage === 1 ? IOColors.bluegreyLight : IOColors.blue - } - iconRightColor={ - currentPage === totalPages ? IOColors.bluegreyLight : IOColors.blue - } + iconLeftColor={currentPage === 1 ? "bluegreyLight" : "blue"} + iconRightColor={currentPage === totalPages ? "bluegreyLight" : "blue"} onPrevious={onPrevious} onNext={onNext} disabled={false} diff --git a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx index 0d22699e388..cb53cd8cc8e 100644 --- a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx @@ -24,7 +24,6 @@ import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; import { FCI_ROUTES } from "../../navigation/routes"; import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity"; import { IOColors } from "../../../../components/core/variables/IOColors"; -import IconFont from "../../../../components/ui/IconFont"; import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures"; import { fciEndRequest, @@ -42,6 +41,7 @@ import { getSectionListData } from "../../utils/signatureFields"; import { VSpacer } from "../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../components/core/icons/Icon"; import ScreenContent from "../../../../components/screens/ScreenContent"; import { LightModalContext } from "../../../../components/ui/LightModal"; import DocumentWithSignature from "../../components/DocumentWithSignature"; @@ -225,7 +225,7 @@ const FciSignatureFieldsScreen = ( accessibilityLabel={I18n.t("global.buttons.back")} accessibilityRole={"button"} > - + ); diff --git a/ts/features/fims/components/CommonContent.tsx b/ts/features/fims/components/CommonContent.tsx index f3387b48210..6aabe77a14d 100644 --- a/ts/features/fims/components/CommonContent.tsx +++ b/ts/features/fims/components/CommonContent.tsx @@ -2,8 +2,8 @@ import { Body, Container, Content, Right } from "native-base"; import * as React from "react"; import AppHeader from "../../../components/ui/AppHeader"; import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity"; -import IconFont from "../../../components/ui/IconFont"; import { IOStyles } from "../../../components/core/variables/IOStyles"; +import { Icon } from "../../../components/core/icons/Icon"; type Props = { close: () => void; @@ -16,7 +16,7 @@ const CommonContent = ({ close, children }: Props) => ( - + diff --git a/ts/features/fims/components/ErrorContent.tsx b/ts/features/fims/components/ErrorContent.tsx index 1a118719691..914fdd10790 100644 --- a/ts/features/fims/components/ErrorContent.tsx +++ b/ts/features/fims/components/ErrorContent.tsx @@ -1,16 +1,11 @@ import * as React from "react"; -import { View, StyleSheet } from "react-native"; -import IconFont from "../../../components/ui/IconFont"; -import customVariables from "../../../theme/variables"; +import { View } from "react-native"; import { Label } from "../../../components/core/typography/Label"; import { VSpacer } from "../../../components/core/spacer/Spacer"; +import { Icon } from "../../../components/core/icons/Icon"; +import { IOStyles } from "../../../components/core/variables/IOStyles"; import CommonContent from "./CommonContent"; -const styles = StyleSheet.create({ - itemsCenter: { alignItems: "center" }, - selfCenter: { alignSelf: "center" } -}); - type Props = { text: string; close: () => void; @@ -18,15 +13,12 @@ type Props = { const ErrorContent = ({ text, close }: Props) => ( - + + + - + diff --git a/ts/features/fims/components/SuccessContent.tsx b/ts/features/fims/components/SuccessContent.tsx index ed57480a4b2..41b0c1fbec1 100644 --- a/ts/features/fims/components/SuccessContent.tsx +++ b/ts/features/fims/components/SuccessContent.tsx @@ -1,10 +1,9 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; -import IconFont from "../../../components/ui/IconFont"; -import customVariables from "../../../theme/variables"; import { Label } from "../../../components/core/typography/Label"; import I18n from "../../../i18n"; import { VSpacer } from "../../../components/core/spacer/Spacer"; +import { Icon } from "../../../components/core/icons/Icon"; import CommonContent from "./CommonContent"; const styles = StyleSheet.create({ @@ -18,12 +17,9 @@ type Props = { }; const SuccessContent = ({ text, close }: Props) => ( - + + + diff --git a/ts/features/idpay/initiative/configuration/screens/IbanEnrollmentScreen.tsx b/ts/features/idpay/initiative/configuration/screens/IbanEnrollmentScreen.tsx index 3335df39d1a..0bb392584eb 100644 --- a/ts/features/idpay/initiative/configuration/screens/IbanEnrollmentScreen.tsx +++ b/ts/features/idpay/initiative/configuration/screens/IbanEnrollmentScreen.tsx @@ -149,7 +149,7 @@ const IbanEnrollmentScreen = () => { key={iban.iban} title={iban.description} subTitle={iban.iban} - iconName={isSelected ? "io-radio-on" : "io-radio-off"} + iconName={isSelected ? "legRadioOn" : "legRadioOff"} smallIconSize={true} accessible={true} accessibilityRole={"radiogroup"} diff --git a/ts/features/idpay/initiative/configuration/screens/InitiativeConfigurationIntroScreen.tsx b/ts/features/idpay/initiative/configuration/screens/InitiativeConfigurationIntroScreen.tsx index 55b6700382c..9b85e61d25c 100644 --- a/ts/features/idpay/initiative/configuration/screens/InitiativeConfigurationIntroScreen.tsx +++ b/ts/features/idpay/initiative/configuration/screens/InitiativeConfigurationIntroScreen.tsx @@ -13,7 +13,6 @@ import LoadingSpinnerOverlay from "../../../../../components/LoadingSpinnerOverl import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent"; import TouchableDefaultOpacity from "../../../../../components/TouchableDefaultOpacity"; import FooterWithButtons from "../../../../../components/ui/FooterWithButtons"; -import IconFont from "../../../../../components/ui/IconFont"; import { emptyContextualHelp } from "../../../../../utils/emptyContextualHelp"; import InstitutionIcon from "../../../../../../img/features/idpay/institution.svg"; import CreditCardIcon from "../../../../../../img/features/idpay/creditcard.svg"; @@ -23,6 +22,7 @@ import { LOADING_TAG } from "../../../../../utils/xstate"; import I18n from "../../../../../i18n"; import { ConfigurationMode } from "../xstate/context"; import { VSpacer } from "../../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../../components/core/icons/Icon"; type InitiativeConfigurationIntroScreenRouteParams = { initiativeId: string; @@ -70,7 +70,7 @@ const InitiativeConfigurationIntroScreen = () => { const customGoBack = ( - + ); diff --git a/ts/features/idpay/initiative/details/components/InitiativeSettingsComponent.tsx b/ts/features/idpay/initiative/details/components/InitiativeSettingsComponent.tsx index bddaa2474d7..fe0840fbdf7 100644 --- a/ts/features/idpay/initiative/details/components/InitiativeSettingsComponent.tsx +++ b/ts/features/idpay/initiative/details/components/InitiativeSettingsComponent.tsx @@ -13,16 +13,14 @@ import { HSpacer, VSpacer } from "../../../../../components/core/spacer/Spacer"; import { H3 } from "../../../../../components/core/typography/H3"; import { H4 } from "../../../../../components/core/typography/H4"; import { LabelSmall } from "../../../../../components/core/typography/LabelSmall"; -import { IOColors } from "../../../../../components/core/variables/IOColors"; import { IOStyles } from "../../../../../components/core/variables/IOStyles"; -import IconFont from "../../../../../components/ui/IconFont"; import I18n from "../../../../../i18n"; import { AppParamsList, IOStackNavigationProp } from "../../../../../navigation/params/AppParamsList"; -import customVariables from "../../../../../theme/variables"; import { IDPayConfigurationRoutes } from "../../configuration/navigation/navigator"; +import { Icon } from "../../../../../components/core/icons/Icon"; type Props = { initiative?: InitiativeDTO; @@ -70,7 +68,7 @@ const SettingsButtonComponent = (props: SettingsButtonProps) => { {hasWarnings && ( <> - + )} @@ -78,10 +76,7 @@ const SettingsButtonComponent = (props: SettingsButtonProps) => {

{title}

{getSubtitleComponent()} - + ); }; diff --git a/ts/features/idpay/initiative/details/screens/InitiativeDetailsScreen.tsx b/ts/features/idpay/initiative/details/screens/InitiativeDetailsScreen.tsx index 98d28004889..25762eced59 100644 --- a/ts/features/idpay/initiative/details/screens/InitiativeDetailsScreen.tsx +++ b/ts/features/idpay/initiative/details/screens/InitiativeDetailsScreen.tsx @@ -188,7 +188,7 @@ const InitiativeDetailsScreen = () => { headerBackgroundColor={IOColors["blue-50"]} contextualHelp={emptyContextualHelp} customRightIcon={{ - iconName: "io-info", + iconName: "info", onPress: handleBeneficiaryDetailsPress }} > diff --git a/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx index 3231a3d0575..61fe2037d25 100644 --- a/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx +++ b/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx @@ -8,11 +8,9 @@ import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; import { H4 } from "../../../../components/core/typography/H4"; import { Link } from "../../../../components/core/typography/Link"; -import { IOColors } from "../../../../components/core/variables/IOColors"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; -import IconFont from "../../../../components/ui/IconFont"; import { useNavigationSwipeBackListener } from "../../../../hooks/useNavigationSwipeBackListener"; import I18n from "../../../../i18n"; import { useOnboardingMachineService } from "../xstate/provider"; @@ -20,6 +18,7 @@ import { criteriaToDisplaySelector, prerequisiteAnswerIndexSelector } from "../xstate/selectors"; +import { Icon } from "../../../../components/core/icons/Icon"; const styles = StyleSheet.create({ maxheight: { @@ -45,10 +44,10 @@ const CustomListItem = ({ text, onPress, checked }: ListItemProps) => (

{text}

- ); diff --git a/ts/features/messages/components/MessageAttachments.tsx b/ts/features/messages/components/MessageAttachments.tsx index 82eaaf0fa5f..26fa9a3ec2b 100644 --- a/ts/features/messages/components/MessageAttachments.tsx +++ b/ts/features/messages/components/MessageAttachments.tsx @@ -10,7 +10,6 @@ import { Icon } from "../../../components/core/icons"; import { H5 } from "../../../components/core/typography/H5"; import { IOColors } from "../../../components/core/variables/IOColors"; import ItemSeparatorComponent from "../../../components/ItemSeparatorComponent"; -import IconFont from "../../../components/ui/IconFont"; import I18n from "../../../i18n"; import { UIAttachment } from "../../../store/reducers/entities/messages/types"; import { ContentTypeValues } from "../../../types/contentType"; @@ -32,7 +31,7 @@ const styles = StyleSheet.create({ }, row: { flexDirection: "row", - alignItems: "flex-start", + alignItems: "center", justifyContent: "space-between", flex: 1 }, @@ -113,12 +112,7 @@ const AttachmentItem = (props: { testID={"attachmentActivityIndicator"} /> ) : ( - + )} diff --git a/ts/features/pn/components/PnMessageTimelineCTA.tsx b/ts/features/pn/components/PnMessageTimelineCTA.tsx index fc7daf50074..a07f3e2370c 100644 --- a/ts/features/pn/components/PnMessageTimelineCTA.tsx +++ b/ts/features/pn/components/PnMessageTimelineCTA.tsx @@ -1,12 +1,12 @@ import React from "react"; import { View } from "react-native"; import { H5 } from "../../../components/core/typography/H5"; -import { IOColors } from "../../../components/core/variables/IOColors"; import BlockButtons from "../../../components/ui/BlockButtons"; -import IconFont from "../../../components/ui/IconFont"; import i18n from "../../../i18n"; import { mixpanelTrack } from "../../../mixpanel"; import { handleItemOnPress } from "../../../utils/url"; +import { HSpacer } from "../../../components/core/spacer/Spacer"; +import { Icon } from "../../../components/core/icons/Icon"; export const PnMessageTimelineCTA = (props: { url: string }) => ( ( marginBottom: 8 }} > - + +
void; @@ -47,13 +48,9 @@ const BancomatInformation: React.FunctionComponent = props => {

{I18n.t("wallet.bancomat.details.debit.title")}

- + + + diff --git a/ts/features/wallet/bancomatpay/component/BPayCard.tsx b/ts/features/wallet/bancomatpay/component/BPayCard.tsx index f93cdf28ac6..d92e88327bf 100644 --- a/ts/features/wallet/bancomatpay/component/BPayCard.tsx +++ b/ts/features/wallet/bancomatpay/component/BPayCard.tsx @@ -5,13 +5,13 @@ import { View, Image, StyleSheet } from "react-native"; import { connect } from "react-redux"; import bancomatLogoMin from "../../../../../img/wallet/payment-methods/bancomatpay-logo.png"; import { H4 } from "../../../../components/core/typography/H4"; -import IconFont from "../../../../components/ui/IconFont"; import I18n from "../../../../i18n"; import { profileNameSurnameSelector } from "../../../../store/reducers/profile"; import { GlobalState } from "../../../../store/reducers/types"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseCardComponent from "../../component/card/BaseCardComponent"; import { HSpacer } from "../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../components/core/icons"; type Props = { phone?: string; @@ -49,7 +49,7 @@ const topLeft = (phone: string) => ( {phone && ( - +

{phone} diff --git a/ts/features/wallet/component/features/PaymentMethodSettings.tsx b/ts/features/wallet/component/features/PaymentMethodSettings.tsx index f81d7657995..6eb977b91f1 100644 --- a/ts/features/wallet/component/features/PaymentMethodSettings.tsx +++ b/ts/features/wallet/component/features/PaymentMethodSettings.tsx @@ -4,14 +4,13 @@ import { connect } from "react-redux"; import { Dispatch } from "redux"; import { HSpacer } from "../../../../components/core/spacer/Spacer"; import { H3 } from "../../../../components/core/typography/H3"; -import { IOColors } from "../../../../components/core/variables/IOColors"; import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent"; -import IconFont from "../../../../components/ui/IconFont"; import FavoritePaymentMethodSwitch from "../../../../components/wallet/FavoriteMethodSwitch"; import I18n from "../../../../i18n"; import { GlobalState } from "../../../../store/reducers/types"; import { PaymentMethod } from "../../../../types/pagopa"; import { isEnabledToPay } from "../../../../utils/paymentMethodCapabilities"; +import { Icon } from "../../../../components/core/icons/Icon"; import PagoPaPaymentCapability from "./PagoPaPaymentCapability"; type OwnProps = { paymentMethod: PaymentMethod }; @@ -35,13 +34,10 @@ const styles = StyleSheet.create({ const PaymentMethodSettings = (props: Props): React.ReactElement => ( <> - - + + + +

{I18n.t("global.buttons.settings")}

 diff --git a/ts/features/wallet/component/features/PaymentStatusSwitch.tsx b/ts/features/wallet/component/features/PaymentStatusSwitch.tsx index 0b02367a7f7..fcaa10ce41d 100644 --- a/ts/features/wallet/component/features/PaymentStatusSwitch.tsx +++ b/ts/features/wallet/component/features/PaymentStatusSwitch.tsx @@ -7,9 +7,7 @@ import { useEffect, useRef } from "react"; import { connect } from "react-redux"; import { Dispatch } from "redux"; import { RemoteSwitch } from "../../../../components/core/selection/RemoteSwitch"; -import { IOColors } from "../../../../components/core/variables/IOColors"; import { IOStyleVariables } from "../../../../components/core/variables/IOStyleVariables"; -import IconFont from "../../../../components/ui/IconFont"; import I18n from "../../../../i18n"; import { mixpanelTrack } from "../../../../mixpanel"; import { @@ -21,6 +19,7 @@ import { GlobalState } from "../../../../store/reducers/types"; import { getPaymentStatusById } from "../../../../store/reducers/wallet/wallets"; import { PaymentMethod } from "../../../../types/pagopa"; import { showToast } from "../../../../utils/showToast"; +import { Icon } from "../../../../components/core/icons/Icon"; type OwnProps = { paymentMethod: PaymentMethod; @@ -62,7 +61,7 @@ const Fallback = () => { void mixpanelTrack("PAYMENT_STATUS_SWITCH_ID_NOT_IN_WALLET_LIST"); return ( - + ); }; diff --git a/ts/features/wallet/creditCard/component/CreditCardComponent.tsx b/ts/features/wallet/creditCard/component/CreditCardComponent.tsx index 73ca335dd5c..999f35f6351 100644 --- a/ts/features/wallet/creditCard/component/CreditCardComponent.tsx +++ b/ts/features/wallet/creditCard/component/CreditCardComponent.tsx @@ -8,12 +8,10 @@ import { Dispatch } from "redux"; import { Body } from "../../../../components/core/typography/Body"; import { H5 } from "../../../../components/core/typography/H5"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; -import IconFont from "../../../../components/ui/IconFont"; import { getCardIconFromBrandLogo } from "../../../../components/wallet/card/Logo"; import I18n from "../../../../i18n"; import { GlobalState } from "../../../../store/reducers/types"; import { getFavoriteWalletId } from "../../../../store/reducers/wallet/wallets"; -import variables from "../../../../theme/variables"; import { CreditCardPaymentMethod } from "../../../../types/pagopa"; import { TestID } from "../../../../types/WithTestID"; import { isPaymentMethodExpired } from "../../../../utils/paymentMethod"; @@ -22,6 +20,7 @@ import BaseCardComponent from "../../component/card/BaseCardComponent"; import { BlurredPan } from "../../component/card/BlurredPan"; import { BrandImage } from "../../component/card/BrandImage"; import { VSpacer } from "../../../../components/core/spacer/Spacer"; +import { Icon } from "../../../../components/core/icons/Icon"; type OwnProps = { creditCard: CreditCardPaymentMethod; @@ -81,7 +80,7 @@ const topLeft = (

{pot.getOrElse(favorite, false) && ( - + )} ); diff --git a/ts/features/wallet/onboarding/bancomat/components/BankPreviewItem.tsx b/ts/features/wallet/onboarding/bancomat/components/BankPreviewItem.tsx index 72af68c86fd..06bc86224eb 100644 --- a/ts/features/wallet/onboarding/bancomat/components/BankPreviewItem.tsx +++ b/ts/features/wallet/onboarding/bancomat/components/BankPreviewItem.tsx @@ -7,10 +7,9 @@ import { Abi } from "../../../../../../definitions/pagopa/walletv2/Abi"; import ButtonDefaultOpacity from "../../../../../components/ButtonDefaultOpacity"; import { VSpacer } from "../../../../../components/core/spacer/Spacer"; import { LabelSmall } from "../../../../../components/core/typography/LabelSmall"; -import { IOColors } from "../../../../../components/core/variables/IOColors"; -import IconFont from "../../../../../components/ui/IconFont"; import I18n from "../../../../../i18n"; import { useImageResize } from "../screens/hooks/useImageResize"; +import { Icon } from "../../../../../components/core/icons/Icon"; type Props = { // TODO: change bank in info and use a generic type @@ -93,7 +92,7 @@ export const BankPreviewItem: React.FunctionComponent = ( - + ) : ( = (props: Props) => { {isBancomatBlocked(props.pan) ? ( - + {I18n.t("wallet.onboarding.bancomat.add.blocked")} ) : ( diff --git a/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx b/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx index ceb32c9c28a..ccdaa8d4cff 100644 --- a/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx +++ b/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx @@ -16,11 +16,9 @@ import { H1 } from "../../../../../components/core/typography/H1"; import { H3 } from "../../../../../components/core/typography/H3"; import { H4 } from "../../../../../components/core/typography/H4"; import { H5 } from "../../../../../components/core/typography/H5"; -import { IOColors } from "../../../../../components/core/variables/IOColors"; import { IOStyles } from "../../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent"; import FooterWithButtons from "../../../../../components/ui/FooterWithButtons"; -import IconFont from "../../../../../components/ui/IconFont"; import I18n from "../../../../../i18n"; import { IOStackNavigationProp } from "../../../../../navigation/params/AppParamsList"; import { @@ -32,6 +30,7 @@ import { emptyContextualHelp } from "../../../../../utils/emptyContextualHelp"; import { cancelButtonProps } from "../../../../bonus/bonusVacanze/components/buttons/ButtonConfigurations"; import { PaymentMethodOnboardingCoBadgeParamsList } from "../navigation/params"; import { walletAddCoBadgeStart } from "../store/actions"; +import { Icon } from "../../../../../components/core/icons/Icon"; type Props = ReturnType & ReturnType & { @@ -84,7 +83,7 @@ const renderListItem = (cardPathItem: ListRenderItemInfo) => ( {cardPathItem.item.title}
- +
= (props: Props) => { {isCoBadgeOrPrivativeBlocked(props.pan) ? ( - + {blockedCard} ) : ( diff --git a/ts/features/wallet/onboarding/paypal/components/PspInfoBottomSheet.tsx b/ts/features/wallet/onboarding/paypal/components/PspInfoBottomSheet.tsx index d4aa7c4a505..a0e51cf5c1a 100644 --- a/ts/features/wallet/onboarding/paypal/components/PspInfoBottomSheet.tsx +++ b/ts/features/wallet/onboarding/paypal/components/PspInfoBottomSheet.tsx @@ -4,15 +4,13 @@ import { View, StyleSheet } from "react-native"; import { NonNegativeNumber } from "@pagopa/ts-commons/lib/numbers"; import { TouchableWithoutFeedback } from "@gorhom/bottom-sheet"; import I18n from "../../../../../i18n"; -import MoneyDownIcon from "../../../../../../img/wallet/payment-methods/paypal/money_down.svg"; -import LabelIcon from "../../../../../../img/wallet/payment-methods/paypal/label.svg"; -import EditIcon from "../../../../../../img/wallet/payment-methods/paypal/edit.svg"; import { formatNumberCentsToAmount } from "../../../../../utils/stringBuilder"; import { Body } from "../../../../../components/core/typography/Body"; import { IOStyles } from "../../../../../components/core/variables/IOStyles"; import { Label } from "../../../../../components/core/typography/Label"; import { Link } from "../../../../../components/core/typography/Link"; import { openWebUrl } from "../../../../../utils/url"; +import { Icon } from "../../../../../components/core/icons/Icon"; const styles = StyleSheet.create({ rowContainer: { @@ -34,7 +32,7 @@ const iconSize = 24; // icon and description const getItem = (props: Props) => [ { - icon: , + icon: , description: ( {I18n.t( @@ -44,7 +42,7 @@ const getItem = (props: Props) => [ ) }, { - icon: , + icon: , description: ( {I18n.t( @@ -60,7 +58,7 @@ const getItem = (props: Props) => [ ) }, { - icon: , + icon: , description: ( - + {bottomSheet} diff --git a/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PspRadioItem.test.tsx.snap b/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PspRadioItem.test.tsx.snap index 903c09a1953..8dc6b0b3a3c 100644 --- a/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PspRadioItem.test.tsx.snap +++ b/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PspRadioItem.test.tsx.snap @@ -66,38 +66,73 @@ exports[`PspRadioItem match snapshot 1`] = ` } testID="infoIconTestID" > - -  - + + + + + - + > + + + + - + > + + + + - + > + + + + + = ( /> {isBlocked && ( - + {blockedCard} )} diff --git a/ts/features/wallet/paypal/PaypalCard.tsx b/ts/features/wallet/paypal/PaypalCard.tsx index 7c7389e41e0..582296addd9 100644 --- a/ts/features/wallet/paypal/PaypalCard.tsx +++ b/ts/features/wallet/paypal/PaypalCard.tsx @@ -6,15 +6,14 @@ import paypalLogoMin from "../../../../img/wallet/cards-icons/paypal_card.png"; import paypalLogoExt from "../../../../img/wallet/payment-methods/paypal-logo.png"; import { Body } from "../../../components/core/typography/Body"; import { IOStyles } from "../../../components/core/variables/IOStyles"; -import IconFont from "../../../components/ui/IconFont"; import I18n from "../../../i18n"; import { GlobalState } from "../../../store/reducers/types"; import { getFavoriteWalletId } from "../../../store/reducers/wallet/wallets"; -import variables from "../../../theme/variables"; import { PayPalPaymentMethod } from "../../../types/pagopa"; import { getPaypalAccountEmail } from "../../../utils/paypal"; import BaseCardComponent from "../component/card/BaseCardComponent"; import { BrandImage } from "../component/card/BrandImage"; +import { Icon } from "../../../components/core/icons/Icon"; type Props = { paypal: PayPalPaymentMethod; @@ -46,9 +45,7 @@ const topLeft = (isFavourite: boolean) => ( - {isFavourite && ( - - )} + {isFavourite && } ); diff --git a/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx b/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx index 23c206667be..6d9b111dd3f 100644 --- a/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx +++ b/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx @@ -19,7 +19,6 @@ import { Label } from "../../../../components/core/typography/Label"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; -import IconFont from "../../../../components/ui/IconFont"; import I18n from "../../../../i18n"; import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList"; import { WalletParamsList } from "../../../../navigation/params/WalletParamsList"; @@ -29,7 +28,6 @@ import { } from "../../../../store/actions/wallet/payment"; import { useIOSelector } from "../../../../store/hooks"; import { pspV2ListSelector } from "../../../../store/reducers/wallet/payment"; -import customVariables from "../../../../theme/variables"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder"; import { LoadingErrorComponent } from "../../../bonus/bonusVacanze/components/loadingErrorScreen/LoadingErrorComponent"; @@ -41,6 +39,7 @@ import { } from "../../onboarding/paypal/components/PspRadioItem"; import { convertPspData } from "../../onboarding/paypal/store/transformers"; import { IOPayPalPsp } from "../../onboarding/paypal/types"; +import { Icon } from "../../../../components/core/icons/Icon"; const styles = StyleSheet.create({ radioListHeaderRightColumn: { @@ -145,12 +144,9 @@ const PspItem = (props: { psp: IOPayPalPsp; onPress: () => void }) => { - + + + ); diff --git a/ts/features/zendesk/components/ZendeskSupportComponent.tsx b/ts/features/zendesk/components/ZendeskSupportComponent.tsx index 3797c7cce48..8816e0ff9b5 100644 --- a/ts/features/zendesk/components/ZendeskSupportComponent.tsx +++ b/ts/features/zendesk/components/ZendeskSupportComponent.tsx @@ -10,7 +10,6 @@ import { H3 } from "../../../components/core/typography/H3"; import { H4 } from "../../../components/core/typography/H4"; import { Label } from "../../../components/core/typography/Label"; import { Link } from "../../../components/core/typography/Link"; -import { IOColors } from "../../../components/core/variables/IOColors"; import { zendeskPrivacyUrl } from "../../../config"; import I18n from "../../../i18n"; import { mixpanelTrack } from "../../../mixpanel"; @@ -85,7 +84,7 @@ const ZendeskSupportComponent = ({
- + diff --git a/ts/features/zendesk/screens/ZendeskAskPermissions.tsx b/ts/features/zendesk/screens/ZendeskAskPermissions.tsx index 139414c05d6..0d44b0cc2eb 100644 --- a/ts/features/zendesk/screens/ZendeskAskPermissions.tsx +++ b/ts/features/zendesk/screens/ZendeskAskPermissions.tsx @@ -3,17 +3,6 @@ import { constNull, pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import React, { useEffect } from "react"; import { SafeAreaView, ScrollView, View } from "react-native"; -import BatteryIcon from "../../../../img/assistance/battery.svg"; -import CardIcon from "../../../../img/assistance/card.svg"; -import EmailIcon from "../../../../img/assistance/email.svg"; -import GalleryIcon from "../../../../img/assistance/gallery.svg"; -import StockIcon from "../../../../img/assistance/giacenza.svg"; -import HistoryIcon from "../../../../img/assistance/history.svg"; -import InfoIcon from "../../../../img/assistance/info.svg"; -import LoginIcon from "../../../../img/assistance/login.svg"; -import NameSurnameIcon from "../../../../img/assistance/nameSurname.svg"; -import DeviceIcon from "../../../../img/assistance/telefonia.svg"; -import WebSiteIcon from "../../../../img/assistance/website.svg"; import { VSpacer } from "../../../components/core/spacer/Spacer"; import { H1 } from "../../../components/core/typography/H1"; import { H3 } from "../../../components/core/typography/H3"; @@ -73,6 +62,8 @@ import { zendeskSelectedCategorySelector, zendeskSelectedSubcategorySelector } from "../store/reducers"; +import { Icon } from "../../../components/core/icons/Icon"; +import { IOColors } from "../../../components/core/variables/IOColors"; /** * Transform an array of string into a Zendesk @@ -88,92 +79,92 @@ type ItemProps = { identityProvider: string; }; -const iconProps = { width: 24, height: 24 }; +const iconStyleProps = { size: 24, color: "blue" as IOColors }; const getItems = (props: ItemProps): ReadonlyArray => [ { id: "profileNameSurname", - icon: , + icon: , title: I18n.t("support.askPermissions.nameSurname"), value: props.nameSurname, testId: "profileNameSurname" }, { id: "profileFiscalCode", - icon: , + icon: , title: I18n.t("support.askPermissions.fiscalCode"), value: props.fiscalCode, testId: "profileFiscalCode" }, { id: "profileEmail", - icon: , + icon: , title: I18n.t("support.askPermissions.emailAddress"), value: props.email, testId: "profileEmail" }, { id: "galleryProminentDisclosure", - icon: , + icon: , title: I18n.t("support.askPermissions.prominentDisclosure"), value: I18n.t("support.askPermissions.prominentDisclosureData"), testId: "galleryProminentDisclosure" }, { id: "paymentIssues", - icon: , + icon: , title: I18n.t("support.askPermissions.stock"), value: I18n.t("support.askPermissions.stockValue"), testId: "paymentIssues" }, { id: "addCardIssues", - icon: , + icon: , title: I18n.t("support.askPermissions.card"), value: I18n.t("support.askPermissions.cardValue"), testId: "addCardIssues" }, { id: "addFciIssues", - icon: , + icon: , title: I18n.t("support.askPermissions.fci"), value: I18n.t("support.askPermissions.fciValue"), testId: "addFciIssues" }, { - icon: , + icon: , title: I18n.t("support.askPermissions.deviceAndOS"), value: props.deviceDescription, zendeskId: zendeskDeviceAndOSId, testId: "deviceAndOS" }, { - icon: , + icon: , title: I18n.t("support.askPermissions.devicePerformance"), value: I18n.t("support.askPermissions.devicePerformanceData"), testId: "devicePerformance" }, { - icon: , + icon: , title: I18n.t("support.askPermissions.ipAddress"), value: I18n.t("support.askPermissions.ipAddressValue"), testId: "ipAddress" }, { - icon: , + icon: , title: I18n.t("support.askPermissions.appVersionsHistory"), value: I18n.t("support.askPermissions.appVersionsHistoryValue"), testId: "appVersionsHistory" }, { - icon: , + icon: , title: I18n.t("support.askPermissions.identityProvider"), value: props.identityProvider, zendeskId: zendeskidentityProviderId, testId: "identityProvider" }, { - icon: , + icon: , title: I18n.t("support.askPermissions.navigationData"), value: I18n.t("support.askPermissions.navigationDataValue"), testId: "navigationData" @@ -361,11 +352,6 @@ const ZendeskAskPermissions = () => { diff --git a/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx b/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx index 046b7e13b0c..6b5bf58b7da 100644 --- a/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx +++ b/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx @@ -1,11 +1,8 @@ import { useNavigation } from "@react-navigation/native"; -import { constNull, pipe } from "fp-ts/lib/function"; +import { pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import React from "react"; import { SafeAreaView, ScrollView, View } from "react-native"; -import CardIcon from "../../../../img/assistance/card.svg"; -import EmailIcon from "../../../../img/assistance/email.svg"; -import NameSurnameIcon from "../../../../img/assistance/nameSurname.svg"; import { VSpacer } from "../../../components/core/spacer/Spacer"; import { H1 } from "../../../components/core/typography/H1"; import { H3 } from "../../../components/core/typography/H3"; @@ -33,6 +30,8 @@ import ZendeskItemPermissionComponent, { ItemPermissionProps } from "../components/ZendeskItemPermissionComponent"; import { ZendeskParamsList } from "../navigation/params"; +import { Icon } from "../../../components/core/icons/Icon"; +import { IOColors } from "../../../components/core/variables/IOColors"; export type ZendeskAskSeeReportsPermissionsNavigationParams = { assistanceForPayment: boolean; @@ -46,26 +45,26 @@ type ItemProps = { email?: string; }; -const iconProps = { width: 24, height: 24 }; +const iconStyleProps = { size: 24, color: "blue" as IOColors }; const getItems = (props: ItemProps): ReadonlyArray => [ { id: "profileNameSurname", - icon: , + icon: , title: I18n.t("support.askPermissions.nameSurname"), value: props.nameSurname, testId: "profileNameSurname" }, { id: "profileFiscalCode", - icon: , + icon: , title: I18n.t("support.askPermissions.fiscalCode"), value: props.fiscalCode, testId: "profileFiscalCode" }, { id: "profileEmail", - icon: , + icon: , title: I18n.t("support.askPermissions.emailAddress"), value: props.email, testId: "profileEmail" @@ -121,11 +120,6 @@ const ZendeskAskSeeReportsPermissions = (props: Props) => { diff --git a/ts/features/zendesk/screens/ZendeskChooseCategory.tsx b/ts/features/zendesk/screens/ZendeskChooseCategory.tsx index a71d785f428..41734cce784 100644 --- a/ts/features/zendesk/screens/ZendeskChooseCategory.tsx +++ b/ts/features/zendesk/screens/ZendeskChooseCategory.tsx @@ -14,12 +14,10 @@ import { H1 } from "../../../components/core/typography/H1"; import { H4 } from "../../../components/core/typography/H4"; import { IOStyles } from "../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../components/screens/BaseScreenComponent"; -import IconFont from "../../../components/ui/IconFont"; import I18n from "../../../i18n"; import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList"; import { toArray } from "../../../store/helpers/indexer"; import { useIOSelector } from "../../../store/hooks"; -import customVariables from "../../../theme/variables"; import { getFullLocale } from "../../../utils/locale"; import { addTicketCustomField, @@ -33,6 +31,7 @@ import { zendeskSupportFailure } from "../store/actions"; import { zendeskConfigSelector } from "../store/reducers"; +import { Icon } from "../../../components/core/icons/Icon"; export type ZendeskChooseCategoryNavigationParams = { assistanceForPayment: boolean; @@ -124,11 +123,7 @@ const ZendeskChooseCategory = (props: Props) => { {category.description[locale]}

- + @@ -140,10 +135,6 @@ const ZendeskChooseCategory = (props: Props) => { true - }} headerTitle={I18n.t("support.chooseCategory.header")} > diff --git a/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx b/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx index 9035b16f153..68dbb88fbd4 100644 --- a/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx +++ b/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx @@ -14,11 +14,9 @@ import { H1 } from "../../../components/core/typography/H1"; import { H4 } from "../../../components/core/typography/H4"; import { IOStyles } from "../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../components/screens/BaseScreenComponent"; -import IconFont from "../../../components/ui/IconFont"; import I18n from "../../../i18n"; import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList"; import { useIOSelector } from "../../../store/hooks"; -import customVariables from "../../../theme/variables"; import { getFullLocale } from "../../../utils/locale"; import { addTicketCustomField, @@ -30,6 +28,7 @@ import { zendeskSupportFailure } from "../store/actions"; import { zendeskSelectedCategorySelector } from "../store/reducers"; +import { Icon } from "../../../components/core/icons/Icon"; export type ZendeskChooseSubCategoryNavigationParams = { assistanceForPayment: boolean; @@ -112,26 +111,17 @@ const ZendeskChooseSubCategory = (props: Props) => { {subCategory.description[locale]}

- + ); }; - // The void customRightIcon is needed to have a centered header title return ( true - }} headerTitle={selectedCategory.description[locale]} > diff --git a/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx b/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx index 5cd2c70abcb..498f6733ce9 100644 --- a/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx +++ b/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx @@ -209,7 +209,7 @@ const ZendeskSupportHelpCenter = () => { showChat={false} customGoBack={} customRightIcon={{ - iconName: "io-close", + iconName: "legClose", onPress: workUnitCancel, accessibilityLabel: I18n.t("global.accessibility.contextualHelp.close") }} diff --git a/ts/screens/authentication/LandingScreen.tsx b/ts/screens/authentication/LandingScreen.tsx index 2e204015c92..9435d124f82 100644 --- a/ts/screens/authentication/LandingScreen.tsx +++ b/ts/screens/authentication/LandingScreen.tsx @@ -15,7 +15,7 @@ import sessionExpiredImg from "../../../img/landing/session_expired.png"; import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity"; import CieNotSupported from "../../components/cie/CieNotSupported"; import ContextualInfo from "../../components/ContextualInfo"; -import { VSpacer } from "../../components/core/spacer/Spacer"; +import { HSpacer, VSpacer } from "../../components/core/spacer/Spacer"; import { Link } from "../../components/core/typography/Link"; import { IOColors } from "../../components/core/variables/IOColors"; import { IOStyles } from "../../components/core/variables/IOStyles"; @@ -30,7 +30,6 @@ import BaseScreenComponent, { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent"; import SectionStatusComponent from "../../components/SectionStatus"; -import IconFont from "../../components/ui/IconFont"; import { LightModalContextInterface } from "../../components/ui/LightModal"; import I18n from "../../i18n"; import { mixpanelTrack } from "../../mixpanel"; @@ -57,6 +56,7 @@ import variables from "../../theme/variables"; import { ComponentProps } from "../../types/react"; import { isDevEnv } from "../../utils/environment"; import RootedDeviceModal from "../modal/RootedDeviceModal"; +import { Icon } from "../../components/core/icons"; import { SpidIdp } from "../../../definitions/content/SpidIdp"; type NavigationProps = IOStackNavigationRouteProps; @@ -301,10 +301,8 @@ class LandingScreen extends React.PureComponent { : "landing-button-login-spid" } > - + + {isCieSupported ? I18n.t("authentication.landing.loginCie") @@ -335,10 +333,11 @@ class LandingScreen extends React.PureComponent { : "landing-button-login-cie" } > - + {this.isCieSupported() ? I18n.t("authentication.landing.loginSpid") diff --git a/ts/screens/ingress/CheckBox.tsx b/ts/screens/ingress/CheckBox.tsx index 49920520d97..817f34668bd 100644 --- a/ts/screens/ingress/CheckBox.tsx +++ b/ts/screens/ingress/CheckBox.tsx @@ -1,14 +1,13 @@ import * as React from "react"; import { StyleSheet, View } from "react-native"; -import IconFont from "../../components/ui/IconFont"; import { IOColors, hexToRgba } from "../../components/core/variables/IOColors"; +import { Icon } from "../../components/core/icons"; type Props = { checked: boolean; }; const checkBoxColor = hexToRgba(IOColors.white, 0.15); -const checkBoxIcon = "io-tick-big"; const styles = StyleSheet.create({ base: { @@ -29,11 +28,7 @@ const styles = StyleSheet.create({ export const IngressCheckBox = (props: Props) => ( {props.checked && ( - + )} ); diff --git a/ts/screens/onboarding/OnboardingNotificationsPreferencesScreen.tsx b/ts/screens/onboarding/OnboardingNotificationsPreferencesScreen.tsx index d52cf81a1ee..b6b13ed631f 100644 --- a/ts/screens/onboarding/OnboardingNotificationsPreferencesScreen.tsx +++ b/ts/screens/onboarding/OnboardingNotificationsPreferencesScreen.tsx @@ -228,7 +228,7 @@ const OnboardingNotificationsPreferencesScreen = (props: Props) => { } /> - +
{I18n.t( "profile.main.privacy.shareData.screen.profileSettings" diff --git a/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx b/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx index 989f4c9b4f7..67177d90dc7 100644 --- a/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx +++ b/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx @@ -6,7 +6,6 @@ import { ServicesPreferencesModeEnum } from "../../../definitions/backend/Servic import { InfoBox } from "../../components/box/InfoBox"; import { VSpacer } from "../../components/core/spacer/Spacer"; import { H5 } from "../../components/core/typography/H5"; -import { IOColors } from "../../components/core/variables/IOColors"; import { IOStyles } from "../../components/core/variables/IOStyles"; import { withLoadingSpinner } from "../../components/helpers/withLoadingSpinner"; import BaseScreenComponent from "../../components/screens/BaseScreenComponent"; @@ -109,7 +108,7 @@ const OnboardingServicesPreferenceScreen = ( onSelectMode={handleOnSelectMode} showBadge={showBadge} /> - +
{I18n.t("profile.main.privacy.shareData.screen.profileSettings")}
diff --git a/ts/screens/onboarding/OnboardingShareDataScreen.tsx b/ts/screens/onboarding/OnboardingShareDataScreen.tsx index adc82aeb837..437b2bc5de2 100644 --- a/ts/screens/onboarding/OnboardingShareDataScreen.tsx +++ b/ts/screens/onboarding/OnboardingShareDataScreen.tsx @@ -61,7 +61,7 @@ const OnboardingShareDataScreen = (props: Props): React.ReactElement => { - + diff --git a/ts/screens/profile/CgnLandingPlayground.tsx b/ts/screens/profile/CgnLandingPlayground.tsx index 810b66831b5..e0abf3328cd 100644 --- a/ts/screens/profile/CgnLandingPlayground.tsx +++ b/ts/screens/profile/CgnLandingPlayground.tsx @@ -4,12 +4,12 @@ import { View, SafeAreaView, StyleSheet, TextInput } from "react-native"; import { Label } from "../../components/core/typography/Label"; import BaseScreenComponent from "../../components/screens/BaseScreenComponent"; import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity"; -import IconFont from "../../components/ui/IconFont"; import { IOStyles } from "../../components/core/variables/IOStyles"; import { H5 } from "../../components/core/typography/H5"; import WebviewComponent from "../../components/WebviewComponent"; import { IOColors } from "../../components/core/variables/IOColors"; import { VSpacer } from "../../components/core/spacer/Spacer"; +import { Icon } from "../../components/core/icons/Icon"; const styles = StyleSheet.create({ textInput: { padding: 1, borderWidth: 1, height: 30, color: IOColors.black }, @@ -63,12 +63,7 @@ const CgnLandingPlayground = () => { setLoadUri(navigationURI); }} > - + diff --git a/ts/screens/profile/EmailForwardingScreen.tsx b/ts/screens/profile/EmailForwardingScreen.tsx index 0cd5ce1d0cf..bd15ebd624f 100644 --- a/ts/screens/profile/EmailForwardingScreen.tsx +++ b/ts/screens/profile/EmailForwardingScreen.tsx @@ -67,7 +67,7 @@ function renderListItem( & { navigation: IOStackNavigationProp; @@ -102,7 +102,7 @@ const FiscalCodeScreen: React.FunctionComponent = (props: Props) => { accessibilityLabel={I18n.t("global.buttons.back")} accessibilityRole={"button"} > - + ); diff --git a/ts/screens/profile/LanguagesPreferencesScreen.tsx b/ts/screens/profile/LanguagesPreferencesScreen.tsx index 241f80462f4..108050cfe31 100644 --- a/ts/screens/profile/LanguagesPreferencesScreen.tsx +++ b/ts/screens/profile/LanguagesPreferencesScreen.tsx @@ -146,7 +146,7 @@ class LanguagesPreferencesScreen extends React.PureComponent { title={languageTitle} hideIcon={!isSelectedLanguage} iconSize={iconSize} - iconName={isSelectedLanguage ? "io-tick-big" : undefined} + iconName={isSelectedLanguage ? "legCompleted" : undefined} onPress={() => this.onLanguageSelected(lang)} accessible={true} accessibilityRole={"radio"} diff --git a/ts/screens/profile/WebPlayground.tsx b/ts/screens/profile/WebPlayground.tsx index 0de1d3a11da..20363b583be 100644 --- a/ts/screens/profile/WebPlayground.tsx +++ b/ts/screens/profile/WebPlayground.tsx @@ -12,11 +12,10 @@ import RegionServiceWebView from "../../components/RegionServiceWebView"; import { Dispatch } from "../../store/actions/types"; import { navigateBack } from "../../store/actions/navigation"; import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity"; -import IconFont from "../../components/ui/IconFont"; import { LabelledItem } from "../../components/LabelledItem"; import { showToast } from "../../utils/showToast"; -import { IOColors } from "../../components/core/variables/IOColors"; import { HSpacer, VSpacer } from "../../components/core/spacer/Spacer"; +import { Icon } from "../../components/core/icons/Icon"; type Props = ReturnType; @@ -87,12 +86,7 @@ const WebPlayground: React.FunctionComponent = (props: Props) => { style={styles.contentCenter} onPress={() => setLoadUri(navigationURI)} > - + diff --git a/ts/screens/profile/components/ShareDataComponent.tsx b/ts/screens/profile/components/ShareDataComponent.tsx index ba73664c581..7b47f4f9bc0 100644 --- a/ts/screens/profile/components/ShareDataComponent.tsx +++ b/ts/screens/profile/components/ShareDataComponent.tsx @@ -40,7 +40,7 @@ export const ShareDataComponent = (): React.ReactElement => { {I18n.t("profile.main.privacy.shareData.screen.description")} - + {I18n.t("profile.main.privacy.shareData.screen.why.description.one")} - + {`${I18n.t( "profile.main.privacy.shareData.screen.security.description.one" @@ -71,7 +71,7 @@ export const ShareDataComponent = (): React.ReactElement => { - + {I18n.t("profile.main.privacy.shareData.screen.gdpr.description.one")}
- + + + diff --git a/ts/screens/profile/playgrounds/MarkdownPlayground.tsx b/ts/screens/profile/playgrounds/MarkdownPlayground.tsx index 4243d1eebce..c78b0efbabb 100644 --- a/ts/screens/profile/playgrounds/MarkdownPlayground.tsx +++ b/ts/screens/profile/playgrounds/MarkdownPlayground.tsx @@ -8,10 +8,8 @@ import { MessageBodyMarkdown } from "../../../../definitions/backend/MessageBody import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity"; import { HSpacer, VSpacer } from "../../../components/core/spacer/Spacer"; import { Label } from "../../../components/core/typography/Label"; -import { IOColors } from "../../../components/core/variables/IOColors"; import { ExtractedCtaButton } from "../../../components/cta/ExtractedCtaButton"; import BaseScreenComponent from "../../../components/screens/BaseScreenComponent"; -import IconFont from "../../../components/ui/IconFont"; import Markdown from "../../../components/ui/Markdown"; import { CTA } from "../../../types/MessageCTA"; import { @@ -20,6 +18,7 @@ import { handleCtaAction } from "../../../utils/messages"; import { maybeNotNullyString } from "../../../utils/strings"; +import { Icon } from "../../../components/core/icons/Icon"; const styles = StyleSheet.create({ flex: { flex: 1 }, @@ -70,12 +69,7 @@ const MarkdownPlayground = () => { style={styles.contentCenter} onPress={() => setMarkdownText(inputText)} > - + diff --git a/ts/screens/services/ServicesHomeScreen.tsx b/ts/screens/services/ServicesHomeScreen.tsx index 5d336884ee0..b14620c0b0d 100644 --- a/ts/screens/services/ServicesHomeScreen.tsx +++ b/ts/screens/services/ServicesHomeScreen.tsx @@ -51,7 +51,6 @@ import SectionStatusComponent from "../../components/SectionStatus"; import ServicesSearch from "../../components/services/ServicesSearch"; import TouchableDefaultOpacity from "../../components/TouchableDefaultOpacity"; import FocusAwareStatusBar from "../../components/ui/FocusAwareStatusBar"; -import IconFont from "../../components/ui/IconFont"; import { LightModalContextInterface } from "../../components/ui/LightModal"; import I18n from "../../i18n"; import { @@ -102,6 +101,7 @@ import { getProfileChannelsforServicesList } from "../../utils/profile"; import { showToast } from "../../utils/showToast"; +import { Icon } from "../../components/core/icons"; import { ServiceDetailsScreenNavigationParams } from "./ServiceDetailsScreen"; type OwnProps = IOStackNavigationRouteProps; @@ -336,7 +336,7 @@ class ServicesHomeScreen extends React.Component { accessibilityLabel={I18n.t("services.accessibility.edit")} onPress={this.props.navigateToServicePreference} > - + diff --git a/ts/screens/wallet/ConfirmCardDetailsScreen.tsx b/ts/screens/wallet/ConfirmCardDetailsScreen.tsx index 3d558c73b1a..3af336329e0 100644 --- a/ts/screens/wallet/ConfirmCardDetailsScreen.tsx +++ b/ts/screens/wallet/ConfirmCardDetailsScreen.tsx @@ -19,7 +19,6 @@ import { HSpacer, VSpacer } from "../../components/core/spacer/Spacer"; import { H1 } from "../../components/core/typography/H1"; import { H4 } from "../../components/core/typography/H4"; import { H5 } from "../../components/core/typography/H5"; -import { IOColors } from "../../components/core/variables/IOColors"; import { IOStyles } from "../../components/core/variables/IOStyles"; import { withLoadingSpinner } from "../../components/helpers/withLoadingSpinner"; import { renderInfoRasterImage } from "../../components/infoScreen/imageRendering"; @@ -272,11 +271,7 @@ class ConfirmCardDetailsScreen extends React.Component { hideFavoriteIcon={true} /> - +
{I18n.t("wallet.saveCard.notice")}
 diff --git a/ts/screens/wallet/PaymentHistoryDetailsScreen.tsx b/ts/screens/wallet/PaymentHistoryDetailsScreen.tsx index ccca0d97ff8..4d4422020bb 100644 --- a/ts/screens/wallet/PaymentHistoryDetailsScreen.tsx +++ b/ts/screens/wallet/PaymentHistoryDetailsScreen.tsx @@ -10,13 +10,12 @@ import { ToolEnum } from "../../../definitions/content/AssistanceToolConfig"; import { ZendeskCategory } from "../../../definitions/content/ZendeskCategory"; import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity"; import CopyButtonComponent from "../../components/CopyButtonComponent"; -import { VSpacer } from "../../components/core/spacer/Spacer"; +import { HSpacer, VSpacer } from "../../components/core/spacer/Spacer"; import { Body } from "../../components/core/typography/Body"; import { Label } from "../../components/core/typography/Label"; import { IOStyles } from "../../components/core/variables/IOStyles"; import ItemSeparatorComponent from "../../components/ItemSeparatorComponent"; import BaseScreenComponent from "../../components/screens/BaseScreenComponent"; -import IconFont from "../../components/ui/IconFont"; import { getPaymentHistoryInfo } from "../../components/wallet/PaymentsHistoryList"; import { paymentStatusType, @@ -62,6 +61,7 @@ import { zendeskPaymentStartOrigin } from "../../utils/supportAssistance"; import { H2 } from "../../components/core/typography/H2"; +import { Icon } from "../../components/core/icons/Icon"; export type PaymentHistoryDetailsScreenNavigationParams = Readonly<{ payment: PaymentHistory; @@ -283,7 +283,8 @@ class PaymentHistoryDetailsScreen extends React.Component { bordered={true} block={true} > - + + {I18n.t("payment.details.info.buttons.help")} diff --git a/ts/screens/wallet/WalletHomeScreen.tsx b/ts/screens/wallet/WalletHomeScreen.tsx index ad6276ff614..6413ea3e474 100644 --- a/ts/screens/wallet/WalletHomeScreen.tsx +++ b/ts/screens/wallet/WalletHomeScreen.tsx @@ -13,7 +13,7 @@ import { connect } from "react-redux"; import { BonusActivationWithQrCode } from "../../../definitions/bonus_vacanze/BonusActivationWithQrCode"; import { TypeEnum } from "../../../definitions/pagopa/Wallet"; import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity"; -import { VSpacer } from "../../components/core/spacer/Spacer"; +import { HSpacer, VSpacer } from "../../components/core/spacer/Spacer"; import { Body } from "../../components/core/typography/Body"; import { H3 } from "../../components/core/typography/H3"; import { IOColors } from "../../components/core/variables/IOColors"; @@ -28,7 +28,6 @@ import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreen import { EdgeBorderComponent } from "../../components/screens/EdgeBorderComponent"; import { ScreenContentRoot } from "../../components/screens/ScreenContent"; import SectionStatusComponent from "../../components/SectionStatus"; -import IconFont from "../../components/ui/IconFont"; import { LightModalContextInterface } from "../../components/ui/LightModal"; import SectionCardComponent, { SectionCardStatus @@ -107,6 +106,8 @@ import customVariables from "../../theme/variables"; import { Transaction, Wallet } from "../../types/pagopa"; import { isStrictSome } from "../../utils/pot"; import { showToast } from "../../utils/showToast"; +import { Icon } from "../../components/core/icons"; +import { IOStyles } from "../../components/core/variables/IOStyles"; export type WalletHomeNavigationParams = Readonly<{ newMethodAdded: boolean; @@ -124,12 +125,6 @@ type Props = ReturnType & TabBarItemPressType; const styles = StyleSheet.create({ - white: { - color: IOColors.white - }, - flex1: { - flex: 1 - }, emptyListWrapper: { padding: customVariables.contentPadding, alignItems: "center" @@ -417,7 +412,7 @@ class WalletHomeScreen extends React.PureComponent { return ( {renderHelp && this.renderHelpMessage()} @@ -496,8 +491,8 @@ class WalletHomeScreen extends React.PureComponent { } activeOpacity={1} > - - {/* ButtonText */} + + {I18n.t("wallet.payNotice")} ); diff --git a/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptDetailScreen.tsx b/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptDetailScreen.tsx index afd36a9263f..4b2b4037ab3 100644 --- a/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptDetailScreen.tsx +++ b/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptDetailScreen.tsx @@ -5,7 +5,7 @@ import { View, StyleSheet } from "react-native"; import { useDispatch } from "react-redux"; import { ToolEnum } from "../../../../definitions/content/AssistanceToolConfig"; import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity"; -import { VSpacer } from "../../../components/core/spacer/Spacer"; +import { HSpacer, VSpacer } from "../../../components/core/spacer/Spacer"; import { Body } from "../../../components/core/typography/Body"; import { H3 } from "../../../components/core/typography/H3"; import { Label } from "../../../components/core/typography/Label"; @@ -13,7 +13,6 @@ import { IOStyles } from "../../../components/core/variables/IOStyles"; import ItemSeparatorComponent from "../../../components/ItemSeparatorComponent"; import { BadgeComponent } from "../../../components/screens/BadgeComponent"; import BaseScreenComponent from "../../../components/screens/BaseScreenComponent"; -import IconFont from "../../../components/ui/IconFont"; import { getPanDescription } from "../../../components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList"; import { SlidedContentComponent } from "../../../components/wallet/SlidedContentComponent"; import { @@ -39,6 +38,7 @@ import { zendeskCategoryId, zendeskPaymentMethodCategory } from "../../../utils/supportAssistance"; +import { Icon } from "../../../components/core/icons/Icon"; export type CreditCardOnboardingAttemptDetailScreenNavigationParams = Readonly<{ attempt: CreditCardInsertion; @@ -131,7 +131,8 @@ const CreditCardOnboardingAttemptDetailScreen = (props: Props) => { bordered={true} block={true} > - + + {I18n.t("payment.details.info.buttons.help")} diff --git a/ts/screens/wallet/payment/CodesPositionManualPaymentModal.tsx b/ts/screens/wallet/payment/CodesPositionManualPaymentModal.tsx index 8e657d49a61..aeb0746860e 100644 --- a/ts/screens/wallet/payment/CodesPositionManualPaymentModal.tsx +++ b/ts/screens/wallet/payment/CodesPositionManualPaymentModal.tsx @@ -10,8 +10,8 @@ import { import ImageZoom from "react-native-image-pan-zoom"; import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity"; +import { Icon } from "../../../components/core/icons/Icon"; import AppHeader from "./../../../components/ui/AppHeader"; -import IconFont from "./../../../components/ui/IconFont"; type Props = { onCancel: () => void; @@ -63,7 +63,7 @@ class CodesPositionManualPaymentModal extends React.PureComponent { onPress={this.props.onCancel} transparent={true} > - + diff --git a/ts/screens/wallet/payment/ConfirmPaymentMethodScreen.tsx b/ts/screens/wallet/payment/ConfirmPaymentMethodScreen.tsx index 9f534c893f8..d6cef33219d 100644 --- a/ts/screens/wallet/payment/ConfirmPaymentMethodScreen.tsx +++ b/ts/screens/wallet/payment/ConfirmPaymentMethodScreen.tsx @@ -12,7 +12,7 @@ import CardIcon from "../../../../img/wallet/card.svg"; import BancomatPayLogo from "../../../../img/wallet/payment-methods/bancomat_pay.svg"; import PaypalLogo from "../../../../img/wallet/payment-methods/paypal/paypal_logo.svg"; import TagIcon from "../../../../img/wallet/tag.svg"; -import { VSpacer } from "../../../components/core/spacer/Spacer"; +import { HSpacer, VSpacer } from "../../../components/core/spacer/Spacer"; import { H1 } from "../../../components/core/typography/H1"; import { H3 } from "../../../components/core/typography/H3"; import { H4 } from "../../../components/core/typography/H4"; @@ -25,7 +25,6 @@ import BaseScreenComponent, { ContextualHelpPropsMarkdown } from "../../../components/screens/BaseScreenComponent"; import FooterWithButtons from "../../../components/ui/FooterWithButtons"; -import IconFont from "../../../components/ui/IconFont"; import { LightModalContextInterface } from "../../../components/ui/LightModal"; import { getCardIconFromBrandLogo } from "../../../components/wallet/card/Logo"; import { PayWebViewModal } from "../../../components/wallet/PayWebViewModal"; @@ -92,6 +91,7 @@ import { getLookUpIdPO } from "../../../utils/pmLookUpId"; import { showToast } from "../../../utils/showToast"; import { formatNumberCentsToAmount } from "../../../utils/stringBuilder"; import { openWebUrl } from "../../../utils/url"; +import { Icon } from "../../../components/core/icons/Icon"; // temporary feature flag since this feature is still WIP // (missing task to complete https://pagopa.atlassian.net/browse/IA-684?filter=10121) @@ -129,8 +129,6 @@ const styles = StyleSheet.create({ alignItems: "center" }, - iconRowText: { marginLeft: 8 }, - flex: { flex: 1 } }); @@ -405,19 +403,9 @@ const ConfirmPaymentMethodScreen: React.FC = (props: Props) => { - - -

+ + +

{I18n.t("wallet.ConfirmPayment.paymentInformations")}

@@ -441,12 +429,8 @@ const ConfirmPaymentMethodScreen: React.FC = (props: Props) => { - -

+ +

{I18n.t("wallet.ConfirmPayment.payWith")}

@@ -468,12 +452,8 @@ const ConfirmPaymentMethodScreen: React.FC = (props: Props) => { - -

+ +

{I18n.t("wallet.ConfirmPayment.transactionCosts")}

diff --git a/ts/screens/wallet/payment/components/TransactionSummary.tsx b/ts/screens/wallet/payment/components/TransactionSummary.tsx index 07323c08cb0..7ed4f7791e9 100644 --- a/ts/screens/wallet/payment/components/TransactionSummary.tsx +++ b/ts/screens/wallet/payment/components/TransactionSummary.tsx @@ -12,7 +12,6 @@ import { Body } from "../../../../components/core/typography/Body"; import { H4 } from "../../../../components/core/typography/H4"; import { IOColors } from "../../../../components/core/variables/IOColors"; import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity"; -import IconFont from "../../../../components/ui/IconFont"; import { MultiImage } from "../../../../components/ui/MultiImage"; import I18n from "../../../../i18n"; import { PaymentState } from "../../../../store/reducers/wallet/payment"; @@ -26,6 +25,7 @@ import { } from "../../../../utils/stringBuilder"; import { usePaymentAmountInfoBottomSheet } from "../hooks/usePaymentAmountInfoBottomSheet"; import { getRecepientName } from "../../../../utils/strings"; +import { Icon } from "../../../../components/core/icons/Icon"; const styles = StyleSheet.create({ row: { @@ -91,7 +91,7 @@ const InfoButton = (props: { onPress: () => void }) => ( )} accessibilityRole={"button"} > - + ); diff --git a/ts/screens/wallet/payment/components/TransactionSummaryStatus.tsx b/ts/screens/wallet/payment/components/TransactionSummaryStatus.tsx index c6e95cb7516..bb9ec737976 100644 --- a/ts/screens/wallet/payment/components/TransactionSummaryStatus.tsx +++ b/ts/screens/wallet/payment/components/TransactionSummaryStatus.tsx @@ -2,18 +2,17 @@ import * as O from "fp-ts/lib/Option"; import * as React from "react"; import { View } from "react-native"; import { LabelSmall } from "../../../../components/core/typography/LabelSmall"; -import { IOColors } from "../../../../components/core/variables/IOColors"; import StatusContent from "../../../../components/SectionStatus/StatusContent"; import I18n from "../../../../i18n"; import { getV2ErrorMainType } from "../../../../utils/payment"; import { TransactionSummaryError } from "../NewTransactionSummaryScreen"; +import { IOIcons } from "../../../../components/core/icons"; type StatusContentProps = { viewRef: React.RefObject; backgroundColor: "orange" | "aqua"; - iconName: string; - iconColor: string; - labelColor: "white" | "bluegreyDark"; + iconName: IOIcons; + foregroundColor: "white" | "bluegreyDark"; line1: string; line2?: string; }; @@ -22,17 +21,16 @@ export const renderStatusContent = (props: StatusContentProps) => ( - + {props.line1} {props.line2 && ( - + {"\n"} {props.line2} @@ -62,9 +60,8 @@ export const TransactionSummaryStatus = (props: { statusContentProps = { viewRef, backgroundColor: "orange", - labelColor: "white", - iconName: "io-notice", - iconColor: IOColors.white, + foregroundColor: "white", + iconName: "notice", line1: I18n.t("wallet.errors.TECHNICAL"), line2: I18n.t("wallet.errors.contactECsubtitle") }; @@ -73,9 +70,8 @@ export const TransactionSummaryStatus = (props: { statusContentProps = { viewRef, backgroundColor: "orange", - labelColor: "white", - iconName: "io-notice", - iconColor: IOColors.white, + foregroundColor: "white", + iconName: "notice", line1: I18n.t("wallet.errors.REVOKED"), line2: I18n.t("wallet.errors.contactECsubtitle") }; @@ -84,9 +80,8 @@ export const TransactionSummaryStatus = (props: { statusContentProps = { viewRef, backgroundColor: "orange", - labelColor: "white", - iconName: "io-notice", - iconColor: IOColors.white, + foregroundColor: "white", + iconName: "notice", line1: I18n.t("wallet.errors.EXPIRED"), line2: I18n.t("wallet.errors.contactECsubtitle") }; @@ -95,9 +90,8 @@ export const TransactionSummaryStatus = (props: { statusContentProps = { viewRef, backgroundColor: "orange", - labelColor: "white", - iconName: "io-notice", - iconColor: IOColors.white, + foregroundColor: "white", + iconName: "notice", line1: I18n.t("wallet.errors.ONGOING"), line2: I18n.t("wallet.errors.ONGOING_SUBTITLE") }; @@ -106,9 +100,8 @@ export const TransactionSummaryStatus = (props: { statusContentProps = { viewRef, backgroundColor: "aqua", - iconName: "io-complete", - iconColor: IOColors.bluegreyDark, - labelColor: "bluegreyDark", + iconName: "ok", + foregroundColor: "bluegreyDark", line1: I18n.t("wallet.errors.DUPLICATED") }; break; @@ -116,9 +109,8 @@ export const TransactionSummaryStatus = (props: { statusContentProps = { viewRef, backgroundColor: "orange", - iconName: "io-notice", - iconColor: IOColors.white, - labelColor: "white", + iconName: "notice", + foregroundColor: "white", line1: I18n.t("wallet.errors.TECHNICAL"), line2: I18n.t("wallet.errors.GENERIC_ERROR_SUBTITLE") }; diff --git a/ts/theme/variables.ts b/ts/theme/variables.ts index 5fd5fccdbf9..bc6d9968365 100644 --- a/ts/theme/variables.ts +++ b/ts/theme/variables.ts @@ -85,15 +85,6 @@ const customVariables = Object.assign(materialVariables, { iconFamily: "Entypo" /* NB Theme variable, don't remove */, iconSizeBase: 24, - get iconSize2(): number { - return this.iconSizeBase * (5 / 6); - }, - get iconSize3(): number { - return this.iconSizeBase * 1; - }, - get iconSize6(): number { - return this.iconSizeBase * 2; - }, // Content contentPadding: 24, contentPaddingLarge: 48,