From 1db905be5224ce2b76ca6c15da1dd7f3bcbd9258 Mon Sep 17 00:00:00 2001 From: Will Beaumont <4557711+wjbeau@users.noreply.github.com> Date: Fri, 23 Jan 2026 10:29:53 +0000 Subject: [PATCH 1/3] feat: implement theme settings [PERA-3423] --- .../PWRadioButton/PWRadioButton.tsx} | 13 +++++++++---- .../PWRadioButton/__tests__/PWRadioButton.spec.tsx} | 6 +++--- .../{RadioButton => core/PWRadioButton}/index.ts | 4 ++-- .../{RadioButton => core/PWRadioButton}/styles.ts | 7 +++++-- apps/mobile/src/components/core/index.ts | 9 +++++---- apps/mobile/src/i18n/locales/en.json | 2 +- .../src/modules/menu/screens/MenuScreen/styles.ts | 7 ++++--- .../settings/components/AppVersion/styles.ts | 3 ++- .../SettingsCurrencyScreen.tsx | 4 ++-- .../settings/screens/SettingsScreen/styles.ts | 7 ------- .../SettingsThemeScreen/SettingsThemeScreen.tsx | 9 ++++----- .../settings/screens/SettingsThemeScreen/styles.ts | 1 + .../SettingsDeveloperNodeSettingsScreen.tsx | 6 +++--- 13 files changed, 41 insertions(+), 37 deletions(-) rename apps/mobile/src/components/{RadioButton/RadioButton.tsx => core/PWRadioButton/PWRadioButton.tsx} (80%) rename apps/mobile/src/components/{RadioButton/__tests__/RadioButton.spec.tsx => core/PWRadioButton/__tests__/PWRadioButton.spec.tsx} (90%) rename apps/mobile/src/components/{RadioButton => core/PWRadioButton}/index.ts (84%) rename apps/mobile/src/components/{RadioButton => core/PWRadioButton}/styles.ts (89%) diff --git a/apps/mobile/src/components/RadioButton/RadioButton.tsx b/apps/mobile/src/components/core/PWRadioButton/PWRadioButton.tsx similarity index 80% rename from apps/mobile/src/components/RadioButton/RadioButton.tsx rename to apps/mobile/src/components/core/PWRadioButton/PWRadioButton.tsx index e54a4cc0f..1622959a8 100644 --- a/apps/mobile/src/components/RadioButton/RadioButton.tsx +++ b/apps/mobile/src/components/core/PWRadioButton/PWRadioButton.tsx @@ -13,16 +13,16 @@ import { PWText, PWTouchableOpacity, PWView } from '@components/core' import { useStyles } from './styles' -export type RadioButtonProps = { +export type PWRadioButtonProps = { onPress: () => void title: string isSelected: boolean } -export const RadioButton = ({ +export const PWRadioButton = ({ onPress, title, isSelected, -}: RadioButtonProps) => { +}: PWRadioButtonProps) => { const styles = useStyles() return ( @@ -31,7 +31,12 @@ export const RadioButton = ({ style={styles.row} > {title} - + {isSelected && } diff --git a/apps/mobile/src/components/RadioButton/__tests__/RadioButton.spec.tsx b/apps/mobile/src/components/core/PWRadioButton/__tests__/PWRadioButton.spec.tsx similarity index 90% rename from apps/mobile/src/components/RadioButton/__tests__/RadioButton.spec.tsx rename to apps/mobile/src/components/core/PWRadioButton/__tests__/PWRadioButton.spec.tsx index bc5a7b45e..e573c8ec6 100644 --- a/apps/mobile/src/components/RadioButton/__tests__/RadioButton.spec.tsx +++ b/apps/mobile/src/components/core/PWRadioButton/__tests__/PWRadioButton.spec.tsx @@ -13,13 +13,13 @@ import { describe, it, expect, vi } from 'vitest' import React from 'react' import { render, fireEvent, screen } from '@test-utils/render' -import { RadioButton } from '../RadioButton' +import { PWRadioButton } from '../PWRadioButton' -describe('RadioButton', () => { +describe('PWRadioButton', () => { it('calls onPress when clicked', () => { const onPress = vi.fn() render( - { justifyContent: 'center', alignItems: 'center', }, + selectedBorder: { + borderColor: theme.colors.helperPositive, + }, selectedRadio: { borderRadius: theme.spacing.lg, - width: theme.spacing.lg, - height: theme.spacing.lg, + width: theme.spacing.md, + height: theme.spacing.md, backgroundColor: theme.colors.helperPositive, }, input: { diff --git a/apps/mobile/src/components/core/index.ts b/apps/mobile/src/components/core/index.ts index 23ae17ae0..d99ea4d4b 100644 --- a/apps/mobile/src/components/core/index.ts +++ b/apps/mobile/src/components/core/index.ts @@ -21,16 +21,17 @@ export * from './PWIcon' export * from './PWImage' export * from './PWInput' export * from './PWListItem' +export * from './PWNumpad' export * from './PWOverlay' +export * from './PWPinCircles' +export * from './PWRadioButton' +export * from './PWScrollView' export * from './PWSkeleton' export * from './PWSwitch' export * from './PWTab' export * from './PWTabView' export * from './PWText' +export * from './PWToolbar' export * from './PWTouchableOpacity' export * from './PWView' export * from './PWWebView' -export * from './PWScrollView' -export * from './PWNumpad' -export * from './PWPinCircles' -export * from './PWToolbar' diff --git a/apps/mobile/src/i18n/locales/en.json b/apps/mobile/src/i18n/locales/en.json index cd5b3142a..ecfb563da 100644 --- a/apps/mobile/src/i18n/locales/en.json +++ b/apps/mobile/src/i18n/locales/en.json @@ -455,7 +455,7 @@ "version_footer": "Pera Wallet Version {{version}}" }, "theme": { - "system_label": "System", + "system_label": "System Default", "light_label": "Light", "dark_label": "Dark" }, diff --git a/apps/mobile/src/modules/menu/screens/MenuScreen/styles.ts b/apps/mobile/src/modules/menu/screens/MenuScreen/styles.ts index 7ffa4f486..11e178932 100644 --- a/apps/mobile/src/modules/menu/screens/MenuScreen/styles.ts +++ b/apps/mobile/src/modules/menu/screens/MenuScreen/styles.ts @@ -18,20 +18,21 @@ export const useStyles = makeStyles(theme => { flex: 1, backgroundColor: theme.colors.background, paddingHorizontal: theme.spacing.lg, + paddingTop: theme.spacing.xl, }, iconBar: { - padding: 0, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: theme.spacing.lg, + paddingHorizontal: theme.spacing.sm, }, iconBarColumn: { width: '33.3333%', flexDirection: 'row', - justifyContent: 'center', + justifyContent: 'flex-end', textAlign: 'center', - gap: theme.spacing.xl, + gap: theme.spacing.lg, }, menuContainer: { gap: theme.spacing.md, diff --git a/apps/mobile/src/modules/settings/components/AppVersion/styles.ts b/apps/mobile/src/modules/settings/components/AppVersion/styles.ts index 20feb4d4f..54a1869e2 100644 --- a/apps/mobile/src/modules/settings/components/AppVersion/styles.ts +++ b/apps/mobile/src/modules/settings/components/AppVersion/styles.ts @@ -16,7 +16,8 @@ export const useStyles = makeStyles(theme => { return { versionText: { color: theme.colors.textGrayLighter, - paddingVertical: theme.spacing.sm, + paddingTop: theme.spacing.sm, + paddingBottom: theme.spacing.xxl, textAlign: 'center', width: '100%', fontSize: 11, diff --git a/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx b/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx index 0728b0e77..487b7c99b 100644 --- a/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx +++ b/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx @@ -22,7 +22,7 @@ import { import { useEffect, useState } from 'react' import { FlatList } from 'react-native' -import { RadioButton } from '@components/RadioButton' +import { PWRadioButton } from '@components/core/PWRadioButton' import { SearchInput } from '@components/SearchInput' import { useInvalidateAssetPrices } from '@perawallet/wallet-core-assets' import { useLanguage } from '@hooks/useLanguage' @@ -59,7 +59,7 @@ export const SettingsCurrencyScreen = () => { const renderItem = ({ item }: { item: Currency }) => { return ( - setCurrency(item)} isSelected={preferredCurrency === item.id} diff --git a/apps/mobile/src/modules/settings/screens/SettingsScreen/styles.ts b/apps/mobile/src/modules/settings/screens/SettingsScreen/styles.ts index fd6104bda..6de1603af 100644 --- a/apps/mobile/src/modules/settings/screens/SettingsScreen/styles.ts +++ b/apps/mobile/src/modules/settings/screens/SettingsScreen/styles.ts @@ -41,12 +41,5 @@ export const useStyles = makeStyles((theme, insets: EdgeInsets) => { marginBottom: insets.bottom, }, scrollViewContainer: {}, - versionText: { - color: theme.colors.textGrayLighter, - paddingVertical: theme.spacing.sm, - textAlign: 'center', - width: '100%', - fontSize: 11, - }, } }) diff --git a/apps/mobile/src/modules/settings/screens/SettingsThemeScreen/SettingsThemeScreen.tsx b/apps/mobile/src/modules/settings/screens/SettingsThemeScreen/SettingsThemeScreen.tsx index c6615ecba..28e21d3ea 100644 --- a/apps/mobile/src/modules/settings/screens/SettingsThemeScreen/SettingsThemeScreen.tsx +++ b/apps/mobile/src/modules/settings/screens/SettingsThemeScreen/SettingsThemeScreen.tsx @@ -11,9 +11,8 @@ */ import { useStyles } from './styles' -import { PWView } from '@components/core' +import { PWView, PWRadioButton } from '@components/core' import { useSettings } from '@perawallet/wallet-core-settings' -import { RadioButton } from '@components/RadioButton' import { useLanguage } from '@hooks/useLanguage' export const SettingsThemeScreen = () => { @@ -23,17 +22,17 @@ export const SettingsThemeScreen = () => { return ( - setTheme('system')} isSelected={!theme || theme === 'system'} /> - setTheme('light')} isSelected={theme === 'light'} /> - setTheme('dark')} isSelected={theme === 'dark'} diff --git a/apps/mobile/src/modules/settings/screens/SettingsThemeScreen/styles.ts b/apps/mobile/src/modules/settings/screens/SettingsThemeScreen/styles.ts index 5c976b84f..4aad8d015 100644 --- a/apps/mobile/src/modules/settings/screens/SettingsThemeScreen/styles.ts +++ b/apps/mobile/src/modules/settings/screens/SettingsThemeScreen/styles.ts @@ -18,6 +18,7 @@ export const useStyles = makeStyles(theme => { flex: 1, flexDirection: 'column', gap: theme.spacing.md, + padding: theme.spacing.md, }, row: { flexDirection: 'row', diff --git a/apps/mobile/src/modules/settings/screens/developer/SettingsDeveloperNodeSettingsScreen/SettingsDeveloperNodeSettingsScreen.tsx b/apps/mobile/src/modules/settings/screens/developer/SettingsDeveloperNodeSettingsScreen/SettingsDeveloperNodeSettingsScreen.tsx index 1d9aed495..004ab9a16 100644 --- a/apps/mobile/src/modules/settings/screens/developer/SettingsDeveloperNodeSettingsScreen/SettingsDeveloperNodeSettingsScreen.tsx +++ b/apps/mobile/src/modules/settings/screens/developer/SettingsDeveloperNodeSettingsScreen/SettingsDeveloperNodeSettingsScreen.tsx @@ -12,7 +12,7 @@ import { useStyles } from './styles' import { PWView } from '@components/core' -import { RadioButton } from '@components/RadioButton' +import { PWRadioButton } from '@components/core/PWRadioButton' import { useNetwork } from '@perawallet/wallet-core-platform-integration' import { Networks } from '@perawallet/wallet-core-shared' import { useLanguage } from '@hooks/useLanguage' @@ -24,12 +24,12 @@ export const SettingsDeveloperNodeSettingsScreen = () => { return ( - setNetwork(Networks.mainnet)} isSelected={network === Networks.mainnet} /> - setNetwork(Networks.testnet)} isSelected={network === Networks.testnet} From db33b4197fbec104b65b0aa2bb35b25b8cee6619 Mon Sep 17 00:00:00 2001 From: Will Beaumont <4557711+wjbeau@users.noreply.github.com> Date: Fri, 23 Jan 2026 10:55:38 +0000 Subject: [PATCH 2/3] chore: update barrel import Co-authored-by: Fred Souza <1396615+fmsouza@users.noreply.github.com> --- .../screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx b/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx index 487b7c99b..0b9d17670 100644 --- a/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx +++ b/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx @@ -22,7 +22,7 @@ import { import { useEffect, useState } from 'react' import { FlatList } from 'react-native' -import { PWRadioButton } from '@components/core/PWRadioButton' +import { PWRadioButton } from '@components/core' import { SearchInput } from '@components/SearchInput' import { useInvalidateAssetPrices } from '@perawallet/wallet-core-assets' import { useLanguage } from '@hooks/useLanguage' From 27e2bc3f08b075e342d87b08f89a5416e0fad11a Mon Sep 17 00:00:00 2001 From: Will Beaumont <4557711+wjbeau@users.noreply.github.com> Date: Fri, 23 Jan 2026 12:36:40 +0000 Subject: [PATCH 3/3] chore: linting --- .../screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx b/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx index 0b9d17670..a9420b112 100644 --- a/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx +++ b/apps/mobile/src/modules/settings/screens/SettingsCurrencyScreen/SettingsCurrencyScreen.tsx @@ -13,7 +13,7 @@ import { Text } from '@rneui/themed' import { useStyles } from './styles' -import { PWView } from '@components/core' +import { PWView, PWRadioButton } from '@components/core' import { Currency, useCurrenciesQuery, @@ -22,7 +22,6 @@ import { import { useEffect, useState } from 'react' import { FlatList } from 'react-native' -import { PWRadioButton } from '@components/core' import { SearchInput } from '@components/SearchInput' import { useInvalidateAssetPrices } from '@perawallet/wallet-core-assets' import { useLanguage } from '@hooks/useLanguage'