diff --git a/src/account/Education.tsx b/src/account/Education.tsx index 8b8105895d0..c38e9001513 100644 --- a/src/account/Education.tsx +++ b/src/account/Education.tsx @@ -123,7 +123,9 @@ const Education = (props: Props) => { : } + icon={ + currentIndex === 0 ? : + } /> diff --git a/src/account/SecuritySubmenu.tsx b/src/account/SecuritySubmenu.tsx index 3e591f2dff7..b8b328410a9 100644 --- a/src/account/SecuritySubmenu.tsx +++ b/src/account/SecuritySubmenu.tsx @@ -408,7 +408,7 @@ const styles = StyleSheet.create({ }, value: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, marginRight: Spacing.Smallest8, marginLeft: Spacing.Tiny4, }, diff --git a/src/account/ShakeForSupport.tsx b/src/account/ShakeForSupport.tsx index 2a7d742a6f7..2565f9caa0f 100644 --- a/src/account/ShakeForSupport.tsx +++ b/src/account/ShakeForSupport.tsx @@ -89,7 +89,7 @@ const styles = StyleSheet.create({ position: 'absolute', bottom: 0, width: '100%', - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 24, diff --git a/src/account/SupportContact.tsx b/src/account/SupportContact.tsx index 3ca6a5037a0..c3f7459e582 100644 --- a/src/account/SupportContact.tsx +++ b/src/account/SupportContact.tsx @@ -203,7 +203,7 @@ const styles = StyleSheet.create({ }, disclaimerText: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, }, container: { flex: 1, @@ -234,7 +234,7 @@ const styles = StyleSheet.create({ borderRadius: 8, borderWidth: 1, marginBottom: 16, - color: colors.textPrimary, + color: colors.contentPrimary, height: 80, maxHeight: 150, }, @@ -247,7 +247,7 @@ const styles = StyleSheet.create({ borderRadius: 8, borderWidth: 1, marginBottom: 16, - color: colors.textPrimary, + color: colors.contentPrimary, maxHeight: 50, }, headerText: { diff --git a/src/app/DebugImages.tsx b/src/app/DebugImages.tsx index 75a213e6d49..336204239ea 100644 --- a/src/app/DebugImages.tsx +++ b/src/app/DebugImages.tsx @@ -21,7 +21,12 @@ const IconItem = ({ Component, fileName }: { Component: React.ElementType; fileN return ( {/* Not all icons have the same props, we do our best here to set consistent size and color */} - + {fileName.split('.tsx')[0].slice(2)} ) @@ -30,7 +35,7 @@ const IconItem = ({ Component, fileName }: { Component: React.ElementType; fileN function DebugImages() { return ( diff --git a/src/backup/BackupIntroduction.tsx b/src/backup/BackupIntroduction.tsx index 049c5822fe5..46614e3a27d 100644 --- a/src/backup/BackupIntroduction.tsx +++ b/src/backup/BackupIntroduction.tsx @@ -117,7 +117,7 @@ function goToAccountKeyGuide() { const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, }, introContainer: { flexGrow: 1, diff --git a/src/backup/BackupPhraseContainer.tsx b/src/backup/BackupPhraseContainer.tsx index 97f09fab4ec..0cb62bc726b 100644 --- a/src/backup/BackupPhraseContainer.tsx +++ b/src/backup/BackupPhraseContainer.tsx @@ -159,7 +159,7 @@ const styles = StyleSheet.create({ }, indexText: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, }, twelveWordTable: { flexDirection: 'row', diff --git a/src/backup/BackupQuiz.tsx b/src/backup/BackupQuiz.tsx index 5dce9f10cd1..1eb001b0978 100644 --- a/src/backup/BackupQuiz.tsx +++ b/src/backup/BackupQuiz.tsx @@ -380,13 +380,13 @@ const styles = StyleSheet.create({ ...typeScale.bodySmall, textAlign: 'center', lineHeight: undefined, - color: colors.textSecondary, + color: colors.contentSecondary, }, chosenWordFilled: { ...typeScale.bodySmall, textAlign: 'center', lineHeight: undefined, - color: colors.textPrimary, + color: colors.contentPrimary, }, mnemonicButtonsContainer: { marginTop: 24, diff --git a/src/backup/CancelConfirm.tsx b/src/backup/CancelConfirm.tsx index 2109f2a8b53..daf73aee0da 100644 --- a/src/backup/CancelConfirm.tsx +++ b/src/backup/CancelConfirm.tsx @@ -55,6 +55,6 @@ export default function CancelConfirm({ screen }: Props) { const styles = StyleSheet.create({ button: { - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/backup/QuizzBottom.tsx b/src/backup/QuizzBottom.tsx index e6ecf2a8398..e90f1254284 100644 --- a/src/backup/QuizzBottom.tsx +++ b/src/backup/QuizzBottom.tsx @@ -52,6 +52,6 @@ const styles = StyleSheet.create({ incorrect: { ...typeScale.labelMedium, textAlign: 'center', - color: colors.error, + color: colors.errorPrimary, }, }) diff --git a/src/celoNews/CeloNewsFeed.tsx b/src/celoNews/CeloNewsFeed.tsx index 41efb6f818d..e42abc0f7cc 100644 --- a/src/celoNews/CeloNewsFeed.tsx +++ b/src/celoNews/CeloNewsFeed.tsx @@ -149,7 +149,7 @@ const styles = StyleSheet.create({ }, headerDescription: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, marginTop: Spacing.Smallest8, }, readMoreButton: { diff --git a/src/celoNews/CeloNewsFeedItem.tsx b/src/celoNews/CeloNewsFeedItem.tsx index 96adfe81b66..5d4a1c39cac 100644 --- a/src/celoNews/CeloNewsFeedItem.tsx +++ b/src/celoNews/CeloNewsFeedItem.tsx @@ -83,7 +83,7 @@ const styles = StyleSheet.create({ }, author: { ...typeScale.labelSemiBoldSmall, - color: colors.warning, + color: colors.warningPrimary, marginBottom: Spacing.Small12, }, row: { @@ -97,7 +97,7 @@ const styles = StyleSheet.create({ ...typeScale.bodySmall, fontSize: 13, lineHeight: 16, - color: colors.textSecondary, + color: colors.contentSecondary, marginLeft: 4, }, image: { diff --git a/src/components/AccountNumber.tsx b/src/components/AccountNumber.tsx index 97a4d11bbae..13da850a190 100644 --- a/src/components/AccountNumber.tsx +++ b/src/components/AccountNumber.tsx @@ -67,7 +67,7 @@ const styles = StyleSheet.create({ }, text: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, marginBottom: 8, }, link: { diff --git a/src/components/AddAssetsBottomSheet.tsx b/src/components/AddAssetsBottomSheet.tsx index f8eb506cbce..c200b65e8bd 100644 --- a/src/components/AddAssetsBottomSheet.tsx +++ b/src/components/AddAssetsBottomSheet.tsx @@ -75,7 +75,7 @@ export default function AddAssetsBottomSheet({ testID={`${testId}/${action.name}`} > <> - + {action.title} {action.details} diff --git a/src/components/BottomSheetBase.tsx b/src/components/BottomSheetBase.tsx index ce67934f4d9..66188bdfc1d 100644 --- a/src/components/BottomSheetBase.tsx +++ b/src/components/BottomSheetBase.tsx @@ -1,9 +1,9 @@ import { BottomSheetBackdrop, BottomSheetModal, BottomSheetProps } from '@gorhom/bottom-sheet' import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types' import React, { useCallback, useEffect } from 'react' -import { Keyboard, StyleSheet } from 'react-native' +import { Keyboard } from 'react-native' import { useReducedMotion } from 'react-native-reanimated' -import Colors from 'src/styles/colors' +import styles from 'src/styles/styles' interface BottomSheetBaseProps { forwardedRef: React.RefObject @@ -64,8 +64,8 @@ const BottomSheetBase = ({ enablePanDownToClose backdropComponent={renderBackdrop} handleComponent={handleComponent} - handleIndicatorStyle={[styles.handle, handleIndicatorStyle]} - backgroundStyle={backgroundStyle} + handleIndicatorStyle={[styles.bottomSheetHandleIndicator, handleIndicatorStyle]} + backgroundStyle={[styles.bottomSheetBackground, backgroundStyle]} onAnimate={handleAnimate} onDismiss={onClose} onChange={onChange} @@ -79,11 +79,4 @@ const BottomSheetBase = ({ ) } -const styles = StyleSheet.create({ - handle: { - backgroundColor: Colors.bottomSheetHandle, - width: 40, - }, -}) - export default BottomSheetBase diff --git a/src/components/BottomSheetLegacy.tsx b/src/components/BottomSheetLegacy.tsx index 4bdccf50ac4..961625b6b73 100644 --- a/src/components/BottomSheetLegacy.tsx +++ b/src/components/BottomSheetLegacy.tsx @@ -133,7 +133,7 @@ const styles = StyleSheet.create({ bottom: 0, opacity: 1, width: '100%', - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, borderTopRightRadius: Spacing.Regular16, borderTopLeftRadius: Spacing.Regular16, }, diff --git a/src/components/Button.tsx b/src/components/Button.tsx index d855c2f148b..4f88e3f1bd7 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -160,20 +160,20 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) { let borderColor switch (type) { case BtnTypes.PRIMARY: - textColor = Colors.textInverse + textColor = Colors.contentInverse backgroundColor = Colors.buttonPrimary opacity = disabled ? 0.25 : 1.0 break case BtnTypes.SECONDARY: - textColor = Colors.textPrimary + textColor = Colors.contentPrimary backgroundColor = Colors.buttonSecondary borderColor = Colors.border opacity = disabled ? 0.5 : 1.0 break case BtnTypes.TERTIARY: - textColor = Colors.textPrimary - backgroundColor = Colors.background + textColor = Colors.contentPrimary + backgroundColor = Colors.backgroundPrimary borderColor = Colors.border opacity = disabled ? 0.5 : 1.0 break diff --git a/src/components/CancelButton.tsx b/src/components/CancelButton.tsx index 84379d1fa7a..6db16dae251 100644 --- a/src/components/CancelButton.tsx +++ b/src/components/CancelButton.tsx @@ -53,6 +53,6 @@ export default function CancelButton({ const styles = StyleSheet.create({ title: { - color: colors.textPrimary, + color: colors.contentPrimary, }, }) diff --git a/src/components/Card.tsx b/src/components/Card.tsx index b98c256a1cc..469b25de339 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -25,7 +25,7 @@ export default function Card({ style, rounded = false, shadow = Shadow.Soft, ... const styles = StyleSheet.create({ container: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, padding: 16, }, rounded: { diff --git a/src/components/CircleButton.tsx b/src/components/CircleButton.tsx index 636f3f3c25e..41ba5838e41 100644 --- a/src/components/CircleButton.tsx +++ b/src/components/CircleButton.tsx @@ -32,7 +32,7 @@ export default class CircleButton extends React.PureComponent { borderWidth !== undefined ? { borderWidth } : { borderWidth: 0 }, { borderColor: color, width: size, height: size, borderRadius: Math.floor(size! / 2) }, ] - const xColor = solid ? colors.textInverse : color + const xColor = solid ? colors.contentInverse : color return ( diff --git a/src/components/ClipboardAwarePasteButton.tsx b/src/components/ClipboardAwarePasteButton.tsx index ffc97b331e9..86ccafb8c1f 100644 --- a/src/components/ClipboardAwarePasteButton.tsx +++ b/src/components/ClipboardAwarePasteButton.tsx @@ -54,7 +54,7 @@ const styles = StyleSheet.create({ justifyContent: 'center', paddingVertical: 5, paddingHorizontal: Spacing.Thick24, - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, flexDirection: 'row', height: Spacing.XLarge48, flexGrow: 1, diff --git a/src/components/CodeInput.tsx b/src/components/CodeInput.tsx index 0762b333684..fedba4e5b06 100644 --- a/src/components/CodeInput.tsx +++ b/src/components/CodeInput.tsx @@ -41,10 +41,10 @@ export default function CodeInput({ const showStatus = showCheckmark || showSpinner || showError const textColorForStatus = { - [CodeInputStatus.Inputting]: colors.textPrimary, - [CodeInputStatus.Processing]: colors.textSecondary, - [CodeInputStatus.Error]: colors.error, - [CodeInputStatus.Accepted]: colors.success, + [CodeInputStatus.Inputting]: colors.contentPrimary, + [CodeInputStatus.Processing]: colors.contentSecondary, + [CodeInputStatus.Error]: colors.errorPrimary, + [CodeInputStatus.Accepted]: colors.successPrimary, } return ( @@ -85,7 +85,7 @@ export default function CodeInput({ {showError && ( diff --git a/src/components/CodeRow.tsx b/src/components/CodeRow.tsx index 1687202548c..4c86fd75695 100644 --- a/src/components/CodeRow.tsx +++ b/src/components/CodeRow.tsx @@ -103,7 +103,7 @@ function CodeRow({ const styles = StyleSheet.create({ codeInput: { flex: 0, - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, borderColor: colors.border, borderRadius: 3, borderWidth: 1, @@ -126,7 +126,7 @@ const styles = StyleSheet.create({ padding: 10, }, codeProcessingContainer: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, position: 'relative', justifyContent: 'center', marginVertical: 5, @@ -137,7 +137,7 @@ const styles = StyleSheet.create({ height: 50, }, codeInputSpinner: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, position: 'absolute', top: 5, right: 3, @@ -156,7 +156,7 @@ const styles = StyleSheet.create({ codeValue: { ...typeScale.bodyMedium, fontSize: 15, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/components/ContactCircleSelf.tsx b/src/components/ContactCircleSelf.tsx index 77d59356105..e7a28b8b712 100644 --- a/src/components/ContactCircleSelf.tsx +++ b/src/components/ContactCircleSelf.tsx @@ -22,7 +22,7 @@ export default function ContactCircleSelf({ style, size }: Props) { size={size} backgroundColor={colors.backgroundSecondary} borderColor={colors.border} - foregroundColor={colors.textPrimary} + foregroundColor={colors.contentPrimary} /> ) } diff --git a/src/components/DataFieldWithCopy.tsx b/src/components/DataFieldWithCopy.tsx index ee0210ef817..bf0f4619dfb 100644 --- a/src/components/DataFieldWithCopy.tsx +++ b/src/components/DataFieldWithCopy.tsx @@ -42,7 +42,7 @@ function DataFieldWithCopy({ label, value, copySuccessMessage, testID, onCopy, s {value} - + diff --git a/src/components/DevSkipButton.tsx b/src/components/DevSkipButton.tsx index 5750b0ca382..50aa34f6b67 100644 --- a/src/components/DevSkipButton.tsx +++ b/src/components/DevSkipButton.tsx @@ -93,7 +93,7 @@ const styles = StyleSheet.create({ height: 25, }, skipButton: { - backgroundColor: colors.error, + backgroundColor: colors.errorPrimary, }, hiddenButton: { flex: 1, diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index a40726c2234..bb87d9e857a 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -110,7 +110,7 @@ const styles = StyleSheet.create({ flexWrap: 'wrap', }, secondary: { - color: colors.textSecondary, + color: colors.contentSecondary, paddingTop: 16, }, primary: { diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index bf5bbfb03eb..d6bbfcf2934 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -81,7 +81,7 @@ const styles = StyleSheet.create({ borderColor: Colors.border, borderRadius: Spacing.Tiny4, borderWidth: 1, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, flexDirection: 'column', width: '100%', }, diff --git a/src/components/ErrorMessageInline.tsx b/src/components/ErrorMessageInline.tsx index 9100238653e..7e7ed287476 100644 --- a/src/components/ErrorMessageInline.tsx +++ b/src/components/ErrorMessageInline.tsx @@ -68,7 +68,7 @@ const styles = StyleSheet.create({ }, errorMessage: { ...typeScale.bodySmall, - color: colors.error, + color: colors.errorPrimary, }, }) diff --git a/src/components/ExchangesBottomSheet.tsx b/src/components/ExchangesBottomSheet.tsx index 0d733c9c22e..c09bc64392c 100644 --- a/src/components/ExchangesBottomSheet.tsx +++ b/src/components/ExchangesBottomSheet.tsx @@ -65,7 +65,7 @@ const styles = StyleSheet.create({ marginBottom: Spacing.Smallest8, }, info: { - color: colors.textSecondary, + color: colors.contentSecondary, marginBottom: Spacing.Smallest8, }, exchangeText: { diff --git a/src/components/FeeDrawer.tsx b/src/components/FeeDrawer.tsx index f1bde46f9f1..4bd02efa7c9 100644 --- a/src/components/FeeDrawer.tsx +++ b/src/components/FeeDrawer.tsx @@ -122,6 +122,6 @@ const styles = StyleSheet.create({ }, dropDownText: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/components/FilterChipsCarousel.tsx b/src/components/FilterChipsCarousel.tsx index f0387e67581..6de0830368a 100644 --- a/src/components/FilterChipsCarousel.tsx +++ b/src/components/FilterChipsCarousel.tsx @@ -85,15 +85,15 @@ function FilterChipsCarousel({ style={[ styles.filterChipText, chip.isSelected - ? { color: Colors.textInverse } - : { color: Colors.textSecondary }, + ? { color: Colors.contentInverse } + : { color: Colors.contentSecondary }, ]} > {chip.name} {isNetworkChip(chip) && ( { const styles = StyleSheet.create({ container: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, height: variables.height, width: variables.width, flex: 1, diff --git a/src/components/GradientBlock.tsx b/src/components/GradientBlock.tsx index 3a07a5653f2..5c0ad37fb09 100644 --- a/src/components/GradientBlock.tsx +++ b/src/components/GradientBlock.tsx @@ -9,7 +9,7 @@ type Props = Omit & { export default function GradientBlock({ style, ...props }: Props) { return ( = { [NotificationVariant.Info]: { - primary: Colors.textPrimary, + primary: Colors.contentPrimary, secondary: Colors.info, }, [NotificationVariant.Success]: { - primary: Colors.success, + primary: Colors.successPrimary, secondary: Colors.successSecondary, }, [NotificationVariant.Warning]: { - primary: Colors.warning, + primary: Colors.warningPrimary, secondary: Colors.warningSecondary, }, [NotificationVariant.Error]: { - primary: Colors.error, + primary: Colors.errorPrimary, secondary: Colors.errorSecondary, }, } diff --git a/src/components/InfoBottomSheet.tsx b/src/components/InfoBottomSheet.tsx index 3110275ced1..069e4711ec6 100644 --- a/src/components/InfoBottomSheet.tsx +++ b/src/components/InfoBottomSheet.tsx @@ -54,6 +54,6 @@ const styles = StyleSheet.create({ marginTop: 37, marginBottom: 9, textAlign: 'center', - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/components/LabelWithInfo.tsx b/src/components/LabelWithInfo.tsx index feebb067ddf..0fc9d7a7dc1 100644 --- a/src/components/LabelWithInfo.tsx +++ b/src/components/LabelWithInfo.tsx @@ -33,7 +33,7 @@ export function LabelWithInfo({ {label} - {onPress && } + {onPress && } ) @@ -47,7 +47,7 @@ const styles = StyleSheet.create({ alignItems: 'center', paddingRight: 20, // Prevents Icon from being cut off on long labels minWidth: '25%', - color: Colors.textSecondary, + color: Colors.contentSecondary, }, labelText: { ...typeScale.bodyMedium, diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 031c02a2876..2eba93beba0 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -33,7 +33,7 @@ export default function ListItem({ children, onPress, disabled, testID, borderle const styles = StyleSheet.create({ container: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, }, innerView: { paddingVertical: variables.contentPadding, diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 2d5b2eda672..03440aabf5e 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -50,7 +50,7 @@ export default function Modal({ const styles = StyleSheet.create({ root: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, padding: 24, maxHeight: '100%', }, diff --git a/src/components/OnboardingCard.tsx b/src/components/OnboardingCard.tsx index 0e88de7eb0e..6308d410cdf 100644 --- a/src/components/OnboardingCard.tsx +++ b/src/components/OnboardingCard.tsx @@ -23,7 +23,7 @@ function OnboardingCard({ testId, onPress, title, subtitle }: Props) { {title} {subtitle} - + @@ -50,11 +50,11 @@ const styles = StyleSheet.create({ ...typeScale.labelSmall, lineHeight: 24, paddingBottom: 5, - color: Colors.success, + color: Colors.successPrimary, }, subtitle: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/components/PercentageIndicator.tsx b/src/components/PercentageIndicator.tsx index 7a22e0da997..3e0a36ccf24 100644 --- a/src/components/PercentageIndicator.tsx +++ b/src/components/PercentageIndicator.tsx @@ -45,7 +45,7 @@ function PercentageIndicator({ color = Colors.accent indicator = } else if (comparison < 0) { - color = Colors.error + color = Colors.errorPrimary indicator = } else { color = Colors.inactive diff --git a/src/components/PhoneNumberInput.tsx b/src/components/PhoneNumberInput.tsx index 93401318a4a..ec0020e2963 100644 --- a/src/components/PhoneNumberInput.tsx +++ b/src/components/PhoneNumberInput.tsx @@ -108,7 +108,7 @@ export default function PhoneNumberInput({ isExpandable={editable} isExpanded={false} containerStyle={styles.countryFlagContainer} - arrowColor={colors.textSecondary} + arrowColor={colors.contentSecondary} > {flagEmoji} @@ -148,7 +148,7 @@ const styles = StyleSheet.create({ height: Spacing.XLarge48, paddingHorizontal: 12, alignItems: 'stretch', - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, borderRadius: 8, }, countryFlagContainer: { diff --git a/src/components/PhoneNumberWithFlag.tsx b/src/components/PhoneNumberWithFlag.tsx index 88c0f9d6de2..0e025ac3d92 100644 --- a/src/components/PhoneNumberWithFlag.tsx +++ b/src/components/PhoneNumberWithFlag.tsx @@ -29,7 +29,7 @@ export class PhoneNumberWithFlag extends React.PureComponent { style={{ ...typeScale.labelSmall, lineHeight: 18, - color: this.props.textColor ?? Colors.textPrimary, + color: this.props.textColor ?? Colors.contentPrimary, }} > {parsedNumber ? parsedNumber.displayNumberInternational : ''} diff --git a/src/components/RecoveryPhraseInput.tsx b/src/components/RecoveryPhraseInput.tsx index c1bdc51e7a8..97f230d166b 100644 --- a/src/components/RecoveryPhraseInput.tsx +++ b/src/components/RecoveryPhraseInput.tsx @@ -135,8 +135,8 @@ export default function RecoveryPhraseInput({ const styles = StyleSheet.create({ container: { padding: 0, - backgroundColor: colors.background, - borderColor: colors.background, + backgroundColor: colors.backgroundPrimary, + borderColor: colors.backgroundPrimary, borderRadius: Spacing.Smallest8, borderWidth: 1, }, @@ -171,7 +171,7 @@ const styles = StyleSheet.create({ }, labelLong: { ...typeScale.labelSemiBoldSmall, - color: colors.textSecondary, + color: colors.contentSecondary, opacity: 0.5, marginBottom: 4, }, @@ -180,7 +180,7 @@ const styles = StyleSheet.create({ }, codeValueLong: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, }, statusContainer: { width: 32, diff --git a/src/components/ReviewFrame.tsx b/src/components/ReviewFrame.tsx index 3b618b66c7f..a0a85ef45c6 100644 --- a/src/components/ReviewFrame.tsx +++ b/src/components/ReviewFrame.tsx @@ -114,7 +114,7 @@ class ReviewFrame extends React.PureComponent { const styles = StyleSheet.create({ body: { flex: 1, - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, }, scrollViewContentContainer: { paddingVertical: 10, diff --git a/src/components/SectionHead.tsx b/src/components/SectionHead.tsx index 4eb65c0ead9..87da1336de4 100644 --- a/src/components/SectionHead.tsx +++ b/src/components/SectionHead.tsx @@ -19,7 +19,7 @@ export default function SectionHead({ text, style }: Props) { const styles = StyleSheet.create({ container: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, paddingHorizontal: variables.contentPadding, paddingVertical: 8, flexDirection: 'row', @@ -28,6 +28,6 @@ const styles = StyleSheet.create({ }, text: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/components/SegmentedControl.tsx b/src/components/SegmentedControl.tsx index bb9886e11e4..837e35aa48b 100644 --- a/src/components/SegmentedControl.tsx +++ b/src/components/SegmentedControl.tsx @@ -32,12 +32,12 @@ export default function SegmentedControl({ values, selectedIndex = 0, onChange } const color = interpolateColor( selectedIndex, [0.5, 1], - [colors.backgroundInverse, colors.background] + [colors.backgroundInverse, colors.backgroundPrimary] ) const colorInverted = interpolateColor( selectedIndex, [0.5, 1], - [colors.background, colors.backgroundInverse] + [colors.backgroundPrimary, colors.backgroundInverse] ) const onLayout = ({ diff --git a/src/components/SelectRecipientButton.tsx b/src/components/SelectRecipientButton.tsx index dfe72d4e83a..c9f77eed26e 100644 --- a/src/components/SelectRecipientButton.tsx +++ b/src/components/SelectRecipientButton.tsx @@ -39,7 +39,7 @@ function SelectRecipientButton({ )} {showCheckmark && ( - + )} @@ -62,7 +62,7 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, title: { ...typeScale.labelMedium, diff --git a/src/components/SettingsItem.tsx b/src/components/SettingsItem.tsx index ab4cf4425d8..03dc7d96bd7 100644 --- a/src/components/SettingsItem.tsx +++ b/src/components/SettingsItem.tsx @@ -67,10 +67,10 @@ export function SettingsItemTextValue({ {(!!value || showChevron) && ( )} - {isExternalLink && } + {isExternalLink && } @@ -149,7 +149,7 @@ export function SettingsItemCta({ <View style={styles.right}>{cta}</View> - {showChevron && <ForwardChevron height={12} color={colors.textSecondary} />} + {showChevron && <ForwardChevron height={12} color={colors.contentSecondary} />} </View> </Wrapper> ) @@ -170,7 +170,7 @@ const styles = StyleSheet.create({ }, value: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, marginRight: 8, }, valueActionable: { @@ -180,7 +180,7 @@ const styles = StyleSheet.create({ }, details: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, paddingTop: 16, paddingRight: 16, }, diff --git a/src/components/SimpleMessagingCard.tsx b/src/components/SimpleMessagingCard.tsx index f4c5c06d49c..656b861f3ce 100644 --- a/src/components/SimpleMessagingCard.tsx +++ b/src/components/SimpleMessagingCard.tsx @@ -63,7 +63,7 @@ const styles = StyleSheet.create({ container: {}, header: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginBottom: Spacing.Smallest8, }, innerContainer: { diff --git a/src/components/SingleDigitInput.tsx b/src/components/SingleDigitInput.tsx index 2716013b32a..54bee332cc0 100644 --- a/src/components/SingleDigitInput.tsx +++ b/src/components/SingleDigitInput.tsx @@ -45,7 +45,7 @@ const styles = StyleSheet.create({ borderRadius: 3, borderWidth: 1, flex: 0, - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, height: 50, width: 50, marginVertical: 5, diff --git a/src/components/SmallButton.tsx b/src/components/SmallButton.tsx index 3294bc63696..86560e7782c 100644 --- a/src/components/SmallButton.tsx +++ b/src/components/SmallButton.tsx @@ -41,7 +41,7 @@ export default class SmallButton extends React.Component<ButtonProps> { accessibilityLabel={accessibilityLabel} style={[ styles.text, - solid ? { color: colors.textInverse } : { color: colors.accent }, + solid ? { color: colors.contentInverse } : { color: colors.accent }, children ? styles.textPadding : null, textStyle, ]} @@ -80,7 +80,7 @@ const styles = StyleSheet.create({ ...typeScale.labelMedium, fontSize: 13, lineHeight: 20, - color: colors.textSecondary, + color: colors.contentSecondary, textAlign: 'center', }, textPadding: { diff --git a/src/components/SmartTopAlert.tsx b/src/components/SmartTopAlert.tsx index 3ed1763ec17..d3bafe4961f 100644 --- a/src/components/SmartTopAlert.tsx +++ b/src/components/SmartTopAlert.tsx @@ -151,18 +151,18 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', - backgroundColor: colors.warning, + backgroundColor: colors.warningPrimary, paddingBottom: PADDING_VERTICAL, paddingHorizontal: 25, }, containerError: { - backgroundColor: colors.error, + backgroundColor: colors.errorPrimary, }, containerWithButton: { flexDirection: 'column', }, text: { - color: colors.textInverse, + color: colors.contentInverse, // Unset explicit lineHeight set by fonts.tsx otherwise the text is not centered vertically lineHeight: undefined, textAlign: 'center', @@ -173,11 +173,11 @@ const styles = StyleSheet.create({ }, button: { marginTop: 8, - borderColor: colors.textInverse, + borderColor: colors.contentInverse, alignSelf: 'center', }, buttonText: { - color: colors.textInverse, + color: colors.contentInverse, }, }) diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx index d2a60c5427e..8d925bb60f0 100644 --- a/src/components/TextInput.tsx +++ b/src/components/TextInput.tsx @@ -83,6 +83,7 @@ export class CTextInput extends React.Component<Props, State> { inputStyle, ]} value={value} + selectionColor={Colors.contentSecondary} {...passThroughProps} onFocus={this.handleInputFocus} onBlur={this.handleInputBlur} @@ -93,7 +94,7 @@ export class CTextInput extends React.Component<Props, State> { onPress={this.onClear} solid={true} size={20} - activeColor={Colors.textSecondary} + activeColor={Colors.contentSecondary} inactiveColor={Colors.disabled} /> )} diff --git a/src/components/TokenBalance.tsx b/src/components/TokenBalance.tsx index 1f0d5c9b8e9..39f8e84096c 100644 --- a/src/components/TokenBalance.tsx +++ b/src/components/TokenBalance.tsx @@ -248,7 +248,7 @@ export function FiatExchangeTokenBalance() { {tokenBalances.length > 1 ? ( <TouchableOpacity style={styles.row} onPress={onViewBalances} testID="ViewBalances"> <Text style={styles.exchangeTotalValue}>{t('totalValue')}</Text> - <ForwardChevron height={9.62} color={Colors.textSecondary} /> + <ForwardChevron height={9.62} color={Colors.contentSecondary} /> </TouchableOpacity> ) : ( <Text style={styles.exchangeTotalValue}>{t('totalValue')}</Text> @@ -279,7 +279,7 @@ const styles = StyleSheet.create({ }, totalAssetsInfoText: { ...typeScale.bodySmall, - color: Colors.textInverse, + color: Colors.contentInverse, textAlign: 'center', }, titleExchange: { @@ -293,7 +293,7 @@ const styles = StyleSheet.create({ }, exchangeTotalValue: { ...typeScale.labelSemiBoldSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, paddingRight: 3, paddingBottom: 4, }, @@ -318,6 +318,6 @@ const styles = StyleSheet.create({ }, tokenBalance: { ...typeScale.labelSemiBoldSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/components/TokenBottomSheet.tsx b/src/components/TokenBottomSheet.tsx index 5511fb552fb..759dfa20554 100644 --- a/src/components/TokenBottomSheet.tsx +++ b/src/components/TokenBottomSheet.tsx @@ -104,7 +104,7 @@ function NoResults({ return ( <View testID={testID} style={styles.noResultsContainer}> <View style={styles.iconContainer}> - <InfoIcon color={Colors.warning} /> + <InfoIcon color={Colors.warningPrimary} /> </View> <Text style={styles.noResultsText}> {t(noResultsText, { searchTerm: searchTerm, filterNames: activeFilterNames.join(', ') })} @@ -271,6 +271,7 @@ function TokenBottomSheet({ keyExtractor={(item) => item.tokenId} contentContainerStyle={{ paddingBottom: insets.bottom, + backgroundColor: Colors.backgroundPrimary, // fill full height if there are filter chips, otherwise the bottom // sheet height changes as tokens are filtered flexGrow: filterChips.length ? 1 : undefined, @@ -400,7 +401,7 @@ const styles = StyleSheet.create({ position: 'absolute', top: 0, padding: Spacing.Thick24, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, width: '100%', }, title: { diff --git a/src/components/TokenEnterAmount.test.tsx b/src/components/TokenEnterAmount.test.tsx index fab0f9fa8f6..8d3a579df70 100644 --- a/src/components/TokenEnterAmount.test.tsx +++ b/src/components/TokenEnterAmount.test.tsx @@ -24,9 +24,9 @@ jest.mock('src/analytics/AppAnalytics') const mockStore = { localCurrency: { isLoading: false, - preferredCurrencyCode: LocalCurrencyCode['USD'], - fetchedCurrencyCode: LocalCurrencyCode['USD'], - usdToLocalRate: '1', + preferredCurrencyCode: LocalCurrencyCode['BOB'], + fetchedCurrencyCode: LocalCurrencyCode['BOB'], + usdToLocalRate: '0.5', } satisfies RootState['localCurrency'], } @@ -70,6 +70,7 @@ describe('TokenEnterAmount', () => { expect(unformatNumberForProcessing('')).toBe('') expect(unformatNumberForProcessing('0.25')).toBe('0.25') expect(unformatNumberForProcessing('1,234.34567')).toBe('1234.34567') + expect(unformatNumberForProcessing('1234.34567')).toBe('1234.34567') expect(roundFiatValue(null)).toBe('') expect(roundFiatValue(new BigNumber('0.01'))).toBe('0.01') @@ -119,6 +120,7 @@ describe('TokenEnterAmount', () => { expect(unformatNumberForProcessing('')).toBe('') expect(unformatNumberForProcessing('0,25')).toBe('0.25') expect(unformatNumberForProcessing('1.234,34567')).toBe('1234.34567') + expect(unformatNumberForProcessing('1234.34567')).toBe('1234.34567') expect(roundFiatValue(null)).toBe('') expect(roundFiatValue(new BigNumber('0.01'))).toBe('0.01') @@ -194,8 +196,8 @@ describe('TokenEnterAmount', () => { displayAmount: '1,234.678 USDC', }, local: { - bignum: new BigNumber('1235.912678'), - displayAmount: '$1,235.91', + bignum: new BigNumber('617.956339'), + displayAmount: 'Bs617.96', }, }) }) @@ -215,18 +217,18 @@ describe('TokenEnterAmount', () => { await act(async () => { result.current.handleToggleAmountType() }) - await act(async () => result.current.handleAmountInputChange('1234.67')) - await act(async () => result.current.handleAmountInputChange('1234.678')) + await act(async () => result.current.handleAmountInputChange('Bs1234.67')) + await act(async () => result.current.handleAmountInputChange('Bs1234.678')) expect(result.current.amount).toBe('1234.67') expect(result.current.processedAmounts).toStrictEqual({ local: { bignum: new BigNumber('1234.67'), - displayAmount: '$1,234.67', + displayAmount: 'Bs1,234.67', }, token: { - bignum: new BigNumber('1233.436563'), - displayAmount: '1,233.436563 USDC', + bignum: new BigNumber('2466.873127'), + displayAmount: '2,466.873127 USDC', }, }) }) @@ -326,7 +328,7 @@ describe('TokenEnterAmount', () => { </Provider> ) - expect(input.props.value).toBe('$0.1') + expect(input.props.value).toBe('Bs0.1') expect(converted.props.children).toBe(`${APPROX_SYMBOL} 1 CELO`) }) diff --git a/src/components/TokenEnterAmount.tsx b/src/components/TokenEnterAmount.tsx index 141a2263aa2..342390044a7 100644 --- a/src/components/TokenEnterAmount.tsx +++ b/src/components/TokenEnterAmount.tsx @@ -53,6 +53,19 @@ export function formatNumber(value: string) { export function unformatNumberForProcessing(value: string) { const { decimalSeparator, groupingSeparator } = getNumberFormatSettings() + + /** + * If the number passed is a regular number which is formatted in the standard JS number format + * (e.g. "123456.789") then just keep it as is. This will ensure this function will properly + * unformat different numbers, including those that come from external sources (e.g from API + * response) + * + * Number.isNaN considers unfinished decimal number e.g. "1." a valid number. If the number ends with grouping separator instead of decimal separator - it can be simply erased by casting it to a number. + */ + if (!Number.isNaN(+value)) { + return value.endsWith(groupingSeparator) ? `${+value}` : value + } + return value.replaceAll(groupingSeparator, '').replaceAll(decimalSeparator, '.') } @@ -228,7 +241,7 @@ export function useEnterAmount(props: { } function handleAmountInputChange(val: string) { - let value = val.startsWith(localCurrencySymbol) ? val.slice(1) : val + let value = val.startsWith(localCurrencySymbol) ? val.slice(localCurrencySymbol.length) : val value = unformatNumberForProcessing(value) value = value.startsWith('.') ? `0${value}` : value @@ -417,7 +430,7 @@ export default function TokenEnterAmount({ )} </View> - {onOpenTokenPicker && <DownArrowIcon height={24} color={Colors.textSecondary} />} + {onOpenTokenPicker && <DownArrowIcon height={24} color={Colors.contentSecondary} />} </View> </Touchable> {token && ( @@ -481,7 +494,7 @@ export default function TokenEnterAmount({ testID={`${testID}/SwitchTokens`} hitSlop={variables.iconHitslop} > - <SwapArrows color={Colors.textSecondary} size={24} /> + <SwapArrows color={Colors.contentSecondary} size={24} /> </Touchable> )} @@ -546,7 +559,7 @@ const styles = StyleSheet.create({ }, tokenBalance: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, primaryAmountText: { ...typeScale.titleMedium, @@ -555,12 +568,12 @@ const styles = StyleSheet.create({ }, secondaryAmountText: { ...typeScale.bodyMedium, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, placeholderText: { ...typeScale.labelMedium, paddingHorizontal: 4, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, swapArrowContainer: { transform: [{ rotate: '90deg' }], diff --git a/src/components/TokenTotalLineItem.tsx b/src/components/TokenTotalLineItem.tsx index 0d558170a1e..aa84a8077a4 100644 --- a/src/components/TokenTotalLineItem.tsx +++ b/src/components/TokenTotalLineItem.tsx @@ -94,10 +94,10 @@ const styles = StyleSheet.create({ }, subtotalText: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, exchangeRate: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/components/WithTextInputPasteAware.tsx b/src/components/WithTextInputPasteAware.tsx index b38a640d677..8b834b44d67 100644 --- a/src/components/WithTextInputPasteAware.tsx +++ b/src/components/WithTextInputPasteAware.tsx @@ -24,7 +24,7 @@ export default function withTextInputPasteAware<P extends TextInputProps>( onPress={onPressPaste} hitSlop={iconHitslop} > - <Paste color={Colors.textSecondary} /> + <Paste color={Colors.contentSecondary} /> </TouchableDefault> )} </View> @@ -39,7 +39,7 @@ const styles = StyleSheet.create({ position: 'relative', }, pasteIconContainer: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, position: 'absolute', right: 11, top: 13, diff --git a/src/components/__snapshots__/CodeRow.test.tsx.snap b/src/components/__snapshots__/CodeRow.test.tsx.snap index b4800b79f60..d12c1d4eebe 100644 --- a/src/components/__snapshots__/CodeRow.test.tsx.snap +++ b/src/components/__snapshots__/CodeRow.test.tsx.snap @@ -58,6 +58,7 @@ exports[`CodeRow renders correctly for all CodeRowStatus states 2`] = ` onChangeText={[MockFunction]} onFocus={[Function]} placeholder="placeholder" + selectionColor="#757575" shouldShowClipboard={[MockFunction]} style={ [ diff --git a/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap b/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap index 6c70522f110..9312ae73387 100644 --- a/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap +++ b/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap @@ -176,6 +176,7 @@ exports[`PhoneNumberInput renders and behaves correctly 1`] = ` onFocus={[Function]} placeholder="00 00 00 00 00" placeholderTextColor="#757575" + selectionColor="#757575" style={ [ { diff --git a/src/components/multiSelect/MultiSelectBottomSheet.tsx b/src/components/multiSelect/MultiSelectBottomSheet.tsx index cc385b666b1..b2dbf29a1db 100644 --- a/src/components/multiSelect/MultiSelectBottomSheet.tsx +++ b/src/components/multiSelect/MultiSelectBottomSheet.tsx @@ -155,7 +155,7 @@ function OptionLineItem({ onPress, text, iconUrl, isSelected }: OptionLineItemPr {isSelected && ( <Checkmark testID={`${text}-checkmark`} - color={Colors.textPrimary} + color={Colors.contentPrimary} height={Spacing.Thick24} width={Spacing.Thick24} /> @@ -171,7 +171,7 @@ function OptionLineItem({ onPress, text, iconUrl, isSelected }: OptionLineItemPr const styles = StyleSheet.create({ doneButton: { borderRadius: Spacing.Regular16, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, height: 56, flexGrow: 1, alignItems: 'center', @@ -225,12 +225,12 @@ const styles = StyleSheet.create({ borderRadiusTop: { borderTopLeftRadius: Spacing.Regular16, borderTopRightRadius: Spacing.Regular16, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, }, optionsContainer: { flexDirection: 'column', marginBottom: Spacing.Smallest8, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, borderBottomLeftRadius: Spacing.Regular16, borderBottomRightRadius: Spacing.Regular16, }, diff --git a/src/dapps/DappShortcutsRewards.tsx b/src/dapps/DappShortcutsRewards.tsx index 5a0440182d8..3b851e98b62 100644 --- a/src/dapps/DappShortcutsRewards.tsx +++ b/src/dapps/DappShortcutsRewards.tsx @@ -221,7 +221,7 @@ const styles = StyleSheet.create({ }, rewardLabel: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, rewardAmount: { ...typeScale.labelSemiBoldLarge, @@ -243,7 +243,7 @@ const styles = StyleSheet.create({ width: 18, height: 18, marginRight: Spacing.Smallest8, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, borderRadius: 100, }, dappName: { @@ -261,7 +261,7 @@ const styles = StyleSheet.create({ }, subHeading: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, claimButton: { minWidth: 72, diff --git a/src/dapps/DappsScreen.tsx b/src/dapps/DappsScreen.tsx index 0a6fd8fa265..9189ec4dee4 100644 --- a/src/dapps/DappsScreen.tsx +++ b/src/dapps/DappsScreen.tsx @@ -332,19 +332,19 @@ const styles = StyleSheet.create({ flexGrow: 1, }, refreshControl: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, }, sectionList: { flex: 1, }, sectionTitle: { ...typeScale.labelSemiBoldSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginTop: Spacing.Large32, }, disclaimer: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, listFooterComponent: { marginTop: Spacing.Large32, diff --git a/src/dappsExplorer/DappCard.tsx b/src/dappsExplorer/DappCard.tsx index fc5b83248ab..390debb0f7f 100644 --- a/src/dappsExplorer/DappCard.tsx +++ b/src/dappsExplorer/DappCard.tsx @@ -133,7 +133,7 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/dappsExplorer/DappFeaturedActions.tsx b/src/dappsExplorer/DappFeaturedActions.tsx index 48785b7c71f..9826742f4e2 100644 --- a/src/dappsExplorer/DappFeaturedActions.tsx +++ b/src/dappsExplorer/DappFeaturedActions.tsx @@ -116,6 +116,6 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/dappsExplorer/DiscoverDappsCard.tsx b/src/dappsExplorer/DiscoverDappsCard.tsx index 5df387cd63c..c190c81bbcd 100644 --- a/src/dappsExplorer/DiscoverDappsCard.tsx +++ b/src/dappsExplorer/DiscoverDappsCard.tsx @@ -149,7 +149,7 @@ const styles = StyleSheet.create({ }, sectionTitle: { ...typeScale.labelXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginTop: Spacing.Smallest8, }, listFooterComponent: { @@ -169,7 +169,7 @@ const styles = StyleSheet.create({ }, disclaimer: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/dappsExplorer/NoResults.tsx b/src/dappsExplorer/NoResults.tsx index b8deaeb5679..9fc04947ce1 100644 --- a/src/dappsExplorer/NoResults.tsx +++ b/src/dappsExplorer/NoResults.tsx @@ -34,7 +34,7 @@ function NoResults({ selectedFilter, removeFilter, testID, searchTerm }: Props) {searchTerm !== '' && ( <View style={styles.searchContainer}> <View style={styles.iconContainer}> - <InfoIcon color={Colors.warning} /> + <InfoIcon color={Colors.warningPrimary} /> </View> <View style={styles.searchTextContainer}> <Text style={styles.text}> @@ -101,11 +101,11 @@ const styles = StyleSheet.create({ }, filterText: { ...typeScale.labelSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, filterAppliedText: { ...typeScale.labelSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, paddingRight: 4, }, removeFilterTouchableContainer: { diff --git a/src/earn/ActionCard.tsx b/src/earn/ActionCard.tsx index 278d708e934..7bfc50114ff 100644 --- a/src/earn/ActionCard.tsx +++ b/src/earn/ActionCard.tsx @@ -16,7 +16,7 @@ export function ActionCard({ action }: { action: BeforeDepositAction | WithdrawA testID={`Earn/ActionCard/${action.name}`} > <> - <action.iconComponent color={Colors.textPrimary} /> + <action.iconComponent color={Colors.contentPrimary} /> <View style={styles.cardContainer}> <Text style={styles.actionTitle}>{action.title}</Text> <Text style={styles.actionDetails}>{action.details}</Text> diff --git a/src/earn/EarnConfirmationScreen.tsx b/src/earn/EarnConfirmationScreen.tsx index 8e4a2c2b31c..4a5f57a03e5 100644 --- a/src/earn/EarnConfirmationScreen.tsx +++ b/src/earn/EarnConfirmationScreen.tsx @@ -372,7 +372,7 @@ const styles = StyleSheet.create({ }, fiatText: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, collectItemTitle: { ...typeScale.labelSemiBoldXSmall, @@ -385,7 +385,7 @@ const styles = StyleSheet.create({ }, rateText: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginBottom: Spacing.Tiny4, }, iconContainer: { @@ -397,7 +397,7 @@ const styles = StyleSheet.create({ }, gasFeeFiat: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, button: { padding: Spacing.Thick24, diff --git a/src/earn/EarnDepositBottomSheet.tsx b/src/earn/EarnDepositBottomSheet.tsx index 8d301634430..d6a333d52b8 100644 --- a/src/earn/EarnDepositBottomSheet.tsx +++ b/src/earn/EarnDepositBottomSheet.tsx @@ -185,7 +185,7 @@ export default function EarnDepositBottomSheet({ showLocalAmount={false} style={styles.valueSecondary} /> - <ArrowRightThick size={20} color={Colors.textSecondary} /> + <ArrowRightThick size={20} color={Colors.contentSecondary} /> <TokenDisplay testID="EarnDeposit/Swap/To" tokenId={pool.dataProps.depositTokenId} @@ -324,7 +324,7 @@ const styles = StyleSheet.create({ }, label: { ...typeScale.labelXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, value: { ...typeScale.labelSemiBoldSmall, @@ -335,7 +335,7 @@ const styles = StyleSheet.create({ }, valueSecondary: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, providerNameContainer: { flexDirection: 'row', @@ -344,7 +344,7 @@ const styles = StyleSheet.create({ }, footer: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, termsLink: { textDecorationLine: 'underline', diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx index 08d5607728f..0a2e7424fc7 100644 --- a/src/earn/EarnEnterAmount.tsx +++ b/src/earn/EarnEnterAmount.tsx @@ -655,7 +655,7 @@ function TransactionDepositDetails({ showLocalAmount={false} style={styles.txDetailsValueText} /> - <ArrowRightThick size={20} color={Colors.textPrimary} /> + <ArrowRightThick size={20} color={Colors.contentPrimary} /> <TokenDisplay testID="EarnEnterAmount/Swap/To" tokenId={pool.dataProps.depositTokenId} @@ -1092,7 +1092,7 @@ const styles = StyleSheet.create({ textAlign: 'right', }, mutedText: { - color: Colors.textSecondary, + color: Colors.contentSecondary, }, gap8: { gap: Spacing.Smallest8, @@ -1112,10 +1112,12 @@ const styles = StyleSheet.create({ alignItems: 'flex-start', }, bottomSheetLineLabel: { + ...typeScale.bodySmall, maxWidth: '40%', textAlign: 'left', }, bottomSheetLineLabelText: { + ...typeScale.bodySmall, maxWidth: '60%', textAlign: 'right', }, diff --git a/src/earn/EarnEntrypoint.tsx b/src/earn/EarnEntrypoint.tsx index 11df159baba..57bc90b3e6c 100644 --- a/src/earn/EarnEntrypoint.tsx +++ b/src/earn/EarnEntrypoint.tsx @@ -115,7 +115,7 @@ const styles = StyleSheet.create({ }, description: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, totalSupplied: { ...typeScale.labelSemiBoldMedium, diff --git a/src/earn/EarnHome.tsx b/src/earn/EarnHome.tsx index f7751199d18..5a166bb2c55 100644 --- a/src/earn/EarnHome.tsx +++ b/src/earn/EarnHome.tsx @@ -267,7 +267,7 @@ export default function EarnHome({ navigation, route }: Props) { </Animated.View> {errorLoadingPools && ( <View style={styles.textContainer}> - <AttentionIcon size={48} color={Colors.textPrimary} /> + <AttentionIcon size={48} color={Colors.contentPrimary} /> <Text style={styles.errorTitle}>{t('earnFlow.home.errorTitle')}</Text> <Text style={styles.description}>{t('earnFlow.home.errorDescription')}</Text> </View> @@ -356,7 +356,7 @@ const styles = StyleSheet.create({ ...getShadowStyle(Shadow.SoftLight), paddingBottom: Spacing.Regular16, paddingHorizontal: Spacing.Regular16, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, position: 'absolute', width: '100%', zIndex: 1, diff --git a/src/earn/EarnInfoScreen.tsx b/src/earn/EarnInfoScreen.tsx index 414edaaabd9..7d3951ffaa4 100644 --- a/src/earn/EarnInfoScreen.tsx +++ b/src/earn/EarnInfoScreen.tsx @@ -74,17 +74,17 @@ export default function EarnInfoScreen() { </Text> <View style={styles.detailsContainer}> <DetailsItem - icon={<EarnCoins size={ICON_SIZE} color={Colors.textPrimary} />} + icon={<EarnCoins size={ICON_SIZE} color={Colors.contentPrimary} />} title={t('earnFlow.earnInfo.details.work.title')} subtitle={t('earnFlow.earnInfo.details.work.subtitle')} /> <DetailsItem - icon={<Manage size={ICON_SIZE} color={Colors.textPrimary} />} + icon={<Manage size={ICON_SIZE} color={Colors.contentPrimary} />} title={t('earnFlow.earnInfo.details.manage.titleV1_94')} subtitle={t('earnFlow.earnInfo.details.manage.subtitleV1_94')} /> <DetailsItem - icon={<ArrowDown size={ARROW_ICON_SIZE} color={Colors.textPrimary} />} + icon={<ArrowDown size={ARROW_ICON_SIZE} color={Colors.contentPrimary} />} title={t('earnFlow.earnInfo.details.access.title')} subtitle={t('earnFlow.earnInfo.details.access.subtitle')} /> diff --git a/src/earn/EarnTabBar.test.tsx b/src/earn/EarnTabBar.test.tsx index 8c0aeb0b14e..4ce5560bf81 100644 --- a/src/earn/EarnTabBar.test.tsx +++ b/src/earn/EarnTabBar.test.tsx @@ -19,9 +19,9 @@ describe('EarnTabBar', () => { const tabItems = getAllByTestId('Earn/TabBarItem') expect(tabItems).toHaveLength(2) expect(tabItems[0]).toHaveTextContent('earnFlow.poolFilters.allPools') - expect(tabItems[0].children[0]).toHaveStyle({ color: Colors.textPrimary }) + expect(tabItems[0].children[0]).toHaveStyle({ color: Colors.contentPrimary }) expect(tabItems[1]).toHaveTextContent('earnFlow.poolFilters.myPools') - expect(tabItems[1].children[0]).toHaveStyle({ color: Colors.textSecondary }) + expect(tabItems[1].children[0]).toHaveStyle({ color: Colors.contentSecondary }) }) it.each([{ tab: EarnTabType.AllPools }, { tab: EarnTabType.MyPools }])( diff --git a/src/earn/EarnTabBar.tsx b/src/earn/EarnTabBar.tsx index ec23703e27b..9b2bebc1532 100644 --- a/src/earn/EarnTabBar.tsx +++ b/src/earn/EarnTabBar.tsx @@ -65,7 +65,7 @@ const styles = StyleSheet.create({ }, item: { ...typeScale.bodyMedium, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, itemSelected: { ...typeScale.labelMedium, diff --git a/src/earn/PoolCard.tsx b/src/earn/PoolCard.tsx index b86c8caecd6..1811c9128bc 100644 --- a/src/earn/PoolCard.tsx +++ b/src/earn/PoolCard.tsx @@ -170,7 +170,7 @@ const styles = StyleSheet.create({ }, keyText: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, valueText: { ...typeScale.bodySmall, @@ -181,7 +181,7 @@ const styles = StyleSheet.create({ poweredByText: { ...typeScale.bodyXSmall, alignSelf: 'center', - color: Colors.textSecondary, + color: Colors.contentSecondary, }, withBalanceContainer: { borderTopWidth: 1, diff --git a/src/earn/poolInfoScreen/Cards.tsx b/src/earn/poolInfoScreen/Cards.tsx index 4271520d125..3b67399597c 100644 --- a/src/earn/poolInfoScreen/Cards.tsx +++ b/src/earn/poolInfoScreen/Cards.tsx @@ -346,7 +346,7 @@ export const styles = StyleSheet.create({ }, cardLabelText: { ...typeScale.bodyMedium, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, depositAndEarningCard: { backgroundColor: Colors.backgroundSecondary, @@ -362,7 +362,7 @@ export const styles = StyleSheet.create({ ...typeScale.titleMedium, }, depositAndEarningCardSubtitleContainer: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, padding: Spacing.Regular16, borderBottomLeftRadius: 16, borderBottomRightRadius: 16, diff --git a/src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx b/src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx index 8f764a0399e..07e95061379 100644 --- a/src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx +++ b/src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx @@ -123,7 +123,7 @@ function LearnMoreTouchable({ <Text style={styles.learnMoreText}> {t('earnFlow.poolInfoScreen.learnMoreOnProvider', { providerName })} </Text> - <OpenLinkIcon color={Colors.textPrimary} size={16} /> + <OpenLinkIcon color={Colors.contentPrimary} size={16} /> </View> </Touchable> </View> @@ -496,7 +496,7 @@ function InfoBottomSheet({ <Text style={styles.learnMoreText}> <Trans i18nKey={linkKey} tOptions={{ providerName }} /> </Text> - <OpenLinkIcon color={Colors.textPrimary} size={16} /> + <OpenLinkIcon color={Colors.contentPrimary} size={16} /> </View> </Touchable> </View> @@ -533,7 +533,7 @@ const styles = StyleSheet.create({ }, subtitleLabel: { ...typeScale.bodyMedium, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, subtitleInfo: { ...typeScale.labelMedium, diff --git a/src/earn/poolInfoScreen/SafetyCard.tsx b/src/earn/poolInfoScreen/SafetyCard.tsx index 2c86e8fcbf0..0013e2d650e 100644 --- a/src/earn/poolInfoScreen/SafetyCard.tsx +++ b/src/earn/poolInfoScreen/SafetyCard.tsx @@ -29,7 +29,7 @@ function Risk({ risk }: { risk: SafetyRisk }) { {risk.isPositive ? ( <DataUp color={Colors.accent} testID="SafetyCard/RiskPositive" /> ) : ( - <DataDown color={Colors.error} testID="SafetyCard/RiskNegative" /> + <DataDown color={Colors.errorPrimary} testID="SafetyCard/RiskNegative" /> )} </View> <View style={styles.riskTextContainer}> @@ -123,7 +123,7 @@ const styles = StyleSheet.create({ }, viewDetailsText: { ...typeScale.labelSemiBoldSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, textAlign: 'center', flex: 1, }, @@ -148,6 +148,6 @@ const styles = StyleSheet.create({ }, riskCategory: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/fiatExchanges/PaymentMethodSection.tsx b/src/fiatExchanges/PaymentMethodSection.tsx index d19d76a7fe4..89a14afc756 100644 --- a/src/fiatExchanges/PaymentMethodSection.tsx +++ b/src/fiatExchanges/PaymentMethodSection.tsx @@ -149,7 +149,7 @@ export function PaymentMethodSection({ > <> <Text style={styles.newLabelText}>{t('selectProviderScreen.newLabel')}</Text> - <InfoIcon size={16} color={colors.textInverse} /> + <InfoIcon size={16} color={colors.contentInverse} /> </> </Touchable> )} @@ -342,7 +342,7 @@ const styles = StyleSheet.create({ }, newLabelText: { ...typeScale.labelSemiBoldSmall, - color: colors.textInverse, + color: colors.contentInverse, marginRight: 5, }, category: { @@ -354,16 +354,16 @@ const styles = StyleSheet.create({ }, providerDropdown: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, expandedInfo: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, marginTop: 2, }, topInfo: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, marginTop: 4, }, expandedFee: { diff --git a/src/fiatExchanges/ReviewFees.tsx b/src/fiatExchanges/ReviewFees.tsx index b3e5c115325..34713614193 100644 --- a/src/fiatExchanges/ReviewFees.tsx +++ b/src/fiatExchanges/ReviewFees.tsx @@ -129,7 +129,7 @@ export default function ReviewFees({ onPress={openFeeExplanation} hitSlop={variables.iconHitslop} > - <InfoIcon color={colors.textSecondary} size={14} /> + <InfoIcon color={colors.contentSecondary} size={14} /> </Touchable> </View> <Text>{showAmount(fiat.total - fiat.subTotal, false, [styles.reviewLineText])}</Text> @@ -143,7 +143,7 @@ export default function ReviewFees({ onPress={openFeeDiscountExplanation} hitSlop={variables.iconHitslop} > - <InfoIcon color={colors.textSecondary} size={14} /> + <InfoIcon color={colors.contentSecondary} size={14} /> </Touchable> </View> <Text style={styles.feeWaivedText}>{t('free')}</Text> @@ -183,7 +183,7 @@ const styles = StyleSheet.create({ color: colors.accent, }, reviewLineTextAlt: { - color: colors.textSecondary, + color: colors.contentSecondary, }, reviewLineTextTotal: { ...typeScale.labelSemiBoldMedium, diff --git a/src/fiatExchanges/SelectProvider.tsx b/src/fiatExchanges/SelectProvider.tsx index 1d0b0cc2b8b..10022b19c42 100644 --- a/src/fiatExchanges/SelectProvider.tsx +++ b/src/fiatExchanges/SelectProvider.tsx @@ -595,7 +595,7 @@ const styles = StyleSheet.create({ }, linkToOtherScreen: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, disclaimerContainer: { padding: Spacing.Regular16, @@ -606,7 +606,7 @@ const styles = StyleSheet.create({ }, disclaimerText: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, underline: { textDecorationLine: 'underline', diff --git a/src/fiatExchanges/SimplexScreen.tsx b/src/fiatExchanges/SimplexScreen.tsx index 5699ff29dd0..3f809ff9dec 100644 --- a/src/fiatExchanges/SimplexScreen.tsx +++ b/src/fiatExchanges/SimplexScreen.tsx @@ -136,7 +136,7 @@ function SimplexScreen({ route, navigation }: Props) { onPress={onButtonPress} disabled={!simplexPaymentRequest?.paymentId} showLoading={asyncSimplexPaymentData.status === 'loading'} - loadingColor={colors.textInverse} + loadingColor={colors.contentInverse} /> </View> ) : ( diff --git a/src/fiatExchanges/Spend.tsx b/src/fiatExchanges/Spend.tsx index 67cad89a96d..09eff2aef29 100644 --- a/src/fiatExchanges/Spend.tsx +++ b/src/fiatExchanges/Spend.tsx @@ -97,7 +97,7 @@ const styles = StyleSheet.create({ }, optionSubtitle: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/fiatExchanges/WithdrawSpend.tsx b/src/fiatExchanges/WithdrawSpend.tsx index 90561674dde..be1a2630888 100644 --- a/src/fiatExchanges/WithdrawSpend.tsx +++ b/src/fiatExchanges/WithdrawSpend.tsx @@ -122,7 +122,7 @@ const styles = StyleSheet.create({ optionSubtitle: { marginTop: 2, ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, moreWaysContainer: { flexGrow: 1, @@ -130,7 +130,7 @@ const styles = StyleSheet.create({ }, moreWays: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, margin: variables.contentPadding, }, fundingOptionsLink: { diff --git a/src/fiatconnect/FiatDetailsScreen.tsx b/src/fiatconnect/FiatDetailsScreen.tsx index 674517a9000..d19e1b75dd4 100644 --- a/src/fiatconnect/FiatDetailsScreen.tsx +++ b/src/fiatconnect/FiatDetailsScreen.tsx @@ -304,7 +304,7 @@ function FormField({ style={styles.infoIcon} hitSlop={variables.iconHitslop} > - <InfoIcon size={18} color={colors.textSecondary} /> + <InfoIcon size={18} color={colors.contentSecondary} /> </TouchableOpacity> )} </View> @@ -402,7 +402,7 @@ const styles = StyleSheet.create({ }, error: { fontSize: 12, - color: colors.error, + color: colors.errorPrimary, }, submitButton: { padding: variables.contentPadding, diff --git a/src/fiatconnect/KycLanding.tsx b/src/fiatconnect/KycLanding.tsx index fffbbddbf8c..1f0fec164f3 100644 --- a/src/fiatconnect/KycLanding.tsx +++ b/src/fiatconnect/KycLanding.tsx @@ -239,7 +239,7 @@ const styles = StyleSheet.create({ marginHorizontal: 24, }, disclaimer: { - color: Colors.textSecondary, + color: Colors.contentSecondary, textAlign: 'left', marginLeft: 11, fontSize: 13, diff --git a/src/fiatconnect/ReviewScreen.tsx b/src/fiatconnect/ReviewScreen.tsx index d7243380635..59ae623e865 100644 --- a/src/fiatconnect/ReviewScreen.tsx +++ b/src/fiatconnect/ReviewScreen.tsx @@ -625,7 +625,7 @@ const styles = StyleSheet.create({ }, sectionHeaderText: { ...typeScale.labelSemiBoldSmall, - color: colors.textSecondary, + color: colors.contentSecondary, marginBottom: 8, }, sectionMainTextContainer: { @@ -639,7 +639,7 @@ const styles = StyleSheet.create({ }, sectionSubText: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, submitBtn: { flexDirection: 'column', @@ -678,7 +678,7 @@ const styles = StyleSheet.create({ paddingHorizontal: variables.contentPadding, marginBottom: 20, textAlign: 'center', - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/fiatconnect/TransferStatusScreen.test.tsx b/src/fiatconnect/TransferStatusScreen.test.tsx index dab69c2bba2..ae6d6264de0 100644 --- a/src/fiatconnect/TransferStatusScreen.test.tsx +++ b/src/fiatconnect/TransferStatusScreen.test.tsx @@ -384,7 +384,9 @@ describe('TransferStatusScreen', () => { </Provider> ) expect(getByTestId('loadingTransferStatus')).toBeTruthy() - expect(getByTestId('loadingDescription')).toHaveStyle({ color: appTheme.colors.background }) + expect(getByTestId('loadingDescription')).toHaveStyle({ + color: appTheme.colors.background, + }) await act(async () => { jest.runOnlyPendingTimers() }) diff --git a/src/fiatconnect/TransferStatusScreen.tsx b/src/fiatconnect/TransferStatusScreen.tsx index 8d671cd32d5..74d695181a1 100644 --- a/src/fiatconnect/TransferStatusScreen.tsx +++ b/src/fiatconnect/TransferStatusScreen.tsx @@ -148,7 +148,7 @@ function SuccessOrProcessingSection({ if (status === SendingTransferStatus.Completed) { icon = ( <CircledIcon> - <Checkmark color={Colors.textInverse} height={22} width={22} /> + <Checkmark color={Colors.contentInverse} height={22} width={22} /> </CircledIcon> ) title = t('fiatConnectStatusScreen.success.title') @@ -158,7 +158,7 @@ function SuccessOrProcessingSection({ } else { icon = ( <CircledIcon> - <ClockIcon color={Colors.textInverse} height={22} width={22} /> + <ClockIcon color={Colors.contentInverse} height={22} width={22} /> </CircledIcon> ) title = t('fiatConnectStatusScreen.txProcessing.title') diff --git a/src/fiatconnect/kyc/KycPending.tsx b/src/fiatconnect/kyc/KycPending.tsx index ce42b48277b..2b53fd21ff7 100644 --- a/src/fiatconnect/kyc/KycPending.tsx +++ b/src/fiatconnect/kyc/KycPending.tsx @@ -46,11 +46,11 @@ function KycPending({ route, navigation }: Props) { backgroundColor={colors.backgroundSecondary} style={styles.bankIcon} > - <BankIcon color={colors.textPrimary} height={24} width={24} /> + <BankIcon color={colors.contentPrimary} height={24} width={24} /> </CircledIcon> - <CircledIcon radius={85} backgroundColor={colors.textInverse} style={styles.clockIcon}> + <CircledIcon radius={85} backgroundColor={colors.contentInverse} style={styles.clockIcon}> <CircledIcon radius={80}> - <ClockIcon color={colors.textInverse} height={24} width={24} /> + <ClockIcon color={colors.contentInverse} height={24} width={24} /> </CircledIcon> </CircledIcon> </View> diff --git a/src/home/ActionsCarousel.tsx b/src/home/ActionsCarousel.tsx index 3576013b8e4..c37a3b4a053 100644 --- a/src/home/ActionsCarousel.tsx +++ b/src/home/ActionsCarousel.tsx @@ -34,14 +34,14 @@ function ActionsCarousel() { const actions: Actions = { [HomeActionName.Send]: { title: t('homeActions.send'), - icon: <QuickActionsSend color={Colors.success} />, + icon: <QuickActionsSend color={Colors.successPrimary} />, onPress: () => { navigate(Screens.SendSelectRecipient) }, }, [HomeActionName.Receive]: { title: t('homeActions.receive'), - icon: <QuickActionsReceive color={Colors.success} />, + icon: <QuickActionsReceive color={Colors.successPrimary} />, onPress: () => { navigate(Screens.QRNavigator, { screen: Screens.QRCode, @@ -50,14 +50,14 @@ function ActionsCarousel() { }, [HomeActionName.Add]: { title: t('homeActions.add'), - icon: <QuickActionsAdd color={Colors.success} />, + icon: <QuickActionsAdd color={Colors.successPrimary} />, onPress: () => { navigate(Screens.FiatExchangeCurrencyBottomSheet, { flow: FiatExchangeFlow.CashIn }) }, }, [HomeActionName.Swap]: { title: t('homeActions.swap'), - icon: <SwapArrows color={Colors.success} />, + icon: <SwapArrows color={Colors.successPrimary} />, onPress: () => { navigate(Screens.SwapScreenWithBack) }, @@ -65,7 +65,7 @@ function ActionsCarousel() { }, [HomeActionName.Withdraw]: { title: t('homeActions.withdraw'), - icon: <QuickActionsWithdraw color={Colors.success} />, + icon: <QuickActionsWithdraw color={Colors.successPrimary} />, onPress: () => { navigate(Screens.WithdrawSpend) }, @@ -123,7 +123,7 @@ function ActionsCarousel() { const styles = StyleSheet.create({ viewContainer: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, }, carouselContainer: { padding: Spacing.Regular16, @@ -143,7 +143,7 @@ const styles = StyleSheet.create({ ...typeScale.labelSmall, lineHeight: 17, paddingTop: Spacing.Smallest8, - color: Colors.success, + color: Colors.successPrimary, }, }) diff --git a/src/home/GetStarted.tsx b/src/home/GetStarted.tsx index e91c991a00d..95ca32f6863 100644 --- a/src/home/GetStarted.tsx +++ b/src/home/GetStarted.tsx @@ -21,7 +21,7 @@ function EarnItem() { <Item icon={ <CircledIcon radius={32} backgroundColor={colors.successSecondary}> - <EarnCoins color={colors.success} /> + <EarnCoins color={colors.successPrimary} /> </CircledIcon> } title={t('earnFlow.entrypoint.title')} @@ -87,7 +87,7 @@ const styles = StyleSheet.create({ }, title: { ...typeScale.labelSemiBoldSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, touchable: { padding: Spacing.Regular16, @@ -104,7 +104,7 @@ const styles = StyleSheet.create({ }, itemBody: { ...typeScale.bodyXSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, touchableView: { gap: Spacing.Thick24, diff --git a/src/home/celebration/NftCelebration.tsx b/src/home/celebration/NftCelebration.tsx index 8abcfbc390e..b650ffa1500 100644 --- a/src/home/celebration/NftCelebration.tsx +++ b/src/home/celebration/NftCelebration.tsx @@ -196,7 +196,7 @@ const styles = StyleSheet.create({ }, description: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginTop: Spacing.Smallest8, }, button: { diff --git a/src/home/celebration/NftReward.test.tsx b/src/home/celebration/NftReward.test.tsx index a77150eecb2..f4e99e2b111 100644 --- a/src/home/celebration/NftReward.test.tsx +++ b/src/home/celebration/NftReward.test.tsx @@ -65,7 +65,7 @@ describe('NftReward', () => { expect(pillLabel).toHaveTextContent( 'nftCelebration.rewardBottomSheet.expirationLabel, {"expirationLabelText":"in about 100 years"}' ) - expect(StyleSheet.flatten(pillLabel.props.style)).toHaveProperty('color', Colors.textPrimary) + expect(StyleSheet.flatten(pillLabel.props.style)).toHaveProperty('color', Colors.contentPrimary) expect(StyleSheet.flatten(getByTestId('NftReward/Pill').props.style)).toHaveProperty( 'backgroundColor', Colors.info @@ -85,7 +85,7 @@ describe('NftReward', () => { expect(pillLabel).toHaveTextContent( 'nftCelebration.rewardReminderBottomSheet.expirationLabel, {"expirationLabelText":"in about 1 month"}' ) - expect(StyleSheet.flatten(pillLabel.props.style)).toHaveProperty('color', Colors.warning) + expect(StyleSheet.flatten(pillLabel.props.style)).toHaveProperty('color', Colors.warningPrimary) expect(StyleSheet.flatten(getByTestId('NftReward/Pill').props.style)).toHaveProperty( 'backgroundColor', Colors.warningSecondary diff --git a/src/home/celebration/NftReward.tsx b/src/home/celebration/NftReward.tsx index 8e0f1e03b3a..137c97a0863 100644 --- a/src/home/celebration/NftReward.tsx +++ b/src/home/celebration/NftReward.tsx @@ -51,11 +51,11 @@ export default function NftRewardBottomSheet() { const { pillStyle, labelStyle } = isReminder ? { pillStyle: { backgroundColor: Colors.warningSecondary }, - labelStyle: { color: Colors.warning }, + labelStyle: { color: Colors.warningPrimary }, } : { pillStyle: { backgroundColor: Colors.info }, - labelStyle: { color: Colors.textPrimary }, + labelStyle: { color: Colors.contentPrimary }, } const copyText = isReminder ? 'rewardReminderBottomSheet' : 'rewardBottomSheet' @@ -153,7 +153,7 @@ const styles = StyleSheet.create({ description: { marginTop: Spacing.Regular16, ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, button: { marginTop: Spacing.XLarge48, diff --git a/src/icons/Activity.tsx b/src/icons/Activity.tsx index 7d58dfd7e10..b416b1f2a18 100644 --- a/src/icons/Activity.tsx +++ b/src/icons/Activity.tsx @@ -7,7 +7,7 @@ interface Props { color?: colors } -function Activity({ color = colors.success, size = 24 }: Props) { +function Activity({ color = colors.successPrimary, size = 24 }: Props) { return ( <Svg width={size} height={size} fill="none" viewBox="0 0 24 24"> <Path diff --git a/src/icons/Apple.tsx b/src/icons/Apple.tsx index f9e14dc544d..7be9e8011af 100644 --- a/src/icons/Apple.tsx +++ b/src/icons/Apple.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import Svg, { Path } from 'react-native-svg' import Colors from 'src/styles/colors' -const AppleIcon = ({ color = Colors.textPrimary }) => ( +const AppleIcon = ({ color = Colors.contentPrimary }) => ( <Svg width={32} height={32} viewBox="0 0 32 32" fill="none"> <Path fill={color} diff --git a/src/icons/ArrowDown.tsx b/src/icons/ArrowDown.tsx index f5c9ab4f5c8..1df2e328579 100644 --- a/src/icons/ArrowDown.tsx +++ b/src/icons/ArrowDown.tsx @@ -7,7 +7,7 @@ interface Props { size?: number } -const ArrowDown = ({ color = Colors.textPrimary, size = 24 }: Props) => ( +const ArrowDown = ({ color = Colors.contentPrimary, size = 24 }: Props) => ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path d="M11.053 4.5L12.947 4.5L12.947 15.8636L18.1553 10.6553L19.5 12L12 19.5L4.5 12L5.8447 10.6553L11.053 15.8636L11.053 4.5Z" diff --git a/src/icons/ArrowRightThick.tsx b/src/icons/ArrowRightThick.tsx index 73c77ecccfa..f4b06045057 100644 --- a/src/icons/ArrowRightThick.tsx +++ b/src/icons/ArrowRightThick.tsx @@ -7,7 +7,7 @@ interface Props { size?: number } -const ArrowRightThick = ({ color = colors.textPrimary, size = 24 }: Props) => ( +const ArrowRightThick = ({ color = colors.contentPrimary, size = 24 }: Props) => ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path d="M14 18L12.6 16.55L16.15 13H4V11H16.15L12.6 7.45L14 6L20 12L14 18Z" fill={color} /> </Svg> diff --git a/src/icons/Attention.tsx b/src/icons/Attention.tsx index 7a8583e9e84..25df8587307 100644 --- a/src/icons/Attention.tsx +++ b/src/icons/Attention.tsx @@ -3,7 +3,7 @@ import Svg, { Path } from 'react-native-svg' import Colors from 'src/styles/colors' const AttentionIcon = ({ - color = Colors.warning, + color = Colors.warningPrimary, size = 16, testId, }: { diff --git a/src/icons/BackChevron.tsx b/src/icons/BackChevron.tsx index 8f25122f588..95483d37c28 100644 --- a/src/icons/BackChevron.tsx +++ b/src/icons/BackChevron.tsx @@ -23,7 +23,7 @@ function BackChevron({ color, height }: Props) { BackChevron.defaultProps = { height: 16, - color: Colors.textPrimary, + color: Colors.contentPrimary, } export default BackChevron diff --git a/src/icons/Backspace.tsx b/src/icons/Backspace.tsx index 9c960cfa9d0..c9f05a763b7 100644 --- a/src/icons/Backspace.tsx +++ b/src/icons/Backspace.tsx @@ -12,7 +12,7 @@ export default class Backspace extends React.PureComponent<Props> { static defaultProps = { height: 30, width: 30, - color: colors.textPrimary, + color: colors.contentPrimary, } render() { diff --git a/src/icons/Celebration.tsx b/src/icons/Celebration.tsx index f08b76d9dba..c4d003ffa90 100644 --- a/src/icons/Celebration.tsx +++ b/src/icons/Celebration.tsx @@ -7,7 +7,7 @@ interface Props { color?: string } -const Celebration = ({ size = 24, color = Colors.textPrimary }: Props) => ( +const Celebration = ({ size = 24, color = Colors.contentPrimary }: Props) => ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path fill={color} diff --git a/src/icons/CheckBox.tsx b/src/icons/CheckBox.tsx index a37f2acb5c9..17e6da1d91e 100644 --- a/src/icons/CheckBox.tsx +++ b/src/icons/CheckBox.tsx @@ -12,7 +12,7 @@ type Props = { const CheckBox = ({ checked, testID, - checkedColor = Colors.textPrimary, + checkedColor = Colors.contentPrimary, uncheckedColor = Colors.inactive, }: Props) => { if (checked) diff --git a/src/icons/CheckCircle.tsx b/src/icons/CheckCircle.tsx index 8cee6349a69..26507c66577 100644 --- a/src/icons/CheckCircle.tsx +++ b/src/icons/CheckCircle.tsx @@ -8,7 +8,7 @@ interface Props { testID?: string } -const CheckCircle = ({ size = 24, color = Colors.textPrimary, testID }: Props) => ( +const CheckCircle = ({ size = 24, color = Colors.contentPrimary, testID }: Props) => ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" testID={testID}> <Path fill={color} diff --git a/src/icons/CircleArrowIcon.tsx b/src/icons/CircleArrowIcon.tsx index 960f4cbb431..371e821918b 100644 --- a/src/icons/CircleArrowIcon.tsx +++ b/src/icons/CircleArrowIcon.tsx @@ -16,7 +16,7 @@ export default function CircleArrowIcon({ style }: Props) { <Svg width={13} height={9} viewBox="0 0 13 9" fill="none"> <Path d="M1 4.5h11m0 0L8.264 1M12 4.5L8.264 8" - stroke={colors.textPrimary} + stroke={colors.contentPrimary} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" @@ -28,7 +28,7 @@ export default function CircleArrowIcon({ style }: Props) { const styles = StyleSheet.create({ container: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, width: SIZE, height: SIZE, borderRadius: SIZE / 2, diff --git a/src/icons/Clipboard.tsx b/src/icons/Clipboard.tsx index 73348ad7518..f75b4f91e0d 100644 --- a/src/icons/Clipboard.tsx +++ b/src/icons/Clipboard.tsx @@ -9,7 +9,7 @@ interface Props { const Clipboard = ({ size = 24 }: Props) => ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="M18.546 3.818h-3.8C14.364 2.764 13.364 2 12.181 2 11 2 10 2.764 9.618 3.818h-3.8c-1 0-1.818.818-1.818 1.818v14.546c0 1 .818 1.818 1.818 1.818h12.728c1 0 1.818-.818 1.818-1.818V5.636c0-1-.819-1.818-1.819-1.818Zm-6.364 0c.5 0 .909.41.909.91s-.41.908-.91.908-.908-.409-.908-.909.409-.909.909-.909Zm6.364 16.364H5.818V5.636h1.818v2.728h9.091V5.636h1.819v14.546Z" /> </Svg> diff --git a/src/icons/ComingSoon.tsx b/src/icons/ComingSoon.tsx index c81cd63fa57..84dbca63574 100644 --- a/src/icons/ComingSoon.tsx +++ b/src/icons/ComingSoon.tsx @@ -7,7 +7,7 @@ interface Props { color?: string } -const ComingSoon = ({ size = 24, color = Colors.textPrimary }: Props) => ( +const ComingSoon = ({ size = 24, color = Colors.contentPrimary }: Props) => ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path fill={color} diff --git a/src/icons/CrossChainIndicator.tsx b/src/icons/CrossChainIndicator.tsx index adc988312f3..09a5762cae7 100644 --- a/src/icons/CrossChainIndicator.tsx +++ b/src/icons/CrossChainIndicator.tsx @@ -10,8 +10,8 @@ interface Props { function CrossChainIndicator({ size = 16, - backgroundColor = Colors.textPrimary, - color = Colors.textInverse, + backgroundColor = Colors.contentPrimary, + color = Colors.contentInverse, }: Props) { return ( <Svg width={size} height={size} fill="none" viewBox="0 0 16 16"> diff --git a/src/icons/DataDown.tsx b/src/icons/DataDown.tsx index b643ca5dad2..61149b999fe 100644 --- a/src/icons/DataDown.tsx +++ b/src/icons/DataDown.tsx @@ -7,7 +7,7 @@ interface Props { testID?: string } -const DataDown = ({ color = colors.textPrimary, testID }: Props) => ( +const DataDown = ({ color = colors.contentPrimary, testID }: Props) => ( <Svg width={10} height={6} viewBox="0 0 10 6" fill="none" testID={testID}> <Path d="M5 6L10 -9.53674e-07L4.29138e-07 -7.94466e-08L5 6Z" fill={color} /> </Svg> diff --git a/src/icons/DownArrowIcon.tsx b/src/icons/DownArrowIcon.tsx index 63a57e35fa5..661f4789de5 100644 --- a/src/icons/DownArrowIcon.tsx +++ b/src/icons/DownArrowIcon.tsx @@ -13,7 +13,7 @@ interface Props { export default function DownArrowIcon({ height, - color = colors.textPrimary, + color = colors.contentPrimary, strokeWidth = 1, style = {}, }: Props) { diff --git a/src/icons/Envelope.tsx b/src/icons/Envelope.tsx index dd81f63aa3b..62bcbd0d62d 100644 --- a/src/icons/Envelope.tsx +++ b/src/icons/Envelope.tsx @@ -19,7 +19,7 @@ export function Envelope({ color, size }: Props) { } Envelope.defaultProps = { - color: Colors.textPrimary, + color: Colors.contentPrimary, size: 24, } diff --git a/src/icons/Error.tsx b/src/icons/Error.tsx index 3215bb4d7b6..4e1691cf527 100644 --- a/src/icons/Error.tsx +++ b/src/icons/Error.tsx @@ -12,7 +12,7 @@ interface Props { export default class Error extends React.PureComponent<Props> { static defaultProps = { - color: colors.textInverse, + color: colors.contentInverse, width: getSizing(), style: {}, } diff --git a/src/icons/ExploreTokens.tsx b/src/icons/ExploreTokens.tsx index 128c297726f..5cbd2be23b9 100644 --- a/src/icons/ExploreTokens.tsx +++ b/src/icons/ExploreTokens.tsx @@ -8,7 +8,7 @@ function AllTokens() { <Rect width={32} height={32} rx={16} fill={Colors.successSecondary} /> <Path d="M19 8C21.1217 8 23.1566 8.84285 24.6569 10.3431C26.1571 11.8434 27 13.8783 27 16C27 18.1217 26.1571 20.1566 24.6569 21.6569C23.1566 23.1571 21.1217 24 19 24C16.8783 24 14.8434 23.1571 13.3431 21.6569C11.8429 20.1566 11 18.1217 11 16C11 13.8783 11.8429 11.8434 13.3431 10.3431C14.8434 8.84285 16.8783 8 19 8ZM19 22C20.5913 22 22.1174 21.3679 23.2426 20.2426C24.3679 19.1174 25 17.5913 25 16C25 14.4087 24.3679 12.8826 23.2426 11.7574C22.1174 10.6321 20.5913 10 19 10C17.4087 10 15.8826 10.6321 14.7574 11.7574C13.6321 12.8826 13 14.4087 13 16C13 17.5913 13.6321 19.1174 14.7574 20.2426C15.8826 21.3679 17.4087 22 19 22ZM7 16C6.99995 17.2399 7.3847 18.4493 8.10116 19.4613C8.81762 20.4733 9.83048 21.2381 11 21.65V23.74C7.55 22.85 5 19.73 5 16C5 12.27 7.55 9.15 11 8.26V10.35C8.67 11.17 7 13.39 7 16Z" - fill={Colors.success} + fill={Colors.successPrimary} /> </Svg> ) diff --git a/src/icons/EyeIcon.tsx b/src/icons/EyeIcon.tsx index bbef3da0cbc..9b646c84fda 100644 --- a/src/icons/EyeIcon.tsx +++ b/src/icons/EyeIcon.tsx @@ -21,7 +21,7 @@ function EyeIcon({ color, size }: Props) { EyeIcon.defaultProps = { size: 24, - color: Colors.textPrimary, + color: Colors.contentPrimary, } export default EyeIcon diff --git a/src/icons/ForwardChevron.tsx b/src/icons/ForwardChevron.tsx index 6e32e9b884f..940588f361d 100644 --- a/src/icons/ForwardChevron.tsx +++ b/src/icons/ForwardChevron.tsx @@ -29,7 +29,7 @@ function ForwardChevron({ color, height }: Props) { ForwardChevron.defaultProps = { height: 16, - color: colors.textPrimary, + color: colors.contentPrimary, } export default ForwardChevron diff --git a/src/icons/GearIcon.tsx b/src/icons/GearIcon.tsx index f38df69d45a..5c4702f10ff 100644 --- a/src/icons/GearIcon.tsx +++ b/src/icons/GearIcon.tsx @@ -7,7 +7,7 @@ interface Props { color?: string } -const GearIcon = ({ size = 24, color = colors.textPrimary }: Props) => ( +const GearIcon = ({ size = 24, color = colors.contentPrimary }: Props) => ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path fill={color} diff --git a/src/icons/Google.tsx b/src/icons/Google.tsx index 5f4b4cb4aa1..4c020a884d0 100644 --- a/src/icons/Google.tsx +++ b/src/icons/Google.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import Svg, { Path } from 'react-native-svg' import Colors from 'src/styles/colors' -const GoogleIcon = ({ color = Colors.textPrimary }) => ( +const GoogleIcon = ({ color = Colors.contentPrimary }) => ( <Svg width={32} height={32} viewBox="0 0 32 32" fill="none"> <Path fill={color} diff --git a/src/icons/GradientIcon.tsx b/src/icons/GradientIcon.tsx index 1b451ced284..c1adf82d660 100644 --- a/src/icons/GradientIcon.tsx +++ b/src/icons/GradientIcon.tsx @@ -32,7 +32,7 @@ export default function GradientIcon({ radius = 50, borderWidth = 1, children }: > {borderWidth > 0 && ( <LinearGradient - colors={[Colors.gradientBorderLeft, Colors.gradientBorderRight]} + colors={[Colors.brandGradientLeft, Colors.brandGradientRight]} locations={[0, 0.8915]} useAngle={true} angle={90} @@ -40,7 +40,7 @@ export default function GradientIcon({ radius = 50, borderWidth = 1, children }: /> )} <LinearGradient - colors={[Colors.gradientBorderLeft, Colors.gradientBorderRight]} + colors={[Colors.brandGradientLeft, Colors.brandGradientRight]} locations={[0.1085, 1]} useAngle={true} angle={90} @@ -64,7 +64,7 @@ const styles = StyleSheet.create({ height: '100%', }, mask: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, opacity: 0.9, }, }) diff --git a/src/icons/GreyOut.tsx b/src/icons/GreyOut.tsx index 004e56dad1f..5bcff809245 100644 --- a/src/icons/GreyOut.tsx +++ b/src/icons/GreyOut.tsx @@ -9,8 +9,8 @@ const SvgComponent = (props: { height: number; width: number; testID?: string }) <Path fill="url(#a)" d={`M0 0h${props.width}v${props.height}H0z`} /> <Defs> <LinearGradient id="a" x1={0} y1={0} x2={0} y2={1000} gradientUnits="userSpaceOnUse"> - <Stop stopColor={Colors.textInverse} /> - <Stop offset={1} stopColor={Colors.textInverse} stopOpacity={0} /> + <Stop stopColor={Colors.contentInverse} /> + <Stop offset={1} stopColor={Colors.contentInverse} stopOpacity={0} /> </LinearGradient> </Defs> </Svg> diff --git a/src/icons/HamburgerCard.tsx b/src/icons/HamburgerCard.tsx index 021af4393e9..a59f626352b 100644 --- a/src/icons/HamburgerCard.tsx +++ b/src/icons/HamburgerCard.tsx @@ -13,7 +13,7 @@ function HamburgerCard() { y1="9.75" x2="24.75" y2="9.75" - stroke={Colors.textPrimary} + stroke={Colors.contentPrimary} strokeWidth="2.5" strokeLinecap="round" /> @@ -22,7 +22,7 @@ function HamburgerCard() { y1="15.75" x2="24.75" y2="15.75" - stroke={Colors.textPrimary} + stroke={Colors.contentPrimary} strokeWidth="2.5" strokeLinecap="round" /> @@ -31,7 +31,7 @@ function HamburgerCard() { y1="21.75" x2="24.75" y2="21.75" - stroke={Colors.textPrimary} + stroke={Colors.contentPrimary} strokeWidth="2.5" strokeLinecap="round" /> @@ -42,7 +42,7 @@ function HamburgerCard() { const styles = StyleSheet.create({ container: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, ...elevationShadowStyle(12), alignItems: 'center', justifyContent: 'center', diff --git a/src/icons/Help.tsx b/src/icons/Help.tsx index 16efa4bd48c..a96365ffc96 100644 --- a/src/icons/Help.tsx +++ b/src/icons/Help.tsx @@ -7,7 +7,7 @@ interface Props { size?: number } -export function Help({ color = colors.textPrimary, size = 32 }: Props) { +export function Help({ color = colors.contentPrimary, size = 32 }: Props) { return ( <Svg testID="Help" width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path diff --git a/src/icons/HiddenEyeIcon.tsx b/src/icons/HiddenEyeIcon.tsx index e939e6ebf01..2df2e80d0fa 100644 --- a/src/icons/HiddenEyeIcon.tsx +++ b/src/icons/HiddenEyeIcon.tsx @@ -16,7 +16,7 @@ function HiddenEyeIcon({ color, size }: Props) { </G> <Defs> <ClipPath id="a"> - <Path fill={Colors.textInverse} d="M0 0h24v24H0z" /> + <Path fill={Colors.contentInverse} d="M0 0h24v24H0z" /> </ClipPath> </Defs> </Svg> @@ -25,7 +25,7 @@ function HiddenEyeIcon({ color, size }: Props) { HiddenEyeIcon.defaultProps = { size: 24, - color: Colors.textPrimary, + color: Colors.contentPrimary, } export default HiddenEyeIcon diff --git a/src/icons/InfoIcon.tsx b/src/icons/InfoIcon.tsx index 8ce6b094e02..ff0da49f739 100644 --- a/src/icons/InfoIcon.tsx +++ b/src/icons/InfoIcon.tsx @@ -19,7 +19,7 @@ const getSizing = (baseSize: number = 16, maxSize: number = 28) => { function InfoIcon({ size = 16, scaledSize = getSizing(size), - color = colors.textPrimary, + color = colors.contentPrimary, testID, }: Props) { return ( diff --git a/src/icons/KeylessBackup.tsx b/src/icons/KeylessBackup.tsx index 025ecc50e01..09be977e9a0 100644 --- a/src/icons/KeylessBackup.tsx +++ b/src/icons/KeylessBackup.tsx @@ -11,7 +11,7 @@ export default function KeylessBackup({ style }: Props) { return ( <Svg width={80} height={80} fill="none" style={style}> <Rect width={80} height={80} fill={Colors.warningSecondary} rx={40} /> - <Mask id="a" fill={Colors.textInverse}> + <Mask id="a" fill={Colors.contentInverse}> <Path fillRule="evenodd" d="M53.725 29.555v3.523c.912.541 1.545 1.514 1.545 2.658v9.272c0 1.144-.633 2.118-1.545 2.658v3.524a3.1 3.1 0 0 1-3.09 3.09H28.998a3.09 3.09 0 0 1-3.09-3.09V29.555a3.09 3.09 0 0 1 3.09-3.091h21.635a3.1 3.1 0 0 1 3.091 3.09ZM52.18 45.008v-9.272H41.362v9.272H52.18ZM28.999 29.555V51.19h21.635V48.1h-9.272a3.1 3.1 0 0 1-3.09-3.092v-9.272a3.1 3.1 0 0 1 3.09-3.09h9.272v-3.091H29Zm19.317 10.817a2.318 2.318 0 1 1-4.636 0 2.318 2.318 0 0 1 4.636 0Z" @@ -19,19 +19,19 @@ export default function KeylessBackup({ style }: Props) { /> </Mask> <Path - fill={Colors.warning} + fill={Colors.warningPrimary} fillRule="evenodd" d="M53.725 29.555v3.523c.912.541 1.545 1.514 1.545 2.658v9.272c0 1.144-.633 2.118-1.545 2.658v3.524a3.1 3.1 0 0 1-3.09 3.09H28.998a3.09 3.09 0 0 1-3.09-3.09V29.555a3.09 3.09 0 0 1 3.09-3.091h21.635a3.1 3.1 0 0 1 3.091 3.09ZM52.18 45.008v-9.272H41.362v9.272H52.18ZM28.999 29.555V51.19h21.635V48.1h-9.272a3.1 3.1 0 0 1-3.09-3.092v-9.272a3.1 3.1 0 0 1 3.09-3.09h9.272v-3.091H29Zm19.317 10.817a2.318 2.318 0 1 1-4.636 0 2.318 2.318 0 0 1 4.636 0Z" clipRule="evenodd" /> <Path - fill={Colors.warning} + fill={Colors.warningPrimary} d="M53.725 33.078h-.75v.427l.367.218.383-.645Zm0 14.588-.383-.645-.367.218v.427h.75Zm-1.545-11.93h.75v-.75h-.75v.75Zm0 9.272v.75h.75v-.75h-.75Zm-10.818-9.272v-.75h-.75v.75h.75Zm0 9.272h-.75v.75h.75v-.75ZM28.999 51.19h-.75v.75h.75v-.75Zm0-21.635v-.75h-.75v.75h.75ZM50.634 51.19v.75h.75v-.75h-.75Zm0-3.09h.75v-.75h-.75v.75Zm0-15.455v.75h.75v-.75h-.75Zm0-3.09h.75v-.75h-.75v.75Zm3.841 3.523v-3.523h-1.5v3.523h1.5Zm1.545 2.658c0-1.434-.796-2.64-1.912-3.303l-.766 1.29c.707.42 1.178 1.16 1.178 2.013h1.5Zm0 9.272v-9.272h-1.5v9.272h1.5Zm-1.912 3.303c1.116-.662 1.912-1.869 1.912-3.303h-1.5c0 .853-.47 1.594-1.178 2.013l.766 1.29Zm.367 2.879v-3.524h-1.5v3.524h1.5Zm-3.84 3.84a3.85 3.85 0 0 0 3.84-3.84h-1.5a2.35 2.35 0 0 1-2.34 2.34v1.5Zm-21.636 0h21.635v-1.5H29v1.5Zm-3.84-3.84a3.84 3.84 0 0 0 3.84 3.84v-1.5a2.34 2.34 0 0 1-2.34-2.34h-1.5Zm0-21.635V51.19h1.5V29.555h-1.5Zm3.84-3.841a3.84 3.84 0 0 0-3.84 3.84h1.5a2.34 2.34 0 0 1 2.34-2.34v-1.5Zm21.635 0H29v1.5h21.635v-1.5Zm3.841 3.84a3.85 3.85 0 0 0-3.84-3.84v1.5a2.35 2.35 0 0 1 2.34 2.34h1.5Zm-3.045 6.182v9.272h1.5v-9.272h-1.5Zm-10.068.75H52.18v-1.5H41.362v1.5Zm.75 8.522v-9.272h-1.5v9.272h1.5Zm10.068-.75H41.362v1.5H52.18v-1.5ZM29.749 51.19V29.555h-1.5V51.19h1.5Zm20.885-.75H29v1.5h21.635v-1.5Zm-.75-2.34v3.09h1.5V48.1h-1.5Zm-8.522.75h9.272v-1.5h-9.272v1.5Zm-3.84-3.842a3.85 3.85 0 0 0 3.84 3.841v-1.5a2.35 2.35 0 0 1-2.34-2.34h-1.5Zm0-9.272v9.272h1.5v-9.272h-1.5Zm3.84-3.84a3.85 3.85 0 0 0-3.84 3.84h1.5a2.35 2.35 0 0 1 2.34-2.34v-1.5Zm9.272 0h-9.272v1.5h9.272v-1.5Zm-.75-2.341v3.09h1.5v-3.09h-1.5ZM29 30.305h21.635v-1.5H29v1.5Zm17 13.135a3.068 3.068 0 0 0 3.067-3.068h-1.5c0 .866-.702 1.568-1.568 1.568v1.5Zm-3.069-3.068a3.068 3.068 0 0 0 3.068 3.068v-1.5a1.568 1.568 0 0 1-1.568-1.568h-1.5Zm3.068-3.068a3.068 3.068 0 0 0-3.068 3.068h1.5c0-.866.702-1.568 1.568-1.568v-1.5Zm3.069 3.068a3.068 3.068 0 0 0-3.069-3.068v1.5c.867 0 1.569.702 1.569 1.568h1.5Z" mask="url(#a)" /> <Path - fill={Colors.warning} - stroke={Colors.warning} + fill={Colors.warningPrimary} + stroke={Colors.warningPrimary} d="M67.797 51.196h-3.615v.5c0 6.115-4.931 11.065-11.015 11.065-1.937 0-3.751-.51-5.327-1.393l1.392-1.398a8.95 8.95 0 0 0 3.935.9c5.042 0 9.136-4.115 9.136-9.174v-.5h-3.615l4.554-4.574 4.555 4.574Zm-49.1-22.63v.5h3.615l-4.554 4.573-4.555-4.574h3.615v-.5c0-6.116 4.931-11.065 11.015-11.065 1.937 0 3.751.51 5.327 1.393l-1.392 1.398a8.95 8.95 0 0 0-3.935-.9c-5.042 0-9.136 4.115-9.136 9.174Z" /> </Svg> diff --git a/src/icons/MagicWand.tsx b/src/icons/MagicWand.tsx index 914aaa65436..6cf8852cdc2 100644 --- a/src/icons/MagicWand.tsx +++ b/src/icons/MagicWand.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import Svg, { Path } from 'react-native-svg' import Colors from 'src/styles/colors' -const MagicWand = ({ size = 24, color = Colors.success }) => ( +const MagicWand = ({ size = 24, color = Colors.successPrimary }) => ( <Svg width={size} height={size} viewBox="0 0 24 24"> <Path fill={color} diff --git a/src/icons/NotificationBellIcon.tsx b/src/icons/NotificationBellIcon.tsx index 474fe24f79b..a68bc599362 100644 --- a/src/icons/NotificationBellIcon.tsx +++ b/src/icons/NotificationBellIcon.tsx @@ -11,7 +11,7 @@ const NotificationBellIcon = ({ size = 24, notificationMark }: Props) => ( <Svg width={size} height={size} fill="none"> <Path d="M3 20.125V17.875H5.25V10C5.25 8.44375 5.71875 7.06075 6.65625 5.851C7.59375 4.64125 8.8125 3.84925 10.3125 3.475V2.6875C10.3125 2.21875 10.4767 1.82013 10.8052 1.49163C11.1337 1.16313 11.532 0.999253 12 1C12.4688 1 12.8674 1.16425 13.1959 1.49275C13.5244 1.82125 13.6882 2.2195 13.6875 2.6875V3.475C15.1875 3.85 16.4062 4.64238 17.3438 5.85213C18.2812 7.06188 18.75 8.4445 18.75 10V17.875H21V20.125H3ZM12 23.5C11.3813 23.5 10.8514 23.2795 10.4104 22.8385C9.96937 22.3975 9.74925 21.868 9.75 21.25H14.25C14.25 21.8688 14.0295 22.3986 13.5885 22.8396C13.1475 23.2806 12.618 23.5008 12 23.5ZM7.5 17.875H16.5V10C16.5 8.7625 16.0594 7.70313 15.1781 6.82188C14.2969 5.94063 13.2375 5.5 12 5.5C10.7625 5.5 9.70313 5.94063 8.82188 6.82188C7.94063 7.70313 7.5 8.7625 7.5 10V17.875Z" - fill={colors.textPrimary} + fill={colors.contentPrimary} /> {notificationMark && ( <Path diff --git a/src/icons/OpenLinkIcon.tsx b/src/icons/OpenLinkIcon.tsx index 86dc9126cba..948f8495e93 100644 --- a/src/icons/OpenLinkIcon.tsx +++ b/src/icons/OpenLinkIcon.tsx @@ -7,7 +7,7 @@ interface Props { size?: number } -const OpenLinkIcon = ({ color = colors.textInverse, size = 12 }: Props) => ( +const OpenLinkIcon = ({ color = colors.contentInverse, size = 12 }: Props) => ( <Svg width={size} height={size} fill="none" viewBox="0 0 12 12"> <Path d="M10.148 10.148H1.852V1.852H6V.667H1.852C1.194.667.667 1.2.667 1.852v8.296c0 .652.527 1.185 1.185 1.185h8.296c.652 0 1.185-.533 1.185-1.185V6h-1.185v4.148ZM7.185.667v1.185h2.127L3.487 7.677l.836.836 5.825-5.826v2.128h1.185V.667H7.185Z" diff --git a/src/icons/Paste.tsx b/src/icons/Paste.tsx index 288df02d7ac..8dec080fede 100644 --- a/src/icons/Paste.tsx +++ b/src/icons/Paste.tsx @@ -12,7 +12,7 @@ export default class Paste extends React.PureComponent<Props> { static defaultProps = { width: 28, height: 28, - color: colors.textPrimary, + color: colors.contentPrimary, } render() { diff --git a/src/icons/Phone.tsx b/src/icons/Phone.tsx index 6f0eda68e39..9500e49afc8 100644 --- a/src/icons/Phone.tsx +++ b/src/icons/Phone.tsx @@ -8,7 +8,7 @@ interface Props { testID?: string } -export default function Phone({ color = Colors.textPrimary, size = 24, testID }: Props) { +export default function Phone({ color = Colors.contentPrimary, size = 24, testID }: Props) { return ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" testID={testID}> <Path diff --git a/src/icons/PlusIcon.tsx b/src/icons/PlusIcon.tsx index ab12b45cdfb..2d676f945e9 100644 --- a/src/icons/PlusIcon.tsx +++ b/src/icons/PlusIcon.tsx @@ -6,7 +6,7 @@ const PlusIcon = () => ( <Svg width={24} height={24} fill="none" viewBox="0 0 24 24"> <Path d="M19 12.998H13V18.998H11V12.998H5V10.998H11V4.99805H13V10.998H19V12.998Z" - fill={Colors.textPrimary} + fill={Colors.contentPrimary} /> </Svg> ) diff --git a/src/icons/Preferences.tsx b/src/icons/Preferences.tsx index 73b1641a93a..677f675a081 100644 --- a/src/icons/Preferences.tsx +++ b/src/icons/Preferences.tsx @@ -7,7 +7,7 @@ interface Props { color?: string } -function Preferences({ color = colors.textPrimary, size = 24 }: Props) { +function Preferences({ color = colors.contentPrimary, size = 24 }: Props) { return ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path diff --git a/src/icons/ProfilePlus.tsx b/src/icons/ProfilePlus.tsx index 9eb7004b995..0f6aa186e57 100644 --- a/src/icons/ProfilePlus.tsx +++ b/src/icons/ProfilePlus.tsx @@ -6,7 +6,7 @@ const ProfilePlus = (props: SvgProps) => ( <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}> <Path d="M15 4C13.9391 4 12.9217 4.42143 12.1716 5.17157C11.4214 5.92172 11 6.93913 11 8C11 9.06087 11.4214 10.0783 12.1716 10.8284C12.9217 11.5786 13.9391 12 15 12C16.0609 12 17.0783 11.5786 17.8284 10.8284C18.5786 10.0783 19 9.06087 19 8C19 6.93913 18.5786 5.92172 17.8284 5.17157C17.0783 4.42143 16.0609 4 15 4ZM15 5.9C15.2758 5.9 15.5489 5.95432 15.8036 6.05985C16.0584 6.16539 16.2899 6.32007 16.4849 6.51508C16.6799 6.71008 16.8346 6.94158 16.9401 7.19636C17.0457 7.45115 17.1 7.72422 17.1 8C17.1 8.27578 17.0457 8.54885 16.9401 8.80364C16.8346 9.05842 16.6799 9.28992 16.4849 9.48492C16.2899 9.67993 16.0584 9.83461 15.8036 9.94015C15.5489 10.0457 15.2758 10.1 15 10.1C14.7242 10.1 14.4511 10.0457 14.1964 9.94015C13.9416 9.83461 13.7101 9.67993 13.5151 9.48492C13.3201 9.28992 13.1654 9.05842 13.0599 8.80364C12.9543 8.54885 12.9 8.27578 12.9 8C12.9 7.44305 13.1212 6.9089 13.5151 6.51508C13.9089 6.12125 14.443 5.9 15 5.9ZM4 7V10H1V12H4V15H6V12H9V10H6V7H4ZM15 13C12.33 13 7 14.33 7 17V20H23V17C23 14.33 17.67 13 15 13ZM15 14.9C17.97 14.9 21.1 16.36 21.1 17V18.1H8.9V17C8.9 16.36 12 14.9 15 14.9Z" - fill={Colors.textPrimary} + fill={Colors.contentPrimary} /> </Svg> ) diff --git a/src/icons/QRCode.tsx b/src/icons/QRCode.tsx index 79b2f11c7bc..ed93f4ed633 100644 --- a/src/icons/QRCode.tsx +++ b/src/icons/QRCode.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import Svg, { Path } from 'react-native-svg' import Colors from 'src/styles/colors' -const QRCode = ({ color = Colors.textPrimary }: { color?: Colors }) => ( +const QRCode = ({ color = Colors.contentPrimary }: { color?: Colors }) => ( <Svg width={18} height={18}> <Path fill={color} diff --git a/src/icons/Refresh.tsx b/src/icons/Refresh.tsx index 28736611844..315dc12679e 100644 --- a/src/icons/Refresh.tsx +++ b/src/icons/Refresh.tsx @@ -29,7 +29,7 @@ const Refresh = ({ color, height }: Props) => ( Refresh.defaultProps = { height: 16, - color: colors.textPrimary, + color: colors.contentPrimary, } export default Refresh diff --git a/src/icons/ScanIcon.tsx b/src/icons/ScanIcon.tsx index 5c5f46d3da2..693b0096955 100644 --- a/src/icons/ScanIcon.tsx +++ b/src/icons/ScanIcon.tsx @@ -7,7 +7,7 @@ interface Props { size?: number } -const ScanIcon = ({ color = colors.textPrimary, size = 24 }: Props) => ( +const ScanIcon = ({ color = colors.contentPrimary, size = 24 }: Props) => ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <G clipPath="url(#clip0_116_49741)"> <Path diff --git a/src/icons/Search.tsx b/src/icons/Search.tsx index e5a0f261115..f1d989a30f9 100644 --- a/src/icons/Search.tsx +++ b/src/icons/Search.tsx @@ -12,7 +12,7 @@ export default class Search extends React.PureComponent<Props> { static defaultProps = { width: 14, height: 15, - color: colors.textPrimary, + color: colors.contentPrimary, } render() { diff --git a/src/icons/Social.tsx b/src/icons/Social.tsx index dfd670e6018..0f6e2e72880 100644 --- a/src/icons/Social.tsx +++ b/src/icons/Social.tsx @@ -5,8 +5,8 @@ import Colors from 'src/styles/colors' const Social = () => ( <Svg width={20} height={14}> <Path - fill={Colors.textPrimary} - stroke={Colors.textPrimary} + fill={Colors.contentPrimary} + stroke={Colors.contentPrimary} d="m2.056 11.589-1.32.911H13.264l-1.32-.911c-.483-.334-1.258-.665-2.12-.912-.87-.25-1.872-.427-2.824-.427-.952 0-1.955.177-2.824.427-.862.247-1.637.578-2.12.912ZM.5 12.25c0-.4.196-.785.604-1.163.412-.38 1.006-.717 1.704-.997C4.206 9.53 5.892 9.25 7 9.25s2.794.28 4.192.84c.698.28 1.292.617 1.704.997.408.378.604.764.604 1.163v1.25H.5v-1.25ZM10 3.5c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3Zm-1 0c0-1.106-.894-2-2-2-1.106 0-2 .894-2 2 0 1.106.894 2 2 2 1.106 0 2-.894 2-2Zm7.5 8.75c0-1.05-.357-1.933-.925-2.666.75.178 1.502.425 2.15.74 1.16.563 1.775 1.232 1.775 1.926v1.25h-3v-1.25ZM16 3.5c0 1.654-1.346 3-3 3-.26 0-.51-.035-.752-.101.48-.86.752-1.85.752-2.899s-.273-2.04-.752-2.899A2.84 2.84 0 0 1 13 .5c1.654 0 3 1.346 3 3Z" /> </Svg> diff --git a/src/icons/Stack.tsx b/src/icons/Stack.tsx index e8ca0fecdb7..4009e5975d3 100644 --- a/src/icons/Stack.tsx +++ b/src/icons/Stack.tsx @@ -7,7 +7,7 @@ interface Props { color?: string } -function Stack({ color = colors.textPrimary, size = 24 }: Props) { +function Stack({ color = colors.contentPrimary, size = 24 }: Props) { return ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path diff --git a/src/icons/StarOutline.tsx b/src/icons/StarOutline.tsx index 5cb5b16ef0e..45c832e7760 100644 --- a/src/icons/StarOutline.tsx +++ b/src/icons/StarOutline.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import Svg, { Path } from 'react-native-svg' import Colors from 'src/styles/colors' -const StarOutline = ({ color = Colors.textPrimary }: { color?: Colors }) => ( +const StarOutline = ({ color = Colors.contentPrimary }: { color?: Colors }) => ( <Svg width={24} height={24} fill="none"> <Path d="m22.026 9.18-7.379-.636-2.884-6.794L8.88 8.554 1.5 9.181l5.604 4.854L5.42 21.25l6.342-3.828 6.343 3.828-1.673-7.215 5.593-4.854Zm-10.263 6.323-3.859 2.33 1.027-4.393-3.408-2.956 4.495-.39 1.745-4.136 1.755 4.146 4.495.39-3.407 2.956 1.026 4.393-3.869-2.34Z" diff --git a/src/icons/SwapArrows.tsx b/src/icons/SwapArrows.tsx index d7a8bd578dc..d50c885249f 100644 --- a/src/icons/SwapArrows.tsx +++ b/src/icons/SwapArrows.tsx @@ -8,7 +8,7 @@ interface Props { testID?: string } -const SwapArrows = ({ size = 24, color = Colors.textPrimary, testID }: Props) => ( +const SwapArrows = ({ size = 24, color = Colors.contentPrimary, testID }: Props) => ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" testID={testID}> <Path fill={color} diff --git a/src/icons/ThumbsUpIllustration.tsx b/src/icons/ThumbsUpIllustration.tsx index f941443cba5..5476b02c6e3 100644 --- a/src/icons/ThumbsUpIllustration.tsx +++ b/src/icons/ThumbsUpIllustration.tsx @@ -15,47 +15,47 @@ const ThumbsUpIllustration = ({ size = 72 }: Props) => ( clip-rule="evenodd" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="M17.982 49.61c.3-.306.768-.87 1.22-1.403a30.77 30.77 0 0 0-1.22 1.403ZM52.278 26.061l-.554-.27.554.27Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="m31.02 17.198-.043-.11c.067-1.649.079-.478.128-2.005-.067-.612 0-2.543-.067-3.064v-.356a1.41 1.41 0 0 1 0-.33c-.055-.228-.061-.773-.104-1.227v.252l-.085-1.079c0-.417 0-.527.03-.067 0-.356-.097-.87-.177-1.514l-.128-1.055-.036-.288v-.257a1.316 1.316 0 0 1 0-.374 2.221 2.221 0 0 1 1.329-1.434 2.255 2.255 0 0 1 1.085-.141c.093.006.185.025.274.055.093.016.183.045.268.086a.865.865 0 0 1 .39.233c.275.31.503.659.677 1.035.213.417.396.859.61 1.318.318.782.511 1.61.572 2.452.07 1.256.07 2.514 0 3.77.043-.393.061-1.312.116-1.655 0 .784-.049 1.158-.037 1.514-.069.803-.095 1.609-.079 2.415l.037.27v.416c.064.587.18 1.168.347 1.735.085.3.128.392.152.466a6.54 6.54 0 0 0 .902 1.79 7.334 7.334 0 0 0 1.646 1.642c.462.327.957.606 1.475.834-.152-.068-.536-.276-.067-.068.224.11.46.196.7.258.348.098.72.165.836.202.379.066.761.107 1.146.122h.378c.268.05 1.633-.036.822.037.464 0 .902-.067 1.22-.116l-.61.055a27.957 27.957 0 0 0 3.285-.533l-.542.085c.644-.14 1.295-.246 1.95-.318l-.89.135c1.445-.27 2.304-.417 3.48-.534l-.42.031c.7-.086 1.404-.114 2.109-.086 1.06.028 2.1.292 3.047.772a6.742 6.742 0 0 1 2.383 1.999c.371.52.634 1.11.774 1.734-.042-.196-.055-.392-.103-.582.12.35.19.715.207 1.085a3.578 3.578 0 0 0-.17-.613c0 .073.036.153.048.245v.294c.02.246.008.493-.037.736a4.118 4.118 0 0 1-.81 1.839 5.6 5.6 0 0 1-1.865 1.66c-.415.23-.842.434-1.28.614-.464.184-.933.374-1.408.533a30.557 30.557 0 0 1-5.486 1.379 31.69 31.69 0 0 1-3.547.319c-.975 0-.177-.055-.164-.061-1.183.036-.512.049-1.518.042h.213c-.445 0-.853-.036-.883 0 .548 0 .316.068.548.105h-.652a2.525 2.525 0 0 1-.53-.092h.054l-.2-.055a1.283 1.283 0 0 1-.287-.105 1.876 1.876 0 0 1-.872-.84 2.272 2.272 0 0 1-.298-1.311c.02-.233.077-.46.17-.674.1-.247.22-.485.36-.711a7.892 7.892 0 0 1 2.097-2.385c0 .037-.36.3-.665.613.231-.222.478-.426.738-.613-.427.264.695-.509.372-.294a6.782 6.782 0 0 1 2.249-.993 9.163 9.163 0 0 1 2.328-.22 7.16 7.16 0 0 1 1.603-.338 9.208 9.208 0 0 1 1.121-.043c.177.012.354.012.53 0 .337.155.662.331.976.528a6.724 6.724 0 0 0-1.402-.711h-.092a8.894 8.894 0 0 0-1.328-.411 6.33 6.33 0 0 1 1.828.533 6.902 6.902 0 0 0-1.883-.582c-.756-.141.097-.05-.823-.178a11.658 11.658 0 0 0-2.292.067 7.598 7.598 0 0 0-2.236.614 9.8 9.8 0 0 0-1.902 1.133l.14-.122a9.172 9.172 0 0 0-1.993 2.047c.19-.245.36-.447 0 .086-.32.442-.594.916-.817 1.416a3.548 3.548 0 0 0-.304 1.575c.023.334.095.662.213.974a3.383 3.383 0 0 0 1.64 1.84c.24.127.496.222.761.281.136.035.275.058.415.068.132.008.264.008.396 0h1.524c2.388.007 4.77-.254 7.1-.779a32.458 32.458 0 0 0 3.56-1.078 38.84 38.84 0 0 0 1.651-.662 8.433 8.433 0 0 0 1.548-.859c.761-.503 1.4-1.17 1.87-1.954.471-.784.76-1.664.849-2.575v.184a5.086 5.086 0 0 0-.646-2.844 7.223 7.223 0 0 0-2.243-2.421 8.356 8.356 0 0 0-3.31-1.367 13.867 13.867 0 0 0-3.657-.055c-2.389.257-4.656.876-6.704 1.078a9.439 9.439 0 0 1-2.846-.092 5.386 5.386 0 0 1-2.127-.937 6.736 6.736 0 0 1-1.829-2.354c.207.466.11.319-.06-.043a7.946 7.946 0 0 1-.39-1.226c-.044-.196-.056-.22-.062-.245a6.459 6.459 0 0 1-.213-1.588c-.08-.864 0-2.36.055-4.26a14.24 14.24 0 0 0-.262-3.064 8.735 8.735 0 0 0-.525-1.612 16.619 16.619 0 0 0-.694-1.514 4.108 4.108 0 0 0-1.201-1.471 2.566 2.566 0 0 0-.463-.22 2.37 2.37 0 0 0-.445-.148c-.3-.081-.61-.12-.92-.116a3.678 3.678 0 0 0-2.938 1.587 2.91 2.91 0 0 0-.53 1.508v.398c0 .129 0 .203.03.3l.067.534c.08.68.146 1.226.195 1.63.134.84.165 1.802.244 2.752.079.95.042 1.9.085 2.734v-.165a51.654 51.654 0 0 1-.42 6.89c-.116.74-.226 1.495-.336 2.212-.11.717-.28 1.397-.396 2.023-.231 1.256-.53 2.237-.646 2.745l.073-.27c-.217.98-.506 1.94-.865 2.875a10.598 10.598 0 0 1-.549 1.888l-.676 1.84c-.275.76-.64 1.556-.927 2.236v-.061c-.297.725-.63 1.435-1 2.127-.377.754-.743 1.471-.974 1.839a64.169 64.169 0 0 1-4.346 6.552l-1.176 1.293-.159.203c-.134.346-.21.713-.225 1.085.03.373.377.435 1.627-.908v.062l.463-.558c.567-.65.75-1.024.744-.95-.232.319-.47.613-.726.938.561-.662.183-.19 0 .08a7.14 7.14 0 0 0 .61-.785c.091-.141-.085.098-.17.202.267-.386.609-.925.987-1.38.53-.716.073 0 .688-.857a53.694 53.694 0 0 0 7.168-14.674c.049-.122 0 0-.043.178.256-.797.494-1.557.67-2.311.177-.754.397-1.471.555-2.225.098-.41.134-.521.171-.643-.043.122.427-1.937.7-4.083.038-.27.074-.533.117-.797l.073-.784c.049-.509.091-.987.134-1.404.091-.827.091-1.397.098-1.428Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="M42.32 33.57a1.273 1.273 0 0 0-.757-.08 2.2 2.2 0 0 1 .756.08Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="m42.746 40.214.037-.043c.408.062.115.074.487.117.153-.055.61.085.75.06 0 0 .177 0 .158.056-.018.055.19 0 .305 0 .116 0-.03 0-.055-.03h.262c.098 0 .122.048 0 .042.342.043 1.335.154 2.34.215 1.006.061 2.024.073 2.396.061a3.077 3.077 0 0 1-.414-.055h.378c.073.074.432 0 .579.086l.06-.043h.098c.32-.035.642-.047.963-.037.439 0 .646-.092.896-.086-.037 0-.134 0 0-.037.134-.036.305-.042.366 0 .06.043.475 0 .347-.067.061 0 .39 0 .201.037.098.008.195.008.293 0h-.14c.274-.006.548-.04.816-.098h-.14c.167-.032.339-.032.506 0l-.232.043c.307-.034.61-.091.909-.172h-.11c.189-.055.804-.202 1.402-.417.459-.157.9-.362 1.316-.613l-.177.043c.095-.054.186-.113.275-.178 0 0-.08.178-.116.184a6.66 6.66 0 0 0 1.98-1.6c.337-.405.615-.857.824-1.342.126-.313.226-.637.298-.968.061-.276.067-.043.073-.037v-.441c0-.086.03 0 .03.061a1.32 1.32 0 0 0 0-.264c0 .166-.06.092-.097.16.01-.125.01-.25 0-.374a5.287 5.287 0 0 1-.128-.57 4.063 4.063 0 0 0-.725-1.716s.11.092.189.196l-.158-.24c.067.136-.183-.19-.116-.091a3.845 3.845 0 0 0-1.164-.858c-.216.103-.42.228-.61.374a1.757 1.757 0 0 0-.427.496.936.936 0 0 1-.176-.037c.079.034.164.053.25.056v-.037c.182.037.036 0 .213.086 0 0-.165 0-.305-.037.1.034.201.059.305.073.11.056 0 .031.11.098a.949.949 0 0 1 .335.166c.225.208.408.27.567.533.1.136.188.282.262.435 0-.049 0-.104.036 0 .076.163.135.334.177.51l.067.14c.072.303.088.617.049.926a3.45 3.45 0 0 1-.42 1.305 5.175 5.175 0 0 1-1.83 1.76 8.103 8.103 0 0 1-2.62.919c-1.067.202-2.2.27-2.956.337h-.798c.085 0 .134 0 0 0-.744 0-.05 0-.805.055-.433 0-1.481 0-2.517-.037a25.455 25.455 0 0 1-2.438-.214c-.384-.055-.926-.086-1.329-.11h.055a8.083 8.083 0 0 1-1.566-.301 2.528 2.528 0 0 1-.768-.374 3.939 3.939 0 0 1-.415-.398l.037.049c-.268-.276-.195-.27-.341-.527 0 .06-.214-.209-.256-.325a2.161 2.161 0 0 1-.256-.846c-.03-.148-.03-.3 0-.448a.278.278 0 0 1 .054-.153.841.841 0 0 1 .08-.122c.366-.39.817-.69 1.316-.877a.497.497 0 0 1 .244.043.66.66 0 0 1 .06-.147.917.917 0 0 1 .214-.3.484.484 0 0 0 .183-.35.612.612 0 0 0-.579-.392 1.125 1.125 0 0 0-.256.037c-.293.043-.384.128-.378.092.12-.041.242-.074.366-.098-.28.055-.098 0 0-.043-.134 0-.232.049-.33.067-.097.018.043 0 .092 0-.152.05-.317.147-.475.209-.159.06-.037-.037-.299.104a4.23 4.23 0 0 0-.945.717c-.16.162-.297.346-.408.545-.069.121-.12.251-.152.387 0 .104-.05.214-.067.318-.1.834.096 1.676.554 2.378 0 .037 0 0-.036-.036.236.384.528.73.865 1.03.047.05.09.102.128.159 0 0 .116.092.33.214.246.146.508.265.78.356.258.09.523.162.792.214l.475.037Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="M43.782 39.546c-.159.01-.316.037-.47.08.16-.01.317-.036.47-.08ZM43.307 39.638v.007l.006-.007h-.006ZM57.429 39.056h.11a.331.331 0 0 0-.11 0Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="m43.624 46.098.042-.043c.427.086.116.086.512.141.17-.043.659.092.799.062 0 0 .189 0 .17.042-.018.043.202 0 .317 0h-.06.267c.104 0 .129.043 0 .043.69.043 3.968.215 4.706.227a2.758 2.758 0 0 1-.403-.073h.372c.073.073.427 0 .573.11l.055-.037h.098c.318-.026.638-.026.956 0 .44 0 .653-.037.896 0-.134 0-.036 0 0 0h.354c.049 0 .475 0 .353-.037.061 0 .39.05.196.062.099.005.199.005.298 0h-.14c.276.021.553.021.829 0h-.14c.17-.019.34-.006.505.036h-.237c.31 0 .62-.02.926-.06h-.116c.202 0 .835-.099 1.463-.246.49-.1.963-.265 1.408-.49h-.183l.299-.154c-.037 0-.104.172-.14.172.319-.132.623-.296.908-.49a4.52 4.52 0 0 0 1.158-1.159c.3-.46.508-.974.61-1.514.068-.324.103-.655.103-.987 0-.282.055-.055.061-.049-.043-.349-.043-.147-.085-.44 0-.08.03 0 .042.054 0-.129 0-.245-.054-.257 0 .165-.037.104-.055.177a.99.99 0 0 0-.073-.367 4.415 4.415 0 0 1-.244-.527 3.878 3.878 0 0 0-1.128-1.52s.122.067.226.147c-.061-.056-.159-.135-.214-.197.104.117-.213-.147-.128-.06a4.866 4.866 0 0 0-1.286-.614c-.189.139-.368.29-.536.454-.163.149-.299.325-.402.52H57.3c.091.023.185.036.28.038v-.037c.213 0 .043.03.25.067 0 .03-.183 0-.348 0 .115.034.234.053.354.056.128.048 0 .03.134.091.137.016.27.057.39.123.25.115.485.259.701.429h-.037c.13.113.248.238.354.374 0-.05-.043-.098.037 0 .11.14.204.292.28.453l.097.123c.132.289.216.597.25.913.05.467-.01.939-.17 1.38-.165.44-.432.832-.78 1.146a3.787 3.787 0 0 1-.836.545 6.988 6.988 0 0 1-2.694.613c-1.09.068-2.242 0-3.047 0-.238-.037-.567-.043-.817-.067.134 0 .086.043 0 .036-.761-.036-.054 0-.822 0-.89 0-4.267-.177-5.071-.239-.44.01-.88-.008-1.317-.055h.043a5.724 5.724 0 0 1-1.439-.478 3.655 3.655 0 0 1-1.219-.84l.037.043c-.262-.257-.189-.257-.317-.496 0 .055-.195-.202-.207-.307a1.109 1.109 0 0 1-.043-.741c.115-.258.299-.478.53-.638a6.737 6.737 0 0 1 1.591-.73l.42-.03h.056s.469-1.146-.482-1.11v-.03l-.177.05c-.22.042-.31.11-.304.079a2.39 2.39 0 0 1 .298-.08c-.22.05-.073 0 0-.043l-.256.056h.067a3.418 3.418 0 0 1-.414.171c-.22.074 0-.043-.287.05a4.211 4.211 0 0 0-1.938 1.378 2.535 2.535 0 0 0-.402 1.33c.02.458.149.904.378 1.3 0 .043 0 0-.043-.037.233.415.544.782.914 1.079l.128.153c.325.235.67.44 1.03.613.254.11.514.203.78.276l.39.067Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="M43.843 45.179a.849.849 0 0 0-.22.19.867.867 0 0 0 .22-.19Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="M45.184 49.898v-.042c.238.073.049.073.274.128.104-.043.36.11.445.086.086-.024.104.037.092.055-.013.019.11 0 .182 0 0 0 .074 0 0 0h.159c.055 0 .067.05 0 .043.452.108.91.191 1.371.252.463.07.929.112 1.396.128-.055 0-.189 0-.238-.067h.22c.042.073.25.03.335.104l.036-.037h.055c.189-.018.379-.018.567 0 .262 0 .384-.061.53-.043 0 0-.079 0 0-.03.08-.031.177 0 .214 0 .036 0 .286 0 .207-.056.036 0 .232 0 .122.05a.803.803 0 0 0 .177 0h-.086c.171 0 .341-.023.506-.068h-.122c.14 0 .25-.049.317 0l-.14.037a2.86 2.86 0 0 0 .536-.135h-.06c.53-.165 1.048-.37 1.547-.613h-.103l.158-.098s-.042.147-.06.141c.182-.074.737-.313 1.267-.613.53-.3 1.042-.613 1.22-.711.176-.098.054 0 .054.037.146-.117.043-.074.17-.166.129-.092 0 0 0 .05 0 .048.11-.074.104-.093-.006-.018-.073 0-.116 0l.159-.116c.036 0 .043-.135.201-.245.28-.225.529-.485.744-.773 0 0 0 .08-.067.148.033-.046.07-.09.11-.13-.074.062.072-.14 0-.091a2.18 2.18 0 0 0 .292-.92 1.561 1.561 0 0 0-.61-.226 1.164 1.164 0 0 0-.579.08v.042h.037v.037c0 .037-.043 0-.049 0-.006 0 0 0 0 0h-.049a.062.062 0 0 1 0 .074c-.055.073-.036.196-.146.3-.049 0-.097.135-.189.208 0 0 .061 0 0 0-.06 0-.152.166-.25.209l-.049.092a9.057 9.057 0 0 1-1.218.882c-.453.266-.921.503-1.402.711a9.717 9.717 0 0 1-1.542.51c-.279.068-.562.115-.847.14l-.659.037c-.15-.022-.3-.034-.45-.037.078 0 .048.037 0 .037h-.458c-.475-.006-.95-.041-1.42-.104a10.913 10.913 0 0 1-1.353-.245 5.46 5.46 0 0 1-.762-.117 5.61 5.61 0 0 1-.853-.294 4.773 4.773 0 0 1-.744-.417c-.164-.098-.122-.123-.2-.233 0 .05-.16-.043-.178-.086a.682.682 0 0 1-.176-.325.732.732 0 0 1 .048-.41c.147-.273.317-.534.506-.779l.214-.11s-.427-.993-.951-.723l-.073.086c-.098.085-.116.159-.128.134.037-.047.078-.093.121-.134-.097.092-.042 0 0-.037a.614.614 0 0 1-.115.104h.042c-.04.082-.09.16-.146.233-.085.11-.043 0-.146.11a2.945 2.945 0 0 0-.58 1.367 2.039 2.039 0 0 0 .635 1.514h-.037c.198.202.419.379.658.527.055.043.067.068.074.086.006.018.298.16.609.294l.433.166.207.085ZM45.135 50.524c-.16.073-.316.16-.463.257.163-.07.318-.156.463-.257ZM11.217 69.917l.146-.067-.146.067Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="M36.444 55.721v.062c-.409.233-.153 0-.518.245-.11.147-.61.355-.744.466 0 0-.183.098-.183.067-.036.068-.183.123-.292.196-.11.074.036 0 .073 0l-.262.166c-.11.049-.146.043-.037 0l-4.876 2.642c.148-.068.298-.127.451-.178-.189.129-.304.153-.378.22-.073.068-.45.227-.64.246l-.036.06-.11.038c-.316.201-.646.38-.987.533-.457.245-.646.404-.914.52.042 0 .152-.054.036 0-.036 0-.305.185-.378.185-.073 0-.493.257-.34.233-.074 0-.415.178-.227.055a2.322 2.322 0 0 0-.304.16l.152-.062c-.29.125-.57.27-.84.435l.151-.055c-.163.103-.342.18-.53.227l.226-.135c-.378.196-.61.313-.915.496l.116-.055c-.39.245-2.499 1.33-2.858 1.557l.189-.049-.311.184c.043 0 .11-.184.146-.19-.695.343-4.315 2.078-4.98 2.33-.274.097-.073 0-.073-.038-.31.154-.121.092-.39.215-.079 0 0-.037.043-.055a1.308 1.308 0 0 0-.238.073c.153-.055.11 0 .183 0l-.347.153v-.036a2.36 2.36 0 0 1-.518.3l-1.756.81a.897.897 0 0 1 .238-.142c-.08 0-.195.086-.274.11.152-.036-.238.123-.122.086-.402.252-.981.423-1.347.613 0 .068-.396 1.336-.372 1.41-.089.04-.18.075-.274.104.136-.032.267-.081.39-.147v-.049c.28-.129.08 0 .353-.123.031 0-.225.135-.45.233.171-.047.336-.12.487-.214.195-.068 0 .049.232-.037.178-.1.363-.186.554-.257h-.024c.47-.166.683-.337 1.11-.49l-.043.03c.158-.05.432-.196.707-.294-.08 0-.153 0 0-.043.31-.11.511-.22.743-.294l.201-.123c1.067-.454 5.205-2.397 6.241-2.924h-.036c1.59-.772 4.876-2.39 6.442-3.291.268-.098.61-.288.878-.417-.153.067-.11 0 0-.037.798-.423.049-.049.84-.49L34.97 58.1c.408-.282.963-.57 1.377-.84h-.036c.45-.27 3.047-1.747 3.547-2.078l-.073.037c.243-.165.5-.309.768-.43-.073 0 .298-.275.445-.373l1.066-.73c.293-.214.872-.563 1.091-.704.512-.3 1.31-.76 1.957-1.226l.475-.209.061-.049s.165-1.268-.829-.882l-.17.116c-.22.117-.299.209-.299.178l.286-.184c-.213.129-.073 0 0-.043l-.25.141c-.036.037.037 0 .074 0a3.006 3.006 0 0 1-.397.282c-.219.135-.036 0-.292.129l-3.986 2.451c-.037 0 0 0 .036-.042l-1.133.71a.64.64 0 0 1-.183.062c.037 0-.475.3-1.006.613l-.731.435-.323.257ZM31.11 10.585c.037 0 .056 0 .08-.031a.072.072 0 0 0-.08.03Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="M32.08 9.426h-.043c0-.067.061 0 .08-.061.018-.061.048-.092 0-.129-.05-.037 0 0 .036 0 .037 0 0-.03 0-.055s0 0-.03 0v-.05h.036c.125-.244.214-.506.262-.777 0 0 0 .055-.067.06-.067.007 0-.048 0-.067.073 0 0-.073.104-.085h-.037.03v-.166c0-.165-.042-.116 0-.16.043-.042 0 0-.036 0s0-.054 0-.06c0-.007 0-.08-.043-.062-.042.018.043-.067.061-.03.019.036 0-.037 0-.05 0-.067.037-.098 0-.14 0-.037 0-.068.043-.08v.037a.32.32 0 0 0 0-.154c-.043-.067-.091-.41-.158-.46h-.037l-.037-.048h.11c0-.11-.122-.675-.146-.779-.024-.104.055 0 .06 0 .007 0-.042 0-.054-.055-.012-.055 0 0 .037 0 .036 0 0-.037 0-.03 0 .005-.055.03-.08.042v-.049h.03s-.078 0-.085-.067c-.006-.068-.06-.178-.085-.264-.024-.086 0 0 .049 0s0 0 0-.043-.037 0-.043 0c-.006 0-.067-.14-.134-.177-.067-.037-1.012.373-1.073.416-.06.043 0 0 0 0v.05h.037v.042c0 .043-.043 0-.061 0-.018 0 0 .05 0 .043 0-.006-.037 0-.037.043s.055 0 .043.05c0 .054.085.048.067.103v.074c0 .03 0 0 .03 0 .031 0 0 .049 0 .08h.037c.082.22.146.448.19.68.036.184.036.564.048.76-.037.03-.037.067-.049.098-.012.03.037 0 .037 0v.11c-.02.217-.09.427-.201.613.03.068-.037.117 0 .172-.062.13-.132.257-.208.38 0 .061-.048 0-.085.055a.08.08 0 0 1 .037.098v.147c0 .05-.055.098-.067.123-.013.024-.153.08-.183.172h-.092l.335.392c.137.182.315.329.519.429.036 0 0-.05.042-.03l-.036.036h.042s0-.061.03-.074c.031-.012.037.031.068 0 .18-.15.337-.328.463-.527.035-.058.066-.12.091-.184h.05c.02-.134.054-.265.103-.392ZM46.281 29.64a.383.383 0 0 0-.189-.079c.057.04.121.067.189.08ZM42.051 29.28v.054c-.238.092-.091-.037-.31.074a.562.562 0 0 1-.22.153.882.882 0 0 0-.256.178l-.092.061h-.036c0 .067-.098.129-.128.233-.03.104 0 0 .042-.037a.862.862 0 0 0-.079.209c-.042.08-.073.092-.042 0a1.412 1.412 0 0 0-.086.294 2.206 2.206 0 0 0-.055.313c-.027.254-.037.51-.03.766-.005.313.04.626.134.925.092.27.275.5.518.65-.06-.067-.225-.184-.232-.276.128.104.171.178.25.196.08.019.305.196.415.294h.06l.068.043c.28.037.298 0 .323 0l.231.031c.145-.007.289-.007.433 0 0 0-.06 0 0-.037.061-.037.146 0 .17 0 .025 0 .232 0 .172-.049.03 0 .188 0 .097.055a.514.514 0 0 0 .14 0h-.067c.13.024.261.024.39 0h-.067c.104 0 .195 0 .238.031h-.11a1.82 1.82 0 0 0 .427-.061h-.037c.438-.083.87-.196 1.292-.337h-.085l.134-.056s-.042.13-.06.123c.4-.091.788-.229 1.157-.41.282-.138.523-.35.695-.614.117-.195.188-.416.207-.643 0-.19.061-.037.067 0 0-.24-.036-.104-.06-.294 0-.05.03 0 .042.036a.615.615 0 0 0-.043-.165c0 .104-.042.073-.06.122a1.912 1.912 0 0 0-.062-.22 1.749 1.749 0 0 1-.195-.276c-.174-.3-.43-.545-.737-.705 0 0 .073 0 .134.037a.843.843 0 0 1-.122-.08c.055.061-.128-.043-.08 0a5.188 5.188 0 0 0-.651-.171c-.226.335-.43.685-.61 1.048h-.11a.305.305 0 0 0 .153.043v-.037c.116 0 0 0 .128.049 0 .037-.098 0-.183 0 .08 0 .146.061.183.03.037-.03 0 .037.06.074a.358.358 0 0 1 .196.03c.128.08.22 0 .305.111 0 0 .103.055.122.098 0-.037.018.043 0 0 0 .037.073.068.079.117h.049c.03.046.05.098.06.153 0 .037 0 .043-.048.122a2.236 2.236 0 0 1-.896.362c-.852.193-1.723.288-2.597.282a2.316 2.316 0 0 0-.341-.055c.049 0 0 .043 0 .037 0-.007-.128 0-.14 0h-.098a.127.127 0 0 1-.103-.05.407.407 0 0 1 0-.08v-.269c-.022-.309.007-.62.085-.92a.055.055 0 0 1 0-.073l.073-.061c.16-.094.34-.149.524-.16.234-.012.468-.012.701 0 .19 0 .165.031.311.056 0-.055.146-.068.213-.068h.482v.03c.164.003.327.02.488.05.279.085.564.149.853.19l.177.116s.5-.907.146-1.189h-.08c-.09-.036-.14 0-.127-.036l.128.03c-.092-.03 0-.03 0-.037l-.11-.036a.68.68 0 0 1-.19 0c-.097 0 0-.043-.109-.068a10.632 10.632 0 0 0-1.828-.49h-.573a.298.298 0 0 1-.086-.037s-.25 0-.536.055c-.198.031-.393.076-.585.135ZM39.827 36.26h.079c.037 0-.049-.006-.08 0ZM41.966 36.665v-.049c.11 0 0 .061.122.068.121.006.164.036.207 0 .042-.037.042 0 .036.042-.006.043.055 0 .086 0 0 0 .03 0 0 0h.067s.03.043 0 .037l.61.147c.127.033.252.078.371.135v-.073c0-.074.03 0 .055 0 .024 0 .036.042 0 .11v-.03c.067 0 0 0 .043.03.042.03.067 0 .054 0-.012 0 0 0 0 0s.03 0 0 0 0 .043.05 0c.048-.043-.031.043-.05 0-.018-.043 0 0 0 0v.098c0 .03 0 .061-.054.061-.055 0 0 0 0-.036a.31.31 0 0 0 0 .128.192.192 0 0 1 0 .098V37.548a.82.82 0 0 1-.043.11h.036a.14.14 0 0 1 0 .043v-.11a4.855 4.855 0 0 1-1.103.312c-.073 0 0-.055 0-.061 0-.006 0 .043-.097.055-.098.012 0 0 0-.037 0-.036-.061 0-.061 0l.055.074h-.086s-.036.086-.128.092c-.091.006-.298.055-.45.086 0 0 0-.037.054-.056.055-.018-.049 0-.067 0-.018 0-.06.037-.03.043-.092.092-.256.068-.348.141.012.389.073.774.183 1.147l-.097-.172c.031.063.066.124.103.184v-.037h.061c.061 0-.043.055-.043.061 0 .006.068 0 .061 0-.006 0 0 .037.05.037.048 0 .066-.061.109-.049.104 0 .14-.086.25-.074.042 0 .103-.03.17 0-.036 0 .067.031 0 0h.183l.05-.042a10.717 10.717 0 0 0 1.657-.479c.213-.089.404-.222.56-.392.117-.14.211-.297.281-.466.068-.159.117-.325.146-.496a1.57 1.57 0 0 0-.14-.956.916.916 0 0 0-.17-.356c0 .062 0 .062-.031 0-.232-.257 0 0-.286-.233a2.77 2.77 0 0 0-.86-.386c-.353-.086-.573-.135-.695-.178a2.614 2.614 0 0 1-.378-.03c-.122 0-.804-.178-.95-.184-.135 0-.11-.037-.202-.068-.09-.03-.11.068-.152.062h-.317c-.105.01-.211.01-.317 0a1.667 1.667 0 0 0-.61-.062l-.158-.073a2.466 2.466 0 0 0 0 .52c-.002.23.05.457.153.663v.03h.091-.06c.048 0 0 0 0 .037h.048s.06-.036.091 0c.03.037 0 .05.061.056.311.036.646.116.994.165h.298a.08.08 0 0 1 .037.049c.17.035.337.085.5.147ZM42.642 45.62c.05.03.107.048.165.05a.28.28 0 0 0-.165-.05ZM45.403 44.89v-.042c.122-.104.073 0 .183-.104 0-.092.183-.197.183-.264s.055-.061.067-.043c.012.019.037-.073.049-.122 0 0 .012-.05 0 0l.042-.098c0-.037.055-.037.037 0 .16-.278.255-.588.28-.908a1.99 1.99 0 0 0-.115-.944v.172c-.043-.067 0-.11-.055-.135.055-.049-.043-.165 0-.245h-.043v-.043a1.401 1.401 0 0 1-.189-.319c-.103-.14-.195-.165-.238-.245v.03c0-.024-.091-.067-.079-.103.012-.037-.116-.129-.122-.062 0 0-.073-.116 0-.085a.273.273 0 0 0-.079-.068v.043c-.104-.08-.14-.153-.232-.172v.043c-.067-.043-.121-.073-.121-.128l.079.03a.923.923 0 0 0-.28-.14h.03c-.067 0-.262-.099-.457-.154a2.318 2.318 0 0 0-.311-.061.555.555 0 0 0-.189 0l.049.043h-.104s.061-.11.073-.092c-.237-.062-1.219-.05-1.39-.062-.066 0 0-.06 0-.067 0-.006-.036.043-.11.043-.072 0 0 0 0-.037s-.06 0-.066 0c-.006 0 0 .055.042.086h-.09s-.05.08-.141.067c-.092-.012-.323 0-.476 0 0 0 .037 0 .068-.043.03-.042-.055 0-.074 0-.018 0-.06 0 0 .037-.11.08-.262 0-.353.08-.092.08-.104 1.097-.085 1.17.018.074-.055 0-.061 0h.085v-.042h.08c.078 0-.056.049-.104.055h.11c.011 0 0 .037.054.049.055.012.085-.05.134-.037.11 0 .165-.061.262-.037h.171c.067 0-.037 0 0-.036.037-.037.128 0 .183 0l.049-.037c.49-.027.983-.027 1.475 0a.822.822 0 0 1 .225.043c.108.033.213.078.31.135.177.1.339.224.482.367a.49.49 0 0 0 .061.141s0-.03.03 0c.062.123 0 0 .098.117a.746.746 0 0 1 .092.441.714.714 0 0 1-.128.405c0 .085-.061.135-.08.196 0 .049-.48.325-.609.374-.085.067-.091 0-.177 0 0 .043-.042.104-.079.116-.072.055-.15.102-.231.141a.738.738 0 0 1-.25.08 2.606 2.606 0 0 0-.433 0 .35.35 0 0 1-.08-.086l-.11.515c-.048.263-.09.564.068.68H42.984h-.104c.073 0 0 0 0 .037a.348.348 0 0 1 .085 0 .31.31 0 0 1 .147 0c.079 0 0 .043.097.043.438-.005.872-.09 1.28-.251.115-.051.227-.109.335-.172a.14.14 0 0 1 .067 0s.5-.258.512-.294ZM44.819 49.598v.037s-.056-.018 0-.037ZM43.855 46.699Z" /> <Path - fill={Colors.textPrimary} + fill={Colors.contentPrimary} d="M46.482 49.47v-.05c.104 0 .037.055.17 0 .037-.08.239-.073.263-.135.024-.06.067-.03.073 0 .006.031.067-.036.092-.08.024-.042 0 0-.031 0l.067-.073c.043 0 .061 0 0 0 .215-.164.391-.373.518-.613.137-.272.186-.58.14-.882 0 .036 0 .122-.042.153v-.135c.067-.037 0-.153.042-.227h-.042v-.043a3.906 3.906 0 0 1-.159-.355c-.097-.153-.195-.178-.237-.264v.031-.037c0-.037-.08-.037-.074-.061.007-.025-.152-.104-.14-.043 0 0-.11-.098-.03-.08a.324.324 0 0 0-.098-.055l.037.037c-.128-.068-.183-.117-.244-.098v.03c-.055 0-.098-.03-.098-.08h.061a.497.497 0 0 0-.2-.042 5.45 5.45 0 0 0-.61-.043v.043h-.073s.06-.104.067-.092c-.134-.043-.841-.208-.963-.258-.122-.049 0-.055 0-.06 0-.007-.037.03-.092 0-.055-.031 0 0 0 0h-.048c-.007 0 0 .06 0 .091h-.068s-.054.068-.115.037c-.061-.03-.232-.055-.354-.086h.061-.055c-.048 0-.012 0 0 0-.097.05-.207 0-.292 0-.086 0-.098.294-.153.564a3.172 3.172 0 0 0-.06.374.844.844 0 0 0 0 .086 1.56 1.56 0 0 0-.05-.466c.024.088.038.178.043.27V47.128s0 .037 0 0v-.043h.03s.031 0 0 0v-.123a.738.738 0 0 1 0 .123v.055c0 .013.062 0 .08 0 .06.05.122 0 .183 0 0 0 .073 0 .116.037 0-.037.042.037 0 0 0 .037.085 0 .121.055h.043c.183.043.945.202 1.134.258.134 0 .329.091.518.147l.256.085h.067v.043c0 .043.03 0 .03 0h.043a.179.179 0 0 1 0 .178c-.03.074-.152.184-.152.166 0-.019 0 0-.03.06H45.993a3.272 3.272 0 0 0-.347.044c-.091.043-.085 0-.158 0s-.055.092-.086.104a2.205 2.205 0 0 1-.219.092.81.81 0 0 1-.225.055.97.97 0 0 0-.44.05l-.146-.05h-.036c-.003.178.034.354.11.515.054.123.127.245.188.355.028.049.048.1.061.154 0 .049 0 .086.03.11 0 0 .038-.03.038 0h-.037v.037h.03s.037-.043.061-.037c.025.006 0 .043.055.043.244 0 .518 0 .799-.067 0 0 .158 0 .231-.056a.066.066 0 0 1 .043.037c.176-.042.355-.07.536-.086Z" /> </Svg> diff --git a/src/icons/Times.tsx b/src/icons/Times.tsx index 098e35cfb7f..c5d5ac1b608 100644 --- a/src/icons/Times.tsx +++ b/src/icons/Times.tsx @@ -37,7 +37,7 @@ function Times({ color, height, strokeWidth }: Props) { Times.defaultProps = { height: 16, - color: colors.textPrimary, + color: colors.contentPrimary, strokeWidth: 2, } diff --git a/src/icons/TripleDotVertical.tsx b/src/icons/TripleDotVertical.tsx index b1d82737579..6fe5fe5f54f 100644 --- a/src/icons/TripleDotVertical.tsx +++ b/src/icons/TripleDotVertical.tsx @@ -6,7 +6,7 @@ interface Props { color?: string } -const TripleDotVertical = ({ color = Colors.textPrimary }: Props) => ( +const TripleDotVertical = ({ color = Colors.contentPrimary }: Props) => ( <Svg width={4} height={16} fill="none"> <Path d="M.688 1.414a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.626 0Zm0 6.563a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.626 0Zm0 6.562a1.312 1.312 0 1 0 2.624 0 1.312 1.312 0 0 0-2.624 0Z" diff --git a/src/icons/User.tsx b/src/icons/User.tsx index 357c6a55076..8b08d4d0e3c 100644 --- a/src/icons/User.tsx +++ b/src/icons/User.tsx @@ -7,7 +7,7 @@ interface Props { size?: number } -export default function User({ color = Colors.textPrimary, size = 24 }: Props) { +export default function User({ color = Colors.contentPrimary, size = 24 }: Props) { return ( <Svg width={size} height={size} viewBox="0 0 24 24" fill="none"> <Path diff --git a/src/icons/Warning.tsx b/src/icons/Warning.tsx index e883e032e49..38f142c46aa 100644 --- a/src/icons/Warning.tsx +++ b/src/icons/Warning.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import Svg, { Path } from 'react-native-svg' import Colors from 'src/styles/colors' -function Warning({ color = Colors.warning, size = 16 }: { color?: Colors; size?: number }) { +function Warning({ color = Colors.warningPrimary, size = 16 }: { color?: Colors; size?: number }) { return ( <Svg width={size} height={size} viewBox="0 0 20 20" fill="none"> <Path diff --git a/src/icons/biometry/Face.tsx b/src/icons/biometry/Face.tsx index 0bfffe8aa60..132464f61e7 100644 --- a/src/icons/biometry/Face.tsx +++ b/src/icons/biometry/Face.tsx @@ -9,17 +9,17 @@ export function Face() { fillRule="evenodd" clipRule="evenodd" d="M12 21.707c5.361 0 9.707-4.346 9.707-9.707 0-5.361-4.346-9.708-9.707-9.708-5.361 0-9.708 4.347-9.708 9.708S6.64 21.707 12 21.707Zm0 .793c5.799 0 10.5-4.701 10.5-10.5S17.799 1.5 12 1.5 1.5 6.201 1.5 12 6.201 22.5 12 22.5Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path fillRule="evenodd" clipRule="evenodd" d="M13.782 17.562a.436.436 0 0 1-.212.579c-1.009.468-2.008.554-2.827.178-.831-.381-1.373-1.19-1.55-2.287l.86-.14c.144.887.55 1.404 1.053 1.635.516.236 1.237.222 2.097-.177a.436.436 0 0 1 .58.212ZM12.594 13.189v-1.783h.793v2.575h-2.18v-.792h1.387Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path d="M17.547 9.425a.792.792 0 1 1-1.585 0 .792.792 0 0 1 1.585 0ZM8.038 9.425a.792.792 0 1 1-1.585 0 .792.792 0 0 1 1.585 0Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> </Svg> ) diff --git a/src/icons/biometry/FaceID.tsx b/src/icons/biometry/FaceID.tsx index e96d62f8d90..57c9ce565e8 100644 --- a/src/icons/biometry/FaceID.tsx +++ b/src/icons/biometry/FaceID.tsx @@ -9,7 +9,7 @@ export function FaceID() { fillRule="evenodd" clipRule="evenodd" d="M1.719 6.586V3.89A2.675 2.675 0 0 1 4.39 1.219h2.695a.61.61 0 0 0 0-1.219H4.39A3.895 3.895 0 0 0 .5 3.89v2.696a.61.61 0 0 0 1.219 0ZM7.086 22.78a.61.61 0 0 1 0 1.219H4.39A3.895 3.895 0 0 1 .5 20.11v-2.696a.61.61 0 1 1 1.219 0v2.695a2.675 2.675 0 0 0 2.672 2.672h2.695ZM24.5 17.414v2.695A3.895 3.895 0 0 1 20.61 24h-2.696a.61.61 0 1 1 0-1.219h2.695a2.675 2.675 0 0 0 2.672-2.672v-2.695a.61.61 0 0 1 1.219 0Zm0-13.523v2.695a.61.61 0 1 1-1.219 0V3.89a2.675 2.675 0 0 0-2.672-2.672h-2.695a.61.61 0 1 1 0-1.219h2.695A3.895 3.895 0 0 1 24.5 3.89Zm-7.795 13.847a.633.633 0 0 0-.858-.93 4.918 4.918 0 0 1-3.347 1.31 4.918 4.918 0 0 1-3.347-1.31.633.633 0 0 0-.858.93 6.18 6.18 0 0 0 4.205 1.645 6.18 6.18 0 0 0 4.205-1.645Zm-2.94-8.691v4.5c0 .892-.725 1.617-1.617 1.617h-.515a.633.633 0 0 1 0-1.266h.515a.352.352 0 0 0 .352-.351v-4.5a.633.633 0 1 1 1.266 0Zm4.36 1.77V9.011a.598.598 0 0 0-1.195 0v1.804a.598.598 0 1 0 1.195 0Zm-11.11 0a.598.598 0 1 0 1.196 0V9.011a.598.598 0 0 0-1.195 0v1.804Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> </Svg> ) diff --git a/src/icons/biometry/Fingerprint.tsx b/src/icons/biometry/Fingerprint.tsx index 21d36d46058..659d1e86205 100644 --- a/src/icons/biometry/Fingerprint.tsx +++ b/src/icons/biometry/Fingerprint.tsx @@ -7,7 +7,7 @@ export function Fingerprint() { <Svg testID="FingerprintBiometryIcon" width={24} height={24} fill="none"> <Path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2a.506.506 0 0 1 .2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67a.49.49 0 0 1-.44.28ZM3.5 9.72a.499.499 0 0 1-.41-.79c.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25a.5.5 0 0 1-.12.7c-.23.16-.54.11-.7-.12a9.388 9.388 0 0 0-3.39-2.94c-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21Zm6.25 12.07a.47.47 0 0 1-.35-.15c-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15Zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12ZM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1a7.297 7.297 0 0 1-2.17-5.22c0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29a11.14 11.14 0 0 1-.73-3.96c0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94-1.7 0-3.08-1.32-3.08-2.94 0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> </Svg> ) diff --git a/src/icons/biometry/Iris.tsx b/src/icons/biometry/Iris.tsx index 9a45dae7629..a453e712f58 100644 --- a/src/icons/biometry/Iris.tsx +++ b/src/icons/biometry/Iris.tsx @@ -9,11 +9,11 @@ export function Iris() { fillRule="evenodd" clipRule="evenodd" d="M24 20.11v-2.696a.61.61 0 1 0-1.219 0v2.695a2.675 2.675 0 0 1-2.672 2.672h-2.695a.61.61 0 0 0 0 1.219h2.695A3.895 3.895 0 0 0 24 20.11ZM7.195 23.39a.61.61 0 0 0-.61-.609H3.892a2.675 2.675 0 0 1-2.672-2.672v-2.695a.61.61 0 1 0-1.219 0v2.695A3.895 3.895 0 0 0 3.89 24h2.696a.61.61 0 0 0 .61-.61ZM1.219 6.586V3.89A2.675 2.675 0 0 1 3.89 1.219h2.695a.61.61 0 0 0 0-1.219H3.89A3.895 3.895 0 0 0 0 3.89v2.696a.61.61 0 0 0 1.219 0ZM24 6.586V3.89A3.895 3.895 0 0 0 20.11 0h-2.696a.61.61 0 1 0 0 1.219h2.695a2.675 2.675 0 0 1 2.672 2.672v2.695a.61.61 0 0 0 1.219 0Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path d="M12 9.25A4.885 4.885 0 0 1 16.41 12 4.88 4.88 0 0 1 12 14.75 4.88 4.88 0 0 1 7.59 12 4.885 4.885 0 0 1 12 9.25Zm0-1A5.913 5.913 0 0 0 6.5 12c.865 2.195 3 3.75 5.5 3.75s4.635-1.555 5.5-3.75A5.913 5.913 0 0 0 12 8.25Zm0 2.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm0-1c-1.24 0-2.25 1.01-2.25 2.25s1.01 2.25 2.25 2.25 2.25-1.01 2.25-2.25S13.24 9.75 12 9.75Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> </Svg> ) diff --git a/src/icons/biometry/TouchID.tsx b/src/icons/biometry/TouchID.tsx index 711c83cc8ef..f471846d1bd 100644 --- a/src/icons/biometry/TouchID.tsx +++ b/src/icons/biometry/TouchID.tsx @@ -7,35 +7,35 @@ export function TouchID() { <Svg testID="TouchIDBiometryIcon" width={24} height={24} fill="none"> <Path d="M14.488.354c-1.68-.42-3.45-.48-5.171-.108a.246.246 0 1 0 .104.482c1.648-.356 3.346-.297 4.962.108 3.863.968 7.078 3.872 8.303 7.666.473 1.467.674 3.03.715 4.667a.246.246 0 0 0 .492-.012c-.04-1.66-.244-3.263-.73-4.778-1.271-3.972-4.632-7.017-8.675-8.025ZM8.066 1.1a.246.246 0 1 0-.131-.476c-1.8.497-4.333 2.213-5.898 4.505l-.002.003C.661 7.203-.2 9.806.04 12.332a17.024 17.024 0 0 0 .252 1.39c.204.969.409 1.942.25 2.93a.246.246 0 0 0 .486.079c.167-1.033-.04-2.041-.247-3.05-.096-.465-.192-.931-.25-1.4-.227-2.387.588-4.876 1.914-6.875C3.951 3.201 6.39 1.562 8.066 1.099Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path d="M11.3 1.65a10.115 10.115 0 0 1 8.264 3.493.246.246 0 0 1-.373.32 9.622 9.622 0 0 0-7.866-3.32c-3.722.18-7.207 2.704-8.49 6.242a.246.246 0 0 1-.463-.168C3.722 4.49 7.382 1.84 11.3 1.65ZM20.315 6.22a.246.246 0 0 0-.409.274c1.152 1.715 1.628 3.581 1.816 5.795a.246.246 0 1 0 .491-.041c-.192-2.263-.683-4.22-1.898-6.029ZM22.048 13.294a.246.246 0 0 1 .262.23c.093 1.487.094 3.168-.07 4.41a.247.247 0 0 1-.49-.065c.159-1.197.16-2.843.068-4.314a.246.246 0 0 1 .23-.261ZM2.463 9.579a.246.246 0 0 0-.479-.116 9.967 9.967 0 0 0-.278 2.289c-.004.794.144 1.569.292 2.344.121.634.242 1.269.28 1.914.05.847-.128 1.696-.436 2.504a.246.246 0 0 0 .46.175c.327-.853.524-1.773.469-2.708-.038-.64-.16-1.272-.28-1.902-.148-.77-.296-1.538-.292-2.325a9.474 9.474 0 0 1 .264-2.175Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path d="M8.93 4.103c.05.126-.01.27-.137.32-2.555 1.026-4.473 3.341-4.865 6.071-.163 1.141.013 2.27.19 3.4.1.637.199 1.273.237 1.91.084 1.383-.073 2.902-.973 4.285a.246.246 0 0 1-.413-.27c.82-1.259.975-2.657.895-3.985-.04-.647-.139-1.29-.237-1.933-.177-1.154-.354-2.306-.187-3.476.418-2.916 2.461-5.372 5.17-6.46.125-.05.269.011.32.138ZM17.58 5.506c-2.015-1.888-4.936-2.547-7.59-1.965a.246.246 0 1 0 .105.482c2.514-.552 5.264.077 7.149 1.842 1.588 1.488 2.51 3.653 2.752 6.014a.246.246 0 0 0 .49-.05c-.25-2.452-1.212-4.737-2.905-6.323ZM20.435 13.003a.246.246 0 0 1 .27.22c.234 2.278.133 4.74-.22 7.12a.246.246 0 1 1-.488-.072c.349-2.348.447-4.767.218-6.998a.246.246 0 0 1 .22-.27Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path d="M11.843 5.008C8.067 5.008 5 8.021 5 11.746c0 .398.035.787.102 1.166a.246.246 0 0 0 .486-.086 6.177 6.177 0 0 1-.095-1.08c0-3.445 2.84-6.245 6.351-6.245a6.39 6.39 0 0 1 4.15 1.517.246.246 0 0 0 .319-.375 6.882 6.882 0 0 0-4.469-1.635ZM16.864 7.561a.246.246 0 0 1 .349.008c1.087 1.134 1.435 2.916 1.666 4.412.26 1.685.299 3.329.299 4.09a.246.246 0 1 1-.493 0c0-.749-.04-2.365-.293-4.015-.214-1.389-.523-3.09-1.535-4.146a.246.246 0 0 1 .007-.349ZM19.115 17.483a.246.246 0 1 0-.491-.039c-.121 1.518-.28 3.034-.6 4.435a.246.246 0 1 0 .48.11c.33-1.438.49-2.984.611-4.506ZM5.498 13.82a.246.246 0 0 1 .29.194c.52 2.646.16 5.05-1.22 7.155a.246.246 0 0 1-.411-.27c1.298-1.981 1.647-4.25 1.147-6.79a.246.246 0 0 1 .194-.29Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path d="M11.843 6.612c-2.451 0-4.856 1.897-5.101 4.282-.108 1.044.043 2.072.194 3.101.132.899.264 1.797.224 2.707-.092 2.082-.702 3.8-1.752 5.216a.246.246 0 1 0 .396.293c1.113-1.501 1.753-3.316 1.848-5.487.04-.906-.092-1.802-.224-2.697-.151-1.024-.303-2.047-.196-3.083.216-2.095 2.372-3.84 4.611-3.84 1.045 0 3.747.566 4.607 3.366.538 1.755.685 4.13.555 6.437-.13 2.307-.537 4.513-1.082 5.928a.246.246 0 0 0 .46.177c.57-1.48.982-3.742 1.114-6.077.132-2.335-.013-4.776-.576-6.61-.954-3.108-3.946-3.713-5.078-3.713Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path d="M8.05 21.17a.246.246 0 0 1 .073.34c-.153.234-.288.48-.422.725s-.269.49-.422.724a.246.246 0 0 1-.413-.269c.153-.234.288-.48.422-.724.135-.245.269-.49.422-.725a.246.246 0 0 1 .34-.072ZM10.161 9.17a.246.246 0 0 0-.274-.41c-.976.653-1.575 1.55-1.575 2.865 0 .783.14 1.423.281 2.08.213.982.358 1.962.332 2.97a9.04 9.04 0 0 1-.732 3.412.246.246 0 1 0 .452.195c.487-1.128.74-2.31.772-3.594.027-1.048-.121-2.067-.342-3.088-.142-.66-.27-1.248-.27-1.975 0-1.127.496-1.88 1.356-2.455ZM11.123 8.304a3.575 3.575 0 0 1 2.933.705c1.447 1.17 1.639 3.306 1.795 5.037l.008.088c.201 2.23-.03 4.397-.494 6.573a.246.246 0 1 1-.482-.103c.458-2.143.68-4.258.485-6.426l-.02-.218v-.001c-.138-1.564-.312-3.523-1.602-4.567a3.083 3.083 0 0 0-2.525-.605.246.246 0 0 1-.098-.483ZM15.017 21.933a.246.246 0 1 0-.478-.121 5.953 5.953 0 0 1-.67 1.6.246.246 0 1 0 .424.252 6.444 6.444 0 0 0 .724-1.73ZM13.812 18.357a.246.246 0 0 1 .216.274c-.233 1.966-.759 3.72-1.602 5.242a.247.247 0 0 1-.43-.239c.806-1.456 1.316-3.146 1.542-5.061a.246.246 0 0 1 .274-.216Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path d="M13.761 11.496c-.17-.913-.954-1.611-1.905-1.611-1.288 0-2.192 1.298-1.874 2.506.54 2.132.628 4.187.263 6.166v.002c-.317 1.776-.925 3.375-1.754 4.73a.246.246 0 1 0 .42.257c.863-1.41 1.492-3.067 1.819-4.9.378-2.056.284-4.183-.27-6.377v-.003c-.24-.903.426-1.889 1.395-1.889.7 0 1.29.515 1.421 1.208.359 2.08.546 4.01.413 5.671a.246.246 0 1 0 .491.04c.138-1.723-.057-3.7-.418-5.797l-.001-.003ZM11.12 22.169c.121.062.169.21.107.332l-.653 1.27a.246.246 0 0 1-.439-.225l.653-1.27a.246.246 0 0 1 .332-.107Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> <Path d="M12.039 11.733a.246.246 0 1 0-.48.113c.831 3.538.717 6.644-.295 9.29a.246.246 0 0 0 .46.176c1.055-2.759 1.163-5.97.315-9.579Z" - fill={Colors.textInverse} + fill={Colors.contentInverse} /> </Svg> ) diff --git a/src/images/Star.tsx b/src/images/Star.tsx index ec16600412c..3116ef49912 100644 --- a/src/images/Star.tsx +++ b/src/images/Star.tsx @@ -12,7 +12,7 @@ const Star = () => ( </G> <Defs> <ClipPath id="a"> - <Path fill={Colors.textInverse} d="M0 0h24v24H0z" /> + <Path fill={Colors.contentInverse} d="M0 0h24v24H0z" /> </ClipPath> </Defs> </Svg> diff --git a/src/invite/InviteModal.tsx b/src/invite/InviteModal.tsx index d8c22e6771c..403a179a8b5 100644 --- a/src/invite/InviteModal.tsx +++ b/src/invite/InviteModal.tsx @@ -65,7 +65,7 @@ const InviteModal = ({ <Button style={{ width: '100%' }} testID="InviteModalShareButton" - icon={<ShareIcon color={colors.textInverse} size={24} />} + icon={<ShareIcon color={colors.contentInverse} size={24} />} iconPositionLeft={false} size={BtnSizes.FULL} text={buttonLabel} @@ -90,7 +90,7 @@ const InviteModal = ({ const styles = StyleSheet.create({ container: { position: 'absolute', - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, paddingHorizontal: Spacing.Thick24, }, contentContainer: { @@ -107,14 +107,14 @@ const styles = StyleSheet.create({ ...typeScale.bodyMedium, textAlign: 'center', marginBottom: Spacing.Large32, - color: colors.textSecondary, + color: colors.contentSecondary, }, helpContainer: { marginBottom: Spacing.Regular16, }, helpText: { ...typeScale.bodyXSmall, - color: colors.textSecondary, + color: colors.contentSecondary, textAlign: 'center', }, helpLink: { diff --git a/src/jumpstart/JumpstartShareLink.tsx b/src/jumpstart/JumpstartShareLink.tsx index cb87c220b58..2da5f5beeb1 100644 --- a/src/jumpstart/JumpstartShareLink.tsx +++ b/src/jumpstart/JumpstartShareLink.tsx @@ -173,7 +173,7 @@ function JumpstartShareLink({ route }: Props) { text={t('jumpstartShareLinkScreen.ctaShare')} onPress={() => nativeShare.execute(JumpstartShareOrigin.MainScreen)} style={styles.button} - icon={<ShareIcon color={Colors.textInverse} />} + icon={<ShareIcon color={Colors.contentInverse} />} iconPositionLeft={false} size={BtnSizes.FULL} /> @@ -181,7 +181,7 @@ function JumpstartShareLink({ route }: Props) { text={t('jumpstartShareLinkScreen.ctaScanQRCode')} onPress={handleShowQRBottomSheet} style={styles.button} - icon={<QRCodeIcon color={Colors.textInverse} />} + icon={<QRCodeIcon color={Colors.contentInverse} />} iconPositionLeft={false} size={BtnSizes.FULL} /> @@ -226,7 +226,7 @@ function JumpstartShareLink({ route }: Props) { text={t('jumpstartShareLinkScreen.ctaShare')} onPress={() => nativeShare.execute(JumpstartShareOrigin.QrScreen)} style={styles.button} - icon={<ShareIcon color={Colors.textInverse} />} + icon={<ShareIcon color={Colors.contentInverse} />} iconPositionLeft={false} size={BtnSizes.FULL} /> diff --git a/src/jumpstart/JumpstartTransactionDetailsScreen.tsx b/src/jumpstart/JumpstartTransactionDetailsScreen.tsx index e4bacfc85da..0bea8b726a5 100644 --- a/src/jumpstart/JumpstartTransactionDetailsScreen.tsx +++ b/src/jumpstart/JumpstartTransactionDetailsScreen.tsx @@ -233,7 +233,9 @@ function JumpstartTransactionDetailsScreen({ route }: Props) { text={isClaimed ? t('claimed') : t('reclaim')} size={BtnSizes.FULL} icon={ - isClaimed ? <Checkmark height={Spacing.Thick24} color={Colors.textInverse} /> : null + isClaimed ? ( + <Checkmark height={Spacing.Thick24} color={Colors.contentInverse} /> + ) : null } iconPositionLeft={false} /> @@ -352,7 +354,7 @@ const styles = StyleSheet.create({ }, tokenFiatValueText: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, amountContainer: { backgroundColor: Colors.backgroundSecondary, @@ -406,7 +408,7 @@ const styles = StyleSheet.create({ height: 40, width: 40, borderRadius: 100, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, }, }) diff --git a/src/keylessBackup/EnvelopeIcon.tsx b/src/keylessBackup/EnvelopeIcon.tsx index eb1473023d5..37380b4b8ea 100644 --- a/src/keylessBackup/EnvelopeIcon.tsx +++ b/src/keylessBackup/EnvelopeIcon.tsx @@ -12,7 +12,7 @@ export default function EnvelopeIcon({ style }: Props) { <Svg width={18} height={15} fill="none" style={style}> <Path d="M12.292 14.978a.93.93 0 0 1-.313-.052.721.721 0 0 1-.27-.177l-2.376-2.375a.79.79 0 0 1-.229-.584.79.79 0 0 1 .23-.583.79.79 0 0 1 .583-.23.79.79 0 0 1 .583.23l1.792 1.792 4.125-4.125a.79.79 0 0 1 .583-.23.79.79 0 0 1 .583.23.79.79 0 0 1 .23.583.79.79 0 0 1-.23.583l-4.708 4.709a.737.737 0 0 1-.27.177.904.904 0 0 1-.313.052ZM2.333 1.998 9 6.166 15.667 2H2.333Zm0 11.667c-.458 0-.85-.163-1.177-.49A1.602 1.602 0 0 1 .666 12v-10c0-.459.164-.851.49-1.178.327-.326.72-.49 1.177-.489h13.334c.458 0 .85.163 1.177.49.327.327.49.719.49 1.177v3.625l-.834.833-.833.833V3.665l-6.23 3.896A.877.877 0 0 1 9 7.686a.847.847 0 0 1-.437-.125l-6.23-3.896V12h4.292l1.667 1.666H2.333Z" - fill={Colors.textPrimary} + fill={Colors.contentPrimary} /> </Svg> ) diff --git a/src/keylessBackup/LinkPhoneNumber.tsx b/src/keylessBackup/LinkPhoneNumber.tsx index c60dfd1bbc2..dd649047d47 100644 --- a/src/keylessBackup/LinkPhoneNumber.tsx +++ b/src/keylessBackup/LinkPhoneNumber.tsx @@ -25,7 +25,7 @@ export default function LinkPhoneNumber({ navigation }: Props) { navigation.setOptions({ headerLeft: () => <BackButton />, headerStyle: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, }, }) }, [navigation]) @@ -77,7 +77,7 @@ export default function LinkPhoneNumber({ navigation }: Props) { const styles = StyleSheet.create({ safeArea: { alignItems: 'center', - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, flexGrow: 1, justifyContent: 'space-between', }, diff --git a/src/keylessBackup/SignInWithEmail.tsx b/src/keylessBackup/SignInWithEmail.tsx index 16198aaab08..9e18c85e8d6 100644 --- a/src/keylessBackup/SignInWithEmail.tsx +++ b/src/keylessBackup/SignInWithEmail.tsx @@ -247,7 +247,7 @@ function SignInWithEmail({ route, navigation }: Props) { text={t('signInWithEmail.google')} size={BtnSizes.FULL} type={BtnTypes.SECONDARY} - icon={<GoogleIcon color={Colors.textPrimary} />} + icon={<GoogleIcon color={Colors.contentPrimary} />} iconMargin={10} showLoading={loading === 'google-oauth2'} disabled={!!loading} @@ -258,7 +258,7 @@ function SignInWithEmail({ route, navigation }: Props) { text={t('signInWithEmail.apple')} size={BtnSizes.FULL} type={BtnTypes.SECONDARY} - icon={<AppleIcon color={Colors.textPrimary} />} + icon={<AppleIcon color={Colors.contentPrimary} />} iconMargin={10} showLoading={loading === 'apple'} disabled={!!loading} diff --git a/src/keylessBackup/SmartphoneIcon.tsx b/src/keylessBackup/SmartphoneIcon.tsx index 9e71153c732..85b974f486b 100644 --- a/src/keylessBackup/SmartphoneIcon.tsx +++ b/src/keylessBackup/SmartphoneIcon.tsx @@ -12,7 +12,7 @@ export default function SvgVectorsmartphone({ style }: Props) { <Svg width={12} height={20} fill="none" style={style}> <Path d="M4.75 16.665h2.5a.4.4 0 0 0 .292-.125.4.4 0 0 0 0-.583.4.4 0 0 0-.292-.125h-2.5a.4.4 0 0 0-.292.125.4.4 0 0 0 0 .583.4.4 0 0 0 .292.125Zm-2.917 2.5c-.458 0-.85-.163-1.177-.49a1.602 1.602 0 0 1-.49-1.176v-15c0-.459.164-.851.49-1.178.327-.326.72-.49 1.177-.489h8.334c.458 0 .85.163 1.177.49.327.327.49.719.49 1.177v15c0 .458-.164.85-.49 1.177-.327.327-.72.49-1.177.49H1.833Zm0-5.833h8.334V4.999H1.833v8.333Zm0 1.667v2.5h8.334v-2.5H1.833Zm0-11.667h8.334v-.833H1.833v.833Z" - fill={Colors.textPrimary} + fill={Colors.contentPrimary} /> </Svg> ) diff --git a/src/navigator/Headers.tsx b/src/navigator/Headers.tsx index c493a92de15..f6a13613c7e 100644 --- a/src/navigator/Headers.tsx +++ b/src/navigator/Headers.tsx @@ -36,7 +36,7 @@ export const styles = StyleSheet.create({ maxWidth: Dimensions.get('window').width * 0.6, }, headerSubTitle: { - color: Colors.textSecondary, + color: Colors.contentSecondary, }, header: { alignItems: 'center', @@ -68,7 +68,7 @@ export const nuxNavigationOptions: NativeStackNavigationOptions = { export const nuxNavigationOptionsOnboarding: NativeStackNavigationOptions = { ...nuxNavigationOptions, headerLeft: ({ canGoBack }) => - canGoBack ? <BackButton color={Colors.navigationTop} /> : <View />, + canGoBack ? <BackButton color={Colors.navigationTopPrimary} /> : <View />, } export const nuxNavigationOptionsNoBackButton: NativeStackNavigationOptions = { @@ -85,7 +85,7 @@ export const emptyHeader: NativeStackNavigationOptions = { headerShadowVisible: false, headerTitleAlign: 'center', headerStyle: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, }, } @@ -237,7 +237,7 @@ export const tabHeader: NativeStackNavigationOptions = { }, headerLeft: () => ( <View style={[styles.topElementsContainer, { marginLeft: Spacing.Regular16 }]}> - <Logo color={Colors.navigationTop} size={22} /> + <Logo color={Colors.navigationTopPrimary} size={22} /> </View> ), } diff --git a/src/navigator/Navigator.tsx b/src/navigator/Navigator.tsx index ac36f1fe08e..0b254771419 100644 --- a/src/navigator/Navigator.tsx +++ b/src/navigator/Navigator.tsx @@ -114,6 +114,7 @@ import ValidateRecipientIntro, { } from 'src/send/ValidateRecipientIntro' import { getFeatureGate } from 'src/statsig' import { StatsigFeatureGates } from 'src/statsig/types' +import styles from 'src/styles/styles' import variables from 'src/styles/variables' import SwapScreen from 'src/swap/SwapScreen' import SwapScreenV2 from 'src/swap/SwapScreenV2' @@ -757,6 +758,8 @@ function RootStackScreen() { // take up the whole screen, it is no longer obvious that they are a bottom // sheet / how to navigate away maxDynamicContentSize: variables.height * 0.9, + backgroundStyle: styles.bottomSheetBackground, + handleIndicatorStyle: styles.bottomSheetHandleIndicator, }} > <RootStack.Screen name={Screens.MainModal} component={ModalStackScreen} /> diff --git a/src/navigator/SettingsMenu.tsx b/src/navigator/SettingsMenu.tsx index 4657bfa8fc7..e7837107bfa 100644 --- a/src/navigator/SettingsMenu.tsx +++ b/src/navigator/SettingsMenu.tsx @@ -111,7 +111,7 @@ function ProfileMenuOption() { <View style={styles.profileContainer}> <ContactCircleSelf size={48} /> {renderContent()} - <ForwardChevron color={Colors.textSecondary} height={12} /> + <ForwardChevron color={Colors.contentSecondary} height={12} /> </View> </Touchable> ) @@ -167,19 +167,19 @@ export default function SettingsMenu({ route }: Props) { return ( <View style={styles.devSettings}> <Touchable onPress={onCopyText(sessionId)} style={styles.devSettingsItem}> - <Text>{`Session ID: ${sessionId}`}</Text> + <Text style={styles.debugInfoText}>{`Session ID: ${sessionId}`}</Text> </Touchable> <Touchable onPress={onCopyText(statsigStableId)} style={styles.devSettingsItem}> - <Text>{`Statsig Stable ID: ${statsigStableId}`}</Text> + <Text style={styles.debugInfoText}>{`Statsig Stable ID: ${statsigStableId}`}</Text> </Touchable> <View style={styles.devSettingsItem}> <TouchableOpacity onPress={showDebugImagesScreen}> - <Text>See App Assets</Text> + <Text style={styles.debugInfoText}>See App Assets</Text> </TouchableOpacity> </View> <View style={styles.devSettingsItem}> <TouchableOpacity onPress={confirmAccountRemoval}> - <Text>App Quick Reset</Text> + <Text style={styles.debugInfoText}>App Quick Reset</Text> </TouchableOpacity> </View> </View> @@ -192,7 +192,7 @@ export default function SettingsMenu({ route }: Props) { <ScrollView> <ProfileMenuOption /> <SettingsItemTextValue - icon={<Wallet size={24} color={Colors.textPrimary} />} + icon={<Wallet size={24} color={Colors.contentPrimary} />} title={t('address')} onPress={() => navigate(Screens.QRNavigator, { @@ -205,7 +205,7 @@ export default function SettingsMenu({ route }: Props) { borderless /> <SettingsItemTextValue - icon={<Envelope color={Colors.textPrimary} />} + icon={<Envelope color={Colors.contentPrimary} />} title={t('invite')} onPress={() => navigate(Screens.Invite)} testID="SettingsMenu/Invite" @@ -224,7 +224,7 @@ export default function SettingsMenu({ route }: Props) { borderless /> <SettingsItemTextValue - icon={<Lock width={24} height={24} color={Colors.textPrimary} />} + icon={<Lock width={24} height={24} color={Colors.contentPrimary} />} title={t('securityPrivacy')} testID="SettingsMenu/Security" onPress={() => navigate(Screens.SecuritySubmenu)} @@ -233,7 +233,7 @@ export default function SettingsMenu({ route }: Props) { /> {walletConnectEnabled && ( <SettingsItemTextValue - icon={<Stack size={24} color={Colors.textPrimary} />} + icon={<Stack size={24} color={Colors.contentPrimary} />} title={t('connectedApplications')} testID="SettingsMenu/ConnectedDapps" value={connectedDapps.toString()} @@ -243,7 +243,7 @@ export default function SettingsMenu({ route }: Props) { /> )} <SettingsItemTextValue - icon={<Help size={24} color={Colors.textPrimary} />} + icon={<Help size={24} color={Colors.contentPrimary} />} title={t('help')} onPress={() => navigate(Screens.Support)} testID="SettingsMenu/Help" @@ -298,7 +298,7 @@ const styles = StyleSheet.create({ }, secondaryProfileLabel: { ...typeScale.bodyMedium, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, appVersionContainer: { flexDirection: 'row', @@ -309,7 +309,7 @@ const styles = StyleSheet.create({ }, appVersionText: { ...typeScale.bodyMedium, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, devSettings: { alignItems: 'flex-start', @@ -323,4 +323,7 @@ const styles = StyleSheet.create({ marginVertical: Spacing.Smallest8, marginHorizontal: Spacing.Regular16, }, + debugInfoText: { + ...typeScale.bodySmall, + }, }) diff --git a/src/navigator/TabNavigator.tsx b/src/navigator/TabNavigator.tsx index e0f867439f0..dd10969afc2 100644 --- a/src/navigator/TabNavigator.tsx +++ b/src/navigator/TabNavigator.tsx @@ -33,13 +33,14 @@ export default function TabNavigator({ route }: Props) { headerShown: true, headerShadowVisible: false, headerTitleAllowFontScaling: false, - tabBarActiveTintColor: Colors.navigationBottom, + tabBarActiveTintColor: Colors.navigationBottomPrimary, tabBarInactiveTintColor: Colors.navigationBottomSecondary, tabBarLabelStyle: styles.label, tabBarItemStyle: styles.tabBarItem, tabBarAllowFontScaling: false, tabBarStyle: { height: variables.height * 0.1, + backgroundColor: Colors.backgroundPrimary, }, ...(tabHeader as NativeStackHeaderProps), }} diff --git a/src/nfts/NftsInfoCarousel.tsx b/src/nfts/NftsInfoCarousel.tsx index ed3c612beea..b8fb1167644 100644 --- a/src/nfts/NftsInfoCarousel.tsx +++ b/src/nfts/NftsInfoCarousel.tsx @@ -230,7 +230,7 @@ export default function NftsInfoCarousel({ route }: Props) { <Touchable onPress={pressExplorerLink} testID="ViewOnExplorer"> <View style={styles.explorerLinkContainer}> <Text style={styles.explorerLink}>{networkIdToExplorerString[networkId]}</Text> - <OpenLinkIcon color={colors.success} /> + <OpenLinkIcon color={colors.successPrimary} /> </View> </Touchable> </View> @@ -257,7 +257,7 @@ const styles = StyleSheet.create({ }, attributeTitle: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, attributesContainer: { paddingBottom: Spacing.Thick24, @@ -276,11 +276,11 @@ const styles = StyleSheet.create({ errorImageText: { marginTop: Spacing.Regular16, ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, }, explorerLink: { ...typeScale.labelSmall, - color: colors.success, + color: colors.successPrimary, paddingRight: Spacing.Smallest8, }, explorerLinkContainer: { diff --git a/src/nfts/NftsLoadError.tsx b/src/nfts/NftsLoadError.tsx index 6fc405f4e6c..9e65bd80dea 100644 --- a/src/nfts/NftsLoadError.tsx +++ b/src/nfts/NftsLoadError.tsx @@ -101,7 +101,7 @@ const styles = StyleSheet.create({ subTitle: { ...typeScale.bodyMedium, textAlign: 'center', - color: colors.textSecondary, + color: colors.contentSecondary, }, title: { ...typeScale.titleSmall, diff --git a/src/onboarding/ChooseYourAdventure.tsx b/src/onboarding/ChooseYourAdventure.tsx index e6172618201..f458a9bcffb 100644 --- a/src/onboarding/ChooseYourAdventure.tsx +++ b/src/onboarding/ChooseYourAdventure.tsx @@ -80,7 +80,7 @@ function ChooseYourAdventure() { goToNextScreen: () => { navigateHomeAndThenToScreen(Screens.EarnInfoScreen) }, - icon: <EarnCoins color={colors.textPrimary} />, + icon: <EarnCoins color={colors.contentPrimary} />, name: AdventureCardName.Earn, }, { @@ -96,7 +96,7 @@ function ChooseYourAdventure() { goToNextScreen: () => { navigateHomeAndThenToScreen(Screens.PointsIntro) }, - icon: <LogoHeart size={Spacing.Thick24} color={colors.textPrimary} />, + icon: <LogoHeart size={Spacing.Thick24} color={colors.contentPrimary} />, name: AdventureCardName.LearnPoints, }, ] @@ -196,7 +196,7 @@ const styles = StyleSheet.create({ alignItems: 'center', }, skip: { - color: colors.textPrimary, + color: colors.contentPrimary, }, cardText: { ...typeScale.bodySmall, diff --git a/src/onboarding/registration/ImportSelect.tsx b/src/onboarding/registration/ImportSelect.tsx index 9c1f2d10f62..4f20599bbe4 100644 --- a/src/onboarding/registration/ImportSelect.tsx +++ b/src/onboarding/registration/ImportSelect.tsx @@ -89,7 +89,7 @@ export default function ImportSelect({ navigation }: Props) { <ActionCard title={t('importSelect.emailAndPhone.title')} description={t('importSelect.emailAndPhone.description')} - icon={<CloudCheck color={colors.success} />} + icon={<CloudCheck color={colors.successPrimary} />} onPress={() => navigate(Screens.SignInWithEmail, { keylessBackupFlow: KeylessBackupFlow.Restore, @@ -101,7 +101,7 @@ export default function ImportSelect({ navigation }: Props) { <ActionCard title={t('importSelect.recoveryPhrase.title')} description={t('importSelect.recoveryPhrase.description')} - icon={<Lock color={colors.success} />} + icon={<Lock color={colors.successPrimary} />} onPress={() => navigate(Screens.ImportWallet, { clean: true })} testID="ImportSelect/Mnemonic" /> @@ -129,11 +129,11 @@ const styles = StyleSheet.create({ }, cardTitle: { ...typeScale.labelMedium, - color: colors.success, + color: colors.successPrimary, flex: 1, }, safeArea: { - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, flex: 1, }, screenDescription: { diff --git a/src/onboarding/registration/RegulatoryTerms.tsx b/src/onboarding/registration/RegulatoryTerms.tsx index 2666b85a229..81174e2234c 100644 --- a/src/onboarding/registration/RegulatoryTerms.tsx +++ b/src/onboarding/registration/RegulatoryTerms.tsx @@ -85,7 +85,7 @@ export class RegulatoryTerms extends React.Component<Props> { contentContainerStyle={styles.scrollContent} testID="scrollView" > - <Logo color={Colors.textPrimary} size={32} /> + <Logo color={Colors.contentPrimary} size={32} /> <Text style={styles.title}>{t('terms.title')}</Text> <Text style={styles.disclaimer}> <Trans i18nKey={'terms.info'}> diff --git a/src/onboarding/registration/SelectCountry.tsx b/src/onboarding/registration/SelectCountry.tsx index 63c181498ae..01e91ce6672 100644 --- a/src/onboarding/registration/SelectCountry.tsx +++ b/src/onboarding/registration/SelectCountry.tsx @@ -83,6 +83,6 @@ const styles = StyleSheet.create({ searchInputContainer: { paddingHorizontal: 16, paddingVertical: 16, - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, }, }) diff --git a/src/onboarding/registration/SelectCountryItem.tsx b/src/onboarding/registration/SelectCountryItem.tsx index 1c548ff45c5..e3af988f1e1 100644 --- a/src/onboarding/registration/SelectCountryItem.tsx +++ b/src/onboarding/registration/SelectCountryItem.tsx @@ -54,6 +54,6 @@ const styles = StyleSheet.create({ code: { ...typeScale.bodyMedium, marginRight: 16, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/onboarding/success/OnboardingSuccessScreen.tsx b/src/onboarding/success/OnboardingSuccessScreen.tsx index 8333fad78b6..75bbdb44964 100644 --- a/src/onboarding/success/OnboardingSuccessScreen.tsx +++ b/src/onboarding/success/OnboardingSuccessScreen.tsx @@ -22,7 +22,7 @@ function OnboardingSuccessScreen() { return ( <View style={styles.container}> <Image source={background} style={styles.backgroundImage} /> - <Logo color={colors.textInverse} size={70} /> + <Logo color={colors.contentInverse} size={70} /> <Text style={styles.text}>{t('success.message')}</Text> </View> ) @@ -46,7 +46,7 @@ const styles = StyleSheet.create({ ...typeScale.titleSmall, fontSize: 30, lineHeight: 36, - color: colors.textInverse, + color: colors.contentInverse, marginTop: Spacing.Regular16, marginBottom: 30, shadowOffset: { width: 0, height: 1 }, diff --git a/src/pincode/Pincode.tsx b/src/pincode/Pincode.tsx index 42217f0ad30..2fa34b5d260 100644 --- a/src/pincode/Pincode.tsx +++ b/src/pincode/Pincode.tsx @@ -81,7 +81,7 @@ const styles = StyleSheet.create({ }, error: { ...typeScale.labelMedium, - color: colors.error, + color: colors.errorPrimary, textAlign: 'center', marginBottom: Spacing.Thick24, }, diff --git a/src/pincode/PincodeDisplay.tsx b/src/pincode/PincodeDisplay.tsx index 2d822e73b6e..ef5ed4ba26f 100644 --- a/src/pincode/PincodeDisplay.tsx +++ b/src/pincode/PincodeDisplay.tsx @@ -84,9 +84,9 @@ const styles = StyleSheet.create({ height: DOT_SIZE, borderRadius: DOT_SIZE / 2, borderWidth: 1, - borderColor: colors.textPrimary, + borderColor: colors.contentPrimary, }, dotFilled: { - backgroundColor: colors.textPrimary, + backgroundColor: colors.contentPrimary, }, }) diff --git a/src/pincode/PincodeLock.tsx b/src/pincode/PincodeLock.tsx index 19dbfe78baa..49ce12f72d1 100644 --- a/src/pincode/PincodeLock.tsx +++ b/src/pincode/PincodeLock.tsx @@ -96,7 +96,7 @@ const styles = StyleSheet.create({ container: { paddingTop: 20, flex: 1, - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, }, loadingContainer: { flex: 1, diff --git a/src/pincode/PincodeSet.tsx b/src/pincode/PincodeSet.tsx index a8ad4102051..1e06eb3f791 100644 --- a/src/pincode/PincodeSet.tsx +++ b/src/pincode/PincodeSet.tsx @@ -268,7 +268,7 @@ const styles = StyleSheet.create({ }, changePinContainer: { flex: 1, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, justifyContent: 'space-between', }, }) diff --git a/src/points/ActivityCard.tsx b/src/points/ActivityCard.tsx index 4ef7b0dc555..a7ff76e65b1 100644 --- a/src/points/ActivityCard.tsx +++ b/src/points/ActivityCard.tsx @@ -95,7 +95,7 @@ const styles = StyleSheet.create({ }, previousPointsAmount: { ...typeScale.labelXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, textDecorationLine: 'line-through', }, }) diff --git a/src/points/ActivityCardSection.tsx b/src/points/ActivityCardSection.tsx index 3cf94b89631..808ba03f168 100644 --- a/src/points/ActivityCardSection.tsx +++ b/src/points/ActivityCardSection.tsx @@ -54,7 +54,7 @@ export default function ActivityCardSection({ pointsActivities, onCardPress }: P return { ...activity, title: t('points.activityCards.createLiveLink.title'), - icon: <MagicWand color={Colors.textPrimary} />, + icon: <MagicWand color={Colors.contentPrimary} />, onPress: () => onCardPress({ ...activity, @@ -74,7 +74,7 @@ export default function ActivityCardSection({ pointsActivities, onCardPress }: P return { ...activity, title: t('points.activityCards.depositEarn.title'), - icon: <EarnCoins color={Colors.textPrimary} />, + icon: <EarnCoins color={Colors.contentPrimary} />, onPress: () => onCardPress({ ...activity, @@ -141,7 +141,7 @@ const styles = StyleSheet.create({ }, body: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginTop: Spacing.Tiny4, }, }) diff --git a/src/points/PointsDiscoverCard.tsx b/src/points/PointsDiscoverCard.tsx index a4594a47d95..dff8a98dcb0 100644 --- a/src/points/PointsDiscoverCard.tsx +++ b/src/points/PointsDiscoverCard.tsx @@ -58,7 +58,7 @@ export default function PointsDiscoverCard() { <Text style={styles.title}>{t('points.discoverCard.title')}</Text> <Text style={styles.description}>{t('points.discoverCard.description')}</Text> <LinearGradient - colors={[Colors.gradientBorderLeft, Colors.gradientBorderRight]} + colors={[Colors.brandGradientLeft, Colors.brandGradientRight]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradient} @@ -98,7 +98,7 @@ const styles = StyleSheet.create({ }, description: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, balance: { ...typeScale.labelSemiBoldSmall, @@ -114,7 +114,7 @@ const styles = StyleSheet.create({ borderRadius: 50, flex: 1, margin: 1, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, justifyContent: 'center', paddingHorizontal: Spacing.Small12, paddingVertical: 6, diff --git a/src/points/PointsHistoryBottomSheet.tsx b/src/points/PointsHistoryBottomSheet.tsx index e10bcd3d1be..d0e1078a879 100644 --- a/src/points/PointsHistoryBottomSheet.tsx +++ b/src/points/PointsHistoryBottomSheet.tsx @@ -122,7 +122,7 @@ function PointsHistoryBottomSheet({ forwardedRef }: Props) { pointsHistoryStatus === 'errorFirstPage' ? ( <View testID={'PointsHistoryBottomSheet/Error'} style={styles.emptyContainer}> <View style={styles.messageContainer}> - <Attention size={48} color={Colors.textPrimary} /> + <Attention size={48} color={Colors.contentPrimary} /> <Text style={styles.messageTitle}>{t('points.history.error.title')}</Text> <Text style={styles.messageSubtitle}>{t('points.history.error.subtitle')}</Text> </View> @@ -188,7 +188,7 @@ function PointsHistoryBottomSheet({ forwardedRef }: Props) { ctaLabel={t('points.history.pageError.refresh')} onPressCta={() => onPressTryAgain(true)} style={styles.errorNotification} - customIcon={<AttentionIcon color={colors.error} size={20} />} + customIcon={<AttentionIcon color={colors.errorPrimary} size={20} />} testID={'PointsHistoryBottomSheet/ErrorBanner'} /> </BottomSheetBase> @@ -249,11 +249,11 @@ const styles = StyleSheet.create({ }, cardSubtitle: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, cardPointsAmount: { ...typeScale.labelMedium, - color: colors.success, + color: colors.successPrimary, }, cardPointsAmountContainer: { flexDirection: 'row', diff --git a/src/points/PointsHome.tsx b/src/points/PointsHome.tsx index b7c8efbb8de..77ee16d4906 100644 --- a/src/points/PointsHome.tsx +++ b/src/points/PointsHome.tsx @@ -124,7 +124,7 @@ export default function PointsHome({ route, navigation }: Props) { {pointsConfigStatus === 'error' && ( <View style={styles.loadingStatusContainer}> - <AttentionIcon size={48} color={Colors.textPrimary} /> + <AttentionIcon size={48} color={Colors.contentPrimary} /> <Text style={styles.loadingStatusTitle}>{t('points.error.title')}</Text> <Text style={styles.loadingStatusBodyText}>{t('points.error.description')}</Text> <Button @@ -292,11 +292,11 @@ const styles = StyleSheet.create({ }, bottomSheetPointAmount: { ...typeScale.labelSemiBoldXSmall, - color: Colors.success, + color: Colors.successPrimary, }, bottomSheetPreviousPointsAmount: { ...typeScale.labelSemiBoldXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, textDecorationLine: 'line-through', }, bottomSheetTitle: { @@ -305,7 +305,7 @@ const styles = StyleSheet.create({ }, bottomSheetBody: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginBottom: Spacing.XLarge48, }, balanceRow: { diff --git a/src/points/cardDefinitions.tsx b/src/points/cardDefinitions.tsx index 002aa526399..5eee2a4a2ee 100644 --- a/src/points/cardDefinitions.tsx +++ b/src/points/cardDefinitions.tsx @@ -65,7 +65,7 @@ export function useGetHistoryDefinition(): ( return { icon: ( <CircledIcon backgroundColor={colors.successSecondary} radius={ICON_SIZE}> - <Celebration color={colors.success} /> + <Celebration color={colors.successPrimary} /> </CircledIcon> ), title: t('points.history.cards.createWallet.title'), @@ -83,7 +83,7 @@ export function useGetHistoryDefinition(): ( return { icon: ( <CircledIcon backgroundColor={colors.successSecondary} radius={ICON_SIZE}> - <SwapArrows color={colors.success} /> + <SwapArrows color={colors.successPrimary} /> </CircledIcon> ), title: t('points.history.cards.swap.title'), @@ -121,7 +121,7 @@ export function useGetHistoryDefinition(): ( icon: ( <IconWithNetworkBadge networkId={token.networkId}> <CircledIcon backgroundColor={colors.successSecondary} radius={ICON_SIZE}> - <EarnCoins color={colors.success} /> + <EarnCoins color={colors.successPrimary} /> </CircledIcon> </IconWithNetworkBadge> ), diff --git a/src/positions/HooksPreviewModeBanner.tsx b/src/positions/HooksPreviewModeBanner.tsx index b974f15e38d..d0159dfab47 100644 --- a/src/positions/HooksPreviewModeBanner.tsx +++ b/src/positions/HooksPreviewModeBanner.tsx @@ -18,7 +18,7 @@ const STATUS_COLORS = { idle: colors.inactive, loading: colors.inactive, success: colors.accent, - error: colors.error, + error: colors.errorPrimary, } export default function HooksPreviewModeBanner() { @@ -58,11 +58,11 @@ const styles = StyleSheet.create({ top: -10, left: 0, right: 0, - backgroundColor: colors.warning, + backgroundColor: colors.warningPrimary, }, text: { ...typeScale.labelXSmall, - color: colors.textInverse, + color: colors.contentInverse, textAlign: 'center', paddingHorizontal: 10, }, diff --git a/src/priceHistory/PriceHistoryChart.tsx b/src/priceHistory/PriceHistoryChart.tsx index b4520cdd080..506e8bf798b 100644 --- a/src/priceHistory/PriceHistoryChart.tsx +++ b/src/priceHistory/PriceHistoryChart.tsx @@ -81,7 +81,7 @@ function ChartAwareSvgText({ /* // @ts-ignore */ onLayout={onLayout} - fill={colors.textSecondary} + fill={colors.contentSecondary} fontSize="14" fontFamily="Inter-Regular" x={adjustedX} @@ -211,7 +211,7 @@ export default function PriceHistoryChart({ containerStyle, testID, chartPadding, - color = colors.textPrimary, + color = colors.contentPrimary, step = CHART_STEP_IN_HOURS, }: PriceHistoryChartProps) { const dispatch = useDispatch() @@ -320,7 +320,7 @@ const styles = StyleSheet.create({ justifyContent: 'center', }, timeframe: { - color: colors.textSecondary, + color: colors.contentSecondary, fontSize: 16, flexGrow: 1, }, diff --git a/src/qrcode/NotAuthorizedView.tsx b/src/qrcode/NotAuthorizedView.tsx index 105174c662b..dcfd0d642d4 100644 --- a/src/qrcode/NotAuthorizedView.tsx +++ b/src/qrcode/NotAuthorizedView.tsx @@ -36,11 +36,11 @@ const styles = StyleSheet.create({ title: { ...typeScale.titleSmall, marginBottom: 8, - color: colors.textInverse, + color: colors.contentInverse, }, description: { ...typeScale.bodyMedium, - color: colors.textInverse, + color: colors.contentInverse, textAlign: 'center', marginBottom: 16, }, diff --git a/src/qrcode/QRCode.tsx b/src/qrcode/QRCode.tsx index 87a8c99f38f..4a6776e758d 100644 --- a/src/qrcode/QRCode.tsx +++ b/src/qrcode/QRCode.tsx @@ -99,7 +99,7 @@ export default function QRCodeDisplay(props: Props) { <Button text={t('fiatExchangeFlow.exchange.copyAddress')} onPress={onPressCopy} - icon={<CopyIcon color={colors.textInverse} />} + icon={<CopyIcon color={colors.contentInverse} />} iconMargin={12} iconPositionLeft={false} testID="copyButton" @@ -157,7 +157,7 @@ const styles = StyleSheet.create({ flex: 1, flexDirection: 'column', alignItems: 'center', - backgroundColor: colors.background, + backgroundColor: colors.backgroundPrimary, }, link: { ...typeScale.labelSemiBoldMedium, @@ -176,14 +176,14 @@ const styles = StyleSheet.create({ }, address: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, marginHorizontal: variables.width / 5, marginBottom: 8, textAlign: 'center', }, exchangeText: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, textAlign: 'center', }, }) diff --git a/src/qrcode/QRScanner.tsx b/src/qrcode/QRScanner.tsx index 5c223ce0787..4be1a7484e1 100644 --- a/src/qrcode/QRScanner.tsx +++ b/src/qrcode/QRScanner.tsx @@ -29,7 +29,7 @@ const SeeThroughOverlay = () => { <Svg height={height} width={width} viewBox={`0 0 ${width} ${height}`}> <Defs> <Mask id="mask" x="0" y="0" height="100%" width="100%"> - <Rect height="100%" width="100%" fill={colors.background} /> + <Rect height="100%" width="100%" fill={colors.backgroundPrimary} /> <Rect x={margin} y={(height - centerBoxSize) / 2} @@ -152,7 +152,7 @@ const styles = StyleSheet.create({ bottom: 32, ...typeScale.labelSemiBoldSmall, lineHeight: undefined, - color: colors.textInverse, + color: colors.contentInverse, textAlign: 'center', paddingHorizontal: 30, }, @@ -163,7 +163,7 @@ const styles = StyleSheet.create({ paddingVertical: 0, marginTop: 8, alignItems: 'flex-start', - borderColor: colors.textSecondary, + borderColor: colors.contentSecondary, borderRadius: 4, borderWidth: 1.5, height: 80, @@ -180,6 +180,6 @@ const styles = StyleSheet.create({ flexWrap: 'wrap', }, cancelButton: { - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/qrcode/QRTabBar.tsx b/src/qrcode/QRTabBar.tsx index 3ce1783a164..203b944a566 100644 --- a/src/qrcode/QRTabBar.tsx +++ b/src/qrcode/QRTabBar.tsx @@ -41,7 +41,7 @@ export default function QRTabBar({ [state, descriptors] ) - const color = state.index === 0 ? colors.backgroundInverse : colors.background + const color = state.index === 0 ? colors.backgroundInverse : colors.backgroundPrimary const shareOpacity = interpolate(state.index, [0, 0.1], [1, 0], Extrapolation.CLAMP) const onPressClose = () => { @@ -87,7 +87,7 @@ export default function QRTabBar({ testID="HeaderTitle" style={{ ...styles.headerTitle, - color: state.index === 0 ? colors.textPrimary : colors.textInverse, + color: state.index === 0 ? colors.contentPrimary : colors.contentInverse, }} numberOfLines={1} allowFontScaling={false} @@ -100,7 +100,7 @@ export default function QRTabBar({ style={[styles.rightContainer, { opacity: shareOpacity }]} pointerEvents={state.index > 0 ? 'none' : undefined} > - <TopBarIconButton icon={<Share color={colors.textPrimary} />} onPress={onPressShare} /> + <TopBarIconButton icon={<Share color={colors.contentPrimary} />} onPress={onPressShare} /> </Animated.View> </SafeAreaView> ) diff --git a/src/qrcode/StyledQRGen.tsx b/src/qrcode/StyledQRGen.tsx index 47d682020cf..3e093fc2be8 100644 --- a/src/qrcode/StyledQRGen.tsx +++ b/src/qrcode/StyledQRGen.tsx @@ -1,6 +1,7 @@ -import QRCode from 'react-native-qrcode-svg' import React from 'react' +import QRCode from 'react-native-qrcode-svg' import { SVG } from 'src/send/actions' +import Colors from 'src/styles/colors' function StyledQRCode({ value, @@ -11,7 +12,15 @@ function StyledQRCode({ size: number svgRef: React.MutableRefObject<SVG> }) { - return <QRCode value={value} size={size} getRef={(ref) => (svgRef.current = ref)} /> + return ( + <QRCode + value={value} + size={size} + getRef={(ref) => (svgRef.current = ref)} + backgroundColor="transparent" + color={Colors.contentPrimary} + /> + ) } export default React.memo(StyledQRCode) diff --git a/src/recipients/RecipientItemV2.tsx b/src/recipients/RecipientItemV2.tsx index f50111e09f1..d7fa4428563 100644 --- a/src/recipients/RecipientItemV2.tsx +++ b/src/recipients/RecipientItemV2.tsx @@ -58,13 +58,13 @@ function RecipientItem({ recipient, onSelectRecipient, loading, selected }: Prop style={styles.avatar} recipient={recipient} backgroundColor={Colors.backgroundSecondary} - foregroundColor={Colors.textPrimary} + foregroundColor={Colors.contentPrimary} borderColor={Colors.border} DefaultIcon={() => renderDefaultIcon(recipient)} // no need to honor color props here since the color we need match the defaults /> {!!showAppIcon && ( <Logo - color={Colors.textInverse} + color={Colors.contentInverse} style={styles.appIcon} size={ICON_SIZE} testID="RecipientItem/AppIcon" @@ -93,9 +93,9 @@ function RecipientItem({ recipient, onSelectRecipient, loading, selected }: Prop function renderDefaultIcon(recipient: Recipient) { if (recipientHasNumber(recipient)) { - return <PhoneIcon color={Colors.textPrimary} size={24} testID="RecipientItem/PhoneIcon" /> + return <PhoneIcon color={Colors.contentPrimary} size={24} testID="RecipientItem/PhoneIcon" /> } else { - return <WalletIcon color={Colors.textPrimary} size={24} testID="RecipientItem/WalletIcon" /> + return <WalletIcon color={Colors.contentPrimary} size={24} testID="RecipientItem/WalletIcon" /> } } @@ -118,7 +118,7 @@ const styles = StyleSheet.create({ name: { ...typeScale.labelMedium }, phone: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, rightIconContainer: { justifyContent: 'center', diff --git a/src/recipients/RecipientPickerV2.tsx b/src/recipients/RecipientPickerV2.tsx index 6e048d15f7f..1056cbfe19c 100644 --- a/src/recipients/RecipientPickerV2.tsx +++ b/src/recipients/RecipientPickerV2.tsx @@ -54,7 +54,7 @@ const styles = StyleSheet.create({ ...typeScale.labelSmall, marginBottom: Spacing.Smallest8, marginHorizontal: Spacing.Regular16, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/send/EnterAmount.tsx b/src/send/EnterAmount.tsx index bc4e1021915..5b4db55dbf0 100644 --- a/src/send/EnterAmount.tsx +++ b/src/send/EnterAmount.tsx @@ -234,7 +234,7 @@ export default function EnterAmount({ <View style={styles.feeContainer} testID="SendEnterAmount/Fee"> <LabelWithInfo label={t('sendEnterAmountScreen.networkFeeV1_97')} - labelStyle={{ color: Colors.textSecondary }} + labelStyle={{ color: Colors.contentSecondary }} testID="SendEnterAmount/FeeLabel" style={styles.feeLabelContainer} /> @@ -377,7 +377,7 @@ const styles = StyleSheet.create({ }, feeValue: { ...typeScale.bodyMedium, - color: Colors.textSecondary, + color: Colors.contentSecondary, flexWrap: 'wrap', textAlign: 'right', }, diff --git a/src/send/EnterAmountOptions.tsx b/src/send/EnterAmountOptions.tsx index 4434f06efe5..aab5e06f426 100644 --- a/src/send/EnterAmountOptions.tsx +++ b/src/send/EnterAmountOptions.tsx @@ -111,7 +111,10 @@ export default function EnterAmountOptions({ <Text style={[ styles.chipText, - { color: selectedAmount === amount ? Colors.textInverse : Colors.textPrimary }, + { + color: + selectedAmount === amount ? Colors.contentInverse : Colors.contentPrimary, + }, ]} > {label} @@ -149,7 +152,7 @@ const styles = StyleSheet.create({ chip: { borderWidth: 1, borderRadius: 100, - borderColor: Colors.textPrimary, + borderColor: Colors.contentPrimary, paddingVertical: Spacing.Smallest8, paddingHorizontal: Spacing.Regular16, }, diff --git a/src/send/PasteAddressButton.tsx b/src/send/PasteAddressButton.tsx index 70622994fcd..b60cc5bd8a3 100644 --- a/src/send/PasteAddressButton.tsx +++ b/src/send/PasteAddressButton.tsx @@ -70,7 +70,7 @@ const styles = StyleSheet.create({ }, address: { ...typeScale.bodyXSmall, - color: colors.textSecondary, + color: colors.contentSecondary, flexWrap: 'wrap', flexShrink: 1, maxWidth: '100%', diff --git a/src/send/SelectRecipientButtons.tsx b/src/send/SelectRecipientButtons.tsx index 7269820e1c0..ca520cd42b7 100644 --- a/src/send/SelectRecipientButtons.tsx +++ b/src/send/SelectRecipientButtons.tsx @@ -166,7 +166,7 @@ export default function SelectRecipientButtons({ title={t('sendSelectRecipient.jumpstart.title')} subtitle={t('sendSelectRecipient.jumpstart.subtitle')} onPress={onPressJumpstart} - icon={<MagicWand color={Colors.textPrimary} />} + icon={<MagicWand color={Colors.contentPrimary} />} gradientBackground /> )} diff --git a/src/send/SendConfirmation.tsx b/src/send/SendConfirmation.tsx index c49310fe85b..6447ee98e42 100644 --- a/src/send/SendConfirmation.tsx +++ b/src/send/SendConfirmation.tsx @@ -263,7 +263,7 @@ const styles = StyleSheet.create({ }, headerText: { ...typeScale.labelMedium, - color: colors.textSecondary, + color: colors.contentSecondary, }, displayName: { ...typeScale.labelMedium, @@ -273,7 +273,7 @@ const styles = StyleSheet.create({ }, address: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, paddingRight: 4, }, amount: { @@ -282,7 +282,7 @@ const styles = StyleSheet.create({ }, amountSubscript: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, paddingBottom: 16, }, subHeading: { @@ -290,7 +290,7 @@ const styles = StyleSheet.create({ }, subHeadingText: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/send/SendSelectRecipient.tsx b/src/send/SendSelectRecipient.tsx index c7e1bfb4c17..051f7e25b63 100644 --- a/src/send/SendSelectRecipient.tsx +++ b/src/send/SendSelectRecipient.tsx @@ -62,7 +62,7 @@ function GetStartedSection() { <CircledIcon radius={Math.min(24 * getFontScaleSync(), 50)} style={getStartedStyles.optionNum} - backgroundColor={colors.background} + backgroundColor={colors.backgroundPrimary} > <Text adjustsFontSizeToFit={true} style={getStartedStyles.optionNumText}> {optionNum} @@ -113,7 +113,7 @@ const getStartedStyles = StyleSheet.create({ }, subtitle: { ...typeScale.labelXXSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, title: { ...typeScale.labelMedium, @@ -138,7 +138,7 @@ const getStartedStyles = StyleSheet.create({ }, optionSubtitle: { ...typeScale.bodyXSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) @@ -433,7 +433,7 @@ const styles = StyleSheet.create({ }, searchResultsHeader: { ...typeScale.labelXSmall, - color: colors.textSecondary, + color: colors.contentSecondary, paddingHorizontal: Spacing.Regular16, paddingVertical: Spacing.Smallest8, }, @@ -444,12 +444,12 @@ const styles = StyleSheet.create({ }, noResultsTitle: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, textAlign: 'center', }, noResultsSubtitle: { ...typeScale.labelXSmall, - color: colors.textSecondary, + color: colors.contentSecondary, justifyContent: 'center', padding: Spacing.Regular16, textAlign: 'center', diff --git a/src/send/SendSelectRecipientSearchInput.tsx b/src/send/SendSelectRecipientSearchInput.tsx index 1afe66eff69..12644c90165 100644 --- a/src/send/SendSelectRecipientSearchInput.tsx +++ b/src/send/SendSelectRecipientSearchInput.tsx @@ -60,6 +60,6 @@ const styles = StyleSheet.create({ }, label: { ...typeScale.labelSemiBoldSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/send/ValidateRecipientAccount.tsx b/src/send/ValidateRecipientAccount.tsx index 73246fc7b90..cc429da6459 100644 --- a/src/send/ValidateRecipientAccount.tsx +++ b/src/send/ValidateRecipientAccount.tsx @@ -350,7 +350,7 @@ const styles = StyleSheet.create({ modalBody2: { ...typeScale.bodySmall, textAlign: 'center', - color: colors.textSecondary, + color: colors.contentSecondary, paddingVertical: 16, paddingTop: 16, }, @@ -365,7 +365,7 @@ const styles = StyleSheet.create({ }, menuText: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, paddingHorizontal: 8, }, addressContainer: { diff --git a/src/send/__snapshots__/ValidateRecipientAccount.test.tsx.snap b/src/send/__snapshots__/ValidateRecipientAccount.test.tsx.snap index 0ccdc6969b9..bc8a37313cd 100644 --- a/src/send/__snapshots__/ValidateRecipientAccount.test.tsx.snap +++ b/src/send/__snapshots__/ValidateRecipientAccount.test.tsx.snap @@ -97,6 +97,7 @@ exports[`ValidateRecipientAccount renders correctly when full validation require onChangeText={[Function]} onFocus={[Function]} placeholder="0xf1b1d5a6e7728g309c4a025k122d71ad75a61976" + selectionColor="#757575" shouldShowClipboard={[Function]} style={ [ @@ -414,6 +415,7 @@ exports[`ValidateRecipientAccount renders correctly when partial validation requ onChangeText={[Function]} onFocus={[Function]} placeholder="a" + selectionColor="#757575" style={ [ { @@ -474,6 +476,7 @@ exports[`ValidateRecipientAccount renders correctly when partial validation requ onChangeText={[Function]} onFocus={[Function]} placeholder="0" + selectionColor="#757575" style={ [ { @@ -534,6 +537,7 @@ exports[`ValidateRecipientAccount renders correctly when partial validation requ onChangeText={[Function]} onFocus={[Function]} placeholder="F" + selectionColor="#757575" style={ [ { @@ -594,6 +598,7 @@ exports[`ValidateRecipientAccount renders correctly when partial validation requ onChangeText={[Function]} onFocus={[Function]} placeholder="4" + selectionColor="#757575" style={ [ { diff --git a/src/shared/DisconnectBanner.tsx b/src/shared/DisconnectBanner.tsx index f29bef57350..fbac14dc8af 100644 --- a/src/shared/DisconnectBanner.tsx +++ b/src/shared/DisconnectBanner.tsx @@ -69,10 +69,10 @@ const styles = StyleSheet.create({ lineHeight: undefined, }, textGrey: { - color: colors.textSecondary, + color: colors.contentSecondary, }, textRed: { - color: colors.error, + color: colors.errorPrimary, }, }) diff --git a/src/styles/appTheme.ts b/src/styles/appTheme.ts index f0088f2bdf4..c27aba0e75c 100644 --- a/src/styles/appTheme.ts +++ b/src/styles/appTheme.ts @@ -6,7 +6,7 @@ const appTheme = { ...DefaultTheme, colors: { ...DefaultTheme.colors, - background: colors.background, + background: colors.backgroundPrimary, }, } diff --git a/src/styles/colors.tsx b/src/styles/colors.tsx index bc2d0b5273e..28e9b3f8c3e 100644 --- a/src/styles/colors.tsx +++ b/src/styles/colors.tsx @@ -2,51 +2,52 @@ // from https://www.figma.com/design/erFfzHvSTm5g1sjK6jWyEH/Working-Design-System?node-id=2100-4881&node-type=frame&t=vKGGXrs3Torz7kFE-0 enum Colors { // backgrounds - background = '#FFFFFF', // primary background - backgroundInverse = '#2E3338', // inverse background (e.g. high contrast to primary) - backgroundSecondary = '#F8F9F9', // secondary background (e.g. cards, input fields) - backgroundTertiary = '#E6E6E6', // tertiary background (e.g. used on top of secondary background) + backgroundPrimary = '#FFFFFF', // Main background color for the app, used for primary surfaces (screens, navigation). + backgroundInverse = '#2E3338', // High-contrast background color for the app. + backgroundSecondary = '#F8F9F9', // Subtle contrast background for secondary surfaces like cards, panels, or inputs. + backgroundTertiary = '#E6E6E6', // Low-emphasis background for subtle supporting areas, typically used when both primary and secondary backgrounds are present, and an additional layer of distinction is needed. - // text - textPrimary = '#2E3338', // text on primary background - textSecondary = '#757575', // supporting, placeholder, or less important text - textInverse = '#FFFFFF', // text on inverse background + // text, icons, and other content + contentPrimary = '#2E3338', // main content on primary background + contentSecondary = '#757575', // supporting context on primary background + contentInverse = '#FFFFFF', // content on inverse backgrounds + textLink = '#757575', // underlined text links on primary background - // borders, shadows, highlights - shadow = '#2E3338', + // borders, shadows, highlights, visual effects + border = '#E6E6E6', + shadow = '#2E3338', // shadow base color softShadow = 'rgba(156, 164, 169, 0.4)', lightShadow = 'rgba(48, 46, 37, 0.15)', barShadow = 'rgba(129, 134, 139, 0.5)', - skeletonPlaceholderHighlight = '#FFFFFF', - skeletonPlaceholderBackground = '#E6E6E6', - border = '#E6E6E6', + skeletonPlaceholderHighlight = '#FFFFFF', // animated highlight color on skeleton loaders + skeletonPlaceholderBackground = '#E6E6E6', // background color on skeleton loaders loadingIndicator = '#1AB775', // spinner or loading indicator // interactive elements - navigationTop = '#2E3338', - navigationTopSecondary = '#757575', - navigationBottom = '#2E3338', - navigationBottomSecondary = '#757575', - buttonPrimary = '#2E3338', - buttonSecondary = '#F8F9F9', - accent = '#1AB775', - textLink = '#757575', // similar to secondary text but for interactive links - bottomSheetHandle = '#E6E6E6', + navigationTopPrimary = '#2E3338', // color for text and icons on top navigation + navigationTopSecondary = '#757575', // secondary color for text and icons on top navigation + navigationBottomPrimary = '#2E3338', // color for text and icons on bottom navigation + navigationBottomSecondary = '#757575', // secondary color for text and icons on bottom navigation + bottomSheetHandle = '#757575', // color for bottom sheet handle + buttonPrimary = '#2E3338', // Primary button background, used for high-priority actions. + buttonSecondary = '#F8F9F9', // Secondary button background, for less emphasized actions or alternative options. + buttonTertiary = '#FFFFFF', // Tertiary button background, typically used for minimal or low-emphasis actions. - // states - disabled = '#E6E6E6', - inactive = '#757575', // disabled, inactive, or placeholder - info = '#F8F9F9', // neutral or informative - success = '#137211', - successSecondary = '#F1FDF1', - warning = '#9C6E00', - warningSecondary = '#FFF9EA', - error = '#C93717', - errorSecondary = '#FBF2F0', + // statuses and UI feedback colors + disabled = '#E6E6E6', // Used for disabled elements that are non-interactive or visually de-emphasized. + inactive = '#757575', // Represents inactive or placeholder elements, often less prominent but still visible. + info = '#F8F9F9', // Background for neutral or informational states, typically non-critical. + successPrimary = '#137211', // Indicates successful actions or positive states, often used for icons or highlights. + successSecondary = '#F1FDF1', // Subtle background for success states, such as notifications or banners. + warningPrimary = '#9C6E00', // Highlights warning states, used to draw attention to cautionary information. + warningSecondary = '#FFF9EA', // Subtle background for warning states, providing gentle emphasis without overpowering. + errorPrimary = '#C93717', // Represents error or failure states, used for critical feedback or alerts. + errorSecondary = '#FBF2F0', // Subtle background for error states, providing softer emphasis in contexts like modals or notifications. - // brand - gradientBorderLeft = '#26d98a', - gradientBorderRight = '#ffd52c', + // brand colors for decorative elements + accent = '#1AB775', // Accent color for emphasizing key elements, such as highlights, icons, or decorative details. + brandGradientLeft = '#26d98a', // Starting color for the brand gradient, used in backgrounds or borders to reinforce brand identity. + brandGradientRight = '#ffd52c', // Ending color for the brand gradient, used in backgrounds or borders to reinforce brand identity. } export default Colors diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx index f89324c7205..3cdfb682e31 100644 --- a/src/styles/fonts.tsx +++ b/src/styles/fonts.tsx @@ -17,127 +17,127 @@ export const typeScale = StyleSheet.create({ fontSize: 80, lineHeight: 80, letterSpacing: -2.4, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, displayMedium: { fontFamily: Inter.Bold, fontSize: 56, lineHeight: 64, letterSpacing: -1.12, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, displaySmall: { fontFamily: Inter.Bold, fontSize: 40, lineHeight: 48, letterSpacing: -0.8, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, titleLarge: { fontFamily: Inter.Bold, fontSize: 32, lineHeight: 40, letterSpacing: -0.32, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, titleMedium: { fontFamily: Inter.Bold, fontSize: 24, lineHeight: 32, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, titleSmall: { fontFamily: Inter.Bold, fontSize: 20, lineHeight: 28, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, labelSemiBoldLarge: { fontFamily: Inter.SemiBold, fontSize: 18, lineHeight: 28, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, labelSemiBoldMedium: { fontFamily: Inter.SemiBold, fontSize: 16, lineHeight: 24, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, labelSemiBoldSmall: { fontFamily: Inter.SemiBold, fontSize: 14, lineHeight: 20, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, labelSemiBoldXSmall: { fontFamily: Inter.SemiBold, fontSize: 12, lineHeight: 16, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, labelLarge: { fontFamily: Inter.Medium, fontSize: 18, lineHeight: 28, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, labelMedium: { fontFamily: Inter.Medium, fontSize: 16, lineHeight: 24, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, labelSmall: { fontFamily: Inter.Medium, fontSize: 14, lineHeight: 20, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, labelXSmall: { fontFamily: Inter.Medium, fontSize: 12, lineHeight: 16, letterSpacing: 0.12, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, labelXXSmall: { fontFamily: Inter.Medium, fontSize: 10, lineHeight: 12, letterSpacing: 0.2, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, bodyLarge: { fontFamily: Inter.Regular, fontSize: 18, lineHeight: 28, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, bodyMedium: { fontFamily: Inter.Regular, fontSize: 16, lineHeight: 24, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, bodySmall: { fontFamily: Inter.Regular, fontSize: 14, lineHeight: 20, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, bodyXSmall: { fontFamily: Inter.Regular, fontSize: 12, lineHeight: 16, letterSpacing: 0.12, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, bodyXXSmall: { fontFamily: Inter.Regular, fontSize: 10, lineHeight: 12, letterSpacing: 0.2, - color: Colors.textPrimary, + color: Colors.contentPrimary, }, }) diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 96add7c471b..737478a63cf 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -62,6 +62,13 @@ const styles = StyleSheet.create({ shadowRadius: 1.5, shadowColor: Colors.barShadow, }, + bottomSheetHandleIndicator: { + backgroundColor: Colors.bottomSheetHandle, + width: 40, + }, + bottomSheetBackground: { + backgroundColor: Colors.backgroundPrimary, + }, }) export default styles diff --git a/src/swap/FeeInfoBottomSheet.tsx b/src/swap/FeeInfoBottomSheet.tsx index dfc5e5d399b..24f610b6cbf 100644 --- a/src/swap/FeeInfoBottomSheet.tsx +++ b/src/swap/FeeInfoBottomSheet.tsx @@ -180,7 +180,7 @@ const styles = StyleSheet.create({ }, infoText: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, moreInfoContainer: { marginTop: Spacing.Large32, diff --git a/src/swap/SwapAmountInput.tsx b/src/swap/SwapAmountInput.tsx index 923956b535d..c686e17525d 100644 --- a/src/swap/SwapAmountInput.tsx +++ b/src/swap/SwapAmountInput.tsx @@ -94,7 +94,7 @@ const SwapAmountInput = ({ ) : ( <Text style={styles.tokenNamePlaceholder}>{buttonPlaceholder}</Text> )} - <DownArrowIcon height={24} color={Colors.textSecondary} /> + <DownArrowIcon height={24} color={Colors.contentSecondary} /> </View> </Touchable> {token && ( @@ -189,7 +189,7 @@ const styles = StyleSheet.create({ flex: 1, }, inputError: { - color: Colors.error, + color: Colors.errorPrimary, }, inputText: { ...typeScale.titleSmall, @@ -210,7 +210,7 @@ const styles = StyleSheet.create({ }, tokenNetwork: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, paddingHorizontal: 4, }, tokenInfoText: { @@ -219,13 +219,13 @@ const styles = StyleSheet.create({ tokenNamePlaceholder: { ...typeScale.labelMedium, paddingHorizontal: 4, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, fiatValue: { ...typeScale.bodyXSmall, paddingLeft: Spacing.Smallest8, maxWidth: '40%', - color: Colors.textSecondary, + color: Colors.contentSecondary, paddingVertical: Spacing.Smallest8, }, }) diff --git a/src/swap/SwapScreen.tsx b/src/swap/SwapScreen.tsx index 902fd493564..dd69f7acfe3 100644 --- a/src/swap/SwapScreen.tsx +++ b/src/swap/SwapScreen.tsx @@ -811,8 +811,8 @@ export function SwapScreen({ route }: Props) { onPress={handleSwitchTokens} testID="SwapScreen/SwitchTokens" > - <CircledIcon radius={Spacing.Large32} backgroundColor={colors.textPrimary}> - <ArrowDown color={colors.textInverse} /> + <CircledIcon radius={Spacing.Large32} backgroundColor={colors.contentPrimary}> + <ArrowDown color={colors.contentInverse} /> </CircledIcon> </Touchable> </View> @@ -830,7 +830,7 @@ export function SwapScreen({ route }: Props) { {showCrossChainSwapNotification && ( <View style={styles.crossChainNotificationWrapper}> - <CrossChainIndicator backgroundColor={colors.textSecondary} /> + <CrossChainIndicator backgroundColor={colors.contentSecondary} /> <Text style={styles.crossChainNotification}> {t('swapScreen.crossChainNotification')} </Text> @@ -1124,7 +1124,7 @@ const styles = StyleSheet.create({ ...typeScale.labelXXSmall, paddingBottom: Spacing.Smallest8, flexWrap: 'wrap', - color: colors.textSecondary, + color: colors.contentSecondary, textAlign: 'center', }, disclaimerLink: { @@ -1155,7 +1155,7 @@ const styles = StyleSheet.create({ crossChainNotification: { ...typeScale.labelXSmall, paddingLeft: Spacing.Tiny4, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/swap/SwapScreenV2.tsx b/src/swap/SwapScreenV2.tsx index b4d7ac64246..faa1a609dad 100644 --- a/src/swap/SwapScreenV2.tsx +++ b/src/swap/SwapScreenV2.tsx @@ -719,8 +719,8 @@ export default function SwapScreenV2({ route }: Props) { onPress={handleSwitchTokens} testID="SwapScreen/SwitchTokens" > - <CircledIcon radius={Spacing.Large32} backgroundColor={colors.textPrimary}> - <ArrowDown color={colors.textInverse} /> + <CircledIcon radius={Spacing.Large32} backgroundColor={colors.contentPrimary}> + <ArrowDown color={colors.contentInverse} /> </CircledIcon> </Touchable> </View> @@ -739,7 +739,7 @@ export default function SwapScreenV2({ route }: Props) { {showCrossChainSwapNotification && ( <View style={styles.crossChainNotificationWrapper}> - <CrossChainIndicator backgroundColor={colors.textSecondary} /> + <CrossChainIndicator backgroundColor={colors.contentSecondary} /> <Text style={styles.crossChainNotification}> {t('swapScreen.crossChainNotification')} </Text> @@ -1070,7 +1070,7 @@ const styles = StyleSheet.create({ ...typeScale.labelXXSmall, paddingBottom: Spacing.Smallest8, flexWrap: 'wrap', - color: colors.textSecondary, + color: colors.contentSecondary, textAlign: 'center', }, disclaimerLink: { @@ -1101,6 +1101,6 @@ const styles = StyleSheet.create({ crossChainNotification: { ...typeScale.labelXSmall, paddingLeft: Spacing.Tiny4, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/swap/SwapTransactionDetails.tsx b/src/swap/SwapTransactionDetails.tsx index dc75bcb471a..27ef50fbf11 100644 --- a/src/swap/SwapTransactionDetails.tsx +++ b/src/swap/SwapTransactionDetails.tsx @@ -107,7 +107,7 @@ function LabelWithInfo({ <Touchable style={styles.touchableRow} onPress={onPress} testID={testID}> <> <Text style={styles.label}>{label}</Text> - <InfoIcon size={14} color={colors.textSecondary} testID={`${testID}/Icon`} /> + <InfoIcon size={14} color={colors.contentSecondary} testID={`${testID}/Icon`} /> </> </Touchable> ) @@ -268,7 +268,7 @@ const styles = StyleSheet.create({ }, label: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, marginRight: Spacing.Tiny4, }, loaderContainer: { diff --git a/src/tokens/AssetList.tsx b/src/tokens/AssetList.tsx index f64f71a8305..c4daf3cf25d 100644 --- a/src/tokens/AssetList.tsx +++ b/src/tokens/AssetList.tsx @@ -324,7 +324,7 @@ function ImportTokensItem() { > <View style={styles.importTokenContainer}> <CircledIcon radius={32} backgroundColor={Colors.successSecondary}> - <Add color={Colors.success} /> + <Add color={Colors.successPrimary} /> </CircledIcon> <Text style={styles.importTokenText}>{t('assets.importTokens')}</Text> </View> @@ -370,7 +370,7 @@ const styles = StyleSheet.create({ }, noNftsText: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, textAlign: 'center', }, noNftsTextContainer: { diff --git a/src/tokens/AssetTabBar.test.tsx b/src/tokens/AssetTabBar.test.tsx index 16ba63a526b..5c9c3ee6666 100644 --- a/src/tokens/AssetTabBar.test.tsx +++ b/src/tokens/AssetTabBar.test.tsx @@ -21,11 +21,11 @@ describe('AssetTabBar', () => { const tabItems = getAllByTestId('Assets/TabBarItem') expect(tabItems).toHaveLength(3) expect(tabItems[0]).toHaveTextContent('tokens') - expect(tabItems[0].children[0]).toHaveStyle({ color: Colors.textPrimary }) + expect(tabItems[0].children[0]).toHaveStyle({ color: Colors.contentPrimary }) expect(tabItems[1]).toHaveTextContent('collectibles') - expect(tabItems[1].children[0]).toHaveStyle({ color: Colors.textSecondary }) + expect(tabItems[1].children[0]).toHaveStyle({ color: Colors.contentSecondary }) expect(tabItems[2]).toHaveTextContent('dappPositions') - expect(tabItems[2].children[0]).toHaveStyle({ color: Colors.textSecondary }) + expect(tabItems[2].children[0]).toHaveStyle({ color: Colors.contentSecondary }) }) it('does not render positions if disabled', () => { @@ -40,9 +40,9 @@ describe('AssetTabBar', () => { const tabItems = getAllByTestId('Assets/TabBarItem') expect(tabItems).toHaveLength(2) expect(tabItems[0]).toHaveTextContent('tokens') - expect(tabItems[0].children[0]).toHaveStyle({ color: Colors.textSecondary }) + expect(tabItems[0].children[0]).toHaveStyle({ color: Colors.contentSecondary }) expect(tabItems[1]).toHaveTextContent('collectibles') - expect(tabItems[1].children[0]).toHaveStyle({ color: Colors.textPrimary }) + expect(tabItems[1].children[0]).toHaveStyle({ color: Colors.contentPrimary }) }) it.each([ diff --git a/src/tokens/AssetTabBar.tsx b/src/tokens/AssetTabBar.tsx index 9a8d1013886..39762e6fbad 100644 --- a/src/tokens/AssetTabBar.tsx +++ b/src/tokens/AssetTabBar.tsx @@ -86,7 +86,7 @@ const styles = StyleSheet.create({ }, item: { ...typeScale.bodyMedium, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, itemSelected: { ...typeScale.labelMedium, diff --git a/src/tokens/PositionItem.tsx b/src/tokens/PositionItem.tsx index 648d48fe2fe..419c562027d 100644 --- a/src/tokens/PositionItem.tsx +++ b/src/tokens/PositionItem.tsx @@ -123,7 +123,7 @@ const styles = StyleSheet.create({ }, subtext: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, tokenAmt: { ...typeScale.labelSemiBoldLarge, diff --git a/src/tokens/TabWallet.tsx b/src/tokens/TabWallet.tsx index 709bcc3edb1..3ce6b6e504b 100644 --- a/src/tokens/TabWallet.tsx +++ b/src/tokens/TabWallet.tsx @@ -202,7 +202,7 @@ const styles = StyleSheet.create({ ...getShadowStyle(Shadow.SoftLight), paddingBottom: Spacing.Regular16, paddingHorizontal: Spacing.Regular16, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, position: 'absolute', width: '100%', zIndex: 1, @@ -212,7 +212,7 @@ const styles = StyleSheet.create({ paddingBottom: Spacing.Thick24, }, footerContainer: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, position: 'absolute', bottom: 0, left: 10, // so the scroll bar is still visible diff --git a/src/tokens/TokenBalanceItem.tsx b/src/tokens/TokenBalanceItem.tsx index fc6c8a1a9fd..2f49182f51b 100644 --- a/src/tokens/TokenBalanceItem.tsx +++ b/src/tokens/TokenBalanceItem.tsx @@ -111,7 +111,7 @@ const styles = StyleSheet.create({ }, subAmount: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, label: { ...typeScale.labelMedium, @@ -123,11 +123,11 @@ const styles = StyleSheet.create({ ...typeScale.bodySmall, overflow: 'hidden', flexShrink: 1, - color: colors.textSecondary, + color: colors.contentSecondary, }, bridgeLabel: { ...typeScale.labelSmall, - color: colors.textSecondary, + color: colors.contentSecondary, overflow: 'hidden', flexShrink: 1, }, diff --git a/src/tokens/TokenDetails.tsx b/src/tokens/TokenDetails.tsx index 7e2254c9063..486402c808a 100644 --- a/src/tokens/TokenDetails.tsx +++ b/src/tokens/TokenDetails.tsx @@ -276,7 +276,7 @@ function Actions({ }) action.onPress() }} - icon={<action.iconComponent color={Colors.textInverse} />} + icon={<action.iconComponent color={Colors.contentInverse} />} style={styles.actionButton} size={BtnSizes.FULL} touchableStyle={styles.actionTouchable} @@ -386,6 +386,6 @@ const styles = StyleSheet.create({ }, priceInfoUnavailable: { ...typeScale.labelSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/tokens/TokenDetailsMoreActions.tsx b/src/tokens/TokenDetailsMoreActions.tsx index 21d5bcf6824..7292826adbb 100644 --- a/src/tokens/TokenDetailsMoreActions.tsx +++ b/src/tokens/TokenDetailsMoreActions.tsx @@ -47,7 +47,7 @@ export default function TokenDetailsMoreActions({ testID={`TokenDetailsMoreActions/${action.name}`} > <> - <action.iconComponent color={Colors.textPrimary} /> + <action.iconComponent color={Colors.contentPrimary} /> <View style={{ flex: 1 }}> <Text style={styles.actionTitle}>{action.title}</Text> <Text style={styles.actionDetails}>{action.details}</Text> diff --git a/src/tokens/TokenImport.tsx b/src/tokens/TokenImport.tsx index 0903addcef1..7741e6abf11 100644 --- a/src/tokens/TokenImport.tsx +++ b/src/tokens/TokenImport.tsx @@ -375,6 +375,6 @@ const styles = StyleSheet.create({ }, errorLabel: { ...typeScale.labelSmall, - color: Colors.error, + color: Colors.errorPrimary, }, }) diff --git a/src/transactions/NoActivity.tsx b/src/transactions/NoActivity.tsx index 715f4ff2141..610dad4f068 100644 --- a/src/transactions/NoActivity.tsx +++ b/src/transactions/NoActivity.tsx @@ -57,7 +57,7 @@ const styles = StyleSheet.create({ }, text: { ...typeScale.bodyLarge, - color: colors.textSecondary, + color: colors.contentSecondary, }, noTransactionsContainer: { padding: Spacing.Regular16, diff --git a/src/transactions/UserSection.tsx b/src/transactions/UserSection.tsx index 3ccd1da6371..e7614f5c0dc 100644 --- a/src/transactions/UserSection.tsx +++ b/src/transactions/UserSection.tsx @@ -94,7 +94,7 @@ const styles = StyleSheet.create({ }, sectionLabel: { ...typeScale.labelSemiBoldSmall, - color: colors.textSecondary, + color: colors.contentSecondary, marginBottom: 4, }, userContainer: { @@ -106,7 +106,7 @@ const styles = StyleSheet.create({ }, phoneNumber: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, avatarContainer: { flex: 1, @@ -117,7 +117,7 @@ const styles = StyleSheet.create({ }, addressHasChanged: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, marginBottom: 8, }, accountBox: { @@ -128,6 +128,6 @@ const styles = StyleSheet.create({ }, accountLabel: { ...typeScale.labelSemiBoldSmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/transactions/feed/ClaimRewardFeedItem.tsx b/src/transactions/feed/ClaimRewardFeedItem.tsx index ae9b0a355f4..4e75dd3c904 100644 --- a/src/transactions/feed/ClaimRewardFeedItem.tsx +++ b/src/transactions/feed/ClaimRewardFeedItem.tsx @@ -123,7 +123,7 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, amountContainer: { maxWidth: '50%', @@ -135,7 +135,7 @@ const styles = StyleSheet.create({ }, amountSubtitle: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, flexWrap: 'wrap', textAlign: 'right', }, diff --git a/src/transactions/feed/DepositOrWithdrawFeedItem.tsx b/src/transactions/feed/DepositOrWithdrawFeedItem.tsx index aab944f7eae..6adc5c470bf 100644 --- a/src/transactions/feed/DepositOrWithdrawFeedItem.tsx +++ b/src/transactions/feed/DepositOrWithdrawFeedItem.tsx @@ -159,7 +159,7 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, amountContainer: { maxWidth: '50%', @@ -171,7 +171,7 @@ const styles = StyleSheet.create({ }, amountSubtitle: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, flexWrap: 'wrap', textAlign: 'right', }, diff --git a/src/transactions/feed/EarnFeedItem.tsx b/src/transactions/feed/EarnFeedItem.tsx index 8eda9166de8..160f0b79908 100644 --- a/src/transactions/feed/EarnFeedItem.tsx +++ b/src/transactions/feed/EarnFeedItem.tsx @@ -171,7 +171,7 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, amountContainer: { maxWidth: '50%', @@ -183,7 +183,7 @@ const styles = StyleSheet.create({ }, amountSubtitle: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, flexWrap: 'wrap', textAlign: 'right', }, diff --git a/src/transactions/feed/SwapFeedItem.tsx b/src/transactions/feed/SwapFeedItem.tsx index 17c2aa2685f..b704b4feb42 100644 --- a/src/transactions/feed/SwapFeedItem.tsx +++ b/src/transactions/feed/SwapFeedItem.tsx @@ -106,7 +106,7 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, tokenAmountContainer: { maxWidth: '50%', @@ -119,7 +119,7 @@ const styles = StyleSheet.create({ }, tokenAmount: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, flexWrap: 'wrap', textAlign: 'right', }, diff --git a/src/transactions/feed/TransactionDetails.tsx b/src/transactions/feed/TransactionDetails.tsx index cb3ba281299..4989246b14a 100644 --- a/src/transactions/feed/TransactionDetails.tsx +++ b/src/transactions/feed/TransactionDetails.tsx @@ -136,7 +136,7 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginTop: 2, }, status: { diff --git a/src/transactions/feed/TransactionFeedItemImage.tsx b/src/transactions/feed/TransactionFeedItemImage.tsx index 6622617fe93..2a27a63a31f 100644 --- a/src/transactions/feed/TransactionFeedItemImage.tsx +++ b/src/transactions/feed/TransactionFeedItemImage.tsx @@ -35,7 +35,7 @@ function TransactionFeedItemBaseImage(props: Props) { if (status === TransactionStatus.Failed) { return ( <CircledIcon backgroundColor={Colors.errorSecondary} radius={AVATAR_SIZE}> - <AttentionIcon color={Colors.error} size={24} testId={'FailedTransactionAlert'} /> + <AttentionIcon color={Colors.errorPrimary} size={24} testId={'FailedTransactionAlert'} /> </CircledIcon> ) } @@ -48,7 +48,7 @@ function TransactionFeedItemBaseImage(props: Props) { ) { return ( <CircledIcon backgroundColor={Colors.successSecondary} radius={AVATAR_SIZE}> - <SwapArrows color={Colors.success} /> + <SwapArrows color={Colors.successPrimary} /> </CircledIcon> ) } @@ -87,7 +87,7 @@ function TransactionFeedItemBaseImage(props: Props) { ) { return ( <CircledIcon backgroundColor={Colors.successSecondary} radius={AVATAR_SIZE}> - <EarnCoins size={24} color={Colors.success} /> + <EarnCoins size={24} color={Colors.successPrimary} /> </CircledIcon> ) } diff --git a/src/transactions/feed/TransactionFeedV2.tsx b/src/transactions/feed/TransactionFeedV2.tsx index 897784eee50..7234d9bcb0b 100644 --- a/src/transactions/feed/TransactionFeedV2.tsx +++ b/src/transactions/feed/TransactionFeedV2.tsx @@ -568,7 +568,7 @@ const styles = StyleSheet.create({ }, allTransactionsText: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, textAlign: 'center', marginHorizontal: Spacing.Regular16, marginVertical: Spacing.Thick24, diff --git a/src/transactions/feed/TransactionPrimaryAction.tsx b/src/transactions/feed/TransactionPrimaryAction.tsx index 956d0eaa6ac..86c16db279f 100644 --- a/src/transactions/feed/TransactionPrimaryAction.tsx +++ b/src/transactions/feed/TransactionPrimaryAction.tsx @@ -27,9 +27,9 @@ function TransactionPrimaryAction({ status, type, onPress, testID }: Props) { }[status] const [color, backgroundColor] = { - [TransactionStatus.Complete]: [Colors.success, Colors.successSecondary], - [TransactionStatus.Pending]: [Colors.warning, Colors.warningSecondary], - [TransactionStatus.Failed]: [Colors.error, Colors.errorSecondary], + [TransactionStatus.Complete]: [Colors.successPrimary, Colors.successSecondary], + [TransactionStatus.Pending]: [Colors.warningPrimary, Colors.warningSecondary], + [TransactionStatus.Failed]: [Colors.errorPrimary, Colors.errorSecondary], }[status] const icon = { diff --git a/src/transactions/feed/TransactionStatusIndicator.tsx b/src/transactions/feed/TransactionStatusIndicator.tsx index 25a894f2ec8..3bf7c4175f2 100644 --- a/src/transactions/feed/TransactionStatusIndicator.tsx +++ b/src/transactions/feed/TransactionStatusIndicator.tsx @@ -25,9 +25,9 @@ function TransactionStatusIndicator({ status, testID }: Props) { }[status] const [color, backgroundColor] = { - [TransactionStatus.Complete]: [Colors.success, Colors.successSecondary], - [TransactionStatus.Pending]: [Colors.warning, Colors.warningSecondary], - [TransactionStatus.Failed]: [Colors.error, Colors.errorSecondary], + [TransactionStatus.Complete]: [Colors.successPrimary, Colors.successSecondary], + [TransactionStatus.Pending]: [Colors.warningPrimary, Colors.warningSecondary], + [TransactionStatus.Failed]: [Colors.errorPrimary, Colors.errorSecondary], }[status] const icon = { diff --git a/src/transactions/feed/TransferFeedItem.tsx b/src/transactions/feed/TransferFeedItem.tsx index 1dd8410fe36..237c40b144b 100644 --- a/src/transactions/feed/TransferFeedItem.tsx +++ b/src/transactions/feed/TransferFeedItem.tsx @@ -130,7 +130,7 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, amount: { ...typeScale.labelMedium, @@ -139,7 +139,7 @@ const styles = StyleSheet.create({ }, tokenAmount: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, flexWrap: 'wrap', textAlign: 'right', }, diff --git a/src/transactions/feed/detailContent/ClaimRewardContent.tsx b/src/transactions/feed/detailContent/ClaimRewardContent.tsx index ce2c43658f3..db6974fccb4 100644 --- a/src/transactions/feed/detailContent/ClaimRewardContent.tsx +++ b/src/transactions/feed/detailContent/ClaimRewardContent.tsx @@ -78,7 +78,7 @@ const styles = StyleSheet.create({ }, amountSubtitle: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginLeft: 'auto', }, }) diff --git a/src/transactions/feed/detailContent/DepositOrWithdrawContent.tsx b/src/transactions/feed/detailContent/DepositOrWithdrawContent.tsx index b3281d98dfa..d1dc3f6de5c 100644 --- a/src/transactions/feed/detailContent/DepositOrWithdrawContent.tsx +++ b/src/transactions/feed/detailContent/DepositOrWithdrawContent.tsx @@ -79,7 +79,7 @@ export function DepositOrWithdrawContent({ transaction }: DepositOrWithdrawConte showLocalAmount={false} style={styles.bodyText} /> - <ArrowRightThick size={20} color={Colors.textPrimary} /> + <ArrowRightThick size={20} color={Colors.contentPrimary} /> <TokenDisplay testID="DepositOrWithdraw/Swap/To" tokenId={transaction.swap.inAmount.tokenId} @@ -150,7 +150,7 @@ const styles = StyleSheet.create({ }, amountSubtitle: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginLeft: 'auto', }, amountContainer: { diff --git a/src/transactions/feed/detailContent/EarnContent.tsx b/src/transactions/feed/detailContent/EarnContent.tsx index e26f63e11ab..aeba8be6592 100644 --- a/src/transactions/feed/detailContent/EarnContent.tsx +++ b/src/transactions/feed/detailContent/EarnContent.tsx @@ -129,7 +129,7 @@ export function EarnDepositContent({ transaction }: EarnDepositProps) { showLocalAmount={false} style={styles.bodyText} /> - <ArrowRightThick size={20} color={Colors.textPrimary} /> + <ArrowRightThick size={20} color={Colors.contentPrimary} /> <TokenDisplay testID="EarnSwapDeposit/Swap/To" tokenId={depositAmount.tokenId} @@ -240,7 +240,7 @@ const styles = StyleSheet.create({ }, amountSubtitle: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginLeft: 'auto', }, amountContainer: { diff --git a/src/transactions/feed/detailContent/FeeRowItem.tsx b/src/transactions/feed/detailContent/FeeRowItem.tsx index 79621c7a3a9..e14cb5d4f11 100644 --- a/src/transactions/feed/detailContent/FeeRowItem.tsx +++ b/src/transactions/feed/detailContent/FeeRowItem.tsx @@ -84,7 +84,7 @@ const styles = StyleSheet.create({ }, currencyAmountSecondaryText: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, textAlign: 'right', }, }) diff --git a/src/transactions/feed/detailContent/TransferSentContent.tsx b/src/transactions/feed/detailContent/TransferSentContent.tsx index e21cafbfb80..a6b739f8706 100644 --- a/src/transactions/feed/detailContent/TransferSentContent.tsx +++ b/src/transactions/feed/detailContent/TransferSentContent.tsx @@ -110,7 +110,7 @@ const styles = StyleSheet.create({ }, tokenFiatValueText: { ...typeScale.bodySmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/verify/ResendButtonWithDelay.tsx b/src/verify/ResendButtonWithDelay.tsx index c7cff470b2d..4a2741cc3e1 100644 --- a/src/verify/ResendButtonWithDelay.tsx +++ b/src/verify/ResendButtonWithDelay.tsx @@ -41,7 +41,7 @@ function ResendButtonWithDelay({ onPress }: Props) { testID="PhoneVerificationResendSmsBtn" disabled={disabled} style={{ - color: disabled ? colors.disabled : colors.textSecondary, + color: disabled ? colors.disabled : colors.contentSecondary, fontVariant: ['tabular-nums'], }} onPress={handleOnPress} diff --git a/src/verify/VerificationCodeInputScreen.tsx b/src/verify/VerificationCodeInputScreen.tsx index 636f7ebc939..9a561b18dc3 100644 --- a/src/verify/VerificationCodeInputScreen.tsx +++ b/src/verify/VerificationCodeInputScreen.tsx @@ -69,10 +69,10 @@ function VerificationCodeInputScreen({ title={t('phoneVerificationInput.help')} testID="PhoneVerificationHelpHeader" onPress={onPressHelp} - titleStyle={{ color: colors.navigationTop }} + titleStyle={{ color: colors.navigationTopPrimary }} /> ), - headerLeft: () => <BackButton color={colors.navigationTop} />, + headerLeft: () => <BackButton color={colors.navigationTopPrimary} />, headerTransparent: true, }) }, [navigation, route.params]) diff --git a/src/verify/VerificationStartScreen.tsx b/src/verify/VerificationStartScreen.tsx index 878fd2958ba..a4aae2c1c0a 100644 --- a/src/verify/VerificationStartScreen.tsx +++ b/src/verify/VerificationStartScreen.tsx @@ -122,7 +122,7 @@ function VerificationStartScreen({ title={t('skip')} testID="PhoneVerificationSkipHeader" onPress={onPressSkip} - titleStyle={{ color: colors.navigationTop }} + titleStyle={{ color: colors.navigationTopPrimary }} /> ), headerLeft: () => route.params?.hasOnboarded && <BackButton />, diff --git a/src/walletConnect/screens/ConnectionTimedOut.tsx b/src/walletConnect/screens/ConnectionTimedOut.tsx index 4710c426f68..ac495239a21 100644 --- a/src/walletConnect/screens/ConnectionTimedOut.tsx +++ b/src/walletConnect/screens/ConnectionTimedOut.tsx @@ -24,7 +24,7 @@ const styles = StyleSheet.create({ }, subtitle: { ...typeScale.bodyMedium, - color: colors.textSecondary, + color: colors.contentSecondary, textAlign: 'center', marginTop: 16, marginBottom: 24, diff --git a/src/walletConnect/screens/DappsDisclaimer.tsx b/src/walletConnect/screens/DappsDisclaimer.tsx index 79fb22d0c1e..e7019e167db 100644 --- a/src/walletConnect/screens/DappsDisclaimer.tsx +++ b/src/walletConnect/screens/DappsDisclaimer.tsx @@ -22,7 +22,7 @@ const DappsDisclaimer = ({ isDappListed }: Props) => { const styles = StyleSheet.create({ dappNotListedDisclaimer: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginBottom: Spacing.Thick24, textAlign: 'center', }, diff --git a/src/walletConnect/screens/EstimatedNetworkFee.tsx b/src/walletConnect/screens/EstimatedNetworkFee.tsx index dc80599a42c..e91fcc1a74e 100644 --- a/src/walletConnect/screens/EstimatedNetworkFee.tsx +++ b/src/walletConnect/screens/EstimatedNetworkFee.tsx @@ -119,7 +119,7 @@ const styles = StyleSheet.create({ }, labelText: { ...typeScale.labelXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginBottom: Spacing.Tiny4, }, amountPrimaryText: { @@ -127,7 +127,7 @@ const styles = StyleSheet.create({ }, amountSecondaryText: { ...typeScale.bodyXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, contentLoading: { opacity: 0, diff --git a/src/walletConnect/screens/Logos.tsx b/src/walletConnect/screens/Logos.tsx index 1fecb1afd0b..ec2a1316e0f 100644 --- a/src/walletConnect/screens/Logos.tsx +++ b/src/walletConnect/screens/Logos.tsx @@ -66,17 +66,17 @@ const styles = StyleSheet.create({ height: DAPP_IMAGE_SIZE, width: DAPP_IMAGE_SIZE, borderRadius: 100, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, }, dappImage: { height: DAPP_IMAGE_SIZE, width: DAPP_IMAGE_SIZE, borderRadius: 100, - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, marginLeft: -4, }, placeholderLogoBackground: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, marginRight: -Spacing.Small12, borderColor: Colors.border, borderWidth: 1, @@ -84,6 +84,6 @@ const styles = StyleSheet.create({ placeholderLogoText: { ...typeScale.titleMedium, lineHeight: undefined, - color: Colors.textSecondary, + color: Colors.contentSecondary, }, }) diff --git a/src/walletConnect/screens/RequestContent.tsx b/src/walletConnect/screens/RequestContent.tsx index beeef05c376..b50db70f91e 100644 --- a/src/walletConnect/screens/RequestContent.tsx +++ b/src/walletConnect/screens/RequestContent.tsx @@ -214,7 +214,7 @@ const styles = StyleSheet.create({ }, requestDetailLabel: { ...typeScale.labelXSmall, - color: Colors.textSecondary, + color: Colors.contentSecondary, marginBottom: 4, }, requestDetailValue: { diff --git a/src/walletConnect/screens/Sessions.tsx b/src/walletConnect/screens/Sessions.tsx index 104352aa16c..01571158575 100644 --- a/src/walletConnect/screens/Sessions.tsx +++ b/src/walletConnect/screens/Sessions.tsx @@ -135,7 +135,7 @@ const styles = StyleSheet.create({ }, disconnectButton: { ...typeScale.bodySmall, - color: colors.textSecondary, + color: colors.contentSecondary, }, }) diff --git a/src/walletConnect/screens/WalletConnectRequest.tsx b/src/walletConnect/screens/WalletConnectRequest.tsx index 7c42d98ffd0..319a89fc476 100644 --- a/src/walletConnect/screens/WalletConnectRequest.tsx +++ b/src/walletConnect/screens/WalletConnectRequest.tsx @@ -55,7 +55,7 @@ const styles = StyleSheet.create({ }, connecting: { ...typeScale.labelSemiBoldSmall, - color: colors.textSecondary, + color: colors.contentSecondary, marginTop: Spacing.Thick24, }, }) diff --git a/src/webview/WebViewAndroidBottomSheet.tsx b/src/webview/WebViewAndroidBottomSheet.tsx index 4f858302074..91a42c2dbcc 100644 --- a/src/webview/WebViewAndroidBottomSheet.tsx +++ b/src/webview/WebViewAndroidBottomSheet.tsx @@ -66,7 +66,7 @@ const styles = StyleSheet.create({ margin: 0, }, centerContainer: { - backgroundColor: Colors.background, + backgroundColor: Colors.backgroundPrimary, }, // Needed to add icons in the pressable buttons pressable: { diff --git a/src/webview/WebViewScreen.tsx b/src/webview/WebViewScreen.tsx index ee56e7d8ed0..42ccbc730f2 100644 --- a/src/webview/WebViewScreen.tsx +++ b/src/webview/WebViewScreen.tsx @@ -242,7 +242,7 @@ function WebViewScreen({ route, navigation }: Props) { disabled={!canGoBack} testID="WebViewScreen/GoBack" > - <BackChevron color={canGoBack ? colors.textPrimary : colors.inactive} /> + <BackChevron color={canGoBack ? colors.contentPrimary : colors.inactive} /> </Touchable> <Touchable onPress={handleGoForward} @@ -250,17 +250,17 @@ function WebViewScreen({ route, navigation }: Props) { disabled={!canGoForward} testID="WebViewScreen/GoForward" > - <ForwardChevron color={canGoForward ? colors.textPrimary : colors.inactive} /> + <ForwardChevron color={canGoForward ? colors.contentPrimary : colors.inactive} /> </Touchable> <Touchable onPress={handleRefresh} hitSlop={iconHitslop} testID="WebViewScreen/Refresh"> - <Refresh height={20} color={colors.textPrimary} /> + <Refresh height={20} color={colors.contentPrimary} /> </Touchable> <Touchable onPress={openActionSheet} hitSlop={iconHitslop} testID="WebViewScreen/OpenBottomSheet" > - <TripleDotVertical color={colors.textPrimary} /> + <TripleDotVertical color={colors.contentPrimary} /> </Touchable> </View> </SafeAreaView>