feat: implement theme settings [PERA-3423]

apps/mobile/src/components/RadioButton/RadioButton.tsx → 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}
         >
             <PWText>{title}</PWText>
-            <PWView style={styles.radioContainer}>
+            <PWView
+                style={[
+                    styles.radioContainer,
+                    isSelected && styles.selectedBorder,
+                ]}
+            >
                 {isSelected && <PWView style={styles.selectedRadio} />}
             </PWView>
         </PWTouchableOpacity>

apps/mobile/src/components/RadioButton/__tests__/RadioButton.spec.tsx → 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(
-            <RadioButton
+            <PWRadioButton
                 title='Option 1'
                 isSelected={false}
                 onPress={onPress}

apps/mobile/src/components/RadioButton/index.ts → apps/mobile/src/components/core/PWRadioButton/index.ts

@@ -10,5 +10,5 @@
  limitations under the License
  */
 
-export { RadioButton } from './RadioButton'
-export type { RadioButtonProps } from './RadioButton'
+export { PWRadioButton } from './PWRadioButton'
+export type { PWRadioButtonProps } from './PWRadioButton'

apps/mobile/src/components/RadioButton/styles.ts → apps/mobile/src/components/core/PWRadioButton/styles.ts

@@ -30,10 +30,13 @@ export const useStyles = makeStyles(theme => {
             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: {

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'

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"
         },

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,

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,

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 { RadioButton } from '@components/RadioButton'
 import { SearchInput } from '@components/SearchInput'
 import { useInvalidateAssetPrices } from '@perawallet/wallet-core-assets'
 import { useLanguage } from '@hooks/useLanguage'
@@ -59,7 +58,7 @@ export const SettingsCurrencyScreen = () => {
 
     const renderItem = ({ item }: { item: Currency }) => {
         return (
-            <RadioButton
+            <PWRadioButton
                 title={`${item.name} (${item.id})`}
                 onPress={() => setCurrency(item)}
                 isSelected={preferredCurrency === item.id}

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,
-        },
     }
 })

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 (
         <PWView style={styles.container}>
-            <RadioButton
+            <PWRadioButton
                 title={t('settings.theme.system_label')}
                 onPress={() => setTheme('system')}
                 isSelected={!theme || theme === 'system'}
             />
-            <RadioButton
+            <PWRadioButton
                 title={t('settings.theme.light_label')}
                 onPress={() => setTheme('light')}
                 isSelected={theme === 'light'}
             />
-            <RadioButton
+            <PWRadioButton
                 title={t('settings.theme.dark_label')}
                 onPress={() => setTheme('dark')}
                 isSelected={theme === 'dark'}

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',

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 (
         <PWView style={styles.container}>
-            <RadioButton
+            <PWRadioButton
                 title={t('settings.developer.node_settings.mainnet_label')}
                 onPress={() => setNetwork(Networks.mainnet)}
                 isSelected={network === Networks.mainnet}
             />
-            <RadioButton
+            <PWRadioButton
                 title={t('settings.developer.node_settings.testnet_label')}
                 onPress={() => setNetwork(Networks.testnet)}
                 isSelected={network === Networks.testnet}