From b200520aa8a1c9c3cf35c6d3c7b9ce8380a4f300 Mon Sep 17 00:00:00 2001 From: Luis Perrone Date: Fri, 4 Oct 2024 16:26:57 -0500 Subject: [PATCH] Design tokens (#809) * Progress * Fix lint * Fix lint * Remove light theme * Fix some colors --- .../org.eclipse.buildship.core.prefs | 4 +- .../app/.settings/org.eclipse.jdt.core.prefs | 4 + index.js | 45 +- ios/Podfile.lock | 2 +- package.json | 1 + src/App.tsx | 37 +- src/assets/images/backArrow.svg | 2 +- src/assets/images/createAccount.svg | 2 +- src/components/AccountButton.tsx | 17 +- src/components/AccountListItem.tsx | 18 +- src/components/AccountSelector.tsx | 11 +- src/components/AddressBookSelector.tsx | 6 +- src/components/AutoGasBanner.tsx | 10 +- src/components/BackButton.tsx | 2 +- src/components/BackScreen.tsx | 22 +- src/components/BackgroundFill.tsx | 2 +- src/components/BlurActionSheet.tsx | 8 +- src/components/Bullet.tsx | 6 +- src/components/ButtonPressable.tsx | 9 +- src/components/CardSkeleton.tsx | 6 +- src/components/CircleLoader.tsx | 16 +- src/components/ConfirmPinView.tsx | 14 +- src/components/CopyAddress.tsx | 16 +- src/components/CopyAddressPill.tsx | 16 +- src/components/CountdownTimer.tsx | 14 +- src/components/CustomBlurBackdrop.tsx | 7 +- src/components/Dot.tsx | 6 +- src/components/FabButton.tsx | 15 +- src/components/FinePrint.tsx | 10 +- src/components/GlobalError.tsx | 27 +- src/components/HNTKeyboard.tsx | 69 +-- src/components/HandleBasic.tsx | 9 +- src/components/HeliumActionSheet.tsx | 20 +- src/components/HeliumActionSheetItem.tsx | 6 +- src/components/HeliumBottomSheet.tsx | 18 +- src/components/IndeterminateProgressBar.tsx | 6 +- src/components/KeypadButton.tsx | 33 +- src/components/Link.tsx | 2 +- src/components/ListItem.tsx | 14 +- src/components/Markdown.tsx | 24 +- src/components/MemoInput.tsx | 6 +- src/components/NavBar.tsx | 26 +- src/components/NetworkAwareStatusBar.tsx | 18 - src/components/Pill.tsx | 34 +- src/components/ProgressBar.tsx | 6 +- src/components/RadioButton.tsx | 14 +- src/components/RevealWords.tsx | 31 +- src/components/RewardItem.tsx | 10 +- src/components/SearchInput.tsx | 4 +- src/components/SecretKeyWarningScreen.tsx | 42 +- src/components/SegmentedControl.tsx | 107 ++++ src/components/Select.tsx | 14 +- src/components/SubmitButton.tsx | 18 +- src/components/Surface.tsx | 4 +- src/components/TabBar.tsx | 14 +- src/components/TextInput.tsx | 18 +- src/components/TextTransform.tsx | 16 +- src/components/TokenButton.tsx | 17 +- src/components/TokenIcon.tsx | 4 +- src/components/TokenPill.tsx | 26 +- src/components/TokenSelector.tsx | 4 +- src/components/TouchableContainer.tsx | 4 +- src/components/TreasuryWarningScreen.tsx | 26 +- src/components/WarningBanner.tsx | 10 +- src/features/StatusPage/StatusBanner.tsx | 4 +- src/features/account/AccountActionBar.tsx | 40 +- src/features/account/AccountBalanceChart.tsx | 2 +- .../account/AccountManageTokenListScreen.tsx | 28 +- src/features/account/AccountTokenBalance.tsx | 19 +- .../account/AccountTokenCurrencyBalance.tsx | 1 + src/features/account/AccountTokenList.tsx | 4 +- src/features/account/AccountTokenScreen.tsx | 64 +- src/features/account/AccountView.tsx | 8 +- src/features/account/AccountsScreen.tsx | 11 +- src/features/account/AccountsTopNav.tsx | 27 +- src/features/account/AirdropScreen.tsx | 33 +- src/features/account/ConnectedWallets.tsx | 56 +- src/features/account/TokenListItem.tsx | 73 +-- src/features/account/TransactionDetail.tsx | 8 +- src/features/account/TransactionLineItem.tsx | 18 +- src/features/account/TxnListItem.tsx | 12 +- src/features/account/useTxn.tsx | 2 +- .../activity/ActivityDetailsScreen.tsx | 76 +-- src/features/activity/ActivityListItem.tsx | 18 +- src/features/activity/ActivityScreen.tsx | 24 +- src/features/activity/AddressActivityItem.tsx | 16 +- src/features/addressBook/AddressBook.tsx | 12 +- src/features/addressBook/AddressExtra.tsx | 8 +- src/features/addressBook/ContactDetails.tsx | 97 +-- src/features/addressBook/ContactsList.tsx | 14 +- src/features/browser/BrowserListItem.tsx | 12 +- src/features/browser/BrowserScreen.tsx | 48 +- src/features/browser/BrowserWebViewScreen.tsx | 35 +- src/features/browser/DAppTutorial.tsx | 43 +- src/features/burn/BurnScreen.tsx | 76 +-- .../collectables/AntennaSetupScreen.tsx | 44 +- .../collectables/AssertLocationScreen.tsx | 128 ++-- .../ChangeRewardsRecipientScreen.tsx | 115 ++-- .../collectables/ClaimAllRewardsScreen.tsx | 28 +- .../collectables/ClaimRewardsScreen.tsx | 32 +- .../collectables/ClaimingRewardsScreen.tsx | 72 ++- .../collectables/CollectablesScreen.tsx | 8 +- .../collectables/CollectablesTopTabs.tsx | 8 +- .../collectables/CollectionScreen.tsx | 20 +- .../HotspotCompressedListItem.tsx | 48 +- src/features/collectables/HotspotList.tsx | 62 +- src/features/collectables/HotspotListItem.tsx | 36 +- .../collectables/HotspotMapHotspotDetails.tsx | 120 ++-- .../collectables/HotspotMapLegend.tsx | 60 +- .../collectables/HotspotMapScreen.tsx | 44 +- .../collectables/NftDetailsScreen.tsx | 46 +- src/features/collectables/NftList.tsx | 4 +- src/features/collectables/NftListItem.tsx | 34 +- .../collectables/NftMetadataScreen.tsx | 20 +- .../collectables/SettingUpAntennaScreen.tsx | 50 +- .../TransferCollectableScreen.tsx | 68 +-- .../collectables/TransferCompleteScreen.tsx | 66 ++- src/features/dappLogin/DappAccount.tsx | 30 +- src/features/dappLogin/DappConnect.tsx | 26 +- src/features/dappLogin/DappLoginScreen.tsx | 8 +- src/features/governance/AssignProxyScreen.tsx | 40 +- .../governance/ClaimingRewardsModal.tsx | 32 +- .../governance/DelegateTokensModal.tsx | 52 +- .../governance/GovernanceTutorialScreen.tsx | 46 +- src/features/governance/GovernanceWrapper.tsx | 23 +- src/features/governance/LockTokensModal.tsx | 219 +++---- src/features/governance/NetworkTabs.tsx | 14 +- src/features/governance/PositionCard.tsx | 90 +-- src/features/governance/PositionPreview.tsx | 27 +- src/features/governance/PositionsList.tsx | 36 +- src/features/governance/PositionsScreen.tsx | 32 +- src/features/governance/ProposalCard.tsx | 88 +-- src/features/governance/ProposalScreen.tsx | 138 ++--- src/features/governance/ProposalTags.tsx | 10 +- src/features/governance/ProposalsList.tsx | 10 +- src/features/governance/ProxySearch.tsx | 20 +- src/features/governance/RevokeProxyScreen.tsx | 36 +- .../governance/TransferTokensModal.tsx | 119 ++-- src/features/governance/VoteHistory.tsx | 42 +- src/features/governance/VoteOption.tsx | 24 +- src/features/governance/VoterCardStat.tsx | 4 +- src/features/governance/VoterScreen.tsx | 68 +-- src/features/governance/VotersScreen.tsx | 50 +- src/features/governance/VotingPowerCard.tsx | 70 ++- src/features/governance/governanceTypes.ts | 28 +- src/features/home/HomeNavigator.tsx | 2 +- .../addNewAccount/AddNewAccountScreen.tsx | 8 +- .../hotspot-onboarding/SelectDevice.tsx | 10 +- .../iot-ble/AddGatewayBle.tsx | 50 +- .../iot-ble/Diagnostics.tsx | 30 +- .../iot-ble/ScanHotspots.tsx | 36 +- .../hotspot-onboarding/iot-ble/Settings.tsx | 22 +- .../iot-ble/WifiSettings.tsx | 22 +- .../hotspot-onboarding/iot-ble/WifiSetup.tsx | 8 +- src/features/ledger/DeviceChooseType.tsx | 27 +- src/features/ledger/DeviceScan.tsx | 31 +- src/features/ledger/DeviceScanUsb.tsx | 28 +- src/features/ledger/DeviceShow.tsx | 60 +- src/features/ledger/LedgerAccountListItem.tsx | 30 +- src/features/ledger/LedgerConnectSteps.tsx | 30 +- src/features/ledger/LedgerModal.tsx | 40 +- src/features/ledger/PairStart.tsx | 29 +- src/features/ledger/PairSuccess.tsx | 16 +- src/features/migration/SolanaMigration.tsx | 74 +-- .../modals/InsufficientSolConversionModal.tsx | 103 ++-- src/features/notifications/AccountSlider.tsx | 2 +- .../notifications/AccountSliderIcon.tsx | 14 +- .../NotificationDetailBanner.tsx | 2 +- .../notifications/NotificationDetails.tsx | 28 +- .../notifications/NotificationListItem.tsx | 18 +- .../notifications/NotificationsList.tsx | 20 +- .../notifications/NotificationsScreen.tsx | 20 +- .../onboarding/AccountAssignScreen.tsx | 37 +- .../onboarding/AccountCreatePinScreen.tsx | 10 +- .../onboarding/CreateImportAccountScreen.tsx | 48 +- src/features/onboarding/NetTypeSegment.tsx | 12 +- .../CLIAccountImportStartScreen.tsx | 27 +- .../cli-import/CLIPasswordScreen.tsx | 33 +- .../create/AccountCreatePassphraseScreen.tsx | 26 +- .../onboarding/create/AccountCreateStart.tsx | 37 +- .../create/AccountEnterPassphraseScreen.tsx | 7 +- .../onboarding/create/ConfirmWordsScreen.tsx | 47 +- src/features/onboarding/create/PhraseChip.tsx | 26 +- .../onboarding/import/AccountImportScreen.tsx | 45 +- .../import/AccountImportStartScreen.tsx | 59 +- .../onboarding/import/ImportPrivateKey.tsx | 42 +- .../import/ImportReplaceWordModal.tsx | 8 +- .../import/ImportSubAccountsScreen.tsx | 48 +- .../onboarding/import/MatchingWord.tsx | 10 +- .../import/PassphraseAutocomplete.tsx | 6 +- src/features/payment/PaymentCard.tsx | 34 +- src/features/payment/PaymentError.tsx | 40 +- src/features/payment/PaymentItem.tsx | 59 +- src/features/payment/PaymentScreen.tsx | 38 +- src/features/payment/PaymentSubmitLoading.tsx | 4 +- src/features/payment/PaymentSuccess.tsx | 24 +- src/features/payment/PaymentSummary.tsx | 31 +- src/features/request/RequestScreen.tsx | 79 +-- src/features/settings/AutoGasManager.tsx | 51 +- .../settings/ConfirmSignoutScreen.tsx | 2 +- .../settings/RevealPrivateKeyScreen.tsx | 32 +- src/features/settings/RevealWordsScreen.tsx | 18 +- src/features/settings/Settings.tsx | 90 +-- .../settings/SettingsCreatePinScreen.tsx | 10 +- src/features/settings/SettingsListItem.tsx | 40 +- src/features/settings/ShareAddressScreen.tsx | 24 +- src/features/settings/UpdateAliasScreen.tsx | 25 +- src/features/swaps/SwapItem.tsx | 19 +- src/features/swaps/SwapScreen.tsx | 141 ++--- src/features/swaps/SwappingScreen.tsx | 80 +-- src/features/txnDelegation/LinkWallet.tsx | 28 +- src/features/txnDelegation/SignHotspot.tsx | 122 ++-- src/hooks/useNetworkColor.tsx | 2 +- src/locales/en.ts | 11 +- src/navigation/TabBarNavigator.tsx | 14 +- .../CollapsibleWritableAccountPreview.tsx | 17 +- src/solana/CollectablePreview.tsx | 20 +- src/solana/MessagePreview.tsx | 14 +- src/solana/PaymentPreview.tsx | 14 +- src/solana/SwapPreview.tsx | 18 +- src/solana/WalletSIgnBottomSheetSimulated.tsx | 129 ++-- src/solana/WalletSignBottomSheet.tsx | 2 +- src/solana/WalletSignBottomSheetCompact.tsx | 48 +- .../WalletSignBottomSheetTransaction.tsx | 66 ++- src/solana/WarningBox.tsx | 14 +- src/solana/WritableAccountPreview.tsx | 64 +- src/theme/theme.ts | 552 ++++++------------ src/theme/themeHooks.ts | 6 +- src/utils/parseMarkup.tsx | 20 +- yarn.lock | 8 + 230 files changed, 3987 insertions(+), 3724 deletions(-) create mode 100644 android/app/.settings/org.eclipse.jdt.core.prefs delete mode 100644 src/components/NetworkAwareStatusBar.tsx create mode 100644 src/components/SegmentedControl.tsx diff --git a/android/.settings/org.eclipse.buildship.core.prefs b/android/.settings/org.eclipse.buildship.core.prefs index b278339ce..11a41a9d6 100644 --- a/android/.settings/org.eclipse.buildship.core.prefs +++ b/android/.settings/org.eclipse.buildship.core.prefs @@ -1,11 +1,11 @@ -arguments=--init-script /var/folders/ck/r25tcygs77n6hv8d515p1w_c0000gn/T/d146c9752a26f79b52047fb6dc6ed385d064e120494f96f08ca63a317c41f94c.gradle --init-script /var/folders/ck/r25tcygs77n6hv8d515p1w_c0000gn/T/52cde0cfcf3e28b8b7510e992210d9614505e0911af0c190bd590d7158574963.gradle +arguments=--init-script /var/folders/tm/qsvqk80d0t30zlr71v0yf1m00000gn/T/db3b08fc4a9ef609cb16b96b200fa13e563f396e9bb1ed0905fdab7bc3bc513b.gradle --init-script /var/folders/tm/qsvqk80d0t30zlr71v0yf1m00000gn/T/52cde0cfcf3e28b8b7510e992210d9614505e0911af0c190bd590d7158574963.gradle auto.sync=false build.scans.enabled=false connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER) connection.project.dir= eclipse.preferences.version=1 gradle.user.home= -java.home=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home +java.home=/Users/peronif5/Library/Java/JavaVirtualMachines/openjdk-21.0.2/Contents/Home jvm.arguments= offline.mode=false override.workspace.settings=true diff --git a/android/app/.settings/org.eclipse.jdt.core.prefs b/android/app/.settings/org.eclipse.jdt.core.prefs new file mode 100644 index 000000000..626e0e1d5 --- /dev/null +++ b/android/app/.settings/org.eclipse.jdt.core.prefs @@ -0,0 +1,4 @@ +eclipse.preferences.version=1 +org.eclipse.jdt.core.compiler.codegen.targetPlatform=17 +org.eclipse.jdt.core.compiler.compliance=17 +org.eclipse.jdt.core.compiler.source=17 diff --git a/index.js b/index.js index 1c6897859..05984c2f5 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,3 @@ -import { ThemeProvider } from '@shopify/restyle' import React from 'react' import { ErrorBoundary } from 'react-error-boundary' import { AppRegistry } from 'react-native' @@ -16,7 +15,6 @@ import LanguageProvider from './src/storage/LanguageProvider' import NotificationStorageProvider from './src/storage/NotificationStorageProvider' import { persistor } from './src/store/persistence' import store from './src/store/store' -import { darkThemeColors, theme } from './src/theme/theme' import './src/utils/i18n' // eslint-disable-next-line no-undef @@ -34,33 +32,26 @@ function fallbackRender(props) { const render = () => { return ( - { + await persistor.purge() }} > - { - await persistor.purge() - }} - > - - - - - - - - - - - - - - - + + + + + + + + + + + + + + ) } diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 4a116d358..cbfaf840e 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1979,7 +1979,7 @@ SPEC CHECKSUMS: SwiftyJSON: 36413e04c44ee145039d332b4f4e2d3e8d6c4db7 TcpSockets: 14306fb79f9750ea7d2ddd02d8bed182abb01797 Toast: 91b396c56ee72a5790816f40d3a94dd357abc196 - Yoga: 2246eea72aaf1b816a68a35e6e4b74563653ae09 + Yoga: 950bbfd7e6f04790fdb51149ed51df41f329fcc8 ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5 PODFILE CHECKSUM: d44dfed27ca86fe0b1eb67aab0856b7cc9e24ff7 diff --git a/package.json b/package.json index 799d7aa9d..92212a58f 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "@maplibre/maplibre-react-native": "^9.1.0", "@metaplex-foundation/mpl-bubblegum": "0.6.0", "@metaplex-foundation/mpl-token-metadata": "2.10.0", + "@novalabsxyz/mobile-theme": "^2.0.0-y.24", "@onsol/tldparser": "^0.5.3", "@react-native-async-storage/async-storage": "1.18.1", "@react-native-community/blur": "4.3.0", diff --git a/src/App.tsx b/src/App.tsx index c026f40ea..477e3e13b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,18 +9,16 @@ import { ModalProvider } from '@storage/ModalsProvider' import TokensProvider from '@storage/TokensProvider' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import globalStyles from '@theme/globalStyles' -import { darkThemeColors, lightThemeColors, theme } from '@theme/theme' -import { useColorScheme } from '@theme/themeHooks' +import { darkTheme } from '@theme/theme' import * as SplashLib from 'expo-splash-screen' import React, { useMemo } from 'react' -import { LogBox } from 'react-native' +import { LogBox, Platform, StatusBar, UIManager } from 'react-native' import useAppState from 'react-native-appstate-hook' import Config from 'react-native-config' import { GestureHandlerRootView } from 'react-native-gesture-handler' import { OneSignal } from 'react-native-onesignal' import { SafeAreaProvider } from 'react-native-safe-area-context' import 'text-encoding-polyfill' -import NetworkAwareStatusBar from './components/NetworkAwareStatusBar' import SplashScreen from './components/SplashScreen' import WalletConnectProvider from './features/dappLogin/WalletConnectProvider' import LockScreen from './features/lock/LockScreen' @@ -67,34 +65,36 @@ const App = () => { const { appState } = useAppState() const { restored: accountsRestored } = useAccountStorage() - // const { cache } = useSolana() const { setOpenedNotification } = useNotificationStorage() const linking = useDeepLinking() - const colorScheme = useColorScheme() + const themeObject = useMemo(() => { + return darkTheme + }, []) + + if (Platform.OS === 'android') { + if (UIManager.setLayoutAnimationEnabledExperimental) { + UIManager.setLayoutAnimationEnabledExperimental(true) + } + } const colorAdaptedTheme = useMemo( () => ({ - ...theme, - colors: colorScheme === 'light' ? lightThemeColors : darkThemeColors, + ...themeObject, }), - [colorScheme], + [themeObject], ) const navTheme = useMemo( () => ({ ...DarkTheme, - dark: colorScheme === 'light', + dark: true, colors: { ...DarkTheme.colors, - background: - colorScheme === 'light' - ? lightThemeColors.primaryBackground - : darkThemeColors.primaryBackground, + background: themeObject.colors.primaryBackground, }, }), - - [colorScheme], + [themeObject], ) useMount(() => { @@ -113,6 +113,10 @@ const App = () => { return ( + @@ -140,7 +144,6 @@ const App = () => { - {/* place app specific modals here */} diff --git a/src/assets/images/backArrow.svg b/src/assets/images/backArrow.svg index 686cc76ac..54d175df9 100644 --- a/src/assets/images/backArrow.svg +++ b/src/assets/images/backArrow.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/images/createAccount.svg b/src/assets/images/createAccount.svg index 0971fb857..6c1370cf7 100644 --- a/src/assets/images/createAccount.svg +++ b/src/assets/images/createAccount.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/AccountButton.tsx b/src/components/AccountButton.tsx index da001ceb3..15ff99e3a 100644 --- a/src/components/AccountButton.tsx +++ b/src/components/AccountButton.tsx @@ -34,7 +34,7 @@ const AccountButton = ({ backgroundColor: backgroundColorProps, ...boxProps }: Props) => { - const hitSlop = useHitSlop('l') + const hitSlop = useHitSlop('6') const colors = useColors() const { triggerImpact } = useHaptic() @@ -58,21 +58,26 @@ const AccountButton = ({ > {!!subtitle && ( - + {subtitle} )} - + {title} diff --git a/src/components/AccountListItem.tsx b/src/components/AccountListItem.tsx index 8e25dd25d..6e86d7ef5 100644 --- a/src/components/AccountListItem.tsx +++ b/src/components/AccountListItem.tsx @@ -15,7 +15,7 @@ type Props = { disabled?: boolean } const AccountListItem = ({ selected, account, onPress, disabled }: Props) => { - const { primary } = useColors() + const { primaryText } = useColors() const handlePress = useCallback(() => onPress?.(account), [account, onPress]) @@ -26,34 +26,34 @@ const AccountListItem = ({ selected, account, onPress, disabled }: Props) => { return ( - + {formatAccountAlias(account)} - + {ellipsizeAddress(address || '')} {selected && ( - + )} diff --git a/src/components/AccountSelector.tsx b/src/components/AccountSelector.tsx index 8b7866148..0bb69cec7 100644 --- a/src/components/AccountSelector.tsx +++ b/src/components/AccountSelector.tsx @@ -38,14 +38,17 @@ const AccountSelector = forwardRef( useImperativeHandle(ref, () => ({ show, showAccountTypes })) const bottomSheetModalRef = useRef(null) - const { backgroundStyle } = useOpacity('surfaceSecondary', 1) - const { m, xl } = useSpacing() + const { backgroundStyle } = useOpacity('bg.tertiary', 1) + const spacing = useSpacing() const [accountsType, setAccountsTypes] = useState('all') const snapPoints = useMemo(() => ['60%', '80%'], []) const colors = useColors() - const sheetHandleStyle = useMemo(() => ({ padding: m }), [m]) - const flatListContainerStyle = useMemo(() => ({ paddingBottom: xl }), [xl]) + const sheetHandleStyle = useMemo(() => ({ padding: spacing[4] }), [spacing]) + const flatListContainerStyle = useMemo( + () => ({ paddingBottom: spacing[8] }), + [spacing], + ) const { handleDismiss, setIsShowing } = useBackHandler(bottomSheetModalRef) diff --git a/src/components/AddressBookSelector.tsx b/src/components/AddressBookSelector.tsx index 6a9c39397..5aba69623 100644 --- a/src/components/AddressBookSelector.tsx +++ b/src/components/AddressBookSelector.tsx @@ -45,10 +45,10 @@ const AddressBookSelector = forwardRef( useImperativeHandle(ref, () => ({ showAddressBook })) const bottomSheetModalRef = useRef(null) - const { backgroundStyle } = useOpacity('surfaceSecondary', 1) - const { m } = useSpacing() + const { backgroundStyle } = useOpacity('bg.tertiary', 1) + const spacing = useSpacing() const snapPoints = useMemo(() => ['70%', '90%'], []) - const sheetHandleStyle = useMemo(() => ({ padding: m }), [m]) + const sheetHandleStyle = useMemo(() => ({ padding: spacing[4] }), [spacing]) const homeNav = useNavigation() const [address, setAddress] = useState() const [index, setIndex] = useState() diff --git a/src/components/AutoGasBanner.tsx b/src/components/AutoGasBanner.tsx index d789b7342..7285a7822 100644 --- a/src/components/AutoGasBanner.tsx +++ b/src/components/AutoGasBanner.tsx @@ -168,15 +168,15 @@ const Banner = ({ onLayout, ...rest }: BannerProps) => { return ( @@ -188,8 +188,8 @@ const Banner = ({ onLayout, ...rest }: BannerProps) => { )} & { const BackButton = ({ color = 'primaryText', onPress, - paddingHorizontal = 'lx', + paddingHorizontal = '7', hitSlop, ...props }: Props) => { diff --git a/src/components/BackScreen.tsx b/src/components/BackScreen.tsx index eee02f9cf..1e4c21604 100644 --- a/src/components/BackScreen.tsx +++ b/src/components/BackScreen.tsx @@ -41,7 +41,7 @@ const BackScreen = ({ edges, onClose, hideBack, - headerHorizontalPadding = 'lx', + headerHorizontalPadding = '7', onLayout, onHeaderLayout, title, @@ -54,7 +54,7 @@ const BackScreen = ({ ...rest }: Props) => { const navigation = useNavigation() - const hitSlop = useHitSlop('l') + const hitSlop = useHitSlop('6') const isAndroid = useMemo(() => Platform.OS === 'android', []) return ( @@ -76,21 +76,23 @@ const BackScreen = ({ alignItems="center" justifyContent="center" > - {title} + + {title} + {!hideBack && ( )} {onClose && ( )} @@ -98,8 +100,8 @@ const BackScreen = ({ {TrailingIcon && ( @@ -107,7 +109,7 @@ const BackScreen = ({ )} - + {children} diff --git a/src/components/BackgroundFill.tsx b/src/components/BackgroundFill.tsx index 282e3feca..30a2f4f9a 100644 --- a/src/components/BackgroundFill.tsx +++ b/src/components/BackgroundFill.tsx @@ -7,7 +7,7 @@ import Box from './Box' type Props = BoxProps const BackgroundFill = ({ opacity, backgroundColor, ...boxProps }: Props) => ( { const bottomSheetModalRef = useRef(null) const [contentHeight, setContentHeight] = useState(0) - const { backgroundStyle } = useOpacity('black400', 0.4) + const { backgroundStyle } = useOpacity('gray.700', 0.4) + const colors = useColors() const handleOnClose = useCallback(() => { if (onClose) { @@ -78,6 +79,9 @@ const BlurActionSheet = ({ title, open, children, onClose }: Props) => { backdropComponent={renderBackdrop} backgroundStyle={backgroundStyle} onDismiss={handleOnClose} + handleIndicatorStyle={{ + backgroundColor: colors.primaryText, + }} > diff --git a/src/components/Bullet.tsx b/src/components/Bullet.tsx index 5a0c28ab8..562d1f3b7 100644 --- a/src/components/Bullet.tsx +++ b/src/components/Bullet.tsx @@ -12,13 +12,13 @@ const Bullet = ({ children, color = 'black', style = {} }: Props) => ( - + • - + {children} diff --git a/src/components/ButtonPressable.tsx b/src/components/ButtonPressable.tsx index 717db24d5..a066ffd5c 100644 --- a/src/components/ButtonPressable.tsx +++ b/src/components/ButtonPressable.tsx @@ -11,7 +11,6 @@ import ButtonPressAnimation from './ButtonPressAnimation' import Text from './Text' type Props = BoxProps & { - backgroundColor?: Color backgroundColorDisabled?: Color backgroundColorOpacity?: number backgroundColorDisabledOpacity?: number @@ -116,12 +115,12 @@ const ButtonPressable = ({ } if (pressed || selected) { return backgroundStyle( - backgroundColorPressed || backgroundColor || 'white', + backgroundColorPressed || (backgroundColor as Color) || 'primaryText', backgroundColorOpacityPressed, ) } if (backgroundColor) { - return backgroundStyle(backgroundColor, backgroundColorOpacity) + return backgroundStyle(backgroundColor as Color, backgroundColorOpacity) } }, [ backgroundStyle, @@ -149,7 +148,7 @@ const ButtonPressable = ({ height={height} minHeight={boxProps.minHeight} maxHeight={boxProps.maxHeight} - padding={height || boxProps.maxHeight || padding ? padding : 'l'} + padding={height || boxProps.maxHeight || padding ? padding : '6'} style={backgroundColorStyle} flexDirection="row" justifyContent={Icon ? 'space-between' : 'center'} @@ -160,7 +159,7 @@ const ButtonPressable = ({ {title && ( = ({ height }) => { return ( diff --git a/src/components/CircleLoader.tsx b/src/components/CircleLoader.tsx index 1c1f9553e..fe1f1ba93 100644 --- a/src/components/CircleLoader.tsx +++ b/src/components/CircleLoader.tsx @@ -4,6 +4,7 @@ import { Animated, Easing } from 'react-native' import { BoxProps } from '@shopify/restyle' import CircleLoaderSvg from '@assets/images/circleLoader.svg' import { Color, Theme } from '@theme/theme' +import { useColors } from '@theme/themeHooks' import Box from './Box' import Text from './Text' @@ -16,11 +17,12 @@ const CircleLoader = ({ text, loaderSize = 30, minHeight, - color = 'white', + color = 'primaryText', ...props }: Props) => { const rotateAnim = useRef(new Animated.Value(0)) const opacityAnim = useRef(new Animated.Value(0)) + const colors = useColors() const anim = () => { Animated.loop( @@ -72,14 +74,18 @@ const CircleLoader = ({ ], }} > - + {text && ( {text} diff --git a/src/components/ConfirmPinView.tsx b/src/components/ConfirmPinView.tsx index a3a9c6583..37dc3cad4 100644 --- a/src/components/ConfirmPinView.tsx +++ b/src/components/ConfirmPinView.tsx @@ -86,14 +86,14 @@ const ConfirmPinView = ({ - + {subtitle} - + {clearable && onCancel && ( - - {t('auth.signOut')} + + {t('auth.signOut')} )} diff --git a/src/components/CopyAddress.tsx b/src/components/CopyAddress.tsx index b2f56648e..78236a634 100644 --- a/src/components/CopyAddress.tsx +++ b/src/components/CopyAddress.tsx @@ -40,21 +40,21 @@ const CopyAddress = ({ address, ...boxProps }: Props) => { - + {t('generic.copy')} diff --git a/src/components/CopyAddressPill.tsx b/src/components/CopyAddressPill.tsx index 9babf7f19..2563c8f3a 100644 --- a/src/components/CopyAddressPill.tsx +++ b/src/components/CopyAddressPill.tsx @@ -34,28 +34,30 @@ const CopyAddressPill = ({ ...rest }: BoxProps) => { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', - paddingVertical: spacing.s, - paddingHorizontal: spacing.m, + paddingVertical: spacing[2], + paddingHorizontal: spacing[4], } as ViewStyle }, [spacing]) return ( {ellipsizeAddress(currentAccount?.solanaAddress || '', { numChars: 6, diff --git a/src/components/CountdownTimer.tsx b/src/components/CountdownTimer.tsx index 9d9372e46..9704c2e84 100644 --- a/src/components/CountdownTimer.tsx +++ b/src/components/CountdownTimer.tsx @@ -88,12 +88,12 @@ const CountdownTimer = forwardRef( {...boxProps} > - + {title || ''} diff --git a/src/components/Dot.tsx b/src/components/Dot.tsx index 6a13ae42e..49dceb95a 100644 --- a/src/components/Dot.tsx +++ b/src/components/Dot.tsx @@ -8,11 +8,11 @@ const Dot = ({ filled }: Props) => { ) } diff --git a/src/components/FabButton.tsx b/src/components/FabButton.tsx index e4069167d..c8b8a2be9 100644 --- a/src/components/FabButton.tsx +++ b/src/components/FabButton.tsx @@ -51,7 +51,6 @@ type IconName = | 'browseVoters' type Props = BoxProps & { - backgroundColor?: Color backgroundColorOpacity?: number backgroundColorPressed?: Color backgroundColorOpacityPressed?: number @@ -91,13 +90,13 @@ const ButtonPressable = ({ const backgroundColorStyle = useMemo(() => { if (pressed) { return backgroundStyle( - backgroundColorPressed || backgroundColor || 'white', + backgroundColorPressed || (backgroundColor as Color) || 'primaryText', backgroundColorOpacityPressed, ) } if (!pressed && backgroundColor) { - return backgroundStyle(backgroundColor, backgroundColorOpacity) + return backgroundStyle(backgroundColor as Color, backgroundColorOpacity) } }, [ pressed, @@ -110,7 +109,7 @@ const ButtonPressable = ({ if (title) { return ( - + setPressed(true)} @@ -124,8 +123,8 @@ const ButtonPressable = ({ alignItems="center" justifyContent="center" flexDirection={reverse ? 'row-reverse' : 'row'} - paddingHorizontal="m" - borderRadius="round" + paddingHorizontal="4" + borderRadius="full" {...containerProps} > {icon && ( @@ -139,7 +138,7 @@ const ButtonPressable = ({ )} { const onPressTOS = useCallback(() => Linking.openURL(TERMS_OF_SERVICE), []) return ( - + {t('finePrint.body')}{' '} - + {t('settings.sections.finePrint.termsOfService')}{' '} - + {t('generic.and')}{' '} - + {t('settings.sections.finePrint.privacyPolicy')} - + {t('generic.period')} diff --git a/src/components/GlobalError.tsx b/src/components/GlobalError.tsx index 3c8848a4e..6f1b38afa 100644 --- a/src/components/GlobalError.tsx +++ b/src/components/GlobalError.tsx @@ -30,17 +30,22 @@ export const GlobalError = ({ return ( - + {t('crash.title')} - + {t('crash.subTitle')} - + {error.message} - + {error.stack} @@ -51,11 +56,11 @@ export const GlobalError = ({ width="100%" onPress={handleCopyError} backgroundColorOpacityPressed={0.7} - marginTop="m" - marginBottom="s" - borderColor="white" + marginTop="4" + marginBottom="2" + borderColor="base.white" borderWidth={1} - borderRadius="round" + borderRadius="full" Icon={CopyAddress} title={t('generic.copyToClipboard')} /> @@ -63,11 +68,11 @@ export const GlobalError = ({ width="100%" title={t('crash.resetApp')} onPress={resetErrorBoundary} - borderRadius="round" - backgroundColor="white" + borderRadius="full" + backgroundColor="base.white" backgroundColorOpacityPressed={0.7} titleColorDisabled="secondaryText" - titleColor="black" + titleColor="base.black" /> diff --git a/src/components/HNTKeyboard.tsx b/src/components/HNTKeyboard.tsx index 88924e98e..67a5af6fa 100644 --- a/src/components/HNTKeyboard.tsx +++ b/src/components/HNTKeyboard.tsx @@ -101,7 +101,7 @@ const HNTKeyboardSelector = forwardRef( const { t } = useTranslation() const bottomSheetModalRef = useRef(null) const { symbol, loading: loadingMeta } = useMetaplexMetadata(mint) - const { backgroundStyle } = useOpacity('surfaceSecondary', 1) + const { backgroundStyle } = useOpacity('bg.tertiary', 1) const [value, setValue] = useState('0') const [originalValue, setOriginalValue] = useState('') const [payee, setPayee] = useState() @@ -276,9 +276,9 @@ const HNTKeyboardSelector = forwardRef( {...props} > - + {!loadingMeta && ( - + {t('hntKeyboard.enterAmount', { ticker: symbol || '', })} @@ -287,7 +287,7 @@ const HNTKeyboardSelector = forwardRef( {payer && ( <> @@ -296,7 +296,7 @@ const HNTKeyboardSelector = forwardRef( address={payer?.address || payer?.solanaAddress} /> - + @@ -306,9 +306,9 @@ const HNTKeyboardSelector = forwardRef( )} {payer && balanceForMint && typeof decimals !== 'undefined' ? t('hntKeyboard.hntAvailable', { @@ -340,33 +340,33 @@ const HNTKeyboardSelector = forwardRef( const renderHandle = useCallback(() => { if (!payer) { - return + return } return ( - + {t('payment.max')} @@ -500,22 +500,23 @@ const HNTKeyboardSelector = forwardRef( alignItems="center" > {`${value || '0'} ${symbol || ''}`} {payer && networkFee && ( {t('hntKeyboard.fee', { value: networkFee && humanReadable(networkFee, 9), @@ -525,26 +526,26 @@ const HNTKeyboardSelector = forwardRef( - - + + {t('generic.cancel')} @@ -554,16 +555,16 @@ const HNTKeyboardSelector = forwardRef( minHeight={66} alignItems="center" justifyContent="center" - borderRadius="round" + borderRadius="full" flex={1} backgroundColor={ allowOverdraft || hasSufficientBalance - ? 'surface' - : 'grey300' + ? 'primaryText' + : 'gray.300' } disabled={!allowOverdraft ? !hasSufficientBalance : false} > - {t('generic.confirm')} + {t('generic.confirm')} diff --git a/src/components/HandleBasic.tsx b/src/components/HandleBasic.tsx index 142c46bbf..f097bc6d3 100644 --- a/src/components/HandleBasic.tsx +++ b/src/components/HandleBasic.tsx @@ -6,12 +6,7 @@ import Box from './Box' type Props = BoxProps export default (boxProps: Props) => ( - - + + ) diff --git a/src/components/HeliumActionSheet.tsx b/src/components/HeliumActionSheet.tsx index 3268cd49b..4d422c383 100644 --- a/src/components/HeliumActionSheet.tsx +++ b/src/components/HeliumActionSheet.tsx @@ -57,7 +57,7 @@ const HeliumActionSheet = forwardRef( title, prefix, iconVariant = 'carot', - iconColor: carotColor = 'primary', + iconColor: carotColor = 'primaryText', buttonProps, initialValue, textProps, @@ -75,7 +75,7 @@ const HeliumActionSheet = forwardRef( const [data, setData] = useState>([]) const { t } = useTranslation() const colors = useColors() - const hitSlop = useHitSlop('l') + const hitSlop = useHitSlop('6') useEffect(() => { setData(propsData) @@ -148,20 +148,20 @@ const HeliumActionSheet = forwardRef( const footer = useMemo(() => { return ( - + {t('generic.cancel')} @@ -192,7 +192,7 @@ const HeliumActionSheet = forwardRef( {!!prefix && ( {buttonTitle} diff --git a/src/components/HeliumActionSheetItem.tsx b/src/components/HeliumActionSheetItem.tsx index 1c4a9e98d..280c42301 100644 --- a/src/components/HeliumActionSheetItem.tsx +++ b/src/components/HeliumActionSheetItem.tsx @@ -33,9 +33,9 @@ const HeliumActionSheetItem = ({ const colors = useColors() const color = useMemo((): Color => { - if (selected) return 'purple500' + if (selected) return 'purple.500' if (disabled) return 'secondaryText' - return 'surfaceSecondaryText' + return 'secondaryText' }, [disabled, selected]) return ( @@ -48,7 +48,7 @@ const HeliumActionSheetItem = ({ > {!!Icon && } - + {title} diff --git a/src/components/IndeterminateProgressBar.tsx b/src/components/IndeterminateProgressBar.tsx index 5fc7b1ed8..bc9a681e6 100644 --- a/src/components/IndeterminateProgressBar.tsx +++ b/src/components/IndeterminateProgressBar.tsx @@ -59,7 +59,7 @@ const IndeterminateProgressBar = ({ ...rest }: BoxProps) => { ) => { diff --git a/src/components/KeypadButton.tsx b/src/components/KeypadButton.tsx index 398dca8ea..8f081c0d8 100644 --- a/src/components/KeypadButton.tsx +++ b/src/components/KeypadButton.tsx @@ -16,10 +16,13 @@ type Props = { } const KeypadButton = ({ value, onPress }: Props) => { - const { backgroundStyle: goldBackgroundStyle } = useOpacity('gold', 0.29) - const { gold, surfaceSecondaryText } = useColors() + const { backgroundStyle: goldBackgroundStyle } = useOpacity( + 'yellow.500', + 0.29, + ) + const colors = useColors() const { t } = useTranslation() - const hitSlop = useHitSlop('m') + const hitSlop = useHitSlop('4') const getBackgroundColorStyle = useCallback( (pressed: boolean) => { @@ -38,11 +41,11 @@ const KeypadButton = ({ value, onPress }: Props) => { if (typeof value === 'number') { return ( {value} @@ -59,16 +62,18 @@ const KeypadButton = ({ value, onPress }: Props) => { justifyContent="center" alignItems="center" > - + ) case 'decimal': return ( {decimalSeparator} @@ -76,12 +81,12 @@ const KeypadButton = ({ value, onPress }: Props) => { case 'clear': return ( {t('generic.clear')} @@ -89,17 +94,17 @@ const KeypadButton = ({ value, onPress }: Props) => { case 'cancel': return ( {t('generic.cancel')} ) } }, - [gold, surfaceSecondaryText, t, value], + [colors, t, value], ) return ( @@ -112,7 +117,7 @@ const KeypadButton = ({ value, onPress }: Props) => { height="100%" width="100%" aspectRatio={1} - borderRadius="round" + borderRadius="full" maxWidth={80} maxHeight={80} hitSlop={hitSlop} diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 8ff094f83..fc999aebd 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -4,7 +4,7 @@ import Text from './Text' type Props = { children?: ReactNode; href?: string } const Link = ({ children, href }: Props) => ( - href && Linking.openURL(href)}> + href && Linking.openURL(href)}> {children} ) diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 48ea2edc5..e94e89f74 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -49,26 +49,28 @@ const ListItem = ({ alignItems="center" flex={1} flexDirection="row" - paddingVertical="m" - borderBottomColor="black900" + paddingVertical="4" + borderBottomColor="border.primary" borderBottomWidth={hasDivider ? 1 : 0} onPress={handlePress} hasPressedState={hasPressedState} {...rest} > {Icon && Icon} - - {title} + + + {title} + {subtitle && ( {subtitle} )} - + {selected ? ( = ({ markdown }) => { markdown={markdown} style={{ hr: { - marginTop: theme.spacing.m, + marginTop: theme.spacing[4], }, blockquote: { - ...theme.textVariants.body2, + ...theme.textVariants.textSmRegular, color: theme.colors.primaryText, backgroundColor: 'transparent', }, body: { - ...theme.textVariants.body2, + ...(theme.textVariants.textSmRegular as any), color: theme.colors.primaryText, }, heading1: { - ...theme.textVariants.subtitle1, + ...theme.textVariants.textXlMedium, color: theme.colors.primaryText, - paddingTop: theme.spacing.ms, - paddingBottom: theme.spacing.ms, + paddingTop: theme.spacing[4], + paddingBottom: theme.spacing[4], }, heading2: { - ...theme.textVariants.subtitle2, + ...theme.textVariants.textSmMedium, color: theme.colors.primaryText, - paddingTop: theme.spacing.ms, - paddingBottom: theme.spacing.ms, + paddingTop: theme.spacing[4], + paddingBottom: theme.spacing[4], }, heading3: { - ...theme.textVariants.subtitle3, + ...theme.textVariants.textXsMedium, color: theme.colors.primaryText, - paddingTop: theme.spacing.ms, - paddingBottom: theme.spacing.ms, + paddingTop: theme.spacing[4], + paddingBottom: theme.spacing[4], }, }} > diff --git a/src/components/MemoInput.tsx b/src/components/MemoInput.tsx index 0ad10a2ad..aeccb6254 100644 --- a/src/components/MemoInput.tsx +++ b/src/components/MemoInput.tsx @@ -76,7 +76,11 @@ const MemoInput = ({ onChangeText, value, ...boxProps }: Props) => { }} /> - + {t('payment.memoBytes', { used: bytesUsed, total: MEMO_MAX_BYTES, diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index ab4bdcbd5..5ac2e949b 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -59,7 +59,7 @@ const NavBarItem = ({ key={value} onPress={onPress} onLayout={onLayout} - marginRight="none" + marginRight="0" hitSlop={hitSlop} alignItems="center" flexGrow={1} @@ -67,10 +67,10 @@ const NavBarItem = ({ > @@ -79,7 +79,7 @@ const NavBarItem = ({ {hasBadge && ( @@ -127,7 +127,7 @@ const NavBar = ({ onItemLongPress, ...containerProps }: Props) => { - const hitSlop = useVerticalHitSlop('l') + const hitSlop = useVerticalHitSlop('6') const [itemRects, setItemRects] = useState>() const offset = useSharedValue(null) @@ -189,8 +189,12 @@ const NavBar = ({ ]) return ( - - + + {items} diff --git a/src/components/NetworkAwareStatusBar.tsx b/src/components/NetworkAwareStatusBar.tsx deleted file mode 100644 index b0c00f688..000000000 --- a/src/components/NetworkAwareStatusBar.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import { StatusBar } from 'react-native' -import { useColors, useColorScheme } from '@theme/themeHooks' - -const NetworkAwareStatusBar = () => { - const colors = useColors() - const theme = useColorScheme() - - return ( - - ) -} - -export default NetworkAwareStatusBar diff --git a/src/components/Pill.tsx b/src/components/Pill.tsx index 0af433008..823a7a752 100644 --- a/src/components/Pill.tsx +++ b/src/components/Pill.tsx @@ -32,41 +32,41 @@ export const Pill = memo( blue: { border: 'blueBorder', background: 'blue950', - text: 'blue500', + text: 'blue.500', }, green: { - border: 'greenBorder', - background: 'green950', - text: 'green500', + border: 'green.300', + background: 'green.950', + text: 'green.500', }, red: { - border: 'redBorder', - background: 'matchaRed950', - text: 'matchaRed500', + border: 'ros.300', + background: 'ros.950', + text: 'ros.500', }, orange: { - border: 'orangeBorder', - background: 'orange950', - text: 'orange500', + border: 'orange.300', + background: 'orange.950', + text: 'orange.500', }, black: { background: 'black', - text: 'white', + text: 'base.white', border: 'black', }, hntBlue: { background: 'hntBlue', - text: 'white', + text: 'base.white', border: 'black', }, iotGreen: { background: 'iotGreen', - text: 'white', + text: 'base.white', border: 'black', }, mobileBlue: { background: 'mobileBlue', - text: 'white', + text: 'base.white', border: 'black', }, } @@ -74,7 +74,7 @@ export const Pill = memo( diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index bdc2f4710..c1b84c1c8 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -46,7 +46,7 @@ const ProgressBar = ({ diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx index aa3c31699..67060f77e 100644 --- a/src/components/RadioButton.tsx +++ b/src/components/RadioButton.tsx @@ -16,18 +16,18 @@ const RadioButton: React.FC = ({ }) => { return ( onClick()} @@ -35,11 +35,11 @@ const RadioButton: React.FC = ({ - onClick()} color="white"> + onClick()} color="primaryText"> {label} diff --git a/src/components/RevealWords.tsx b/src/components/RevealWords.tsx index 44900ec38..68eeeb244 100644 --- a/src/components/RevealWords.tsx +++ b/src/components/RevealWords.tsx @@ -12,6 +12,7 @@ import TouchableOpacityBox from '@components/TouchableOpacityBox' import useCopyText from '@hooks/useCopyText' import useHaptic from '@hooks/useHaptic' import { FadeIn } from 'react-native-reanimated' +import { useSafeAreaInsets } from 'react-native-safe-area-context' type Props = { mnemonic: string[] @@ -24,6 +25,7 @@ const RevealWords = ({ mnemonic, onDone, ListHeaderComponent }: Props) => { const { secondaryText } = useColors() const copyText = useCopyText() const { triggerImpact } = useHaptic() + const { bottom } = useSafeAreaInsets() const handleCopySeedPhrase = useCallback(() => { triggerImpact('light') @@ -38,13 +40,15 @@ const RevealWords = ({ mnemonic, onDone, ListHeaderComponent }: Props) => { ({ item, index }: { item: string; index: number }) => { return ( { const contentContainerStyle = useMemo( () => ({ flexGrow: 1, - paddingHorizontal: spacing.l, + paddingHorizontal: spacing[4], }), [spacing], ) @@ -85,13 +89,13 @@ const RevealWords = ({ mnemonic, onDone, ListHeaderComponent }: Props) => { justifyContent="center" alignItems="center" flexDirection="row" - marginTop="m" - marginBottom="xl" + marginTop="4" + marginBottom="8" > { @@ -131,6 +135,7 @@ const RevealWords = ({ mnemonic, onDone, ListHeaderComponent }: Props) => { ListFooterComponentStyle={{ flexGrow: 1, justifyContent: 'flex-end', + paddingBottom: bottom, }} renderItem={renderItem} contentContainerStyle={contentContainerStyle} diff --git a/src/components/RewardItem.tsx b/src/components/RewardItem.tsx index e33e4e3d7..0adf3e397 100644 --- a/src/components/RewardItem.tsx +++ b/src/components/RewardItem.tsx @@ -28,8 +28,8 @@ const RewardItem = ({ mint, amount, hasMore, ...rest }: RewardItemProps) => { return ( { {pendingRewardsString} - + {symbol} diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx index 33134ecc1..042227974 100644 --- a/src/components/SearchInput.tsx +++ b/src/components/SearchInput.tsx @@ -40,7 +40,7 @@ const SearchInput = ({ return ( ) diff --git a/src/components/SecretKeyWarningScreen.tsx b/src/components/SecretKeyWarningScreen.tsx index f39cfb654..46c91f873 100644 --- a/src/components/SecretKeyWarningScreen.tsx +++ b/src/components/SecretKeyWarningScreen.tsx @@ -21,7 +21,7 @@ const SecretKeyWarningScreen = ({ children }: { children: ReactNode }) => { const [secondsPassed, setSecondsPassed] = useState(0) const animValue = useSharedValue(1) const [animationComplete, setAnimationComplete] = useState(false) - const { primaryBackground, red500 } = useColors() + const { primaryBackground, ...colors } = useColors() useEffect(() => { // set interval to update text every second @@ -85,18 +85,14 @@ const SecretKeyWarningScreen = ({ children }: { children: ReactNode }) => { backgroundColor="primaryBackground" flex={1} justifyContent="center" - paddingHorizontal="xl" + paddingHorizontal="8" height="100%" > - - + + { {t('secretKeyWarningScreen.body')} diff --git a/src/components/SegmentedControl.tsx b/src/components/SegmentedControl.tsx new file mode 100644 index 000000000..90f8ec2d6 --- /dev/null +++ b/src/components/SegmentedControl.tsx @@ -0,0 +1,107 @@ +import React, { memo, useCallback, useMemo } from 'react' +import { BoxProps } from '@shopify/restyle' +import useLayoutWidth from '@hooks/useLayoutWidth' +import { GestureResponderEvent } from 'react-native' +import { useAnimatedStyle, withSpring } from 'react-native-reanimated' +import { Theme } from '../theme/theme' +import { Box, ReAnimatedBox, Text } from '.' +import TouchableOpacityBox from './TouchableOpacityBox' + +type Option = { value: string; label: string } + +const SegmentedItem = ({ + option, + selected, + onSelected, +}: { + option: Option + selected: boolean + onSelected: ((event: GestureResponderEvent) => void) | undefined +}) => { + return ( + + + {option.label} + + + ) +} + +type Props = { + options: Option[] + selectedIndex: number + onItemSelected: (index: number) => void +} & BoxProps +const SegmentedControl = ({ + options, + onItemSelected, + selectedIndex, + ...boxProps +}: Props) => { + const [containerWidth, setContainerWidth] = useLayoutWidth() + + const itemWidth = useMemo( + () => containerWidth / options.length, + [containerWidth, options.length], + ) + + const handleItemSelected = useCallback( + (index: number) => () => { + onItemSelected(index) + }, + [onItemSelected], + ) + + const selectedStyle = useAnimatedStyle(() => { + return { + left: withSpring(itemWidth * selectedIndex, { + stiffness: 70, + }), + } + }, [itemWidth, selectedIndex]) + + return ( + + + + {options.map((option, index) => ( + + ))} + + + ) +} + +export default memo(SegmentedControl) diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 3710c2a2e..8fc8fda60 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -1,3 +1,4 @@ +import { useColors } from '@theme/themeHooks' import ChevronDown from '@assets/images/chevronDown.svg' import { BoxProps } from '@shopify/restyle' import { Theme } from '@theme/theme' @@ -26,15 +27,16 @@ export const Select: React.FC = ({ }) => { const [filtersOpen, setFiltersOpen] = useState(false) const { t } = useTranslation() + const colors = useColors() return ( <> = ({ > {options.find((o) => o.value === value)?.icon} - + {options.find((o) => o.value === value)?.label} - + const SubmitButton = ({ - color = 'blueBright500', + color = 'blue.light-500', onSubmit, title, disabled = false, - backgroundColor = 'secondaryIcon', + backgroundColor = 'secondaryText', ...boxProps }: Props) => { - const { surfaceSecondary, secondaryText, ...rest } = useColors() + const { secondaryText, ...rest } = useColors() const colorActual = rest[color as keyof typeof rest] const backgroundActual = rest[backgroundColor as keyof typeof rest] const icon = useMemo( @@ -39,18 +39,18 @@ const SubmitButton = ({ paddingLeft: 30, }, railStyles: { - backgroundColor: surfaceSecondary, - borderColor: surfaceSecondary, + backgroundColor: rest['bg.tertiary'], + borderColor: rest['bg.tertiary'], paddingLeft: 8, }, }), - [colorActual, disabled, secondaryText, surfaceSecondary], + [colorActual, disabled, secondaryText, rest], ) return ( diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx index 216c46129..a27d6523d 100644 --- a/src/components/Surface.tsx +++ b/src/components/Surface.tsx @@ -12,7 +12,7 @@ type Props = BoxProps & { } const Surface = ({ - backgroundColor = 'surface', + backgroundColor = 'cardBackground', children, style, ...boxProps @@ -31,7 +31,7 @@ const Surface = ({ return ( { - const hitSlop = useVerticalHitSlop('l') + const hitSlop = useVerticalHitSlop('6') const [itemRects, setItemRects] = useState>() const offset = useSharedValue(null) const { triggerImpact } = useHaptic() @@ -190,7 +190,7 @@ const TabBar = ({ return ( - + {items} {hasIndicator && ( @@ -204,7 +204,9 @@ const TabBar = ({ /> )} - {hasDivider && } + {hasDivider && ( + + )} ) } diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx index 5167f3c08..81f2322fc 100644 --- a/src/components/TextInput.tsx +++ b/src/components/TextInput.tsx @@ -8,7 +8,7 @@ import { import { TextInput, TextStyle } from 'react-native' import tinycolor from 'tinycolor2' import { SvgProps } from 'react-native-svg' -import { Color, theme, Theme } from '@theme/theme' +import { Color, darkTheme, Theme } from '@theme/theme' import { useColors, useInputVariants, useTextVariants } from '@theme/themeHooks' import Box from './Box' import Text from './Text' @@ -49,8 +49,8 @@ const TI = forwardRef( TrailingIcon, onTrailingIconPress, TrailingIconOptions = { - paddingVertical: 'm', - paddingHorizontal: 's', + paddingVertical: '4', + paddingHorizontal: '2', }, ...rest }: Props, @@ -64,7 +64,7 @@ const TI = forwardRef( const findColor = () => { if (placeholderTextColor) return colors[placeholderTextColor] - return colors[theme.inputVariants.regular.color as Color] + return colors[darkTheme.inputVariants.regular.color as Color] } const color = findColor() @@ -89,8 +89,8 @@ const TI = forwardRef( {floatingLabel && ( {floatingLabel} @@ -98,7 +98,7 @@ const TI = forwardRef( )} {optional && ( - + )} diff --git a/src/components/TextTransform.tsx b/src/components/TextTransform.tsx index 9c1582c45..f16156f0d 100644 --- a/src/components/TextTransform.tsx +++ b/src/components/TextTransform.tsx @@ -7,18 +7,18 @@ import Text from './Text' const getComponents = (variant?: ResponsiveValue) => ({ b: , - errorText: , + errorText: , primaryText: , secondaryText: , - havelockBlue: , - jazzberryJam: , - red500: , - greenBright500: , - blueBright500: , - caribbeanGreen: , + 'blue.500': , + 'pink.500': , + 'ros.500': , + 'green.light-500': , + 'blue.light-500': , + 'green.400': , codeHighlight: ( { - const hitSlop = useHitSlop('l') + const hitSlop = useHitSlop('6') const colors = useColors() const { triggerImpact } = useHaptic() @@ -66,20 +66,25 @@ const TokenButton = ({ > - + {title} {!!subtitle && ( - + {subtitle} )} diff --git a/src/components/TokenIcon.tsx b/src/components/TokenIcon.tsx index bb562664e..c0228e32b 100644 --- a/src/components/TokenIcon.tsx +++ b/src/components/TokenIcon.tsx @@ -22,10 +22,10 @@ const TokenIcon = ({ size = 40, img }: Props) => { return ( ) } diff --git a/src/components/TokenPill.tsx b/src/components/TokenPill.tsx index ff73d0642..e0dfe485d 100644 --- a/src/components/TokenPill.tsx +++ b/src/components/TokenPill.tsx @@ -16,8 +16,8 @@ export const TokenPill = memo( isActive = false, isDisabled = false, onPress, - activeColor = 'black', - inactiveColor = 'secondary', + activeColor = 'primaryBackground', + inactiveColor = 'bg.tertiary', ...rest }: { mint: PublicKey @@ -43,10 +43,10 @@ export const TokenPill = memo( disabled: boolean }) => { if (disabled) { - return generateBackgroundStyle('surfaceSecondary', 0.5) + return generateBackgroundStyle('bg.tertiary', 0.5) } if (pressed) { - return generateBackgroundStyle(activeColor || 'surfaceSecondary', 1.0) + return generateBackgroundStyle(activeColor || 'bg.tertiary', 1.0) } if (active) { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -77,30 +77,30 @@ export const TokenPill = memo( rest.style ? rest.style : {}, ]} height={45} - borderRadius="round" + borderRadius="full" flexDirection="row" alignItems="center" - shadowColor="black" + shadowColor="base.black" shadowOpacity={0.2} shadowOffset={{ width: 0, height: 3 }} shadowRadius={3} - padding="s" - paddingRight="m" + padding="2" + paddingRight="4" > @@ -108,7 +108,7 @@ export const TokenPill = memo( {hasCarot && ( - + )} diff --git a/src/components/TokenSelector.tsx b/src/components/TokenSelector.tsx index 73323464b..1922dea0f 100644 --- a/src/components/TokenSelector.tsx +++ b/src/components/TokenSelector.tsx @@ -46,7 +46,7 @@ const ProvidedListItem = ({ Icon={json?.image ? : undefined} onPress={onPress} selected={selected} - paddingStart="l" + paddingStart="6" hasDivider /> ) @@ -69,7 +69,7 @@ const TokenSelector = forwardRef( const { bottom } = useSafeAreaInsets() const bottomSheetModalRef = useRef(null) - const { backgroundStyle } = useOpacity('surfaceSecondary', 1) + const { backgroundStyle } = useOpacity('bg.tertiary', 1) const { handleDismiss, setIsShowing } = useBackHandler(bottomSheetModalRef) const { secondaryText } = useColors() diff --git a/src/components/TouchableContainer.tsx b/src/components/TouchableContainer.tsx index 02e795b64..da22629d7 100644 --- a/src/components/TouchableContainer.tsx +++ b/src/components/TouchableContainer.tsx @@ -31,8 +31,8 @@ const TouchableContainer = ({ pressableStyles, onLayout, hitSlop, - backgroundColor = 'surfaceSecondary', - backgroundColorPressed = 'black500', + backgroundColor = 'bg.tertiary', + backgroundColorPressed = 'gray.800', ...boxProps }: ButtonPressAnimationProps & { backgroundColorPressed?: BoxProps['backgroundColor'] diff --git a/src/components/TreasuryWarningScreen.tsx b/src/components/TreasuryWarningScreen.tsx index a191d1979..70032bc31 100644 --- a/src/components/TreasuryWarningScreen.tsx +++ b/src/components/TreasuryWarningScreen.tsx @@ -89,18 +89,14 @@ const TreausuryWarningScreen = ({ children }: { children: ReactNode }) => { backgroundColor="primaryBackground" flex={1} justifyContent="center" - paddingHorizontal="xl" + paddingHorizontal="8" height="100%" > - + { {t('swapsScreen.treasurySwapWarningBody')} diff --git a/src/components/WarningBanner.tsx b/src/components/WarningBanner.tsx index 1b3cf0b56..9b12fa7fb 100644 --- a/src/components/WarningBanner.tsx +++ b/src/components/WarningBanner.tsx @@ -68,15 +68,15 @@ const Banner = ({ type, onLayout, ...rest }: BannerProps) => { return ( { { const StatusBanner = () => { const { t } = useTranslation() const incidents = useStatusPage() - const hitSlop = useHitSlop('m') + const hitSlop = useHitSlop('4') const { primaryText } = useColors() const getAlertDescription = useCallback( @@ -53,7 +53,7 @@ const StatusBanner = () => { return ( { - if (compact) return 'm' - if (maxCompact) return 's' + if (compact) return '4' + if (maxCompact) return '2' return undefined }, [compact, maxCompact]) @@ -118,10 +118,10 @@ const AccountActionBar = ({ > {hasBottomTitle && ( - + {hasBottomTitle && ( - + {hasBottomTitle && ( - + {hasBottomTitle && ( - + - + - + {`${balanceToDisplay} `} @@ -81,7 +85,7 @@ const CheckableTokenListItem = ({ {symbol && ( @@ -95,7 +99,7 @@ const CheckableTokenListItem = ({ true: colors.primaryText, false: colors.transparent10, }} - onCheckColor={colors.secondary} + onCheckColor={colors.secondaryText} onTintColor={colors.primaryText} tintColor={colors.transparent10} onFillColor={colors.primaryText} @@ -112,7 +116,7 @@ const CheckableTokenListItem = ({ const AccountManageTokenListScreen: React.FC = () => { const navigation = useNavigation() const { primaryText } = useColors() - const hitSlop = useHitSlop('l') + const hitSlop = useHitSlop('6') const { visibleTokens, setVisibleTokens } = useVisibleTokens() const { tokenAccounts } = useBalance() const mints = useMemo(() => { @@ -164,11 +168,11 @@ const AccountManageTokenListScreen: React.FC = () => { flexDirection="row" justifyContent="space-between" alignItems="center" - borderTopStartRadius="xl" - borderTopEndRadius="xl" - marginBottom="m" + borderTopStartRadius="4xl" + borderTopEndRadius="4xl" + marginBottom="4" > - + @@ -38,7 +42,7 @@ const EscrowDetails = () => { return ( - + {t('accountsScreen.receivedBalance', { amount: humanReadable( new BN(iotEscrowAcct?.amount?.toString() || '0').add( @@ -80,10 +84,15 @@ const AccountTokenBalance = ({ {!showTicker && (loadingOwned ? ( - + ) : ( {showTicker && ( { numberOfLines={1} adjustsFontSizeToFit maxFontSizeMultiplier={1} + color="primaryText" {...textProps} > {balanceString || ' '} diff --git a/src/features/account/AccountTokenList.tsx b/src/features/account/AccountTokenList.tsx index 5524b768e..ba8068a80 100644 --- a/src/features/account/AccountTokenList.tsx +++ b/src/features/account/AccountTokenList.tsx @@ -196,10 +196,10 @@ const AccountTokenList = ({ onLayout }: Props) => { onPress={onManageTokenList} flexDirection="row" justifyContent="center" - mt="m" + mt="4" > - + {t('accountTokenList.manage')} diff --git a/src/features/account/AccountTokenScreen.tsx b/src/features/account/AccountTokenScreen.tsx index e6407a5f5..3eaa0809b 100644 --- a/src/features/account/AccountTokenScreen.tsx +++ b/src/features/account/AccountTokenScreen.tsx @@ -217,7 +217,7 @@ const AccountTokenScreen = () => { left={0} right={0} backgroundColor="primaryBackground" - paddingHorizontal="l" + paddingHorizontal="6" flexDirection="row" justifyContent="space-between" alignItems="center" @@ -225,10 +225,10 @@ const AccountTokenScreen = () => { borderBottomWidth={1} borderBottomColor="secondaryText" borderTopColor="secondaryText" - marginBottom="m" + marginBottom="4" > { {filterName} - + {t('accountsScreen.filter')} @@ -255,7 +255,7 @@ const AccountTokenScreen = () => { return ( { return ( { }} > @@ -309,8 +309,8 @@ const AccountTokenScreen = () => { return ( { ) const backgroundComponent = useCallback( - () => , + () => , [], ) @@ -429,7 +429,7 @@ const AccountTokenScreen = () => { return ( { }} > { { {!!symbol && ( )} @@ -486,18 +486,18 @@ const AccountTokenScreen = () => { - - + + - + {!!symbol && ( )} { <> - + {t('accountsScreen.solWarning')} showModal({ type: 'InsufficientSolConversion' }) } > - + {t('accountsScreen.solSwap')} diff --git a/src/features/account/AccountView.tsx b/src/features/account/AccountView.tsx index 32e758fe6..3fd3a3d7c 100644 --- a/src/features/account/AccountView.tsx +++ b/src/features/account/AccountView.tsx @@ -59,7 +59,7 @@ const AccountView = ({ selectedBalance, ...boxProps }: Props) => { {!balanceString && ( { {balanceString} @@ -104,7 +104,7 @@ const AccountView = ({ selectedBalance, ...boxProps }: Props) => { { const listAnimatedPos = useSharedValue(0) const [topHeaderHeight, setTopHeaderHeight] = useState(0) const topHeaderRef = useRef(null) - const bottomSheetStyle = useBackgroundStyle('surfaceSecondary') + const bottomSheetStyle = useBackgroundStyle('cardBackground') const dispatch = useAppDispatch() const { triggerImpact } = useHaptic() const colors = useColors() @@ -265,16 +265,16 @@ const AccountsScreen = () => { - + @@ -337,7 +337,6 @@ const AccountsScreen = () => { ref={bottomSheetRef} snapPoints={snapPoints || [10, 100]} backgroundStyle={bottomSheetStyle} - detached animatedPosition={listAnimatedPos} handleIndicatorStyle={handleIndicatorStyle} > diff --git a/src/features/account/AccountsTopNav.tsx b/src/features/account/AccountsTopNav.tsx index 0c6e40928..f36c027f8 100644 --- a/src/features/account/AccountsTopNav.tsx +++ b/src/features/account/AccountsTopNav.tsx @@ -86,24 +86,25 @@ const AccountsTopNav = ({ onPressWallet, onLayout }: Props) => { > - + - + { - + {hasUnreadNotifications && ( { alignItems="center" top={14} right={12} - backgroundColor="black" - borderRadius="round" + backgroundColor="base.black" + borderRadius="full" height={10} width={10} > )} - - + + diff --git a/src/features/account/AirdropScreen.tsx b/src/features/account/AirdropScreen.tsx index 5db0db711..c879c5d03 100644 --- a/src/features/account/AirdropScreen.tsx +++ b/src/features/account/AirdropScreen.tsx @@ -146,17 +146,17 @@ const AirdropScreen = () => { }, [ring, ringDrop]) return ( - - + + - + {t('airdropScreen.title')} {t('airdropScreen.subtitle')} @@ -165,7 +165,7 @@ const AirdropScreen = () => { flex={1} justifyContent="center" alignItems="center" - marginBottom="l" + marginBottom="6" > @@ -176,18 +176,23 @@ const AirdropScreen = () => { - + {errorMessage ? t('airdropScreen.error') : ''} { : '' } disabled={loading} - marginVertical="l" - marginHorizontal="l" + marginVertical="6" + marginHorizontal="6" LeadingComponent={ - loading && + loading && } /> diff --git a/src/features/account/ConnectedWallets.tsx b/src/features/account/ConnectedWallets.tsx index 228e5fa72..cadcbdb2a 100644 --- a/src/features/account/ConnectedWallets.tsx +++ b/src/features/account/ConnectedWallets.tsx @@ -1,7 +1,6 @@ import Add from '@assets/images/add.svg' import Checkmark from '@assets/images/checkmark.svg' import AccountIcon from '@components/AccountIcon' -import BackgroundFill from '@components/BackgroundFill' import Box from '@components/Box' import Text from '@components/Text' import TouchableContainer from '@components/TouchableContainer' @@ -55,7 +54,7 @@ const ConnectedWallets = forwardRef( ref: Ref, ) => { useImperativeHandle(ref, () => ({ show, hide })) - const { backgroundStyle } = useOpacity('surfaceSecondary', 1) + const { backgroundStyle } = useOpacity('bg.tertiary', 1) const keyExtractor = useCallback((item) => item.address, []) const { primaryText, secondaryText } = useColors() const { t } = useTranslation() @@ -204,19 +203,16 @@ const ConnectedWallets = forwardRef( onPress={handleAccountChange(item)} onLayout={setListItemHeight} flexDirection="row" - paddingHorizontal="l" - paddingVertical="lm" - paddingLeft="xxl" + paddingHorizontal="6" + paddingVertical="5" + paddingLeft="12" alignItems="center" > - {item.netType === NetTypes.TESTNET && ( - - )} {item.alias} @@ -242,38 +238,20 @@ const ConnectedWallets = forwardRef( - + {t('connectedWallets.add')} - - {enableTestnet && ( - - - - - {t('connectedWallets.addTestnet')} - - - )} ), - [enableTestnet, handleAddNew, primaryText, t, setFooterHeight], + [handleAddNew, primaryText, t, setFooterHeight], ) const renderBackdrop = useCallback( @@ -351,11 +329,11 @@ const ConnectedWallets = forwardRef( onLayout={setSectionHeaderHeight} flexDirection="row" alignItems="center" - backgroundColor="surfaceSecondary" - paddingHorizontal="l" + backgroundColor="bg.tertiary" + paddingHorizontal="6" > - + {t('connectedWallets.addSub')} diff --git a/src/features/account/TokenListItem.tsx b/src/features/account/TokenListItem.tsx index db3e413ba..bbf948fc3 100644 --- a/src/features/account/TokenListItem.tsx +++ b/src/features/account/TokenListItem.tsx @@ -42,19 +42,24 @@ export const TokenSkeleton = () => { flexDirection="row" height={ITEM_HEIGHT} alignItems="center" - paddingHorizontal="l" + paddingHorizontal="6" borderBottomColor="primaryBackground" borderBottomWidth={1} > - - - + + + @@ -94,8 +99,8 @@ export const TokenListItem = ({ mint }: Props) => { flexDirection="row" minHeight={ITEM_HEIGHT} alignItems="center" - paddingHorizontal="m" - paddingVertical="m" + paddingHorizontal="4" + paddingVertical="4" borderBottomColor="primaryBackground" borderBottomWidth={1} > @@ -103,36 +108,36 @@ export const TokenListItem = ({ mint }: Props) => { ) : ( )} - + {loadingOwned ? ( - - + + ) : ( {`${balanceToDisplay} `} @@ -141,7 +146,7 @@ export const TokenListItem = ({ mint }: Props) => { {symbol && ( @@ -150,7 +155,7 @@ export const TokenListItem = ({ mint }: Props) => { )} {mint.equals(NATIVE_MINT) && (amount || 0) < MIN_BALANCE_THRESHOLD && ( - + )} @@ -261,8 +266,8 @@ export const TokenListGovItem = ({ mint }: { mint: PublicKey }) => { flexDirection="row" minHeight={ITEM_HEIGHT} alignItems="center" - paddingHorizontal="m" - paddingVertical="m" + paddingHorizontal="4" + paddingVertical="4" borderBottomColor="primaryBackground" borderBottomWidth={1} > @@ -270,8 +275,8 @@ export const TokenListGovItem = ({ mint }: { mint: PublicKey }) => { ) : ( @@ -280,16 +285,16 @@ export const TokenListGovItem = ({ mint }: { mint: PublicKey }) => { position="absolute" top={-6} right={-8} - backgroundColor="bottomSheetBg" + backgroundColor="cardBackground" justifyContent="center" - borderRadius="round" + borderRadius="full" alignItems="center" height={22} width={22} > { )} - + {loadingAmount ? ( - - + + ) : ( {`${balanceToDisplay} `} diff --git a/src/features/account/TransactionDetail.tsx b/src/features/account/TransactionDetail.tsx index 5e8d7c046..86bc9b052 100644 --- a/src/features/account/TransactionDetail.tsx +++ b/src/features/account/TransactionDetail.tsx @@ -103,7 +103,7 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => { bottom={0} left={0} right={0} - borderRadius="xl" + borderRadius="4xl" overflow="hidden" /> ) @@ -130,7 +130,7 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => { { index: index + 1, })} bodyText={amt} - bodyColor="blueBright500" + bodyColor="blue.light-500" /> ))} @@ -156,7 +156,7 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => { ))} diff --git a/src/features/account/TransactionLineItem.tsx b/src/features/account/TransactionLineItem.tsx index 9753652c5..da2cca679 100644 --- a/src/features/account/TransactionLineItem.tsx +++ b/src/features/account/TransactionLineItem.tsx @@ -37,8 +37,8 @@ const TransactionLineItem = ({ bodyEndColor, }: Props) => { const { primaryText } = useColors() - const linkHitSlop = useHitSlop('s') - const copyHitSlop = useVerticalHitSlop('s') + const linkHitSlop = useHitSlop('2') + const copyHitSlop = useVerticalHitSlop('2') const { contacts, sortedAccounts } = useAccountStorage() const copyText = useCopyText() const navigation = useNavigation() @@ -113,15 +113,15 @@ const TransactionLineItem = ({ return ( @@ -148,7 +148,7 @@ const TransactionLineItem = ({ numberOfLines={3} adjustsFontSizeToFit flexShrink={1} - variant="body1" + variant="textMdRegular" color={bodyColor || 'primaryText'} marginLeft={icon ? 'xs' : 'none'} > @@ -162,7 +162,7 @@ const TransactionLineItem = ({ adjustsFontSizeToFit flex={1} textAlign="right" - variant="body1" + variant="textMdRegular" color={bodyEndColor || 'primaryText'} marginLeft={icon ? 'xs' : 'none'} > @@ -179,7 +179,7 @@ const TransactionLineItem = ({ diff --git a/src/features/account/TxnListItem.tsx b/src/features/account/TxnListItem.tsx index fab5acc52..4abf2fbe0 100644 --- a/src/features/account/TxnListItem.tsx +++ b/src/features/account/TxnListItem.tsx @@ -32,7 +32,7 @@ const TxnListItem = ({ mint, item, now, isLast, onPress }: Props) => { flexDirection="row" onPress={handlePress} > - {listIcon} + {listIcon} {item.pending && ( { )} - - {title} - + + {title} + {time} - - + + {amt} diff --git a/src/features/account/useTxn.tsx b/src/features/account/useTxn.tsx index 1e97899dc..f6d1999f6 100644 --- a/src/features/account/useTxn.tsx +++ b/src/features/account/useTxn.tsx @@ -96,7 +96,7 @@ const useTxn = ( const color = useMemo((): Color => { switch (item?.type as TxnType) { case 'payment_v2': - return isSending ? 'blueBright500' : 'greenBright500' + return isSending ? 'blue.light-500' : 'green.light-500' default: return 'primaryText' } diff --git a/src/features/activity/ActivityDetailsScreen.tsx b/src/features/activity/ActivityDetailsScreen.tsx index 0093c4bf7..36e27ab9d 100644 --- a/src/features/activity/ActivityDetailsScreen.tsx +++ b/src/features/activity/ActivityDetailsScreen.tsx @@ -46,7 +46,7 @@ function ScamWarningImageBox(props: any): React.ReactElement { > { backgroundColor: 'rgba(0, 0, 0, 0.5)', }} > - + {t('activityScreen.scamWarning')} setDismissed(true)} - borderRadius="round" - borderColor="red500" + borderRadius="full" + borderColor="ros.500" borderWidth={1} - px="m" - titleColorDisabled="black500" - titleColor="red500" + px="4" + titleColorDisabled="gray.800" + titleColor="ros.500" fontWeight="500" - marginTop="l" + marginTop="6" /> @@ -128,7 +128,7 @@ const ActivityDetailsScreen = () => { const confirmedSig = transaction as ConfirmedSignatureInfo if (enrichedTx.transactionError || confirmedSig.err) { - return + return } const userSignedTransaction = wallet && enrichedTx.signers?.includes(wallet.toBase58()) @@ -141,8 +141,8 @@ const ActivityDetailsScreen = () => { if (!nft?.metadata.image) { return ( { }} width={250} height={250} - borderRadius="xxl" + borderRadius="4xl" /> ) } @@ -178,15 +178,15 @@ const ActivityDetailsScreen = () => { }} width={250} height={250} - borderRadius="xxl" + borderRadius="4xl" /> ) } return userSignedTransaction ? ( - + ) : ( - + ) }, [colors, transaction, wallet]) @@ -224,13 +224,13 @@ const ActivityDetailsScreen = () => { } return ( - + {fromAccount && ( @@ -238,8 +238,8 @@ const ActivityDetailsScreen = () => { {toAccount && ( )} @@ -352,43 +352,47 @@ const ActivityDetailsScreen = () => { - + {activityImage} {title} {description} - + {dateLabel} {AccountAddressListItems} diff --git a/src/features/activity/ActivityListItem.tsx b/src/features/activity/ActivityListItem.tsx index 7748c5658..099aa9d55 100644 --- a/src/features/activity/ActivityListItem.tsx +++ b/src/features/activity/ActivityListItem.tsx @@ -95,26 +95,26 @@ const ActivityListItem = ({ return ( {!transactionFailed ? ( userSignedTransaction ? ( - + ) : ( - + ) ) : ( - + )} - - {title} - + + {title} + {subtitle} diff --git a/src/features/activity/ActivityScreen.tsx b/src/features/activity/ActivityScreen.tsx index d10d4190d..d9a91304e 100644 --- a/src/features/activity/ActivityScreen.tsx +++ b/src/features/activity/ActivityScreen.tsx @@ -29,9 +29,9 @@ const ActivityScreen = () => { const contentContainer = useMemo( () => ({ - paddingBottom: spacing.xxxl, + paddingBottom: spacing['15'], }), - [spacing.xxxl], + [spacing], ) const SectionData = useMemo((): { @@ -80,13 +80,13 @@ const ActivityScreen = () => { - + {title} @@ -97,12 +97,12 @@ const ActivityScreen = () => { const renderHeader = useCallback(() => { return ( - + {t('activityScreen.title')} @@ -134,7 +134,7 @@ const ActivityScreen = () => { borderBottomStartRadius={lastItem ? 'xl' : undefined} borderBottomEndRadius={lastItem ? 'xl' : undefined} hasDivider={!lastItem || (firstItem && section.data.length !== 1)} - marginHorizontal="m" + marginHorizontal="4" transaction={item} onPress={handleActivityItemPress(item)} /> @@ -146,7 +146,7 @@ const ActivityScreen = () => { const Footer = useCallback(() => { return fetchingMore ? ( - + ) : null diff --git a/src/features/activity/AddressActivityItem.tsx b/src/features/activity/AddressActivityItem.tsx index 1524e7c07..65ec24029 100644 --- a/src/features/activity/AddressActivityItem.tsx +++ b/src/features/activity/AddressActivityItem.tsx @@ -32,29 +32,31 @@ const AddressActivityItem = ({ return ( <> - + {currentAccount && currentAccount.solanaAddress === accountAddress && ( - {t('activityScreen.myAccount')} + + {t('activityScreen.myAccount')} + )} {ellipsizeAddress(accountAddress)} - - + + {showBubbleArrow && ( diff --git a/src/features/addressBook/AddressBook.tsx b/src/features/addressBook/AddressBook.tsx index a762a4061..6508e0644 100644 --- a/src/features/addressBook/AddressBook.tsx +++ b/src/features/addressBook/AddressBook.tsx @@ -31,20 +31,22 @@ const AddressBook = () => { ) return ( - + - {t('addressBook.title')} + + {t('addressBook.title')} + diff --git a/src/features/addressBook/AddressExtra.tsx b/src/features/addressBook/AddressExtra.tsx index 5fc09334b..7b64458f1 100644 --- a/src/features/addressBook/AddressExtra.tsx +++ b/src/features/addressBook/AddressExtra.tsx @@ -16,17 +16,17 @@ const AddressExtra = ({ onScanPress, }: AddressExtraProps) => { const colors = useColors() - const hitSlop = useHitSlop('l') + const hitSlop = useHitSlop('6') if (addressLoading) { - return + return } if (isValidAddress) { - return + return } return ( - + ) } diff --git a/src/features/addressBook/ContactDetails.tsx b/src/features/addressBook/ContactDetails.tsx index b1566410d..c139301f8 100644 --- a/src/features/addressBook/ContactDetails.tsx +++ b/src/features/addressBook/ContactDetails.tsx @@ -16,7 +16,6 @@ import { Platform, } from 'react-native' import Checkmark from '@assets/images/checkmark.svg' -import { useKeyboard } from '@react-native-community/hooks' import Box from '@components/Box' import Text from '@components/Text' import { useColors, useOpacity, useSpacing } from '@theme/themeHooks' @@ -51,17 +50,16 @@ type Props = { } const ContactDetails = ({ action, contact }: Props) => { - const { keyboardShown } = useKeyboard() const { t } = useTranslation() const homeNav = useNavigation() const addressBookNav = useNavigation() const route = useRoute() - const { backgroundStyle } = useOpacity('surface', keyboardShown ? 0.85 : 0.4) + const { backgroundStyle } = useOpacity('secondaryBackground', 1) const { addContact, editContact, deleteContact } = useAccountStorage() const [nickname, setNickname] = useState(contact?.alias || '') const [address, setAddress] = useState('') const nicknameInput = useRef(null) - const { blueBright500 } = useColors() + const colors = useColors() const { scannedAddress, setScannedAddress } = useAppStorage() const spacing = useSpacing() const { showOKCancelAlert } = useAlert() @@ -175,20 +173,20 @@ const ContactDetails = ({ action, contact }: Props) => { return ( - + - + {isAddingContact ? t('addNewContact.title') : t('editContact.title')} @@ -196,8 +194,8 @@ const ContactDetails = ({ action, contact }: Props) => { @@ -206,28 +204,28 @@ const ContactDetails = ({ action, contact }: Props) => { )} {!!nickname && ( - + {nickname} )} - + - + {t('addNewContact.address.title', { network: 'Solana', })} @@ -240,6 +238,7 @@ const ContactDetails = ({ action, contact }: Props) => { { autoCorrect: false, onKeyPress: handleKeydown, }} - paddingVertical="xl" + paddingVertical="8" /> - {t('addNewContact.nickname.title')} - {!!nickname && } + + {t('addNewContact.nickname.title')} + + {!!nickname && } { /> - + {t('addressBook.addNext')} diff --git a/src/features/browser/BrowserListItem.tsx b/src/features/browser/BrowserListItem.tsx index 3244e82ea..f624472df 100644 --- a/src/features/browser/BrowserListItem.tsx +++ b/src/features/browser/BrowserListItem.tsx @@ -18,15 +18,17 @@ const BrowserListItem = ({ }: ActivityListItemProps) => { return ( - - {url} + + + {url} + ) diff --git a/src/features/browser/BrowserScreen.tsx b/src/features/browser/BrowserScreen.tsx index 4dffd4812..cbc5ebd96 100644 --- a/src/features/browser/BrowserScreen.tsx +++ b/src/features/browser/BrowserScreen.tsx @@ -79,7 +79,7 @@ const BrowserScreen = () => { if (inputFocused) { // Animate margin end return { - marginEnd: withTiming(spacing.xxl, { + marginEnd: withTiming(spacing[12], { duration: 100, }), } @@ -115,14 +115,14 @@ const BrowserScreen = () => { const BrowserHeader = useCallback(() => { return ( { TrailingIcon={inputFocused ? CloseCircle : undefined} onTrailingIconPress={onClearPressed} TrailingIconOptions={{ - paddingStart: 's', + paddingStart: '2', }} textInputProps={{ placeholder: 'Search or type URL', @@ -155,12 +155,12 @@ const BrowserScreen = () => { {inputFocused && ( - + {t('generic.cancel')} @@ -187,13 +187,13 @@ const BrowserScreen = () => { - + {title} @@ -222,7 +222,7 @@ const BrowserScreen = () => { borderBottomStartRadius={lastItem ? 'xl' : undefined} borderBottomEndRadius={lastItem ? 'xl' : undefined} hasDivider={!lastItem || (firstItem && section.data?.length !== 1)} - marginHorizontal="m" + marginHorizontal="4" url={item} onPress={handleBrowserListItemPress(item)} /> @@ -240,12 +240,12 @@ const BrowserScreen = () => { return ( - + {title === t('browserScreen.myFavorites') ? t('browserScreen.myFavoritesEmpty') : t('browserScreen.recentlyVisitedEmpty')} @@ -258,17 +258,17 @@ const BrowserScreen = () => { const contentContainer = useMemo( () => ({ - paddingTop: spacing.m, + paddingTop: spacing[4], }), - [spacing.m], + [spacing], ) const keyExtractor = useCallback((item, index) => item + index, []) return ( - + { const isAndroid = useMemo(() => Platform.OS === 'android', []) const spacing = useSpacing() const [isScriptInjected, setIsScriptInjected] = useState(false) + const { primaryText } = useColors() const isFavorite = useMemo(() => { return favorites.some((favorite) => favorite === currentUrl) @@ -439,30 +440,30 @@ const BrowserWebViewScreen = () => { const BrowserHeader = useCallback(() => { return ( - + {currentUrl} - - + + ) - }, [currentUrl, closeModal, spacing]) + }, [currentUrl, closeModal, spacing, primaryText]) const onBack = useCallback(() => { webview.current?.goBack() @@ -482,23 +483,23 @@ const BrowserWebViewScreen = () => { const BrowserFooter = useCallback(() => { return ( - + - + - + {isFavorite ? ( - + ) : ( - + )} @@ -509,13 +510,13 @@ const BrowserWebViewScreen = () => { ) - }, [onBack, onForward, isFavorite, onFavorite, onRefresh]) + }, [onBack, onForward, isFavorite, onFavorite, onRefresh, primaryText]) return ( {}}> { = [ titleKey: 'defiTutorial.slides.0.title', bodyKey: 'defiTutorial.slides.0.body', image: require('@assets/images/defiSlide1.png'), - imageVerticalOffset: 'n_xxl', + imageVerticalOffset: '-12', }, { titleKey: 'defiTutorial.slides.1.title', bodyKey: 'defiTutorial.slides.1.body', image: require('@assets/images/defiSlide2.png'), - imageVerticalOffset: 'n_xxl', + imageVerticalOffset: '-12', }, { titleKey: 'defiTutorial.slides.2.title', bodyKey: 'defiTutorial.slides.2.body', image: require('@assets/images/defiSlide3.png'), - imageVerticalOffset: 'n_xxl', + imageVerticalOffset: '-12', }, { titleKey: 'defiTutorial.slides.3.title', bodyKey: 'defiTutorial.slides.3.body', image: require('@assets/images/defiSlide4.png'), - imageVerticalOffset: 'n_xxl', + imageVerticalOffset: '-12', }, ] const DAppTutorial = () => { @@ -87,18 +87,18 @@ const DAppTutorial = () => { width={wp(50)} /> {t(item.titleKey)} @@ -112,21 +112,21 @@ const DAppTutorial = () => { width: 6, height: 6, borderRadius: 3, - marginHorizontal: spacing.s, - backgroundColor: colors.white, + marginHorizontal: spacing['0.5'], + backgroundColor: colors['base.white'], }), - [colors.white, spacing.s], + [colors, spacing], ) return ( - + {t('defiTutorial.title')} @@ -151,16 +151,15 @@ const DAppTutorial = () => { /> diff --git a/src/features/burn/BurnScreen.tsx b/src/features/burn/BurnScreen.tsx index 74e7cac45..610452ab5 100644 --- a/src/features/burn/BurnScreen.tsx +++ b/src/features/burn/BurnScreen.tsx @@ -81,7 +81,7 @@ const BurnScreen = () => { const navigation = useNavigation() const { t } = useTranslation() const { primaryText } = useColors() - const hitSlop = useHitSlop('l') + const hitSlop = useHitSlop('6') const accountSelectorRef = useRef(null) const { submitDelegateDataCredits } = useSubmitTxn() const addressBookRef = useRef(null) @@ -327,7 +327,7 @@ const BurnScreen = () => { justifyContent="space-between" alignItems="center" > - + { { @@ -360,27 +360,27 @@ const BurnScreen = () => { keyboardShouldPersistTaps="always" > 1} address={currentAccount?.address} onPress={handleShowAccounts} showBubbleArrow - marginHorizontal="l" + marginHorizontal="6" marginBottom="xs" /> @@ -410,7 +410,7 @@ const BurnScreen = () => { ) : ( <> { showBubbleArrow showChevron={false} address={route.params.address} - marginHorizontal="l" + marginHorizontal="6" /> - + {t('burn.amount')} - + {amountBalance.toString()} {t('payment.fee', { @@ -448,16 +452,20 @@ const BurnScreen = () => { - + {t('burn.equivalent')} {amountInDc?.toString()} @@ -465,19 +473,19 @@ const BurnScreen = () => { )} {submitError && ( - + {submitError} @@ -485,12 +493,12 @@ const BurnScreen = () => { )} { hasError || (!delegateAddress && isDelegate) } - marginTop="l" + marginTop="6" title={t( isDelegate ? 'delegate.swipe' : 'burn.swipeToBurn', )} diff --git a/src/features/collectables/AntennaSetupScreen.tsx b/src/features/collectables/AntennaSetupScreen.tsx index ba71bce52..216d1f5d9 100644 --- a/src/features/collectables/AntennaSetupScreen.tsx +++ b/src/features/collectables/AntennaSetupScreen.tsx @@ -104,8 +104,8 @@ const AntennaSetupScreen = () => { return ( @@ -115,25 +115,29 @@ const AntennaSetupScreen = () => { edges={safeEdges} backgroundColor="transparent" flex={1} - padding="m" - marginHorizontal="s" + padding="4" + marginHorizontal="2" marginVertical="xs" > - + {t('antennaSetupScreen.antennaSetup')} {t('antennaSetupScreen.antennaSetupDescription')} { keyboardType: 'decimal-pad', }} /> - + { flexDirection="row" justifyContent="center" alignItems="center" - marginVertical="s" + marginVertical="2" minHeight={40} > {showError && ( - + {showError} )} @@ -178,18 +186,18 @@ const AntennaSetupScreen = () => { + ) : undefined } /> diff --git a/src/features/collectables/AssertLocationScreen.tsx b/src/features/collectables/AssertLocationScreen.tsx index a2a23b6bf..5b58d5332 100644 --- a/src/features/collectables/AssertLocationScreen.tsx +++ b/src/features/collectables/AssertLocationScreen.tsx @@ -416,7 +416,7 @@ const AssertLocationScreen = () => { flexGrow={1} justifyContent="center" alignItems="center" - backgroundColor="surfaceSecondary" + backgroundColor="bg.tertiary" overflow="hidden" position="relative" > @@ -430,7 +430,7 @@ const AssertLocationScreen = () => { zIndex={isLoading ? 100 : 0} > - + { @@ -481,7 +481,7 @@ const AssertLocationScreen = () => { @@ -491,7 +491,9 @@ const AssertLocationScreen = () => { width={16} height={16} color={ - i === 0 ? colors.greenBright500 : colors.blueBright500 + i === 0 + ? colors['green.light-500'] + : colors['blue.light-500'] } /> )} @@ -505,8 +507,8 @@ const AssertLocationScreen = () => { alignItems="center" position="absolute" width="100%" - paddingTop="l" - paddingLeft="ms" + paddingTop="6" + paddingLeft="3" top={0} > { alignItems="center" onPress={() => navigation.goBack()} > - - + + Back @@ -534,7 +536,7 @@ const AssertLocationScreen = () => { flexDirection="row" justifyContent="space-between" position="absolute" - marginHorizontal="ms" + marginHorizontal="3" width="100%" bottom={20} > @@ -542,19 +544,19 @@ const AssertLocationScreen = () => { flexShrink={1} flexDirection="row" alignItems="center" - marginHorizontal="ms" + marginHorizontal="3" > {reverseGeoLoading && ( )} {showError && ( - + {showError} )} @@ -562,17 +564,17 @@ const AssertLocationScreen = () => { {reverseGeo.result} @@ -586,14 +588,14 @@ const AssertLocationScreen = () => { flexDirection="row" alignItems="center" justifyContent="flex-end" - marginHorizontal="ms" + marginHorizontal="3" > { /> { style={{ marginTop: -10, }} - backgroundColor="surfaceSecondary" - borderTopLeftRadius="l" - borderTopRightRadius="l" - padding="ms" + backgroundColor="bg.tertiary" + borderTopLeftRadius="2xl" + borderTopRightRadius="2xl" + padding="3" > - + { {metadata?.name && ( @@ -662,21 +664,25 @@ const AssertLocationScreen = () => { )} - + IOT: - + - + {t('assertLocationScreen.mobileTitle')}: @@ -684,7 +690,9 @@ const AssertLocationScreen = () => { width={16} height={16} color={ - mobileLocation ? colors.blueBright500 : colors.darkGrey + mobileLocation + ? colors['blue.light-500'] + : colors['gray.700'] } /> @@ -693,9 +701,9 @@ const AssertLocationScreen = () => { { onPress={handleAssertLocationPress} > {debouncedDisabled || asserting ? ( - + ) : ( {t('assertLocationScreen.title')} @@ -733,27 +741,27 @@ const AssertLocationScreen = () => { backgroundColor="transparent" flex={1} height="100%" - marginHorizontal="ms" + marginHorizontal="3" > {t('assertLocationScreen.antennaSetup')} {t('assertLocationScreen.antennaSetupDescription')} { { - + diff --git a/src/features/collectables/ChangeRewardsRecipientScreen.tsx b/src/features/collectables/ChangeRewardsRecipientScreen.tsx index 1bfaef5db..87d691773 100644 --- a/src/features/collectables/ChangeRewardsRecipientScreen.tsx +++ b/src/features/collectables/ChangeRewardsRecipientScreen.tsx @@ -178,8 +178,8 @@ const ChangeRewardsRecipientScreen = () => { return ( @@ -194,28 +194,28 @@ const ChangeRewardsRecipientScreen = () => { edges={safeEdges} backgroundColor="transparent" flex={1} - padding="m" - marginHorizontal="s" + padding="4" + marginHorizontal="2" marginVertical="xs" > {t('changeRewardsRecipientScreen.title')} - + {t('changeRewardsRecipientScreen.description')} - + {t('changeRewardsRecipientScreen.blurb')} @@ -225,7 +225,7 @@ const ChangeRewardsRecipientScreen = () => { {!recipientsAreDifferent ? ( <> @@ -240,9 +240,9 @@ const ChangeRewardsRecipientScreen = () => { @@ -267,9 +267,11 @@ const ChangeRewardsRecipientScreen = () => { height={20} /> )} - Recipient + + Recipient + - + {ellipsizeAddress( new PublicKey( // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain @@ -284,7 +286,7 @@ const ChangeRewardsRecipientScreen = () => { ) : ( { {hasIotRecipient && ( @@ -310,9 +312,11 @@ const ChangeRewardsRecipientScreen = () => { width={20} height={20} /> - Recipient + + Recipient + - + {ellipsizeAddress( new PublicKey( // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain @@ -325,9 +329,9 @@ const ChangeRewardsRecipientScreen = () => { {hasMobileRecipient && ( @@ -344,9 +348,11 @@ const ChangeRewardsRecipientScreen = () => { width={20} height={20} /> - Recipient + + Recipient + - + {ellipsizeAddress( new PublicKey( // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain @@ -362,18 +368,21 @@ const ChangeRewardsRecipientScreen = () => { flexDirection="row" justifyContent="space-between" alignItems="center" - borderRadius="m" - paddingVertical="sx" - marginLeft="s" - paddingLeft="s" - paddingRight="s" - backgroundColor="black600" + borderRadius="2xl" + paddingVertical="1.5" + marginLeft="2" + paddingLeft="2" + paddingRight="2" + backgroundColor="cardBackground" onPress={handleRemoveRecipient} > {removing ? ( - + ) : ( - + {t('generic.remove')} )} @@ -385,16 +394,16 @@ const ChangeRewardsRecipientScreen = () => { 'changeRewardsRecipientScreen.newRecipient', )} ${recipientName}`} variant="regular" - marginTop="s" + marginTop="2" height={80} width="100%" - textColor="white" + textColor="base.white" fontSize={15} TrailingIcon={Menu} onTrailingIconPress={handleAddressBookSelected} textInputProps={{ placeholder: t('generic.solanaAddress'), - placeholderTextColor: 'white', + placeholderTextColor: 'base.white', autoCorrect: false, autoComplete: 'off', onChangeText: handleEditAddress, @@ -403,12 +412,12 @@ const ChangeRewardsRecipientScreen = () => { }} /> - + {t('changeRewardsRecipientScreen.warning')} @@ -424,35 +433,35 @@ const ChangeRewardsRecipientScreen = () => { minHeight={40} > {showError && ( - + {showError} )} {} : handleUpdateRecipient} TrailingComponent={ updating ? ( - + ) : undefined } /> diff --git a/src/features/collectables/ClaimAllRewardsScreen.tsx b/src/features/collectables/ClaimAllRewardsScreen.tsx index b53486d7e..0be39b488 100644 --- a/src/features/collectables/ClaimAllRewardsScreen.tsx +++ b/src/features/collectables/ClaimAllRewardsScreen.tsx @@ -103,15 +103,15 @@ const ClaimAllRewardsScreen = () => { entering={DelayedFadeIn} backgroundColor="primaryBackground" > - + - + {subtitle} - + {t('collectablesScreen.hotspots.hotspotsClaimMessage')} @@ -126,7 +126,7 @@ const ClaimAllRewardsScreen = () => { ) : null} @@ -135,7 +135,7 @@ const ClaimAllRewardsScreen = () => { ) : null} @@ -143,9 +143,9 @@ const ClaimAllRewardsScreen = () => { {claimError && ( @@ -155,23 +155,23 @@ const ClaimAllRewardsScreen = () => { )} + ) : undefined } /> diff --git a/src/features/collectables/ClaimRewardsScreen.tsx b/src/features/collectables/ClaimRewardsScreen.tsx index 992646a0c..3b44a97ed 100644 --- a/src/features/collectables/ClaimRewardsScreen.tsx +++ b/src/features/collectables/ClaimRewardsScreen.tsx @@ -113,18 +113,18 @@ const ClaimRewardsScreen = () => { - + {subtitle} - + {t('collectablesScreen.hotspots.hotspotClaimMessage')} @@ -138,7 +138,7 @@ const ClaimRewardsScreen = () => { )} @@ -146,7 +146,7 @@ const ClaimRewardsScreen = () => { )} @@ -154,9 +154,9 @@ const ClaimRewardsScreen = () => { {claimError && ( @@ -166,23 +166,23 @@ const ClaimRewardsScreen = () => { )} + ) : undefined } /> diff --git a/src/features/collectables/ClaimingRewardsScreen.tsx b/src/features/collectables/ClaimingRewardsScreen.tsx index c9bc85b5f..67f37aff9 100644 --- a/src/features/collectables/ClaimingRewardsScreen.tsx +++ b/src/features/collectables/ClaimingRewardsScreen.tsx @@ -78,7 +78,11 @@ const ClaimingRewardsScreen = () => { } return ( - + { > { entering={FadeIn} exiting={FadeOut} > - + {t('collectablesScreen.claimComplete')} @@ -125,14 +129,18 @@ const ClaimingRewardsScreen = () => { entering={FadeIn} exiting={FadeOut} > - - + + {t('collectablesScreen.rewardsError')} @@ -151,12 +159,12 @@ const ClaimingRewardsScreen = () => { entering={FadeIn} exiting={FadeOut} > - + {t('collectablesScreen.rewardsError')} @@ -170,15 +178,19 @@ const ClaimingRewardsScreen = () => { entering={FadeIn} exiting={FadeOut} > - - + + {t('collectablesScreen.claimingRewards')} {t('collectablesScreen.claimingRewardsBody')} @@ -188,8 +200,8 @@ const ClaimingRewardsScreen = () => { {typeof solanaPayment.progress !== 'undefined' ? ( { {solanaPayment.progress.text} ) : ( - + )} ) : ( @@ -242,19 +254,19 @@ const ClaimingRewardsScreen = () => { style={{ marginBottom: bottom }} > + } /> diff --git a/src/features/collectables/CollectablesScreen.tsx b/src/features/collectables/CollectablesScreen.tsx index a5ffb07a1..3239b2edf 100644 --- a/src/features/collectables/CollectablesScreen.tsx +++ b/src/features/collectables/CollectablesScreen.tsx @@ -47,16 +47,16 @@ const CollectablesScreen = () => { return ( - + {t('collectablesScreen.title')} {selectedItem === tabData[0].value && } diff --git a/src/features/collectables/CollectablesTopTabs.tsx b/src/features/collectables/CollectablesTopTabs.tsx index 394cf8c5e..35ead94d3 100644 --- a/src/features/collectables/CollectablesTopTabs.tsx +++ b/src/features/collectables/CollectablesTopTabs.tsx @@ -89,7 +89,13 @@ const CollectablesTopTabs = () => { return ( - + {t('collectablesScreen.title')} {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} diff --git a/src/features/collectables/CollectionScreen.tsx b/src/features/collectables/CollectionScreen.tsx index 38b69931f..bddd75e03 100644 --- a/src/features/collectables/CollectionScreen.tsx +++ b/src/features/collectables/CollectionScreen.tsx @@ -27,7 +27,7 @@ const CollectionScreen = () => { const navigation = useNavigation() const COLLECTABLE_HEIGHT = Dimensions.get('window').width / 2 const collectables = route.params.collection - const { lm: borderRadius } = useBorderRadii() + const borderRadii = useBorderRadii() const { triggerImpact } = useHaptic() const handleNavigateToCollectable = useCallback( @@ -52,15 +52,15 @@ const CollectionScreen = () => { exiting={FadeOut} > handleNavigateToCollectable(item)} > { ) }, - [COLLECTABLE_HEIGHT, borderRadius, handleNavigateToCollectable], + [COLLECTABLE_HEIGHT, borderRadii, handleNavigateToCollectable], ) const keyExtractor = useCallback((item: Collectable) => item.id, []) return ( diff --git a/src/features/collectables/HotspotCompressedListItem.tsx b/src/features/collectables/HotspotCompressedListItem.tsx index bdc7ae2e4..8b74f0880 100644 --- a/src/features/collectables/HotspotCompressedListItem.tsx +++ b/src/features/collectables/HotspotCompressedListItem.tsx @@ -39,7 +39,7 @@ const HotspotListItem = ({ const { t } = useTranslation() const colors = useColors() const wallet = useCurrentWallet() - const { backgroundStyle: flamecoOpaque } = useOpacity('flamenco', 0.1) + const { backgroundStyle: flamecoOpaque } = useOpacity('orange.500', 0.1) const streetAddress = useHotspotAddress(hotspot) const { info: iotMint } = useMint(IOT_MINT) @@ -128,8 +128,8 @@ const HotspotListItem = ({ return ( onPress(hotspot)} > {hasRecipientSet && ( @@ -147,15 +147,15 @@ const HotspotListItem = ({ flexDirection="row" justifyContent="space-between" alignItems="center" - borderRadius="m" - paddingVertical="sx" - paddingLeft="s" - paddingRight="s" + borderRadius="2xl" + paddingVertical="1.5" + paddingLeft="2" + paddingRight="2" style={{ ...flamecoOpaque, }} > - + {t('changeRewardsRecipientScreen.set')} @@ -163,7 +163,7 @@ const HotspotListItem = ({ )} - + {metadata?.name && ( @@ -184,12 +184,16 @@ const HotspotListItem = ({ )} {streetAddress && ( - + {streetAddress} )} - + {!!hasMobileRewards && ( - + {pendingMobileRewardsString} @@ -226,13 +230,13 @@ const HotspotListItem = ({ justifyContent="space-between" alignItems="center" backgroundColor="iotDarkGreen" - borderRadius="m" + borderRadius="2xl" paddingVertical="xs" paddingLeft="xs" - paddingRight="s" + paddingRight="2" > - + {pendingIotRewardsString} diff --git a/src/features/collectables/HotspotList.tsx b/src/features/collectables/HotspotList.tsx index 5558a9516..234a2615d 100644 --- a/src/features/collectables/HotspotList.tsx +++ b/src/features/collectables/HotspotList.tsx @@ -50,8 +50,8 @@ function RewardItem({ - + {symbol} @@ -126,8 +126,8 @@ const HotspotList = () => { const renderHeader = useCallback(() => { return ( @@ -135,44 +135,47 @@ const HotspotList = () => { flexDirection="row" justifyContent="space-between" alignItems="stretch" - marginBottom="l" + marginBottom="6" + paddingHorizontal="4" > } + LeadingComponent={ + + } title={t('collectablesScreen.hotspots.openMap')} - titleColor="white" + titleColor="base.white" fontSize={14} onPress={handleNavigateToMap} /> } title={t('collectablesScreen.hotspots.connect')} - titleColor="black" + titleColor="base.black" fontSize={14} onPress={handleNavigateToHotspotOnboard} /> - - - You own - + + + You own + {totalHotspots} hotspots - + ) @@ -186,7 +189,7 @@ const HotspotList = () => { hotspot={item} onPress={handleNavigateToHotspot} key={item.id} - marginBottom="s" + marginBottom="2" /> ) }, @@ -215,7 +218,7 @@ const HotspotList = () => { const Footer = useCallback( () => ( - + {fetchingMore ? : } ), @@ -258,10 +261,10 @@ const HotspotList = () => { ListFooterComponent={Footer} /> { onPress(hotspot)} > - + {pendingMobileRewardsString} @@ -130,15 +134,15 @@ const HotspotListItem = ({ - + {pendingIotRewardsString} @@ -154,7 +162,7 @@ const HotspotListItem = ({ )} {metadata?.name && ( - + {removeDashAndCapitalize(metadata.name)} )} diff --git a/src/features/collectables/HotspotMapHotspotDetails.tsx b/src/features/collectables/HotspotMapHotspotDetails.tsx index a0adc12ac..65dd33f9e 100644 --- a/src/features/collectables/HotspotMapHotspotDetails.tsx +++ b/src/features/collectables/HotspotMapHotspotDetails.tsx @@ -57,40 +57,40 @@ const IotMapDetails = ({ const { gain, elevation } = info return ( - + - + {t('collectablesScreen.hotspots.map.transmitScale')} - - + + --- - + {t('generic.maker')} - + {maker} - + {t('generic.gain')} - + {gain ? gain / 10 : gain} {t('generic.dBi')} - + {t('generic.elevation')} - {elevation}m + {elevation}m @@ -109,24 +109,24 @@ const MobileMapDetails = ({ const { deviceType } = info return ( - + - {t('generic.coverage')} + {t('generic.coverage')} - - + + --- - {t('generic.maker')} - {maker} + {t('generic.maker')} + {maker} - {t('generic.radioType')} - + {t('generic.radioType')} + {deviceType ? Object.keys(deviceType)[0] : '---'} @@ -170,7 +170,7 @@ export const HotspotMapHotspotDetails = ({ )?.group_value const collectionKey = usePublicKey(collection) const { primaryText } = useColors() - const { backgroundStyle: flamecoOpaque } = useOpacity('flamenco', 0.1) + const { backgroundStyle: flamecoOpaque } = useOpacity('orange.500', 0.1) const { loading: mplxLoading, metadata: mplxMetadata } = useMetaplexMetadata(collectionKey) @@ -448,7 +448,7 @@ export const HotspotMapHotspotDetails = ({ return ( <> - + {isLoading && ( - + )} @@ -465,10 +465,10 @@ export const HotspotMapHotspotDetails = ({ <> @@ -491,16 +491,16 @@ export const HotspotMapHotspotDetails = ({ {streetAddress && ( <> - + {streetAddress} )} @@ -510,7 +510,11 @@ export const HotspotMapHotspotDetails = ({ alignItems="center" onPress={handleCopyAddress} > - + {ellipsizeAddress(eccCompact, { numChars: 4 })} @@ -536,9 +540,9 @@ export const HotspotMapHotspotDetails = ({ flexDirection="row" justifyContent="center" alignItems="center" - paddingTop="ms" + paddingTop="3" > - + {onboardError.toString()} @@ -559,20 +563,20 @@ export const HotspotMapHotspotDetails = ({ alignItems="center" zIndex={100} > - + {selectExplorerOpen ? ( <> - + {t('activityScreen.selectExplorer')} - + {t('activityScreen.selectExplorerSubtitle')} @@ -603,8 +607,8 @@ export const HotspotMapHotspotDetails = ({ ) : ( <> - + {t('collectablesScreen.hotspots.claimRewards')} {pendingMobileRewardsString} @@ -657,10 +661,10 @@ export const HotspotMapHotspotDetails = ({ justifyContent="space-between" alignItems="center" backgroundColor="iotDarkGreen" - borderRadius="m" + borderRadius="2xl" paddingVertical="xs" paddingLeft="xs" - paddingRight="s" + paddingRight="2" > {pendingIotRewardsString} @@ -680,8 +684,8 @@ export const HotspotMapHotspotDetails = ({ @@ -689,10 +693,10 @@ export const HotspotMapHotspotDetails = ({ flex={1} flexDirection="row" alignItems="center" - marginHorizontal="m" + marginHorizontal="4" justifyContent="space-between" > - + {t('changeRewardsRecipientScreen.title')} {hasRecipientSet && ( @@ -701,15 +705,15 @@ export const HotspotMapHotspotDetails = ({ flexDirection="row" justifyContent="space-between" alignItems="center" - borderRadius="m" - paddingVertical="sx" - paddingLeft="s" - paddingRight="s" + borderRadius="2xl" + paddingVertical="1.5" + paddingLeft="2" + paddingRight="2" style={{ ...flamecoOpaque, }} > - + {t('changeRewardsRecipientScreen.set')} diff --git a/src/features/collectables/HotspotMapLegend.tsx b/src/features/collectables/HotspotMapLegend.tsx index 01a0b1c27..ca5153009 100644 --- a/src/features/collectables/HotspotMapLegend.tsx +++ b/src/features/collectables/HotspotMapLegend.tsx @@ -16,13 +16,13 @@ export const HotspotMapLegend = ({ flexDirection="column" justifyContent="center" alignItems="center" - paddingTop="ms" - paddingBottom="m" + paddingTop="3" + paddingBottom="4" > - + {network} Hotspot @@ -51,11 +51,11 @@ export const HotspotMapLegend = ({ flexDirection="row" justifyContent="center" alignItems="center" - paddingRight="ms" - paddingLeft="s" - paddingVertical="sx" - borderRadius="round" - backgroundColor="darkGrey" + paddingRight="3" + paddingLeft="2" + paddingVertical="1.5" + borderRadius="full" + backgroundColor="gray.700" // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore gap={6} @@ -68,10 +68,14 @@ export const HotspotMapLegend = ({ - + Low Boost @@ -80,8 +84,12 @@ export const HotspotMapLegend = ({ justifyContent="center" alignItems="center" > - - + + High Boost @@ -91,11 +99,11 @@ export const HotspotMapLegend = ({ flexDirection="row" justifyContent="center" alignItems="center" - paddingRight="ms" - paddingLeft="s" - paddingVertical="sx" - borderRadius="round" - backgroundColor="darkGrey" + paddingRight="3" + paddingLeft="2" + paddingVertical="1.5" + borderRadius="full" + backgroundColor="gray.700" // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore gap={8} @@ -107,13 +115,13 @@ export const HotspotMapLegend = ({ color={colors.solanaPurple} opacity={0.6} /> - + Weak Signal - + Strong Signal diff --git a/src/features/collectables/HotspotMapScreen.tsx b/src/features/collectables/HotspotMapScreen.tsx index 13b290374..8c4d7633e 100644 --- a/src/features/collectables/HotspotMapScreen.tsx +++ b/src/features/collectables/HotspotMapScreen.tsx @@ -63,7 +63,7 @@ const HotspotMapScreen = () => { const { t } = useTranslation() const { anchorProvider } = useSolana() const route = useRoute() - const bottomSheetStyle = useBackgroundStyle('surfaceSecondary') + const bottomSheetStyle = useBackgroundStyle('bg.tertiary') const navigation = useNavigation() const colors = useColors() const mapRef = useRef(null) @@ -404,7 +404,7 @@ const HotspotMapScreen = () => { flexGrow={1} justifyContent="center" alignItems="center" - backgroundColor="surfaceSecondary" + backgroundColor="bg.tertiary" overflow="hidden" position="relative" > @@ -419,7 +419,7 @@ const HotspotMapScreen = () => { zIndex={isLoading ? 100 : 0} > - + { alignItems="center" position="absolute" width="100%" - paddingTop="l" - paddingLeft="ms" + paddingTop="6" + paddingLeft="3" top={0} > { alignItems="center" onPress={() => navigation.goBack()} > - - + + {t('collectablesScreen.hotspots.map.back')} @@ -490,16 +490,18 @@ const HotspotMapScreen = () => { width="100%" bottom={10} > - + { width={24} height={24} color={ - networkType === 'IOT' ? colors.green500 : colors.blue500 + networkType === 'IOT' + ? colors['green.500'] + : colors['blue.500'] } /> {t('collectablesScreen.hotspots.map.type', { type: networkType, @@ -521,13 +525,13 @@ const HotspotMapScreen = () => { - + { /> { return ( {json && ( )} {json?.name} {json?.description || t('collectables.noDescription')} {collectable.model === 'nft' && ( diff --git a/src/features/collectables/NftList.tsx b/src/features/collectables/NftList.tsx index 156400ae6..67cab5c93 100644 --- a/src/features/collectables/NftList.tsx +++ b/src/features/collectables/NftList.tsx @@ -70,9 +70,9 @@ const NftList = () => { const contentContainerStyle = useMemo( () => ({ - marginTop: spacing.m, + marginTop: spacing[4], }), - [spacing.m], + [spacing], ) return ( diff --git a/src/features/collectables/NftListItem.tsx b/src/features/collectables/NftListItem.tsx index a167d5ed3..ac1f3e593 100644 --- a/src/features/collectables/NftListItem.tsx +++ b/src/features/collectables/NftListItem.tsx @@ -5,7 +5,6 @@ import { FadeIn, FadeOut } from 'react-native-reanimated' import Box from '@components/Box' import Text from '@components/Text' import TouchableOpacityBox from '@components/TouchableOpacityBox' -import { useBorderRadii } from '@theme/themeHooks' import CircleLoader from '@components/CircleLoader' import { ReAnimatedBox } from '@components/AnimatedBox' import useHaptic from '@hooks/useHaptic' @@ -21,7 +20,6 @@ const NftListItem = ({ item: string collectables: Collectable[] }) => { - const { lm } = useBorderRadii() const { json } = collectables[0] const navigation = useNavigation() const { triggerImpact } = useHaptic() @@ -46,15 +44,15 @@ const NftListItem = ({ return ( - + {item} - + {collectables?.length} @@ -88,13 +90,13 @@ export const NFTSkeleton = () => { return ( { traitValue: boolean | string | string[] | undefined, ) => ( - + {traitType?.toUpperCase() || t('collectablesScreen.collectables.noTraitType')} - + {stringify(traitValue) || t('collectablesScreen.collectables.noTraitValue')} @@ -57,17 +57,17 @@ const NftMetadataScreen = () => { return ( - + {t('collectablesScreen.collectables.properties')} diff --git a/src/features/collectables/SettingUpAntennaScreen.tsx b/src/features/collectables/SettingUpAntennaScreen.tsx index 7672744fa..e2a33de88 100644 --- a/src/features/collectables/SettingUpAntennaScreen.tsx +++ b/src/features/collectables/SettingUpAntennaScreen.tsx @@ -53,13 +53,13 @@ const SettingUpAntennaScreen = () => { { entering={FadeIn} exiting={FadeOut} > - + {t('antennaSetupScreen.settingUpComplete')} @@ -100,17 +100,17 @@ const SettingUpAntennaScreen = () => { exiting={FadeOut} > {t('collectablesScreen.rewardsError')} @@ -129,24 +129,24 @@ const SettingUpAntennaScreen = () => { exiting={FadeOut} > {t('antennaSetupScreen.settingUp')} {t('antennaSetupScreen.settingUpBody')} - - + + )} @@ -157,20 +157,20 @@ const SettingUpAntennaScreen = () => { style={{ marginBottom: bottom }} > + } /> diff --git a/src/features/collectables/TransferCollectableScreen.tsx b/src/features/collectables/TransferCollectableScreen.tsx index 1fb377295..1cede6347 100644 --- a/src/features/collectables/TransferCollectableScreen.tsx +++ b/src/features/collectables/TransferCollectableScreen.tsx @@ -185,13 +185,13 @@ const TransferCollectableScreen = () => { return ( { edges={safeEdges} backgroundColor="transparent" flex={1} - padding="m" + padding="4" alignItems="center" > {metadata && ( { uri: metadata?.image, cache: 'force-cache', }} - borderRadius="xxl" + borderRadius="4xl" /> )} {metadata.name} - + {metadata.description || t('collectablesScreen.collectables.noDescription')} @@ -257,16 +257,16 @@ const TransferCollectableScreen = () => { 'collectablesScreen.transferTo', )} ${recipientName}`} variant="thickBlur" - marginBottom="s" + marginBottom="2" height={80} width="100%" - textColor="white" + textColor="base.white" fontSize={15} TrailingIcon={Menu} onTrailingIconPress={handleAddressBookSelected} textInputProps={{ placeholder: t('generic.solanaAddress'), - placeholderTextColor: 'white', + placeholderTextColor: 'base.white', autoCorrect: false, autoComplete: 'off', onChangeText: handleEditAddress, @@ -276,18 +276,18 @@ const TransferCollectableScreen = () => { /> {solFee ? ( ) : ( {t('generic.calculatingTransactionFee')} @@ -297,38 +297,38 @@ const TransferCollectableScreen = () => { opacity={ hasError || hasInsufficientBalance || networkError ? 100 : 0 } - marginHorizontal="m" - variant="body3Medium" - marginBottom="l" - color="red500" + marginHorizontal="4" + variant="textXsMedium" + marginBottom="6" + color="ros.500" > {showError} - + + ) : ( ) diff --git a/src/features/collectables/TransferCompleteScreen.tsx b/src/features/collectables/TransferCompleteScreen.tsx index 26092ebb1..fc4afc982 100644 --- a/src/features/collectables/TransferCompleteScreen.tsx +++ b/src/features/collectables/TransferCompleteScreen.tsx @@ -71,43 +71,43 @@ const TransferCollectableScreen = () => { return ( {metadata && ( )} @@ -119,7 +119,11 @@ const TransferCollectableScreen = () => { entering={FadeIn} exiting={FadeOut} > - + {t('collectablesScreen.transferComplete')} @@ -132,17 +136,17 @@ const TransferCollectableScreen = () => { exiting={FadeOut} > {t('collectablesScreen.transferError')} @@ -161,9 +165,9 @@ const TransferCollectableScreen = () => { exiting={FadeOut} > {t('collectablesScreen.transferError')} @@ -178,42 +182,42 @@ const TransferCollectableScreen = () => { exiting={FadeOut} > {t('collectablesScreen.transferingNftTitle')} {t('collectablesScreen.transferingNftBody')} - - + + )} + } /> diff --git a/src/features/dappLogin/DappAccount.tsx b/src/features/dappLogin/DappAccount.tsx index 1df7e60be..42f2434fb 100644 --- a/src/features/dappLogin/DappAccount.tsx +++ b/src/features/dappLogin/DappAccount.tsx @@ -60,27 +60,27 @@ const DappLogin = ({ onLogin, onCancel, appName, loading }: Props) => { flexDirection="row" alignItems="center" justifyContent="center" - marginVertical="l" + marginVertical="6" > {isCrowdspot ? ( ) : ( )} - + - + {t('dappLogin.account.title', { appName, })} {t('dappLogin.account.subtitle', { appName })} @@ -96,35 +96,35 @@ const DappLogin = ({ onLogin, onCancel, appName, loading }: Props) => { flex={1} minHeight={66} justifyContent="center" - marginEnd="m" - borderRadius="round" + marginEnd="4" + borderRadius="full" overflow="hidden" - backgroundColor="secondaryIcon" + backgroundColor="secondaryText" onPress={onCancel} > - + {t('generic.cancel')} {loading ? ( - + ) : ( {t('dappLogin.login')} diff --git a/src/features/dappLogin/DappConnect.tsx b/src/features/dappLogin/DappConnect.tsx index e7be44d1f..2d5267ad2 100644 --- a/src/features/dappLogin/DappConnect.tsx +++ b/src/features/dappLogin/DappConnect.tsx @@ -25,49 +25,49 @@ const DappConnect = ({ appName, onApprove, onDeny }: Props) => { ) : ( )} - + {t('dappLogin.connect.title', { appName })} {t('dappLogin.connect.subtitle', { appName })} - + - + {t('generic.cancel')} {t('dappLogin.connect.continue')} diff --git a/src/features/dappLogin/DappLoginScreen.tsx b/src/features/dappLogin/DappLoginScreen.tsx index 1bd9a7451..cd52f86ac 100644 --- a/src/features/dappLogin/DappLoginScreen.tsx +++ b/src/features/dappLogin/DappLoginScreen.tsx @@ -224,17 +224,17 @@ const DappLoginScreen = () => { return ( - + {body} diff --git a/src/features/governance/AssignProxyScreen.tsx b/src/features/governance/AssignProxyScreen.tsx index 0d2596557..c45ca768e 100644 --- a/src/features/governance/AssignProxyScreen.tsx +++ b/src/features/governance/AssignProxyScreen.tsx @@ -110,7 +110,7 @@ export const AssignProxyScreen = () => { return ( { setSelectedPositions((sel) => { @@ -229,17 +229,17 @@ export const AssignProxyScreen = () => { - - + + {t('gov.assignProxy.description')} - + { {/* Don't show network when position already defined */} {position ? null : ( - - + + {t('gov.assignProxy.selectNetwork')} ({ diff --git a/src/features/governance/LockTokensModal.tsx b/src/features/governance/LockTokensModal.tsx index b3b0f39dc..d21f92ec6 100644 --- a/src/features/governance/LockTokensModal.tsx +++ b/src/features/governance/LockTokensModal.tsx @@ -243,8 +243,8 @@ export const LockTokensModal = ({ onClose={handleOnClose} backgroundColor="transparent" flex={1} - padding="m" - marginHorizontal="s" + padding="4" + marginHorizontal="2" > {step === 1 && ( Keyboard.dismiss()}> @@ -271,7 +271,7 @@ export const LockTokensModal = ({ { @@ -283,20 +283,20 @@ export const LockTokensModal = ({ } {t('gov.votingPower.increase')} {hasMinLockup ? ( - + {t('gov.positions.longerLockup', { existing: getFormattedStringFromDays( @@ -305,26 +305,29 @@ export const LockTokensModal = ({ })} {mode === 'split' ? ( - + {t('gov.positions.splitWarning')} ) : null} ) : null} - + {['lock', 'split'].includes(mode) && ( <> - + {t('gov.positions.lockupType')} @@ -343,26 +346,24 @@ export const LockTokensModal = ({ 0 ? 'ms' : 'none'} + borderRadius="2xl" + marginLeft={idx > 0 ? '3' : 'none'} backgroundColor={ - isActive - ? 'surfaceSecondary' - : 'black500' + isActive ? 'bg.tertiary' : 'gray.800' } onPress={() => { setLockupKind(option) }} > {option.display} @@ -373,20 +374,20 @@ export const LockTokensModal = ({ - + {t('gov.positions.amountToLock')} {amount || 'Amount (tokens)'} @@ -394,17 +395,17 @@ export const LockTokensModal = ({ )} {!showCustomDuration && ( - + {t('gov.positions.duration')} @@ -416,9 +417,9 @@ export const LockTokensModal = ({ } > {t('gov.positions.customDuration')} @@ -426,18 +427,18 @@ export const LockTokensModal = ({ {hasMinLockup ? ( - + { setLockupPeriod(lockupPeriodOptions[0]) @@ -445,13 +446,13 @@ export const LockTokensModal = ({ }} > {getFormattedStringFromDays( @@ -474,14 +475,12 @@ export const LockTokensModal = ({ 0 ? 's' : 'none'} + borderRadius="2xl" + marginLeft={idx > 0 ? '2' : 'none'} backgroundColor={ - isActive - ? 'surfaceSecondary' - : 'black500' + isActive ? 'bg.tertiary' : 'gray.800' } onPress={() => { setLockupPeriod(option) @@ -489,12 +488,12 @@ export const LockTokensModal = ({ }} > {option.display} @@ -514,7 +513,7 @@ export const LockTokensModal = ({ floatingLabelWeight="500" fontSize={16} fontWeight="400" - TrailingIcon={() => } + TrailingIcon={() => } TrailingIconOptions={{ onPress: () => { setShowCustomDuration(false) @@ -545,33 +544,33 @@ export const LockTokensModal = ({ /> )} - + {t('gov.positions.initialVotePowerMult')}: - + {lockupMultiplier}x @@ -584,7 +583,7 @@ export const LockTokensModal = ({ {type.display} @@ -593,9 +592,9 @@ export const LockTokensModal = ({ {info} @@ -615,25 +614,25 @@ export const LockTokensModal = ({ <> {t('gov.transactions.delegatePosition')} {t('gov.positions.selectSubDao')} - + {t('gov.positions.delegateBlurb')} @@ -643,9 +642,9 @@ export const LockTokensModal = ({ {t('gov.positions.fetchingSubDaos')} @@ -654,24 +653,24 @@ export const LockTokensModal = ({ {subDaos && ( setSelectedSubDaoPk(null)} > - + - + None @@ -688,22 +687,22 @@ export const LockTokensModal = ({ return ( setSelectedSubDaoPk(subDao.pubkey)} > {subDao.dntMetadata.name} @@ -729,23 +728,23 @@ export const LockTokensModal = ({ flexDirection="row" justifyContent="center" alignItems="center" - paddingTop="ms" + paddingTop="3" > - + {showError} )} {step === 1 && ( - + {!showLockupKindInfo ? ( : undefined + isSubmitting ? ( + + ) : undefined } /> ) : ( { setShowLockupKindInfo(false) }} @@ -802,22 +803,24 @@ export const LockTokensModal = ({ )} {step === 2 && ( - + : undefined + isSubmitting ? ( + + ) : undefined } /> diff --git a/src/features/governance/NetworkTabs.tsx b/src/features/governance/NetworkTabs.tsx index 78f19bc65..a5afdb8e7 100644 --- a/src/features/governance/NetworkTabs.tsx +++ b/src/features/governance/NetworkTabs.tsx @@ -19,7 +19,7 @@ export const NetworkTabs: React.FC = () => { {GovMints.map((m) => { const pk = new PublicKey(m) @@ -34,13 +34,13 @@ export const NetworkTabs: React.FC = () => { isActive={mint.equals(pk)} onPress={() => navigation.setParams({ mint: pk.toBase58() })} inactiveColor="secondaryBackground" - activeColor="secondary" + activeColor="cardBackground" /> {!mint.equals(pk) && hasUnseenProposals && ( { zIndex={2} width={12} height={12} - backgroundColor="flamenco" - borderRadius="round" + backgroundColor="orange.500" + borderRadius="full" /> { > diff --git a/src/features/governance/PositionCard.tsx b/src/features/governance/PositionCard.tsx index bc380f52d..73b89bbe5 100644 --- a/src/features/governance/PositionCard.tsx +++ b/src/features/governance/PositionCard.tsx @@ -759,14 +759,14 @@ export const PositionCard = ({ <> {isLoading && ( - + {isSpliting && t('gov.positions.splitting')} {isExtending && t('gov.positions.extending')} {isTransfering && t('gov.positions.transfering')} @@ -777,7 +777,7 @@ export const PositionCard = ({ {isUndelegating && t('gov.positions.undelegating')} {isRelinquishing && t('gov.positions.relinquishing')} - + @@ -786,39 +786,43 @@ export const PositionCard = ({ {!isLoading && ( <> setActionsOpen(true)}> - + {json?.image ? ( ) : undefined} {`${lockedTokens} ${symbol}`} {hasGenesisMultiplier && ( - + {t('gov.positions.landrush').toUpperCase()} @@ -827,25 +831,29 @@ export const PositionCard = ({ - + {t('gov.positions.lockupType')} - + {lockupKindDisplay} {t('gov.positions.voteMult')} - + {( (position.votingPower.isZero() ? 0 @@ -863,12 +871,12 @@ export const PositionCard = ({ - + {isConstant ? t('gov.positions.minDur') : t('gov.positions.timeLeft')} - + {isConstant ? getMinDurationFmt( position.lockup.startTs, @@ -880,14 +888,14 @@ export const PositionCard = ({ {hasGenesisMultiplier && ( {t('gov.positions.landrush')} @@ -897,22 +905,22 @@ export const PositionCard = ({ )} - + {delegatedSubDaoMetadata ? ( - + {t('gov.positions.delegatedTo')} {delegatedSubDaoMetadata.name} @@ -937,10 +945,10 @@ export const PositionCard = ({ delegatedSubDaoMetadata ? 'flex-end' : 'flex-start' } > - + {t('gov.positions.proxiedTo')} - + - - + + {showError} diff --git a/src/features/governance/PositionPreview.tsx b/src/features/governance/PositionPreview.tsx index ffd4bc4a9..c0593de0a 100644 --- a/src/features/governance/PositionPreview.tsx +++ b/src/features/governance/PositionPreview.tsx @@ -62,23 +62,23 @@ export const PositionPreview: React.FC< return ( - {Icon} + {Icon} - + {amount} {network.toUpperCase()} - + for - + {position.lockup?.endTs ? getMinDurationFmt( new BN(Date.now() / 1000), @@ -86,17 +86,22 @@ export const PositionPreview: React.FC< ) : null} - + {position.lockup?.kind?.cliff ? 'decaying' : 'decaying delayed'} {subDao && ( - + and delegated to {DelegatedIcon} - {subDao.dntMetadata.symbol} + {subDao.dntMetadata.symbol} )} diff --git a/src/features/governance/PositionsList.tsx b/src/features/governance/PositionsList.tsx index 2ae353cd2..e6f1f7e4a 100644 --- a/src/features/governance/PositionsList.tsx +++ b/src/features/governance/PositionsList.tsx @@ -74,7 +74,7 @@ export const PositionsList = ({ header, ...boxProps }: IPositionsListProps) => { // eslint-disable-next-line react/no-array-index-key key={`${p.pubkey.toBase58()}-${p.amountDepositedNative.toString()}-${idx}`} position={p} - marginTop={idx > 0 ? 'm' : 'none'} + marginTop={idx > 0 ? '4' : 'none'} subDaos={subDaos} /> ) @@ -102,15 +102,15 @@ export const PositionsList = ({ header, ...boxProps }: IPositionsListProps) => { return ( - + {t('gov.positions.noneFound')} @@ -129,14 +129,14 @@ export const PositionsList = ({ header, ...boxProps }: IPositionsListProps) => { {icon !== undefined && icon} - + {title} @@ -154,31 +154,31 @@ export const PositionsList = ({ header, ...boxProps }: IPositionsListProps) => { flexDirection="row" justifyContent="center" alignItems="center" - paddingVertical="lm" + paddingVertical="5" > - + Positions - + Increase your voting power by locking tokens diff --git a/src/features/governance/PositionsScreen.tsx b/src/features/governance/PositionsScreen.tsx index 8c4edbde5..f832b6244 100644 --- a/src/features/governance/PositionsScreen.tsx +++ b/src/features/governance/PositionsScreen.tsx @@ -237,59 +237,59 @@ export const PositionsScreen = () => { - } /> + } /> {showError && ( - + {showError} )} - + setIsLockModalOpen(true)} disabled={claimingAllRewards || loading} /> {HNT_MINT.equals(mint) && ( <> - + ) => ( {!hasSeen && derivedState === 'active' && !completed && ( - + - + UNSEEN )} {hasSeen && derivedState === 'active' && !completed && ( - + - + ACTIVE @@ -182,15 +182,15 @@ export const ProposalCard = ({ justifyContent="space-between" alignItems="center" > - + {proposal?.name} {derivedState === 'active' && ( {!descError && desc ? desc : t('gov.proposals.noDescription')} @@ -204,65 +204,73 @@ export const ProposalCard = ({ borderTopWidth={2} borderBottomColor="primaryBackground" borderBottomWidth={2} - paddingHorizontal="m" - paddingVertical="s" + paddingHorizontal="4" + paddingVertical="2" > - + You Voted - Yes )} */} {} {derivedState === 'active' && !completed && ( - + {t('gov.proposals.estTime')} )} {derivedState === 'active' && completed && ( - + {t('gov.proposals.votingClosed')} )} {derivedState === 'passed' && ( - + {t('gov.proposals.success')} )} {derivedState === 'completed' && ( - + {t('gov.proposals.completed')} )} {derivedState === 'failed' && ( - + {t('gov.proposals.failed')} )} {derivedState === 'cancelled' && ( - + {t('gov.proposals.cancelled')} )} {derivedState !== 'cancelled' && ( - + {getTimeFromNowFmt(endTs || new BN(0))} )} {derivedState !== 'cancelled' && ( - + {t('gov.proposals.votes')} - + {humanReadable(votingResults?.totalVotes, decimals) || 'None'} diff --git a/src/features/governance/ProposalScreen.tsx b/src/features/governance/ProposalScreen.tsx index 18e998c29..98e259357 100644 --- a/src/features/governance/ProposalScreen.tsx +++ b/src/features/governance/ProposalScreen.tsx @@ -282,8 +282,8 @@ export const ProposalScreen = () => { return ( @@ -291,16 +291,16 @@ export const ProposalScreen = () => { edges={safeEdges} backgroundColor="transparent" flex={1} - marginTop="l" + marginTop="6" > - + {proposal?.tags @@ -308,61 +308,61 @@ export const ProposalScreen = () => { .map((tag, idx) => ( 0 ? 's' : 'none'} - padding="s" + marginLeft={idx > 0 ? '2' : 'none'} + padding="2" backgroundColor={ tag.toLowerCase().includes('temp check') - ? 'orange500' - : 'black600' + ? 'orange.500' + : 'secondaryBackground' } - borderRadius="m" + borderRadius="2xl" > - + {tag.toUpperCase()} ))} - - + + {proposal?.name} - + {derivedState === 'active' && !completed && ( - + {t('gov.proposals.estTime')} )} {derivedState === 'active' && completed && ( - + {t('gov.proposals.votingClosed')} )} {derivedState === 'passed' && ( - + {t('gov.proposals.success')} )} {derivedState === 'completed' && ( - + {t('gov.proposals.completed')} )} {derivedState === 'failed' && ( - + {t('gov.proposals.failed')} )} {derivedState === 'cancelled' && ( - + {t('gov.proposals.cancelled')} )} {derivedState !== 'cancelled' && ( - + {getTimeFromNowFmt(endTs || new BN(0))} )} @@ -370,14 +370,14 @@ export const ProposalScreen = () => { {derivedState !== 'cancelled' && ( {t('gov.proposals.votes')} @@ -390,9 +390,9 @@ export const ProposalScreen = () => { {showVoteResults && votingResults?.totalVotes.gt(new BN(0)) && ( {votingResults.results ?.sort((a, b) => b.percent - a.percent) @@ -400,10 +400,10 @@ export const ProposalScreen = () => { 0 ? 's' : 'none'} + marginTop={idx > 0 ? '2' : 'none'} > @@ -412,8 +412,8 @@ export const ProposalScreen = () => { @@ -429,13 +429,16 @@ export const ProposalScreen = () => { justifyContent="space-between" > {humanReadable(r.weight, decimals)} - + {r.percent.toFixed(2)}% @@ -458,17 +461,17 @@ export const ProposalScreen = () => { justifyContent="space-between" alignItems="center" flexGrow={1} - backgroundColor="surfaceSecondary" - borderRadius="l" - padding="m" - marginTop="m" + backgroundColor="bg.tertiary" + borderRadius="2xl" + padding="4" + marginTop="4" > - + {`${t('gov.votingPower.noPower')}, ${t( 'gov.votingPower.increase', )}`} - + > @@ -479,12 +482,12 @@ export const ProposalScreen = () => { - + {t('gov.proposals.toVote', { maxChoicesPerVoter: proposal?.maxChoicesPerVoter, choicesLength: proposal?.choices.length, @@ -492,50 +495,55 @@ export const ProposalScreen = () => { - + OR - + {t('gov.proposals.assignProxy')} } - borderRadius="round" - mt="m" + borderRadius="full" + mt="4" onPress={handleBrowseVoters} - padding="s" + padding="2" title={t('gov.assignProxy.browseVoters')} /> {showError && ( - + {showError} @@ -543,8 +551,8 @@ export const ProposalScreen = () => { {votingResults.results?.map((r, index) => ( { diff --git a/src/features/governance/ProposalTags.tsx b/src/features/governance/ProposalTags.tsx index 63213f153..52a52881d 100644 --- a/src/features/governance/ProposalTags.tsx +++ b/src/features/governance/ProposalTags.tsx @@ -11,15 +11,15 @@ export const ProposalTags: React.FC<{ ? tags .filter((tag) => tag !== 'tags') .map((tag) => ( - + {tag.toUpperCase()} diff --git a/src/features/governance/ProposalsList.tsx b/src/features/governance/ProposalsList.tsx index aaf77ada9..fb9a41abd 100644 --- a/src/features/governance/ProposalsList.tsx +++ b/src/features/governance/ProposalsList.tsx @@ -161,13 +161,13 @@ export const ProposalsList = ({ ...boxProps }: IProposalsListProps) => { setFiltersOpen(true)} > - + {t('gov.proposals.filter', { filter: filter.charAt(0).toUpperCase() + filter.slice(1), })} @@ -175,7 +175,7 @@ export const ProposalsList = ({ ...boxProps }: IProposalsListProps) => { {isLoading ? ( - + ) : ( proposals ?.filter((p) => Boolean(p.info)) @@ -183,7 +183,7 @@ export const ProposalsList = ({ ...boxProps }: IProposalsListProps) => { 0 ? 'm' : 'none'} + marginTop={idx > 0 ? '4' : 'none'} proposal={proposal.info as ProposalV0} proposalKey={proposal.publicKey} onPress={async (m, p) => diff --git a/src/features/governance/ProxySearch.tsx b/src/features/governance/ProxySearch.tsx index f8959702d..d7876431a 100644 --- a/src/features/governance/ProxySearch.tsx +++ b/src/features/governance/ProxySearch.tsx @@ -61,16 +61,16 @@ export const ProxySearch: React.FC<{ ({ item }: { item: { value: string; label: string } }) => { return ( { onValueChange(item.value) setInput(item.value) setFocused(false) }} > - + {item.label} @@ -115,7 +115,7 @@ export const ProxySearch: React.FC<{ renderItem={renderItem} ListHeaderComponent={ <> - + {selected ? selected.label : t('gov.assignProxy.searchPlaceholder')} @@ -131,14 +131,14 @@ export const ProxySearch: React.FC<{ }} /> diff --git a/src/features/governance/RevokeProxyScreen.tsx b/src/features/governance/RevokeProxyScreen.tsx index 0b57e8fca..174dd219e 100644 --- a/src/features/governance/RevokeProxyScreen.tsx +++ b/src/features/governance/RevokeProxyScreen.tsx @@ -82,7 +82,7 @@ export const RevokeProxyScreen = () => { return ( { setSelectedPositions((sel) => { @@ -194,17 +194,17 @@ export const RevokeProxyScreen = () => { - - + + {t('gov.revokeProxy.description')} {/* If this view is for a singular position, do not show the set proxy wallet */} - + { {/* Don't show network when position already defined */} {position ? null : ( - - + + {t('gov.assignProxy.selectNetwork')}