From 95301c704113859d7a0ab6f6cdff20473bee720e Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 28 Jul 2022 15:54:41 +0200 Subject: [PATCH] chore: [IAI-214,IAI-226] Color values inventory + Update references to white color (#4057) * Delete NativeBase `View` component, replace with native one * Remove broken link to Invision * Remove unused variable in the theme variables' file * Improve visual appearance of colors in UI showroom * Add IOColorGradients object, add relative UI Showroom Item to display it * Add all the gradients used in the app * Add all remaining color values from generic `variables` object and other code blocks * Replace white `brandPrimaryInverted` color with `white` * Replace `colorWhite` references with new ones from the `IOColors` object * Restore `View` from `native-base` to avoid a worse view of UI showroom page * Resolve lint errors * Resolve TS compilation errors Co-authored-by: Cristiano Tofani --- img/app-logo.svg | 1 + ts/components/BetaTestingOverlay.tsx | 4 +- ts/components/ButtonWithImage.tsx | 7 +- ts/components/CiePinpad/index.tsx | 3 +- ts/components/ExperimentalFeaturesBanner.tsx | 9 +- ts/components/FiscalCodeLandscapeOverlay.tsx | 3 +- ts/components/GoBackButton.tsx | 3 +- ts/components/IdpSuccessfulAuthentication.tsx | 3 +- ts/components/ListSelectionBar.tsx | 3 +- ts/components/Pinpad/KeyPad.tsx | 5 +- .../RemindEmailValidationOverlay.tsx | 3 +- ts/components/cie/CieReadingCardAnimation.tsx | 3 +- ts/components/core/variables/IOColors.ts | 111 ++++++++++++++-- .../MedicalPrescriptionDueDateBar.tsx | 5 +- ...edicalPrescriptionIdentifiersComponent.tsx | 3 +- ts/components/messages/MessageAgenda.tsx | 7 +- ts/components/messages/MessageDueDateBar.tsx | 4 +- ts/components/messages/MessageListCTABar.tsx | 3 +- .../paginated/MessageDetail/DueDateBar.tsx | 4 +- .../MedicalPrescriptionDueDateBar.tsx | 5 +- ts/components/screens/BaseHeader.tsx | 2 +- ts/components/screens/DarkLayout.tsx | 1 + ts/components/screens/ScreenContentHeader.tsx | 6 +- ts/components/ui/BoxedRefreshIndicator.tsx | 4 +- ts/components/ui/Markdown/index.tsx | 2 +- ts/components/ui/RefreshIndicator.tsx | 3 +- .../wallet/AddPaymentMethodButton.tsx | 9 +- ts/components/wallet/CameraMarker.tsx | 3 +- ts/components/wallet/PaymentsHistoryList.tsx | 3 +- .../wallet/SlidedContentComponent.tsx | 3 +- ts/components/wallet/TransactionsList.tsx | 5 +- ts/components/wallet/WalletHomeHeader.tsx | 2 +- ts/components/wallet/WalletLayout.tsx | 5 +- .../wallet/card/CardComponent.style.ts | 5 +- .../wallet/card/SectionCardComponent.tsx | 7 +- .../CreditCardAttemptsList.tsx | 3 +- .../bonusVacanze/components/ActiveBonus.tsx | 15 +-- .../components/BonusCardComponent.tsx | 7 +- .../screens/AvailableBonusScreen.tsx | 3 +- .../bonus/cgn/screens/CgnDetailScreen.tsx | 1 + ts/features/bonus/cgn/utils/filters.ts | 10 ++ ts/navigation/TabNavigator.tsx | 2 +- ts/screens/authentication/LandingScreen.tsx | 5 +- .../cie/CiePinLockedTemporarilyScreen.tsx | 4 +- ts/screens/ingress/CheckBox.tsx | 4 +- ts/screens/messages/MessagesHomeScreen.tsx | 6 +- .../messages/paginated/MessagesHomeScreen.tsx | 8 +- ts/screens/modal/IdentificationModal.tsx | 7 +- ts/screens/profile/CgnLandingPlayground.tsx | 3 +- ts/screens/profile/FiscalCodeScreen.tsx | 10 +- ts/screens/profile/ProfileMainScreen.tsx | 4 +- ts/screens/profile/WebPlayground.tsx | 4 +- ts/screens/services/ServicesHomeScreen.tsx | 6 +- ts/screens/showroom/Showroom.tsx | 4 +- ts/screens/showroom/ShowroomSection.tsx | 18 ++- ts/screens/showroom/core/ColorsShowroom.tsx | 121 ++++++++++++++---- .../showroom/core/SelectionShowroom.tsx | 3 +- .../showroom/core/TypographyShowRoom.tsx | 5 +- ts/screens/wallet/AddCardScreen.tsx | 3 +- ts/screens/wallet/PaymentsHistoryScreen.tsx | 3 +- ts/screens/wallet/WalletHomeScreen.tsx | 5 +- .../CreditCardOnboardingAttemptsScreen.tsx | 3 +- .../payment/ManualDataInsertionScreen.tsx | 4 +- .../wallet/payment/ScanQrCodeScreen.tsx | 9 +- ts/theme/components/Button.ts | 33 ++--- ts/theme/components/Header.ts | 5 +- ts/theme/components/Text.ts | 5 +- ts/theme/variables.ts | 15 +-- 68 files changed, 397 insertions(+), 190 deletions(-) diff --git a/img/app-logo.svg b/img/app-logo.svg index 6df3a708eb3..71c7b51020d 100644 --- a/img/app-logo.svg +++ b/img/app-logo.svg @@ -7,6 +7,7 @@ + diff --git a/ts/components/BetaTestingOverlay.tsx b/ts/components/BetaTestingOverlay.tsx index bec195c542b..564ed55ac48 100644 --- a/ts/components/BetaTestingOverlay.tsx +++ b/ts/components/BetaTestingOverlay.tsx @@ -7,7 +7,7 @@ import { TouchableOpacity } from "react-native-gesture-handler"; import { getAppVersion } from "../utils/appVersion"; import { Label } from "../components/core/typography/Label"; import { Body } from "../components/core/typography/Body"; -import customVariables from "../theme/variables"; +import { IOColors } from "../components/core/variables/IOColors"; const styles = StyleSheet.create({ versionContainer: { @@ -25,7 +25,7 @@ const styles = StyleSheet.create({ }, versionText: { padding: 2, - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, textAlign: "center" } }); diff --git a/ts/components/ButtonWithImage.tsx b/ts/components/ButtonWithImage.tsx index 18ce0c42d3a..9fb6a79d8d5 100644 --- a/ts/components/ButtonWithImage.tsx +++ b/ts/components/ButtonWithImage.tsx @@ -5,6 +5,7 @@ import customVariables from "../theme/variables"; import { WithTestID } from "../types/WithTestID"; import ButtonDefaultOpacity from "./ButtonDefaultOpacity"; import IconFont from "./ui/IconFont"; +import { IOColors } from "./core/variables/IOColors"; const styles = StyleSheet.create({ viewRL: { @@ -56,17 +57,17 @@ const darkStyles = StyleSheet.create({ }, icon: { - color: customVariables.colorWhite + color: IOColors.white }, text: { - color: customVariables.colorWhite + color: IOColors.white } }); const lightStyles = StyleSheet.create({ button: { - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, borderWidth: 1, borderColor: customVariables.brandPrimary }, diff --git a/ts/components/CiePinpad/index.tsx b/ts/components/CiePinpad/index.tsx index 2a831744b7b..0081cb3fdfa 100644 --- a/ts/components/CiePinpad/index.tsx +++ b/ts/components/CiePinpad/index.tsx @@ -5,6 +5,7 @@ import I18n from "../../i18n"; import customVariables from "../../theme/variables"; import InputPlaceHolder from "../Pinpad/InputPlaceholder"; import { INPUT_PLACEHOLDER_HEIGHT } from "../Pinpad/Placeholders"; +import { IOColors } from "../core/variables/IOColors"; type Props = { pinLength: number; @@ -21,7 +22,7 @@ const styles = StyleSheet.create({ text: { alignSelf: "center", justifyContent: "center", - color: customVariables.colorWhite + color: IOColors.white }, placeHolderStyle: { height: 4, diff --git a/ts/components/ExperimentalFeaturesBanner.tsx b/ts/components/ExperimentalFeaturesBanner.tsx index 785b872fe4f..67f7277ee3f 100644 --- a/ts/components/ExperimentalFeaturesBanner.tsx +++ b/ts/components/ExperimentalFeaturesBanner.tsx @@ -5,6 +5,7 @@ import { makeFontStyleObject } from "../theme/fonts"; import variables from "../theme/variables"; import IconFont from "./ui/IconFont"; import { Body } from "./core/typography/Body"; +import { IOColors } from "./core/variables/IOColors"; const styles = StyleSheet.create({ experimentalFeaturesBannerContainer: { @@ -23,18 +24,14 @@ const styles = StyleSheet.create({ }, experimentalFeaturesBannerMessage: { ...makeFontStyleObject(Platform.select, "600"), - color: variables.colorWhite + color: IOColors.white } }); const ExperimentalFeaturesBanner = ( - + diff --git a/ts/components/FiscalCodeLandscapeOverlay.tsx b/ts/components/FiscalCodeLandscapeOverlay.tsx index 7798c9f2d82..c131d733bdb 100644 --- a/ts/components/FiscalCodeLandscapeOverlay.tsx +++ b/ts/components/FiscalCodeLandscapeOverlay.tsx @@ -13,6 +13,7 @@ import customVariables from "../theme/variables"; import { useMaxBrightness } from "../utils/brightness"; import FiscalCodeComponent from "./FiscalCodeComponent"; import AppHeader from "./ui/AppHeader"; +import { IOColors } from "./core/variables/IOColors"; export type Props = Readonly<{ onCancel: () => void; @@ -86,7 +87,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 d40726daefe..ad751653da4 100644 --- a/ts/components/GoBackButton.tsx +++ b/ts/components/GoBackButton.tsx @@ -4,6 +4,7 @@ import { BackHandler, NativeEventSubscription } from "react-native"; import I18n from "../i18n"; import NavigationService from "../navigation/NavigationService"; import variables from "../theme/variables"; +import { IOColors } from "../components/core/variables/IOColors"; import ButtonDefaultOpacity from "./ButtonDefaultOpacity"; import IconFont from "./ui/IconFont"; @@ -63,7 +64,7 @@ class GoBackButton extends React.PureComponent { > ); diff --git a/ts/components/IdpSuccessfulAuthentication.tsx b/ts/components/IdpSuccessfulAuthentication.tsx index c25d6f40312..4867767fd7b 100644 --- a/ts/components/IdpSuccessfulAuthentication.tsx +++ b/ts/components/IdpSuccessfulAuthentication.tsx @@ -7,6 +7,7 @@ import { StatusBar, StyleSheet } from "react-native"; import variables from "../theme/variables"; import IconFont from "./ui/IconFont"; +import { IOColors } from "./core/variables/IOColors"; const styles = StyleSheet.create({ container: { @@ -25,6 +26,6 @@ export const IdpSuccessfulAuthentication = () => ( barStyle="light-content" backgroundColor={styles.container.backgroundColor} /> - + ); diff --git a/ts/components/ListSelectionBar.tsx b/ts/components/ListSelectionBar.tsx index f4a728f7fdf..bd489157d51 100644 --- a/ts/components/ListSelectionBar.tsx +++ b/ts/components/ListSelectionBar.tsx @@ -4,6 +4,7 @@ import { StyleSheet } from "react-native"; import I18n from "../i18n"; import customVariables from "../theme/variables"; import ButtonDefaultOpacity from "./ButtonDefaultOpacity"; +import { IOColors } from "./core/variables/IOColors"; const styles = StyleSheet.create({ buttonBar: { @@ -18,7 +19,7 @@ const styles = StyleSheet.create({ margin: 5 }, buttonBarCenter: { - backgroundColor: customVariables.colorWhite + backgroundColor: IOColors.white } }); diff --git a/ts/components/Pinpad/KeyPad.tsx b/ts/components/Pinpad/KeyPad.tsx index c854981a042..46298ff2a87 100644 --- a/ts/components/Pinpad/KeyPad.tsx +++ b/ts/components/Pinpad/KeyPad.tsx @@ -7,6 +7,7 @@ import { makeFontStyleObject } from "../../theme/fonts"; import customVariables from "../../theme/variables"; import ButtonDefaultOpacity from "../ButtonDefaultOpacity"; import StyledIconFont from "../ui/IconFont"; +import { IOColors } from "../core/variables/IOColors"; // left -> the string to represent as text // right -> the icon to represent with name and size @@ -49,7 +50,7 @@ const styles = StyleSheet.create({ marginBottom: -10 }, white: { - color: customVariables.colorWhite + color: IOColors.white }, buttonTextDigit: { fontSize: radius + 10 @@ -113,7 +114,7 @@ const renderPinCol = ( color={ buttonType === "light" ? customVariables.contentPrimaryBackground - : customVariables.colorWhite + : IOColors.white } /> ) diff --git a/ts/components/RemindEmailValidationOverlay.tsx b/ts/components/RemindEmailValidationOverlay.tsx index c4a08921561..aec39ee2adf 100644 --- a/ts/components/RemindEmailValidationOverlay.tsx +++ b/ts/components/RemindEmailValidationOverlay.tsx @@ -38,6 +38,7 @@ import { } from "../store/reducers/profile"; import { GlobalState } from "../store/reducers/types"; import customVariables from "../theme/variables"; +import { IOColors } from "../components/core/variables/IOColors"; import { isOnboardingCompleted } from "../utils/navigation"; import { ContextualHelpPropsMarkdown } from "./screens/BaseScreenComponent"; import TopScreenComponent, { @@ -222,7 +223,7 @@ class RemindEmailValidationOverlay extends React.PureComponent { onPress={() => { this.setState({ displayError: false }); }} - color={customVariables.colorWhite} + color={IOColors.white} accessible={true} accessibilityLabel={I18n.t("global.buttons.close")} /> diff --git a/ts/components/cie/CieReadingCardAnimation.tsx b/ts/components/cie/CieReadingCardAnimation.tsx index 96e7c60fb8c..fcb9d3b0ba3 100644 --- a/ts/components/cie/CieReadingCardAnimation.tsx +++ b/ts/components/cie/CieReadingCardAnimation.tsx @@ -6,6 +6,7 @@ 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"; export enum ReadingState { "reading" = "reading", @@ -44,7 +45,7 @@ const styles = StyleSheet.create({ }, img: { overflow: "hidden", - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, height: imgDimension - 3, width: imgDimension - 3, borderRadius: imgDimension / 2 diff --git a/ts/components/core/variables/IOColors.ts b/ts/components/core/variables/IOColors.ts index 523c3d1d200..b9b8058f9c1 100644 --- a/ts/components/core/variables/IOColors.ts +++ b/ts/components/core/variables/IOColors.ts @@ -5,27 +5,114 @@ function asIOColors(arg: T): T { return arg; } -/** - * The palette of color used, created from - * https://pagopa.invisionapp.com/console/IO-app---Library-ckcdil0710mt1014buxuo4u34/ckcdilqwl032d01xbx6db5zwz/play - */ +function asIOColorGradients }>( + arg: T +): T { + return arg; +} + export const IOColors = asIOColors({ - black: "#000000", white: "#FFFFFF", - bluegreyDark: "#17324D", - bluegrey: "#475A6D", - grey: "#909DA8", - bluegreyLight: "#CCD4DC", - greyLight: "#E6E9F2", + colorWhiteRGB: `rgb(255, 255, 255)` /* from various JEST tests */, greyUltralight: "#FCFDFF", + brandLight: "#FCFDFF" /* from variables.ts, duplicate of greyUltraLight */, + tabUnderlineColor: + "#F6F6F6" /* from variables.ts, similar to brandGray, ALIAS TOKEN */, + brandGray: "#F5F6F7" /* from variables.ts */, + greyLight: "#E6E9F2", + brandLightGray: "#E6E9F2" /* from variables.ts, duplicate of greyLight */, + lightestGray: "#E0E3E6" /* from variables.ts */, + headerIconLight: "#E4E7EA" /* from variables.ts, ALIAS TOKEN */, + optCodeComponent: "#D9D9D9" /* from relative component */, + borderColor: `rgb(216, 216, 216)` /* found in various JEST tests, similar to optCodeComponent */, + lighterGray: "#C1C9D2" /* from variables.ts */, + bluegreyLight: "#CCD4DC", + brandMildGray: "#C7D1D9" /* from variables.ts */, + shineColor: + "#C1CCD6" /* from variables.ts, similar to brandMildGray, Animation ALIAS TOKEN */, + itemSeparator: "#C9C9C9" /* from variables.ts, ALIAS TOKEN */, + listSelectionBarColor: "#A9A9A9" /* from relative JEST snap test */, + btnLightBorderColor: "#AEB5BF" /* from variables.ts, ALIAS TOKEN */, + lightGray: "#909DA8" /* from variables.ts, duplicate of grey */, + + disabledService: + "#909DA8" /* from variables.ts, duplicate of grey, ALIAS TOKEN */, + grey: "#909DA8", + headerIconDark: "#798593" /* from variables.ts, ALIAS TOKEN */, + itemBorderDefaultColor: + "#5F6F82" /* from variables.ts, similar to milderGray, ALIAS TOKEN */, + milderGray: "#5F6F80" /* from variables.ts */, + darkerGray: "#4B5C6F" /* from variables.ts */, + bluegrey: "#475A6D", + brandDarkGray: "#475A6D" /* from variables.ts, duplicate of bluegrey */, + textColor: + "#475A6D" /* from variables.ts, duplicate of bluegrey, ALIAS TOKEN */, + topTabBarTextColor: + "#475A6D" /* from variables.ts, duplicate of bluegrey, ALIAS TOKEN */, + unselectedColor: + "#475A6D" /* from variables.ts, duplicate of bluegrey, ALIAS TOKEN */, + bluegreyDark: "#17324D", + brandDarkestGray: + "#17324D" /* from variables.ts, duplicate of bluegreyDark */, + cardFontColor: + "#17324D" /* from variables.ts, duplicate of bluegreyDark and brandDarkestGray, ALIAS TOKEN */, + textColorDark: `rgb(28, 28, 30)` /* found in various JEST tests */, + black: "#000000", + colorBlack: "#000000" /* from variables.ts, duplicate of black */, + footerShadowColor: + "#000000" /* from variables.ts, duplicate of black, ALIAS TOKEN */, + brandPrimary: "#0066CC" /* from variables.ts */, + topTabBarActiveTextColor: + "#0066CC" /* from variables.ts, duplicate of brandPrimary, ALIAS TOKEN */, blue: "#0073E6", + selectedColor: + "#0073E6" /* from variables.ts, duplicate of blue, ALIAS TOKEN */, + contentPrimaryBackground: + "#0073E6" /* from variables.ts, duplicate of blue, ALIAS TOKEN */, + ListSelectionBarColor: "#007AFF" /* from ListSelectionBar JEST test */, + textLinkColor: + "#0073E6" /* from variables.ts, duplicate of blue, ALIAS TOKEN */, + checkBoxColor: "#039BE5" /* from CheckBox component */, + brandPrimaryLight: "#99CCFF" /* from variables.ts */, + noCieButton: + "#789CCD" /* Background of half-disabled noCIE CTA, from LandingScreen.tsx */, + featuredCardShadow: "#00274E" /* from FeaturedCard component */, + activeBonus: "#2C489D" /* from relative component (BonusVacanze) */, + cgnDiscount: "#9B5897" /* from CgnDiscountValueBox */, aqua: "#00C5CA", + brandHighlight: "#00C5CA" /* from variables.ts, duplicate of aqua */, + brandHighLighter: "#00CDD2" /* from variables.ts */, + toastColor: "#C1F4F2" /* from variables.ts, ALIAS TOKEN */, + badgeYellow: "#FFC824" /* from variables.ts, ALIAS TOKEN */, + cgnDiscountDetailBg: "#EB9505" /* from relative component */, + cardExpiredTextColor: "#FF0000" /* from variables.ts, ALIAS TOKEN */, + calendarExpirableColor: "#D0021B" /* from variables.ts, ALIAS TOKEN */, + itemTest: "#ED1727" /* from relative JEST snap test */, red: "#C02927", + brandDanger: "#CC3333" /* from variables.ts */, + brandSuccess: "#007005" /* from variables.ts */, + orange: "#EA7614", greyGradientTop: "#475A6D", greyGradientBottom: "#42484F", yellowGradientTop: "#FEC709", - yellowGradientBottom: "#FAA01F", - orange: "#EA7614" + yellowGradientBottom: "#FAA01F" +}); + +export const IOColorGradients = asIOColorGradients({ + appLaunch: ["#0C00D3", "#0073E6"], + appIcon: ["#1D51DF", "#1723D5"], + grey: ["#475A6D", "#42484F"], + yellow: ["#FEC709", "#FAA01F"], + cgn: ["#9184B7", "#5C488F"], + cgnCulture: ["#C51C82", "#E28DC0"], + cgnHealth: ["#F1901A", "#EE898A"], + cgnLearning: ["#0871B6", "#AE97C3"], + cgnSport: ["#DC1415", "#F8C78C"], + cgnTelco: ["#0871B6", "#83B8DA"], + cgnFinance: ["#3E2F87", "#8FDBC0"], + cgnTravel: ["#E00F69", "#F8C78C"], + cgnMobility: ["#1D827D", "#8FC7C5"], + cgnJobOffers: ["#DC1415", "#EE898A"] }); export type IOColorType = keyof typeof IOColors; diff --git a/ts/components/messages/MedicalPrescriptionDueDateBar.tsx b/ts/components/messages/MedicalPrescriptionDueDateBar.tsx index 611e794e623..8c05b270e8a 100644 --- a/ts/components/messages/MedicalPrescriptionDueDateBar.tsx +++ b/ts/components/messages/MedicalPrescriptionDueDateBar.tsx @@ -22,6 +22,7 @@ import { getMessagePaymentExpirationInfo } from "../../utils/messages"; import { CreatedMessageWithContentAndAttachments } from "../../../definitions/backend/CreatedMessageWithContentAndAttachments"; +import { IOColors } from "../core/variables/IOColors"; import CalendarEventButton from "./CalendarEventButton"; import CalendarIconComponent from "./CalendarIconComponent"; @@ -126,14 +127,14 @@ class MedicalPrescriptionDueDateBar extends React.PureComponent { return dueDate.fold(null, dd => { const iconBackgoundColor = this.isPrescriptionExpiring || this.isPrescriptionExpired - ? customVariables.colorWhite + ? IOColors.white : customVariables.brandDarkGray; const textColor = this.isPrescriptionExpiring ? customVariables.calendarExpirableColor : this.isPrescriptionExpired ? customVariables.brandDarkGray - : customVariables.colorWhite; + : IOColors.white; return ( { case "paid": return customVariables.lighterGray; case "expired": - return customVariables.colorWhite; + return IOColors.white; case "expiring": case "valid": return customVariables.brandDarkGray; @@ -136,7 +136,7 @@ const getCalendarTextColor = (status: PaymentStatus) => { case "paid": case "expiring": case "valid": - return customVariables.colorWhite; + return IOColors.white; case "expired": return customVariables.brandDarkGray; } diff --git a/ts/components/messages/MessageListCTABar.tsx b/ts/components/messages/MessageListCTABar.tsx index ee16214e643..c3914c967ae 100644 --- a/ts/components/messages/MessageListCTABar.tsx +++ b/ts/components/messages/MessageListCTABar.tsx @@ -21,6 +21,7 @@ import ExtractedCTABar from "../cta/ExtractedCTABar"; import { ViewEUCovidButton } from "../../features/euCovidCert/components/ViewEUCovidButton"; import { euCovidCertificateEnabled } from "../../config"; import { CreatedMessageWithContentAndAttachments } from "../../../definitions/backend/CreatedMessageWithContentAndAttachments"; +import { IOColors } from "../core/variables/IOColors"; import CalendarEventButton from "./CalendarEventButton"; import CalendarIconComponent from "./CalendarIconComponent"; @@ -111,7 +112,7 @@ class MessageListCTABar extends React.PureComponent { month={capitalize(formatDateAsMonth(dueDate.value))} day={formatDateAsDay(dueDate.value)} backgroundColor={customVariables.brandDarkGray} - textColor={customVariables.colorWhite} + textColor={IOColors.white} /> ); } diff --git a/ts/components/messages/paginated/MessageDetail/DueDateBar.tsx b/ts/components/messages/paginated/MessageDetail/DueDateBar.tsx index 3985cca70e4..4de565c1b0c 100644 --- a/ts/components/messages/paginated/MessageDetail/DueDateBar.tsx +++ b/ts/components/messages/paginated/MessageDetail/DueDateBar.tsx @@ -94,7 +94,7 @@ const TextContent: React.FunctionComponent<{ const getCalendarIconBackgroundColor = (status: PaymentStatus) => { switch (status) { case "expired": - return customVariables.colorWhite; + return IOColors.white; case "expiring": case "valid": return customVariables.brandDarkGray; @@ -105,7 +105,7 @@ const getCalendarTextColor = (status: PaymentStatus) => { switch (status) { case "expiring": case "valid": - return customVariables.colorWhite; + return IOColors.white; case "expired": return customVariables.brandDarkGray; } diff --git a/ts/components/messages/paginated/MessageDetail/MedicalPrescriptionDueDateBar.tsx b/ts/components/messages/paginated/MessageDetail/MedicalPrescriptionDueDateBar.tsx index 9a6e4ddf0d1..559bc8b1032 100644 --- a/ts/components/messages/paginated/MessageDetail/MedicalPrescriptionDueDateBar.tsx +++ b/ts/components/messages/paginated/MessageDetail/MedicalPrescriptionDueDateBar.tsx @@ -19,6 +19,7 @@ import { import { UIMessageDetails } from "../../../../store/reducers/entities/messages/types"; import CalendarIconComponent from "../../CalendarIconComponent"; import CalendarEventButton from "../../CalendarEventButton"; +import { IOColors } from "../../../core/variables/IOColors"; type Props = { dueDate: Date; @@ -81,7 +82,7 @@ const MedicalPrescriptionDueDateBar = ({ diff --git a/ts/components/screens/BaseHeader.tsx b/ts/components/screens/BaseHeader.tsx index 17ff1ca3d07..24cce14230b 100644 --- a/ts/components/screens/BaseHeader.tsx +++ b/ts/components/screens/BaseHeader.tsx @@ -297,7 +297,7 @@ class BaseHeaderComponent extends React.PureComponent { const iconColor = isPagoPATestEnabled ? variables.brandHighlight : primary || dark - ? variables.colorWhite + ? IOColors.white : variables.brandPrimary; return ( diff --git a/ts/components/screens/DarkLayout.tsx b/ts/components/screens/DarkLayout.tsx index 7082cb1799e..a2216a1ea43 100644 --- a/ts/components/screens/DarkLayout.tsx +++ b/ts/components/screens/DarkLayout.tsx @@ -61,6 +61,7 @@ export default class DarkLayout extends React.Component { const wrapper = (children: React.ReactNode) => this.props.gradientHeader ? ( = ({ labelSize }) => ( - + {I18n.t("wallet.newPaymentMethod.add").toUpperCase()} diff --git a/ts/components/wallet/CameraMarker.tsx b/ts/components/wallet/CameraMarker.tsx index 8d63df7e4bd..9a7f2b33dde 100644 --- a/ts/components/wallet/CameraMarker.tsx +++ b/ts/components/wallet/CameraMarker.tsx @@ -5,6 +5,7 @@ import { StyleSheet } from "react-native"; import IconFont from "../ui/IconFont"; import variables from "../../theme/variables"; +import { IOColors } from "../core/variables/IOColors"; type MarkerState = "SCANNING" | "VALID" | "INVALID"; @@ -48,7 +49,7 @@ export const CameraMarker: React.SFC = ({ screenWidth, state }) => { smallBorded: { height: borderLength, width: borderLength, - borderColor: variables.brandPrimaryInverted, + borderColor: IOColors.white, backgroundColor: "transparent", position: "absolute" }, diff --git a/ts/components/wallet/PaymentsHistoryList.tsx b/ts/components/wallet/PaymentsHistoryList.tsx index 60c2d553148..1e36c630c7f 100644 --- a/ts/components/wallet/PaymentsHistoryList.tsx +++ b/ts/components/wallet/PaymentsHistoryList.tsx @@ -17,6 +17,7 @@ import ItemSeparatorComponent from "../ItemSeparatorComponent"; import { EdgeBorderComponent } from "../screens/EdgeBorderComponent"; import { getIuv } from "../../utils/payment"; import { isPaymentDoneSuccessfully } from "../../store/reducers/payments/utils"; +import { IOColors } from "../core/variables/IOColors"; import PaymentHistoryItem from "./PaymentHistoryItem"; @@ -29,7 +30,7 @@ type Props = Readonly<{ const styles = StyleSheet.create({ whiteContent: { - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, flex: 1 }, subHeaderContent: { diff --git a/ts/components/wallet/SlidedContentComponent.tsx b/ts/components/wallet/SlidedContentComponent.tsx index 2a14fb09196..0022eb928e9 100644 --- a/ts/components/wallet/SlidedContentComponent.tsx +++ b/ts/components/wallet/SlidedContentComponent.tsx @@ -3,6 +3,7 @@ import * as React from "react"; import { StyleSheet } from "react-native"; import customVariables from "../../theme/variables"; import { FOOTER_SAFE_AREA } from "../../utils/constants"; +import { IOColors } from "../core/variables/IOColors"; type Props = Readonly<{ dark?: boolean; @@ -29,7 +30,7 @@ const styles = StyleSheet.create({ backgroundColor: customVariables.darkerGray }, white: { - backgroundColor: customVariables.colorWhite + backgroundColor: IOColors.white }, flexGrow: { flexGrow: 1 diff --git a/ts/components/wallet/TransactionsList.tsx b/ts/components/wallet/TransactionsList.tsx index 9ec207efb62..d3b2b5b4e1a 100644 --- a/ts/components/wallet/TransactionsList.tsx +++ b/ts/components/wallet/TransactionsList.tsx @@ -27,6 +27,7 @@ import DetailedlistItemComponent from "../DetailedlistItemComponent"; import ItemSeparatorComponent from "../ItemSeparatorComponent"; import { EdgeBorderComponent } from "../screens/EdgeBorderComponent"; import BoxedRefreshIndicator from "../ui/BoxedRefreshIndicator"; +import { IOColors } from "../core/variables/IOColors"; type State = { loadingMore: boolean; @@ -46,7 +47,7 @@ type Props = Readonly<{ const screenWidth = Dimensions.get("screen").width; const styles = StyleSheet.create({ whiteContent: { - backgroundColor: variables.colorWhite, + backgroundColor: IOColors.white, flex: 1 }, subHeaderContent: { @@ -63,7 +64,7 @@ const styles = StyleSheet.create({ justifyContent: "center", alignSelf: "center", width: screenWidth - variables.contentPadding * 2, - backgroundColor: variables.colorWhite + backgroundColor: IOColors.white } }); diff --git a/ts/components/wallet/WalletHomeHeader.tsx b/ts/components/wallet/WalletHomeHeader.tsx index 813f886631c..f3a5bcaa408 100644 --- a/ts/components/wallet/WalletHomeHeader.tsx +++ b/ts/components/wallet/WalletHomeHeader.tsx @@ -136,7 +136,7 @@ const WalletHomeHeader = (props: Props) => { > diff --git a/ts/components/wallet/WalletLayout.tsx b/ts/components/wallet/WalletLayout.tsx index 1f0d5eeac21..995171c1f83 100644 --- a/ts/components/wallet/WalletLayout.tsx +++ b/ts/components/wallet/WalletLayout.tsx @@ -20,6 +20,7 @@ import { } from "../screens/BaseScreenComponent"; import DarkLayout from "../screens/DarkLayout"; import { H2 } from "../core/typography/H2"; +import { IOColors } from "../core/variables/IOColors"; type Props = Readonly<{ accessibilityLabel?: string; @@ -43,7 +44,7 @@ type Props = Readonly<{ const styles = StyleSheet.create({ whiteBg: { - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, marginBottom: 10 }, @@ -76,7 +77,7 @@ const styles = StyleSheet.create({ alignItems: "baseline", justifyContent: "space-between", paddingHorizontal: customVariables.contentPadding, - backgroundColor: customVariables.colorWhite + backgroundColor: IOColors.white } }); diff --git a/ts/components/wallet/card/CardComponent.style.ts b/ts/components/wallet/card/CardComponent.style.ts index 94ad280903a..e1497735ee1 100644 --- a/ts/components/wallet/card/CardComponent.style.ts +++ b/ts/components/wallet/card/CardComponent.style.ts @@ -1,6 +1,7 @@ import { Platform, StyleSheet } from "react-native"; import { makeFontStyleObject } from "../../../theme/fonts"; import variables from "../../../theme/variables"; +import { IOColors } from "../../core/variables/IOColors"; export default StyleSheet.create({ cardHeader: { @@ -73,7 +74,7 @@ export default StyleSheet.create({ margin: 2 }, transactions: { - backgroundColor: variables.colorWhite + backgroundColor: IOColors.white }, transactionsText: { color: variables.brandPrimary @@ -82,7 +83,7 @@ export default StyleSheet.create({ backgroundColor: variables.brandPrimary }, pickPaymentText: { - color: variables.colorWhite + color: IOColors.white }, marginTop: { marginTop: variables.fontSizeBase diff --git a/ts/components/wallet/card/SectionCardComponent.tsx b/ts/components/wallet/card/SectionCardComponent.tsx index 3ea26d6cf2c..6406f8a1310 100644 --- a/ts/components/wallet/card/SectionCardComponent.tsx +++ b/ts/components/wallet/card/SectionCardComponent.tsx @@ -10,6 +10,7 @@ import IconFont from "../../../components/ui/IconFont"; import I18n from "../../../i18n"; import customVariables from "../../../theme/variables"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; +import { IOColors } from "../../core/variables/IOColors"; export type SectionCardStatus = "add" | "refresh" | "loading" | "show"; type Props = { @@ -102,7 +103,7 @@ const styles = StyleSheet.create({ }, labelButton: { marginLeft: customVariables.fontSizeBase / 4, - color: customVariables.colorWhite + color: IOColors.white }, shadowBox: { marginBottom: -15, @@ -123,7 +124,7 @@ const SectionCardComponent: React.FunctionComponent = (props: Props) => { <> = (props: Props) => { diff --git a/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx b/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx index 278afb247bb..23433ef8f7b 100644 --- a/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx +++ b/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx @@ -16,6 +16,7 @@ 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"; type Props = Readonly<{ title: string; @@ -26,7 +27,7 @@ type Props = Readonly<{ const styles = StyleSheet.create({ whiteContent: { - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, flex: 1 }, subHeaderContent: { diff --git a/ts/features/bonus/bonusVacanze/components/ActiveBonus.tsx b/ts/features/bonus/bonusVacanze/components/ActiveBonus.tsx index 542c3b0fd85..da83c64cd95 100644 --- a/ts/features/bonus/bonusVacanze/components/ActiveBonus.tsx +++ b/ts/features/bonus/bonusVacanze/components/ActiveBonus.tsx @@ -8,6 +8,7 @@ import I18n from "../../../../i18n"; import customVariables from "../../../../theme/variables"; import { formatNumberAmount } from "../../../../utils/stringBuilder"; import { validityInterval } from "../utils/bonus"; +import { IOColors } from "../../../../components/core/variables/IOColors"; type Props = { bonus: BonusActivationWithQrCode; @@ -37,13 +38,13 @@ const styles = StyleSheet.create({ }, text3: { fontSize: 18, - color: customVariables.colorWhite + color: IOColors.white }, text12: { lineHeight: 18, marginBottom: -4, justifyContent: "flex-end", - color: customVariables.colorWhite + color: IOColors.white }, icon: { width: 64, @@ -60,12 +61,12 @@ const styles = StyleSheet.create({ minHeight: 24 }, textWhite: { - color: customVariables.colorWhite + color: IOColors.white }, containerColor: { padding: customVariables.appHeaderPaddingHorizontal, backgroundColor: "#2C489D", - color: customVariables.colorWhite + color: IOColors.white } }); @@ -112,11 +113,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 3363840ec12..3879663dcb4 100644 --- a/ts/features/bonus/bonusVacanze/components/BonusCardComponent.tsx +++ b/ts/features/bonus/bonusVacanze/components/BonusCardComponent.tsx @@ -18,6 +18,7 @@ import { clipboardSetStringWithFeedback } from "../../../../utils/clipboard"; import { isShareEnabled } from "../../../../utils/share"; import { maybeNotNullyString } from "../../../../utils/strings"; import { getBonusCodeFormatted, isBonusActive } from "../utils/bonus"; +import { IOColors } from "../../../../components/core/variables/IOColors"; type Props = { bonus: BonusActivationWithQrCode; @@ -83,7 +84,7 @@ const styles = StyleSheet.create({ padding: 16 }, colorWhite: { - color: customVariables.colorWhite + color: IOColors.white }, fontLarge: { fontSize: customVariables.fontSize2 @@ -122,7 +123,7 @@ const styles = StyleSheet.create({ badge: { height: 18, marginTop: 6, - backgroundColor: customVariables.colorWhite + backgroundColor: IOColors.white }, statusText: { fontSize: 12, @@ -220,7 +221,7 @@ const BonusCardComponent: React.FunctionComponent = (props: Props) => { > - + diff --git a/ts/features/bonus/bonusVacanze/screens/AvailableBonusScreen.tsx b/ts/features/bonus/bonusVacanze/screens/AvailableBonusScreen.tsx index 5d21126c31b..b8794c2b7b8 100644 --- a/ts/features/bonus/bonusVacanze/screens/AvailableBonusScreen.tsx +++ b/ts/features/bonus/bonusVacanze/screens/AvailableBonusScreen.tsx @@ -68,13 +68,14 @@ import { showServiceDetails } from "../../../../store/actions/services"; import { ServiceId } from "../../../../../definitions/backend/ServiceId"; +import { IOColors } from "../../../../components/core/variables/IOColors"; export type Props = ReturnType & ReturnType; const styles = StyleSheet.create({ whiteContent: { - backgroundColor: variables.colorWhite, + backgroundColor: IOColors.white, flex: 1 }, paddedContent: { diff --git a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx index ff47a16875d..29308af9d57 100644 --- a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx +++ b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx @@ -116,6 +116,7 @@ const CgnDetailScreen = (props: Props): React.ReactElement => { ) : ( <> + {/* cgn gradient */} diff --git a/ts/features/bonus/cgn/utils/filters.ts b/ts/features/bonus/cgn/utils/filters.ts index c7efd0b2475..dbbdd0a5ae4 100644 --- a/ts/features/bonus/cgn/utils/filters.ts +++ b/ts/features/bonus/cgn/utils/filters.ts @@ -32,60 +32,70 @@ export const categories: Record = { type: ProductCategoryEnum.cultureAndEntertainment, icon: Culture, nameKey: "bonus.cgn.merchantDetail.categories.cultureAndEntertainment", + /* cgnCulture gradient */ colors: ["#C51C82", "#E28DC0"] }, [ProductCategoryEnum.health]: { type: ProductCategoryEnum.health, icon: Wellness, nameKey: "bonus.cgn.merchantDetail.categories.health", + /* cgnHealth gradient */ colors: ["#F1901A", "#EE898A"] }, [ProductCategoryEnum.learning]: { type: ProductCategoryEnum.learning, icon: Learning, nameKey: "bonus.cgn.merchantDetail.categories.learning", + /* cgnLearning gradient */ colors: ["#0871B6", "#AE97C3"] }, [ProductCategoryEnum.sports]: { type: ProductCategoryEnum.sports, icon: Sport, nameKey: "bonus.cgn.merchantDetail.categories.sport", + /* cgnSport gradient */ colors: ["#1D827D", "#83B8DA"] }, [ProductCategoryEnum.home]: { type: ProductCategoryEnum.home, icon: Home, nameKey: "bonus.cgn.merchantDetail.categories.home", + /* cgnHome gradient */ colors: ["#DC1415", "#F8C78C"] }, [ProductCategoryEnum.telephonyAndInternet]: { type: ProductCategoryEnum.telephonyAndInternet, icon: Telco, nameKey: "bonus.cgn.merchantDetail.categories.telco", + /* cgnTelco gradient */ colors: ["#0871B6", "#83B8DA"] }, [ProductCategoryEnum.bankingServices]: { type: ProductCategoryEnum.bankingServices, icon: Bank, nameKey: "bonus.cgn.merchantDetail.categories.finance", + /* cgnFinance gradient */ colors: ["#3E2F87", "#8FDBC0"] }, [ProductCategoryEnum.travelling]: { type: ProductCategoryEnum.travelling, icon: Travel, nameKey: "bonus.cgn.merchantDetail.categories.travel", + /* cgnTravel gradient */ colors: ["#E00F69", "#F8C78C"] }, [ProductCategoryEnum.sustainableMobility]: { type: ProductCategoryEnum.sustainableMobility, icon: SustainableMobility, nameKey: "bonus.cgn.merchantDetail.categories.mobility", + /* cgnMobility gradient */ colors: ["#1D827D", "#8FC7C5"] }, [ProductCategoryEnum.jobOffers]: { type: ProductCategoryEnum.jobOffers, icon: Job, nameKey: "bonus.cgn.merchantDetail.categories.job", + /* cgnJobOffers gradient */ colors: ["#DC1415", "#EE898A"] } }; diff --git a/ts/navigation/TabNavigator.tsx b/ts/navigation/TabNavigator.tsx index fe5bba1dcf3..b9313296f58 100644 --- a/ts/navigation/TabNavigator.tsx +++ b/ts/navigation/TabNavigator.tsx @@ -25,7 +25,7 @@ const Tab = createBottomTabNavigator(); const hasiOSNotch = deviceInfoModule.hasNotch() && isIos; const styles = StyleSheet.create({ tabBarStyle: { - backgroundColor: variables.colorWhite, + backgroundColor: IOColors.white, paddingLeft: 3, paddingRight: 3, borderTopWidth: 0, diff --git a/ts/screens/authentication/LandingScreen.tsx b/ts/screens/authentication/LandingScreen.tsx index 22d5d3d4460..3b977cc192b 100644 --- a/ts/screens/authentication/LandingScreen.tsx +++ b/ts/screens/authentication/LandingScreen.tsx @@ -54,6 +54,7 @@ import variables from "../../theme/variables"; import { ComponentProps } from "../../types/react"; import { isDevEnv } from "../../utils/environment"; import RootedDeviceModal from "../modal/RootedDeviceModal"; +import { IOColors } from "../../components/core/variables/IOColors"; type Props = { navigation: CompatNavigationProp< @@ -276,7 +277,7 @@ class LandingScreen extends React.PureComponent { > {isCieSupported @@ -303,7 +304,7 @@ class LandingScreen extends React.PureComponent { > {this.isCieSupported() diff --git a/ts/screens/authentication/cie/CiePinLockedTemporarilyScreen.tsx b/ts/screens/authentication/cie/CiePinLockedTemporarilyScreen.tsx index 133fe27ea29..786db408e30 100644 --- a/ts/screens/authentication/cie/CiePinLockedTemporarilyScreen.tsx +++ b/ts/screens/authentication/cie/CiePinLockedTemporarilyScreen.tsx @@ -16,7 +16,7 @@ import { IOStackNavigationProp } from "../../../navigation/params/AppParamsList" import { AuthenticationParamsList } from "../../../navigation/params/AuthenticationParamsList"; import { resetToAuthenticationRoute } from "../../../store/actions/navigation"; import { ReduxProps } from "../../../store/actions/types"; -import variables from "../../../theme/variables"; +import { IOColors } from "../../../components/core/variables/IOColors"; type Props = { navigation: CompatNavigationProp< @@ -60,7 +60,7 @@ class CiePinLockedTemporarilyScreen extends React.PureComponent { }; const retryButtonProps = { primary: true, - iconColor: variables.colorWhite, + iconColor: IOColors.white, iconName: "io-cie", onPress: this.goToCieID, title: I18n.t("authentication.cie.pinTempLocked.button") diff --git a/ts/screens/ingress/CheckBox.tsx b/ts/screens/ingress/CheckBox.tsx index 98a66966185..7cc452aa02b 100644 --- a/ts/screens/ingress/CheckBox.tsx +++ b/ts/screens/ingress/CheckBox.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { StyleSheet, View } from "react-native"; import IconFont from "../../components/ui/IconFont"; -import customVariables from "../../theme/variables"; +import { IOColors } from "../../components/core/variables/IOColors"; type Props = { checked: boolean; @@ -33,7 +33,7 @@ export const IngressCheckBox = (props: Props) => { )} diff --git a/ts/screens/messages/MessagesHomeScreen.tsx b/ts/screens/messages/MessagesHomeScreen.tsx index 224eff3d01e..0a766cc1745 100644 --- a/ts/screens/messages/MessagesHomeScreen.tsx +++ b/ts/screens/messages/MessagesHomeScreen.tsx @@ -43,13 +43,15 @@ import { } from "../../store/reducers/search"; import { GlobalState } from "../../store/reducers/types"; import { makeFontStyleObject } from "../../theme/fonts"; -import customVariables from "../../theme/variables"; import { isScreenReaderEnabled, setAccessibilityFocus } from "../../utils/accessibility"; import { HEADER_HEIGHT, MESSAGE_ICON_HEIGHT } from "../../utils/constants"; +import customVariables from "../../theme/variables"; +import { IOColors } from "../../components/core/variables/IOColors"; + type Props = { navigation: CompatNavigationProp< IOStackNavigationProp @@ -167,7 +169,7 @@ class MessagesHomeScreen extends React.PureComponent { > {this.state.isScreenReaderEnabled && statusComponent} {!isSearchEnabled && ( diff --git a/ts/screens/messages/paginated/MessagesHomeScreen.tsx b/ts/screens/messages/paginated/MessagesHomeScreen.tsx index 81844d63fab..e621e196fe6 100644 --- a/ts/screens/messages/paginated/MessagesHomeScreen.tsx +++ b/ts/screens/messages/paginated/MessagesHomeScreen.tsx @@ -13,6 +13,7 @@ import MessageList from "../../../components/messages/paginated/MessageList"; import MessagesArchive from "../../../components/messages/paginated/MessagesArchive"; import MessagesInbox from "../../../components/messages/paginated/MessagesInbox"; import MessagesSearch from "../../../components/messages/paginated/MessagesSearch"; +import { useMessageOpening } from "../../../components/messages/paginated/hooks/useMessageOpening"; import { ContextualHelpPropsMarkdown } from "../../../components/screens/BaseScreenComponent"; import { ScreenContentHeader } from "../../../components/screens/ScreenContentHeader"; import TopScreenComponent from "../../../components/screens/TopScreenComponent"; @@ -46,7 +47,6 @@ import { } from "../../../store/reducers/search"; import { GlobalState } from "../../../store/reducers/types"; import { makeFontStyleObject } from "../../../theme/fonts"; -import customVariables from "../../../theme/variables"; import { setAccessibilityFocus, useScreenReaderEnabled @@ -54,7 +54,9 @@ import { import { MESSAGE_ICON_HEIGHT } from "../../../utils/constants"; import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender"; import { showToast } from "../../../utils/showToast"; -import { useMessageOpening } from "../../../components/messages/paginated/hooks/useMessageOpening"; +import { IOColors } from "../../../components/core/variables/IOColors"; +import customVariables from "../../../theme/variables"; + import MigratingMessage from "./MigratingMessage"; type Props = { @@ -245,7 +247,7 @@ const MessagesHomeScreen = ({ > {isScreenReaderEnabled && statusComponent} {!isSearchEnabled && ( diff --git a/ts/screens/modal/IdentificationModal.tsx b/ts/screens/modal/IdentificationModal.tsx index 3c29b326bf8..bef3a5c11ef 100644 --- a/ts/screens/modal/IdentificationModal.tsx +++ b/ts/screens/modal/IdentificationModal.tsx @@ -27,7 +27,6 @@ import { import { profileNameSelector } from "../../store/reducers/profile"; import { isFingerprintEnabledSelector } from "../../store/reducers/persistedPreferences"; import { GlobalState } from "../../store/reducers/types"; -import customVariables from "../../theme/variables"; import { setAccessibilityFocus } from "../../utils/accessibility"; import { biometricAuthenticationRequest, @@ -37,6 +36,10 @@ import { } from "../../utils/biometrics"; import { maybeNotNullyString } from "../../utils/strings"; import { assistanceToolConfigSelector } from "../../store/reducers/backendStatus"; + +import customVariables from "../../theme/variables"; +import { IOColors } from "../../components/core/variables/IOColors"; + import { IdentificationLockModal } from "./IdentificationLockModal"; type Props = ReturnType & @@ -473,7 +476,7 @@ class IdentificationModal extends React.PureComponent { const defaultColor = isValidatingTask ? customVariables.contentPrimaryBackground - : customVariables.colorWhite; + : IOColors.white; return !this.state.canInsertPinTooManyAttempts ? ( IdentificationLockModal({ countdown }) diff --git a/ts/screens/profile/CgnLandingPlayground.tsx b/ts/screens/profile/CgnLandingPlayground.tsx index 27cba16e282..e9c4cea3b26 100644 --- a/ts/screens/profile/CgnLandingPlayground.tsx +++ b/ts/screens/profile/CgnLandingPlayground.tsx @@ -6,7 +6,6 @@ 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 customVariables from "../../theme/variables"; import { IOStyles } from "../../components/core/variables/IOStyles"; import { H5 } from "../../components/core/typography/H5"; import WebviewComponent from "../../components/WebviewComponent"; @@ -74,7 +73,7 @@ const CgnLandingPlayground = () => { diff --git a/ts/screens/profile/FiscalCodeScreen.tsx b/ts/screens/profile/FiscalCodeScreen.tsx index c9f744602bd..6e060ea791d 100644 --- a/ts/screens/profile/FiscalCodeScreen.tsx +++ b/ts/screens/profile/FiscalCodeScreen.tsx @@ -24,8 +24,9 @@ import { contentMunicipalityLoad } from "../../store/actions/content"; import { municipalitySelector } from "../../store/reducers/content"; import { profileSelector } from "../../store/reducers/profile"; import { GlobalState } from "../../store/reducers/types"; -import customVariables from "../../theme/variables"; import { CodiceCatastale } from "../../types/MunicipalityCodiceCatastale"; +import customVariables from "../../theme/variables"; +import { IOColors } from "../../components/core/variables/IOColors"; type Props = ReturnType & { navigation: IOStackNavigationProp; @@ -37,7 +38,7 @@ const styles = StyleSheet.create({ backgroundColor: customVariables.brandDarkGray }, white: { - color: customVariables.colorWhite + color: IOColors.white }, shadow: { // iOS @@ -108,10 +109,7 @@ const FiscalCodeScreen: React.FunctionComponent = (props: Props) => { accessibilityLabel={I18n.t("global.buttons.back")} accessibilityRole={"button"} > - + ); diff --git a/ts/screens/profile/ProfileMainScreen.tsx b/ts/screens/profile/ProfileMainScreen.tsx index 628ef570a7b..55d101be6c5 100644 --- a/ts/screens/profile/ProfileMainScreen.tsx +++ b/ts/screens/profile/ProfileMainScreen.tsx @@ -44,11 +44,11 @@ import { isPnTestEnabledSelector } from "../../store/reducers/persistedPreferences"; import { GlobalState } from "../../store/reducers/types"; -import customVariables from "../../theme/variables"; import { getAppVersion } from "../../utils/appVersion"; import { clipboardSetStringWithFeedback } from "../../utils/clipboard"; import { getDeviceId } from "../../utils/device"; import { isDevEnv } from "../../utils/environment"; +import { IOColors } from "../../components/core/variables/IOColors"; type Props = IOStackNavigationRouteProps & LightModalContextInterface & @@ -83,7 +83,7 @@ const styles = StyleSheet.create({ lineHeight: 40 }, whiteBg: { - backgroundColor: customVariables.colorWhite + backgroundColor: IOColors.white }, noRightPadding: { diff --git a/ts/screens/profile/WebPlayground.tsx b/ts/screens/profile/WebPlayground.tsx index 5ab25193c34..28ef74611f9 100644 --- a/ts/screens/profile/WebPlayground.tsx +++ b/ts/screens/profile/WebPlayground.tsx @@ -14,9 +14,9 @@ import { Dispatch } from "../../store/actions/types"; import { navigateBack } from "../../store/actions/navigation"; import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity"; import IconFont from "../../components/ui/IconFont"; -import customVariables from "../../theme/variables"; import { LabelledItem } from "../../components/LabelledItem"; import { showToast } from "../../utils/showToast"; +import { IOColors } from "../../components/core/variables/IOColors"; type Props = ReturnType; @@ -97,7 +97,7 @@ const WebPlayground: React.FunctionComponent = (props: Props) => { diff --git a/ts/screens/services/ServicesHomeScreen.tsx b/ts/screens/services/ServicesHomeScreen.tsx index 71f502460af..2a40c938493 100644 --- a/ts/screens/services/ServicesHomeScreen.tsx +++ b/ts/screens/services/ServicesHomeScreen.tsx @@ -185,7 +185,7 @@ const styles = StyleSheet.create({ flexDirection: "row", zIndex: 1, justifyContent: "space-around", - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, padding: 10 }, buttonBar: { @@ -201,7 +201,7 @@ const styles = StyleSheet.create({ paddingBottom: 0, paddingLeft: 8, height: 40, - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, borderWidth: 1, borderColor: customVariables.brandPrimary }, @@ -419,7 +419,7 @@ class ServicesHomeScreen extends React.Component { = props => ( - -

{props.title}

- + +

{props.title}

{props.children} ); diff --git a/ts/screens/showroom/core/ColorsShowroom.tsx b/ts/screens/showroom/core/ColorsShowroom.tsx index 2c1f4b8fd1e..ae7066f3833 100644 --- a/ts/screens/showroom/core/ColorsShowroom.tsx +++ b/ts/screens/showroom/core/ColorsShowroom.tsx @@ -1,30 +1,65 @@ -import { View } from "native-base"; import * as React from "react"; -import { ColorValue, StyleSheet } from "react-native"; +import { Text, View, ColorValue, StyleSheet } from "react-native"; +import LinearGradient from "react-native-linear-gradient"; +import { H2 } from "../../../components/core/typography/H2"; import { H5 } from "../../../components/core/typography/H5"; -import { IOColors } from "../../../components/core/variables/IOColors"; +import { + IOColors, + IOColorGradients +} from "../../../components/core/variables/IOColors"; import { ShowroomSection } from "../ShowroomSection"; +const colorItemGutter = 16; + const styles = StyleSheet.create({ - alignCenter: { - alignItems: "center" - }, - content: { - flex: 1, - width: "100%", + itemsWrapper: { flexDirection: "row", - flexWrap: "wrap" + flexWrap: "wrap", + justifyContent: "flex-start", + marginLeft: (colorItemGutter / 2) * -1, + marginRight: (colorItemGutter / 2) * -1, + marginBottom: 16 }, - colorBox: { - height: 60, + colorWrapper: { width: "50%", - padding: 2 + justifyContent: "flex-start", + marginBottom: 16, + paddingHorizontal: colorItemGutter / 2 + }, + colorItem: { + width: "100%", + aspectRatio: 4 / 1, + padding: 8, + borderRadius: 4, + alignItems: "flex-end", + borderColor: "rgba(0, 0, 0, 0.1)", + borderWidth: 1 + }, + gradientItem: { + aspectRatio: 2 / 1, + borderRadius: 8, + padding: 12, + alignItems: "flex-end", + justifyContent: "space-between", + borderColor: "rgba(0, 0, 0, 0.1)", + borderWidth: 1 + }, + colorPill: { + overflow: "hidden", + color: "#FFFFFF", + fontSize: 9, + backgroundColor: "rgba(0, 0, 0, 0.3)", + padding: 4, + borderRadius: 4 } }); export const ColorsShowroom = () => ( - +

+ Plain +

+ {Object.entries(IOColors).map(colorEntry => ( ( /> ))} +

+ Gradients +

+ + {Object.entries(IOColorGradients).map(colorEntry => ( + + ))} + ); @@ -41,17 +88,47 @@ type ColorBoxProps = { color: ColorValue; }; +type GradientBoxProps = { + name: string; + colors: Array; +}; + const ColorBox = (props: ColorBoxProps) => ( - + -
- {props.name} {props.color} -
+ > + {props.color && {props.color}} + + {props.name && ( +
+ {props.name} +
+ )} ); + +const GradientBox = (props: GradientBoxProps) => { + const [first, last] = props.colors; + return ( + + + {first && {first}} + {last && {last}} + + {props.name && ( +
+ {props.name} +
+ )} + + ); +}; diff --git a/ts/screens/showroom/core/SelectionShowroom.tsx b/ts/screens/showroom/core/SelectionShowroom.tsx index a41c1fbba87..fb66e23035f 100644 --- a/ts/screens/showroom/core/SelectionShowroom.tsx +++ b/ts/screens/showroom/core/SelectionShowroom.tsx @@ -1,7 +1,6 @@ import * as pot from "italia-ts-commons/lib/pot"; -import { View } from "native-base"; import * as React from "react"; -import { Alert, StyleSheet } from "react-native"; +import { View, Alert, StyleSheet } from "react-native"; import { CheckBox } from "../../../components/core/selection/checkbox/CheckBox"; import { RemoteSwitch } from "../../../components/core/selection/RemoteSwitch"; import { Label } from "../../../components/core/typography/Label"; diff --git a/ts/screens/showroom/core/TypographyShowRoom.tsx b/ts/screens/showroom/core/TypographyShowRoom.tsx index bf93b9f2d4d..cf11e669f95 100644 --- a/ts/screens/showroom/core/TypographyShowRoom.tsx +++ b/ts/screens/showroom/core/TypographyShowRoom.tsx @@ -1,6 +1,6 @@ -import { View } from "native-base"; import * as React from "react"; import { Alert, StyleSheet } from "react-native"; +import { View } from "native-base"; import { IOBadge } from "../../../components/core/IOBadge"; import { Body } from "../../../components/core/typography/Body"; import { H1 } from "../../../components/core/typography/H1"; @@ -33,13 +33,10 @@ export const TypographyShowroom = () => ( Body - Alert.alert("onPress link!")}>Link - MonoSpace - ); diff --git a/ts/screens/wallet/AddCardScreen.tsx b/ts/screens/wallet/AddCardScreen.tsx index 79360d4c7da..59108f7a57e 100644 --- a/ts/screens/wallet/AddCardScreen.tsx +++ b/ts/screens/wallet/AddCardScreen.tsx @@ -42,7 +42,6 @@ import { } from "../../store/actions/navigation"; import { Dispatch } from "../../store/actions/types"; import { GlobalState } from "../../store/reducers/types"; -import variables from "../../theme/variables"; import { CreditCard } from "../../types/pagopa"; import { ComponentProps } from "../../types/react"; import { useScreenReaderEnabled } from "../../utils/accessibility"; @@ -113,7 +112,7 @@ const styles = StyleSheet.create({ borderColor: IOColors.blue }, whiteBg: { - backgroundColor: variables.colorWhite + backgroundColor: IOColors.white }, flex: { flex: 1 diff --git a/ts/screens/wallet/PaymentsHistoryScreen.tsx b/ts/screens/wallet/PaymentsHistoryScreen.tsx index 8d2f67b9cbd..1e20d3a23e2 100644 --- a/ts/screens/wallet/PaymentsHistoryScreen.tsx +++ b/ts/screens/wallet/PaymentsHistoryScreen.tsx @@ -22,6 +22,7 @@ import { } from "../../store/reducers/payments/history"; import { GlobalState } from "../../store/reducers/types"; import variables from "../../theme/variables"; +import { IOColors } from "../../components/core/variables/IOColors"; type Props = ReturnType & ReturnType & @@ -33,7 +34,7 @@ const styles = StyleSheet.create({ paddingBottom: 0 }, whiteBg: { - backgroundColor: variables.colorWhite + backgroundColor: IOColors.white } }); diff --git a/ts/screens/wallet/WalletHomeScreen.tsx b/ts/screens/wallet/WalletHomeScreen.tsx index 575a629a7b8..76b511a4f2d 100644 --- a/ts/screens/wallet/WalletHomeScreen.tsx +++ b/ts/screens/wallet/WalletHomeScreen.tsx @@ -101,6 +101,7 @@ import { Transaction, Wallet } from "../../types/pagopa"; import { isStrictSome } from "../../utils/pot"; import { showToast } from "../../utils/showToast"; import BpdOptInPaymentMethodsContainer from "../../features/bonus/bpd/components/optInPaymentMethods/BpdOptInPaymentMethodsContainer"; +import { IOColors } from "../../components/core/variables/IOColors"; export type WalletHomeNavigationParams = Readonly<{ newMethodAdded: boolean; @@ -125,7 +126,7 @@ const styles = StyleSheet.create({ fontSize: customVariables.fontSize1 }, white: { - color: customVariables.colorWhite + color: IOColors.white }, container: { flex: 1, @@ -158,7 +159,7 @@ const styles = StyleSheet.create({ color: customVariables.brandDarkGray }, whiteBg: { - backgroundColor: customVariables.colorWhite + backgroundColor: IOColors.white }, noBottomPadding: { padding: customVariables.contentPadding, diff --git a/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptsScreen.tsx b/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptsScreen.tsx index 810c773b743..a64725bcb19 100644 --- a/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptsScreen.tsx +++ b/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptsScreen.tsx @@ -22,6 +22,7 @@ import { CreditCardInsertion } from "../../../store/reducers/wallet/creditCard"; import variables from "../../../theme/variables"; +import { IOColors } from "../../../components/core/variables/IOColors"; type Props = ReturnType & ReturnType & @@ -36,7 +37,7 @@ const styles = StyleSheet.create({ color: variables.brandDarkGray }, whiteBg: { - backgroundColor: variables.colorWhite + backgroundColor: IOColors.white } }); diff --git a/ts/screens/wallet/payment/ManualDataInsertionScreen.tsx b/ts/screens/wallet/payment/ManualDataInsertionScreen.tsx index 982081b0fb8..38ea2497c2b 100644 --- a/ts/screens/wallet/payment/ManualDataInsertionScreen.tsx +++ b/ts/screens/wallet/payment/ManualDataInsertionScreen.tsx @@ -42,8 +42,8 @@ import { Dispatch } from "../../../store/actions/types"; import { paymentInitializeState } from "../../../store/actions/wallet/payment"; import { GlobalState } from "../../../store/reducers/types"; import { withPaymentFeatureSelector } from "../../../store/reducers/wallet/wallets"; -import variables from "../../../theme/variables"; import { alertNoPayablePaymentMethods } from "../../../utils/paymentMethod"; +import { IOColors } from "../../../components/core/variables/IOColors"; import CodesPositionManualPaymentModal from "./CodesPositionManualPaymentModal"; export type ManualDataInsertionScreenNavigationParams = { @@ -72,7 +72,7 @@ type State = Readonly<{ const styles = StyleSheet.create({ whiteBg: { - backgroundColor: variables.colorWhite + backgroundColor: IOColors.white } }); diff --git a/ts/screens/wallet/payment/ScanQrCodeScreen.tsx b/ts/screens/wallet/payment/ScanQrCodeScreen.tsx index 49a10810eb9..c516f11c984 100644 --- a/ts/screens/wallet/payment/ScanQrCodeScreen.tsx +++ b/ts/screens/wallet/payment/ScanQrCodeScreen.tsx @@ -62,6 +62,7 @@ import { import { isAndroid } from "../../../utils/platform"; import { showToast } from "../../../utils/showToast"; import { mixpanelTrack } from "../../../mixpanel"; +import { IOColors } from "../../../components/core/variables/IOColors"; type Props = IOStackNavigationRouteProps & ReturnType & @@ -85,7 +86,7 @@ const styles = StyleSheet.create({ }, white: { - backgroundColor: customVariables.brandPrimaryInverted + backgroundColor: IOColors.white }, bottomText: { @@ -93,7 +94,7 @@ const styles = StyleSheet.create({ }, content: { - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, marginTop: -cameraTextOverlapping, zIndex: 1 }, @@ -111,7 +112,7 @@ const styles = StyleSheet.create({ alignSelf: "center", marginTop: -cameraTextOverlapping, width: screenWidth - customVariables.contentPadding * 2, - backgroundColor: customVariables.colorWhite, + backgroundColor: IOColors.white, zIndex: 999 }, @@ -342,7 +343,7 @@ class ScanQrCodeScreen extends React.Component { ({ ".alert": { "NativeBase.Text": { - color: variables.colorWhite + color: IOColors.white }, "UIComponent.IconFont": { - color: variables.colorWhite + color: IOColors.white }, backgroundColor: variables.calendarExpirableColor }, ".darkGray": { "NativeBase.Text": { - color: variables.colorWhite + color: IOColors.white }, "UIComponent.IconFont": { - color: variables.colorWhite + color: IOColors.white }, backgroundColor: variables.brandDarkGray }, ".gray": { "NativeBase.Text": { - color: variables.colorWhite + color: IOColors.white }, "UIComponent.IconFont": { - color: variables.colorWhite + color: IOColors.white }, backgroundColor: variables.lighterGray }, @@ -116,7 +117,7 @@ export default (): Theme => ({ "NativeBase.Text": { color: variables.brandPrimary }, borderWidth: 1, borderColor: variables.brandPrimary, - backgroundColor: variables.colorWhite + backgroundColor: IOColors.white } }, "NativeBase.Text": { @@ -132,41 +133,41 @@ export default (): Theme => ({ "UIComponent.IconFont": { color: variables.btnDisabledBg }, - backgroundColor: variables.colorWhite + backgroundColor: IOColors.white }, "UIComponent.IconFont": { color: variables.brandPrimary }, - backgroundColor: variables.colorWhite + backgroundColor: IOColors.white }, - ".white": { backgroundColor: variables.colorWhite }, + ".white": { backgroundColor: IOColors.white }, ".whiteBordered": { backgroundColor: "transparent", - borderColor: variables.colorWhite, + borderColor: IOColors.white, borderWidth: 1, "NativeBase.Text": { - color: variables.colorWhite + color: IOColors.white }, "UIComponent.IconFont": { - color: variables.colorWhite + color: IOColors.white } }, ".cancel": { backgroundColor: variables.brandDarkGray, "NativeBase.Text": { - color: variables.colorWhite + color: IOColors.white }, "UIComponent.IconFont": { - color: variables.colorWhite + color: IOColors.white } }, ".disabled": { "UIComponent.IconFont": { - color: variables.colorWhite + color: IOColors.white } }, diff --git a/ts/theme/components/Header.ts b/ts/theme/components/Header.ts index 4b72c598387..71ade4875bd 100644 --- a/ts/theme/components/Header.ts +++ b/ts/theme/components/Header.ts @@ -3,6 +3,7 @@ import { Platform } from "react-native"; import { makeFontStyleObject } from "../fonts"; import { Theme } from "../types"; import variables from "../variables"; +import { IOColors } from "../../components/core/variables/IOColors"; declare module "native-base" { // eslint-disable-next-line @typescript-eslint/no-namespace @@ -95,7 +96,7 @@ export default (): Theme => ({ "NativeBase.Right": { "NativeBase.Button": { "UIComponent.IconFont": { - color: variables.brandPrimaryInverted + color: IOColors.white } } } @@ -106,7 +107,7 @@ export default (): Theme => ({ "NativeBase.Right": { "NativeBase.Button": { "UIComponent.IconFont": { - color: variables.brandPrimaryInverted + color: IOColors.white } } } diff --git a/ts/theme/components/Text.ts b/ts/theme/components/Text.ts index 7313b98b563..06844c87793 100644 --- a/ts/theme/components/Text.ts +++ b/ts/theme/components/Text.ts @@ -2,6 +2,7 @@ import { Platform, TextProperties } from "react-native"; import { makeFontStyleObject } from "../fonts"; import { Theme } from "../types"; import variables from "../variables"; +import { IOColors } from "../../components/core/variables/IOColors"; /** * @deprecated @@ -66,7 +67,7 @@ export default (): Theme => ({ textAlign: "right" }, ".white": { - color: variables.colorWhite + color: IOColors.white }, ".dark": { color: variables.brandDarkestGray @@ -79,7 +80,7 @@ export default (): Theme => ({ }, ".badge": { ...makeFontStyleObject(Platform.select, variables.textBoldWeight), - color: variables.colorWhite, + color: IOColors.white, fontSize: 10, textAlign: "center", lineHeight: 14 diff --git a/ts/theme/variables.ts b/ts/theme/variables.ts index 8edc03ca48a..bcaab2fbbe7 100644 --- a/ts/theme/variables.ts +++ b/ts/theme/variables.ts @@ -10,6 +10,7 @@ import { Millisecond } from "italia-ts-commons/lib/units"; import materialVariables from "native-base/src/theme/variables/material"; import { Platform } from "react-native"; +import { IOColors } from "../components/core/variables/IOColors"; import { FontWeight, makeFontStyleObject } from "./fonts"; import { ThemeSimpleValue } from "./types"; @@ -21,9 +22,6 @@ export const VIBRATION_BARCODE_SCANNED_DURATION = 50 as Millisecond; const customVariables = Object.assign(materialVariables, { minTouchableAreaSize: 48, - // Android - buttonUppercaseAndroidText: false, - // Button btnTextFontWeight: "700" as FontWeight, textLightButtonWeight: "600" as FontWeight, @@ -46,11 +44,12 @@ const customVariables = Object.assign(materialVariables, { get btnLightTextColor(): ThemeSimpleValue { return this.textColor; }, - btnLightBorderColor: "#AEB5BF", - // Color + /* ALIAS TOKENS */ + /* Don't put hardcoded color values here. + Add them to IOColors object, instead. + */ brandPrimary: "#0066CC", - brandPrimaryInverted: "#FFFFFF", brandGray: "#F5F6F7", brandLight: "#FCFDFF", brandSuccess: "#007005", @@ -70,9 +69,9 @@ const customVariables = Object.assign(materialVariables, { lighterGray: "#C1C9D2", lightestGray: "#E0E3E6", + btnLightBorderColor: "#AEB5BF", cardExpiredTextColor: "#FF0000", cardFontColor: "#17324D", - colorWhite: "#FFFFFF", colorBlack: "#000000", disabledService: "#909DA8", itemBorderDefaultColor: "#5F6F82", @@ -172,7 +171,7 @@ const customVariables = Object.assign(materialVariables, { contentPrimaryBackground: "#0073E6", // Footer - footerBackground: "#FFFFFF", + footerBackground: IOColors.white, footerElevation: 20, footerPaddingTop: 16, footerPaddingLeft: 24,