add new screen for theme config

apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx

@@ -550,9 +550,10 @@ const useStrings = () => {
 }
 
 const SettingsIconButton = (props: TouchableOpacityProps) => {
+  const {color} = useTheme()
   return (
     <TouchableOpacity {...props}>
-      <Icon.Settings size={30} color={COLORS.BLACK} />
+      <Icon.Settings size={30} color={color.gray_cmax} />
     </TouchableOpacity>
   )
 }

apps/wallet-mobile/src/components/Icon/Icon.stories.tsx

@@ -199,6 +199,8 @@ storiesOf('Icon', module).add('Gallery', () => {
 
         <Item icon={<Icon.Table size={40} />} title="Table" />
 
+        <Item icon={<Icon.Theme size={40} />} title="Theme" />
+
         <Item icon={<Icon.TermsOfUse size={40} />} title="Terms Of Use" />
 
         <Item icon={<Icon.Tokens size={40} />} title="Tokens" />

apps/wallet-mobile/src/components/Icon/Theme.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Theme = ({size = 20, color = '#6B7384'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Path
+      d="M16 8.5C16 9.32843 15.3284 10 14.5 10C13.6716 10 13 9.32843 13 8.5C13 7.67157 13.6716 7 14.5 7C15.3284 7 16 7.67157 16 8.5Z"
+      fill={color}
+    />
+
+    <Path
+      d="M11.5 7C12.3284 7 13 6.32843 13 5.5C13 4.67157 12.3284 4 11.5 4C10.6716 4 10 4.67157 10 5.5C10 6.32843 10.6716 7 11.5 7Z"
+      fill={color}
+    />
+
+    <Path
+      d="M9 6.5C9 7.32843 8.32843 8 7.5 8C6.67157 8 6 7.32843 6 6.5C6 5.67157 6.67157 5 7.5 5C8.32843 5 9 5.67157 9 6.5Z"
+      fill={color}
+    />
+
+    <Path
+      d="M4.5 11C5.32843 11 6 10.3284 6 9.5C6 8.67157 5.32843 8 4.5 8C3.67157 8 3 8.67157 3 9.5C3 10.3284 3.67157 11 4.5 11Z"
+      fill={color}
+    />
+
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 10C0 4.49734 4.49971 0 10.0036 0C15.3595 0 19.972 3.95028 20 8.95041L20 8.956C20 12.2548 17.2972 14.9546 13.9985 14.9546H12.2014L12.1842 14.9545C12.1202 14.9533 12.0566 14.9651 11.9972 14.9891C11.9379 15.0131 11.884 15.0487 11.8388 15.0939C11.7936 15.1391 11.758 15.1929 11.734 15.2521C11.7101 15.3113 11.6983 15.3747 11.6994 15.4386L11.6996 15.4558C11.6996 15.6427 11.7453 15.7057 11.7997 15.7598C11.8143 15.7744 11.8285 15.7894 11.8422 15.8049C12.214 16.2243 12.4874 16.8121 12.4874 17.4808C12.4874 18.856 11.4142 20 10.0036 20C4.49971 20 0 15.5027 0 10ZM10.0036 2C5.60353 2 2 5.60266 2 10C2 14.3973 5.60353 18 10.0036 18C10.2605 18 10.4874 17.8012 10.4874 17.4808C10.4874 17.3686 10.4415 17.2468 10.3586 17.1468C9.91295 16.6875 9.70139 16.1111 9.69959 15.4641C9.6951 15.1348 9.75637 14.8079 9.87986 14.5025C10.0044 14.1943 10.1898 13.9144 10.4249 13.6794C10.6599 13.4445 10.9399 13.2592 11.2481 13.1347C11.5532 13.0115 11.8798 12.9502 12.2088 12.9546H13.9985C16.1929 12.9546 17.9985 11.1505 18 8.95881C17.9776 5.26968 14.4803 2 10.0036 2Z"
+      fill={color}
+    />
+  </Svg>
+)

apps/wallet-mobile/src/components/Icon/index.ts

@@ -104,6 +104,7 @@ import {TabStaking} from './TabStaking'
 import {TabWallet} from './TabWallet'
 import {Telegram} from './Telegram'
 import {TermsOfUse} from './TermsOfUse'
+import {Theme} from './Theme'
 import {ThumbsUp} from './ThumbsUp'
 import {Tokens} from './Tokens'
 import {TotalAda} from './TotalAda'
@@ -200,6 +201,7 @@ export const Icon = {
   TabStaking,
   TabWallet,
   Table,
+  Theme,
   Telegram,
   TermsOfUse,
   ThumbsUp,

apps/wallet-mobile/src/features/Settings/ApplicationSettings/ApplicationSettingsScreen.tsx

@@ -1,13 +1,13 @@
 import {isBoolean} from '@yoroi/common'
-import {useTheme} from '@yoroi/theme'
-import {capitalize} from 'lodash'
+import {SupportedThemes, useTheme} from '@yoroi/theme'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {Platform, ScrollView, StyleSheet, Switch} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {Icon, Spacer} from '../../../components'
 import {useLanguage} from '../../../i18n'
+import {themeNames} from '../../../i18n/global-messages'
 import {defaultLanguage} from '../../../i18n/languages'
 import {CONFIG, isNightly, isProduction} from '../../../legacy/config'
 import {lightPalette} from '../../../theme'
@@ -95,12 +95,12 @@ export const ApplicationSettingsScreen = () => {
           />
 
           {displayToggleThemeSetting && (
-            <SettingsItem
-              icon={<Icon.EyeOff {...iconProps} />} // TODO
-              label={`${capitalize(name)} Theme`} // TODO
-            >
-              <ToggleThemeSwitch />
-            </SettingsItem>
+            <NavigatedSettingsItem
+              icon={<Icon.Theme {...iconProps} />}
+              label={strings.selectTheme}
+              onNavigate={navigateTo.changeTheme}
+              selected={strings.translateThemeName(name)}
+            />
           )}
         </SettingsSection>
 
@@ -183,24 +183,6 @@ const PrivacyModeSwitch = ({isPrivacyOff}: {isPrivacyOff: boolean}) => {
   return <Switch value={isLocalPrivacyOff} onValueChange={onTogglePrivacyMode} disabled={isTogglePrivacyModeLoading} />
 }
 
-const ToggleThemeSwitch = () => {
-  const {selectThemeName, name} = useTheme()
-  const [theme, setTheme] = React.useState(true)
-
-  const onToggleThemeMode = () => {
-    if (name === 'default-light') {
-      selectThemeName('default-dark')
-      setTheme(true)
-    }
-    if (name === 'default-dark') {
-      selectThemeName('default-light')
-      setTheme(false)
-    }
-  }
-
-  return <Switch value={theme} onValueChange={onToggleThemeMode} />
-}
-
 // to avoid switch jumps
 const CrashReportsSwitch = ({crashReportEnabled}: {crashReportEnabled: boolean}) => {
   const {enable, disable} = useCrashReports()
@@ -241,6 +223,7 @@ const useStrings = () => {
     general: intl.formatMessage(messages.general),
     securityReporting: intl.formatMessage(messages.securityReporting),
     selectLanguage: intl.formatMessage(messages.selectLanguage),
+    selectTheme: intl.formatMessage(messages.selectTheme),
     selectFiatCurrency: intl.formatMessage(messages.selectFiatCurrency),
     about: intl.formatMessage(messages.about),
     changePin: intl.formatMessage(messages.changePin),
@@ -255,6 +238,7 @@ const useStrings = () => {
     privacyPolicy: intl.formatMessage(messages.privacyPolicy),
     screenSharing: intl.formatMessage(messages.screenSharing),
     screenSharingInfo: intl.formatMessage(messages.screenSharingInfo),
+    translateThemeName: (theme: SupportedThemes) => intl.formatMessage(themeNames[theme]),
   }
 }
 
@@ -271,6 +255,10 @@ const messages = defineMessages({
     id: 'components.settings.applicationsettingsscreen.selectLanguage',
     defaultMessage: '!!!Language',
   },
+  selectTheme: {
+    id: 'components.settings.applicationsettingsscreen.selectTheme',
+    defaultMessage: '!!!Theme',
+  },
   selectFiatCurrency: {
     id: 'components.settings.applicationsettingsscreen.selectFiatCurrency',
     defaultMessage: '!!!Fiat Currency',

apps/wallet-mobile/src/features/Settings/ChangeTheme/ChangeThemeScreen.stories.tsx

@@ -0,0 +1,11 @@
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+
+import {SafeAreaInsets} from '../../../../.storybook/decorators'
+import {ChangeThemeScreen} from './ChangeThemeScreen'
+
+storiesOf('ChangeThemeScreen', module).add('Default', () => (
+  <SafeAreaInsets sides={['left', 'right', 'bottom']}>
+    <ChangeThemeScreen />
+  </SafeAreaInsets>
+))

apps/wallet-mobile/src/features/Settings/ChangeTheme/ChangeThemeScreen.tsx

@@ -0,0 +1,31 @@
+import {useTheme} from '@yoroi/theme'
+import React from 'react'
+import {StyleSheet} from 'react-native'
+import {SafeAreaView} from 'react-native-safe-area-context'
+
+import {Boundary} from '../../../components'
+import {ThemePickerList} from './ThemePickerList'
+
+export const ChangeThemeScreen = () => {
+  const styles = useStyles()
+
+  return (
+    <SafeAreaView edges={['bottom', 'right', 'left']} style={styles.safeAreaView}>
+      <Boundary>
+        <ThemePickerList />
+      </Boundary>
+    </SafeAreaView>
+  )
+}
+
+const useStyles = () => {
+  const {color} = useTheme()
+  const styles = StyleSheet.create({
+    safeAreaView: {
+      flex: 1,
+      backgroundColor: color.gray_cmin,
+    },
+  })
+
+  return styles
+}

apps/wallet-mobile/src/features/Settings/ChangeTheme/ThemePickerItem.tsx

@@ -0,0 +1,88 @@
+import {SupportedThemes, useTheme} from '@yoroi/theme'
+import React from 'react'
+import {useIntl} from 'react-intl'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+
+import {Icon} from '../../../components/Icon'
+import {Text} from '../../../components/Text'
+import {themeNames} from '../../../i18n/global-messages'
+
+type Props = {
+  title: SupportedThemes
+  selectTheme: (name: SupportedThemes) => void
+  isSelected: boolean
+}
+
+export const ThemePickerItem = ({title, selectTheme, isSelected}: Props) => {
+  const {colors} = useStyles()
+  const strings = useStrings()
+
+  const handleSelectTheme = (theme: SupportedThemes) => {
+    selectTheme(theme)
+  }
+  return (
+    <TouchableOpacity activeOpacity={0.5} onPress={() => handleSelectTheme(title)}>
+      <Row>
+        <Description>
+          <Title>{strings.translateThemeName(title)}</Title>
+        </Description>
+
+        <Selected>{isSelected && <Icon.Check size={24} color={colors.checkIcon} />}</Selected>
+      </Row>
+    </TouchableOpacity>
+  )
+}
+
+const Row = ({children}: {children: React.ReactNode}) => {
+  const {styles} = useStyles()
+  return <View style={styles.row}>{children}</View>
+}
+const Description = ({children}: {children: React.ReactNode}) => {
+  const {styles} = useStyles()
+  return <View style={styles.description}>{children}</View>
+}
+const Selected = ({children}: {children: React.ReactNode}) => {
+  const {styles} = useStyles()
+  return <View style={styles.flag}>{children}</View>
+}
+const Title = ({children}: {children: React.ReactNode}) => {
+  const {styles} = useStyles()
+  return <Text style={styles.bodyMedium}>{children}</Text>
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      borderBottomColor: color.gray_c200,
+      borderBottomWidth: 1,
+      paddingVertical: 8,
+    },
+    flag: {
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      flex: 2,
+    },
+    description: {
+      flex: 8,
+      flexDirection: 'column',
+    },
+    bodyMedium: {
+      color: color.gray_c900,
+      ...atoms.body_1_lg_medium,
+    },
+  })
+  const colors = {
+    checkIcon: color.primary_c600,
+  }
+  return {styles, colors}
+}
+
+const useStrings = () => {
+  const intl = useIntl()
+
+  return {
+    translateThemeName: (theme: SupportedThemes) => intl.formatMessage(themeNames[theme]),
+  }
+}

apps/wallet-mobile/src/features/Settings/ChangeTheme/ThemePickerList.tsx

@@ -0,0 +1,27 @@
+import {useTheme} from '@yoroi/theme'
+import React from 'react'
+import {FlatList, StyleSheet} from 'react-native'
+
+import {ThemePickerItem} from './ThemePickerItem'
+
+export const ThemePickerList = () => {
+  const {name, selectThemeName, data} = useTheme()
+
+  return (
+    <FlatList
+      contentContainerStyle={styles.contentContainer}
+      data={data}
+      keyExtractor={({themeName}) => themeName}
+      renderItem={({item: {themeName}}) => {
+        console.log('ThemePickerList themeName', themeName)
+        return <ThemePickerItem isSelected={themeName === name} title={themeName} selectTheme={selectThemeName} />
+      }}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    padding: 16,
+  },
+})

apps/wallet-mobile/src/features/Settings/SettingsScreenNavigator.tsx

@@ -22,6 +22,7 @@ import {About} from './About'
 import {ApplicationSettingsScreen} from './ApplicationSettings'
 import {ChangeLanguageScreen} from './ChangeLanguage'
 import {ChangePasswordScreen} from './ChangePassword'
+import {ChangeThemeScreen} from './ChangeTheme/ChangeThemeScreen'
 import {ChangeWalletName} from './ChangeWalletName'
 import {ChangeCurrencyScreen} from './Currency/ChangeCurrencyScreen'
 import {DisableEasyConfirmationScreen, EnableEasyConfirmationScreen} from './EasyConfirmation'
@@ -114,6 +115,14 @@ export const SettingsScreenNavigator = () => {
           }}
         />
 
+        <Stack.Screen //
+          name="change-theme"
+          component={ChangeThemeScreen}
+          options={{
+            title: strings.themeTitle,
+          }}
+        />
+
         <Stack.Screen //
           name="enable-easy-confirmation"
           component={EnableEasyConfirmationScreen}
@@ -276,6 +285,10 @@ const messages = defineMessages({
     id: 'components.settings.changelanguagescreen.title',
     defaultMessage: '!!!Language',
   },
+  themeTitle: {
+    id: 'components.settings.changeThemescreen.title',
+    defaultMessage: '!!!Theming',
+  },
   appSettingsTitle: {
     id: 'components.settings.applicationsettingsscreen.appSettingsTitle',
     defaultMessage: '!!!App settings',
@@ -311,6 +324,7 @@ const useStrings = () => {
     customPinTitle: intl.formatMessage(messages.customPinTitle),
     settingsTitle: intl.formatMessage(messages.settingsTitle),
     languageTitle: intl.formatMessage(messages.languageTitle),
+    themeTitle: intl.formatMessage(messages.themeTitle),
     currency: intl.formatMessage(globalMessages.currency),
     aboutTitle: intl.formatMessage(messages.aboutTitle),
     appSettingsTitle: intl.formatMessage(messages.appSettingsTitle),

apps/wallet-mobile/src/features/Settings/common/navigation.tsx

@@ -11,6 +11,7 @@ export const useNavigateTo = () => {
     enableLoginWithOs: () => navigation.navigate('enable-login-with-os'),
     changeLanguage: () => navigation.navigate('change-language'),
     changeCurrency: () => navigation.navigate('change-currency'),
+    changeTheme: () => navigation.navigate('change-theme'),
     about: () => navigation.navigate('about'),
     termsOfUse: () => navigation.navigate('terms-of-use'),
     privacyPolicy: () => navigation.navigate('privacy-policy'),