be-components 3.5.9 → 3.6.1

package/src/Wallet/components/WalletSettings.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react"
 import type { MyPlayerProps, PlayerDepositLimitProps, PlayerReferralProps, PlayerWithdrawLimitProps, PromoProps } from '../../types';
-import { View, TouchableOpacity, ScrollView } from 'react-native';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Toggle } from '../../Components';
 import { WalletHelpers } from '../api';
+import { Button, Text, View } from "../../Components/Themed";
+import { useColors } from "../../constants/useColors";
+import { FlatList } from "react-native";
 
 type BEWalletProps = {
     player:MyPlayerProps,
@@ -17,200 +18,197 @@ type BEWalletProps = {
     onClose:() => void
 }
 
-const WalletSettings = ({ player, my_referral, deposit_limit, withdraw_limit, onPremium, onClose }:BEWalletProps) => {
+const sections = ['header', 'toggle', 'deposit','withdraw','referral']
+const WalletSettings = ({ player, my_referral, deposit_limit, withdraw_limit, onClose }:BEWalletProps) => {
     const [ active_tab, setActiveTab ] = useState('deposit');
-
+    const Colors = useColors();
     //const promo = useSelector((state:RootState) => state.wallet.promo, (left, right) => left?.promo_id == right?.promo_id);
     //const player_referral = useSelector((state:RootState) => state.wallet.player_referral, (left, right) => left?.last_update_datetime == right?.last_update_datetime);
 
     const { player_referral, promo } = my_referral
     //const tabs = ['referral','deposit','withdraw']
-
-
-
-    if(!player){ return <></> }
-    return (
-        <View style={{ flex:1 }}>
-            <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>WALLET SETTINGS</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Below are your overall wallet settings & configurations. These are set based on account type and past transaction history.</Text>
-            </View>
-            <View style={{ flexDirection: 'row', paddingLeft:10, paddingRight:10 }}>
-                <TouchableOpacity 
-                    style={{ flex:1, borderWidth:1,borderColor:Colors.shades.shade600, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:active_tab=='deposit'?Colors.brand.midnight:undefined }}
-                    onPress={() => setActiveTab('deposit')}
-                    >
-                    <Text weight={active_tab == 'deposit'?'bold':'regular'} textAlign="center" size={14} color={active_tab=='deposit'?Colors.shades.white:Colors.brand.midnight}>Deposit</Text>
-                </TouchableOpacity>
-                <TouchableOpacity
-                    style={{ flex:1, borderWidth:1, borderColor:Colors.shades.shade600, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:active_tab=='withdraw'?Colors.brand.midnight:undefined }}
-                    onPress={() => setActiveTab('withdraw')}
-                    >
-                    <Text weight={active_tab == 'withdraw'?'bold':'regular'} textAlign="center" size={14} color={active_tab=='withdraw'?Colors.shades.white:Colors.brand.midnight}>Withdraw</Text>
-                </TouchableOpacity>
-                <TouchableOpacity 
-                    style={{ flex:1, borderWidth:1, borderColor:Colors.shades.shade600, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:active_tab=='referral'?Colors.brand.midnight:undefined }}
-                    onPress={() => setActiveTab('referral')}
-                    >
-                    <Text weight={active_tab == 'referral'?'bold':'regular'} textAlign="center" size={14} color={active_tab=='referral'?Colors.shades.white:Colors.brand.midnight}>Referral</Text>
-                </TouchableOpacity>
-            </View>
-            <ScrollView nativeID="settings" style={{ flex:1, marginLeft:10, marginRight:10, borderRightWidth:1, borderLeftWidth:1, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                {active_tab == 'deposit' ?
-                <View>
-                    {deposit_limit ?
-                    <View nativeID="deposit_limit">
-                        <View style={{ backgroundColor:Colors.shades.shade100, padding:10 }}>
-                            <Text size={14} color={Colors.brand.midnight} weight='semibold'>Deposit Settings</Text>
-                            <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Below are your current deposit limits.  These may change based on historical transaction results.</Text>
+    console.log(active_tab)
+    console.log(deposit_limit)
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:15 }}>
+                        <View transparent style={{flex:1}}>
+                            <Text size={20} theme='h1'>MY WALLET SETTINGS / LIMITS</Text>
+                            <Text style={{ marginTop:5}} theme='description'>Below are your overall wallet settings & configurations. These are set based on account type and past transaction history</Text>
                         </View>
-                        <View style={{ padding:10 }}>
-
-                        <View style={{ flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
-                            <View style={{ flex:1 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>ACH Daily Limit</Text>
-                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The maximum deposit amount allowed per day from an ACH account</Text>
-                            </View>
-                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight="bold">${deposit_limit.ach_daily_limit}</Text>
+                    </View>
+                )
+            case 'toggle':
+                return (
+                    <View style={{ padding:10 }}>
+                        <Toggle
+                            options={[
+                                {key: 'deposit', label:'Deposit' },
+                                {key: 'withdraw', label:'Withdraw' },
+                                {key: 'referral', label:'Referral' }
+                            ]}
+                            selected_option={active_tab}
+                            onSelectOption={(option) => setActiveTab(option)}
+                        />
+                    </View>
+                )
+            case 'deposit':
+                if(active_tab != 'deposit'){ return <></> }
+                if(!deposit_limit){ return <></> }
+                return (
+                    <View nativeID="deposit_limit">
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:15 }}>
+                            <View transparent style={{flex:1}}>
+                                <Text theme='h1'>DEPOSIT SETTINGS</Text>
+                                <Text style={{ marginTop:3}} theme='description'>Below are your current deposit limits.  These may change based on historical transaction results.</Text>
                             </View>
                         </View>
-                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
-                            <View style={{ flex:1 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Card / Paypal Daily Limit</Text>
-                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The maximum deposit amount allowed per day from a card account</Text>
+                        <View type='body' style={{ padding:10 }}>
+                            <View type='row' style={{ flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                                <View style={{ flex:1 }}>
+                                    <Text theme="h2">ACH Daily Limit</Text>
+                                    <Text style={{ marginTop:5 }} theme="description">The maximum deposit amount allowed per day from an ACH account</Text>
+                                </View>
+                                <View>
+                                    <Text theme="h2">${deposit_limit.ach_daily_limit}</Text>
+                                </View>
                             </View>
-                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight="bold">${deposit_limit.card_daily_limit}</Text>
+                            <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                                <View style={{ flex:1 }}>
+                                    <Text theme="h2">Card / Paypal Daily Limit</Text>
+                                    <Text style={{ marginTop:5 }} theme="description">The maximum deposit amount allowed per day from a card account</Text>
+                                </View>
+                                <View>
+                                    <Text theme="h2">${deposit_limit.card_daily_limit}</Text>
+                                </View>
                             </View>
-                        </View>
-                        <View style={{ flexDirection:'row', alignItems:'flex-start', marginTop:10, padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                        <View style={{ flexDirection:'row', alignItems:'flex-start', marginTop:10, padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                             <View style={{ flex:1 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Instant Deposit Limit</Text>
-                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The total amount of unsettled deposits that will be instantly added to your wallet.  Any deposit over this amount will be held until it settles.</Text>
+                                <Text theme="h2">Instant Deposit Limit</Text>
+                                <Text style={{ marginTop:5 }} theme="description">The total amount of unsettled deposits that will be instantly added to your wallet.  Any deposit over this amount will be held until it settles.</Text>
                             </View>
-                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight="bold">${deposit_limit.instant_limit}</Text>
+                            <View>
+                                <Text theme="h2">${deposit_limit.instant_limit}</Text>
                             </View>
                         </View>
-                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                             <View style={{ flex:1 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Hold Days</Text>
-                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The number of days a deposit transaction will be held (not settled) before it can be withdrawn</Text>
+                                <Text theme='h2'>Hold Days</Text>
+                                <Text style={{ marginTop:5 }} theme="description">The number of days a deposit transaction will be held (not settled) before it can be withdrawn</Text>
                             </View>
-                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight="bold">{deposit_limit.hold_days}</Text>
+                            <View>
+                                <Text theme="h2">{deposit_limit.hold_days}</Text>
                             </View>
                         </View>
-                        <View style={{ flexDirection:'row', alignItems:'flex-start', marginTop:10, padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                        <View style={{ flexDirection:'row', alignItems:'flex-start', marginTop:10, padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                             <View style={{ flex:1 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Instant Deposit Available</Text>
-                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Your instant deposit limit minus your unsettled deposits</Text>
+                                <Text theme="h2">Instant Deposit Available</Text>
+                                <Text style={{ marginTop:5 }} theme="description">Your instant deposit limit minus your unsettled deposits</Text>
                             </View>
-                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                <Text size={14} color={deposit_limit.instant_available > 0 ? Colors.utility.success : Colors.utility.error} weight="bold">${deposit_limit.instant_available.toFixed(2)}</Text>
+                            <View>
+                                <Text size={14} color={deposit_limit.instant_available > 0 ? Colors.text.success : Colors.text.error} weight="bold">${deposit_limit.instant_available.toFixed(2)}</Text>
                             </View>
                         </View>
                         </View>
                     </View>
-                    :<></>}
-                </View>
-                :active_tab == 'withdraw' ?
-                <View>
-                    {withdraw_limit ?
+                )
+            case 'withdraw':
+                if(active_tab != 'withdraw' || !withdraw_limit){ return <></> }
+                return (
                     <View nativeID="withdraw_settings">
-                    <View style={{ backgroundColor:Colors.shades.shade100, padding:10 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='semibold'>Withdraw Settings</Text>
-                        <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Below are your current withdraw settings and limits.  These may change based on historical transaction results.</Text>
-                    </View>
-                    <View style={{ padding:10 }}>
-                        <View style={{ flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:15 }}>
+                            <View transparent style={{flex:1}}>
+                                <Text theme='h1'>WITHDRAW SETTINGS</Text>
+                                <Text style={{ marginTop:3}} theme='description'>Below are your current withdraw settings and limits.  These may change based on historical transaction results.</Text>
+                            </View>
+                        </View>
+                        <View type='body' style={{ padding:10 }}>
+                        <View style={{ flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                             <View style={{ flex:1 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Weekly Withdraw Transaction Limit</Text>
-                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>The number of withdraws allowed per rolling week.</Text>
+                                <Text theme="h2">Weekly Withdraw Transaction Limit</Text>
+                                <Text style={{ marginTop:5 }} theme="description">The number of withdraws allowed per rolling week.</Text>
                             </View>
-                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight="bold">{withdraw_limit.withdraws_per_week}</Text>
+                            <View>
+                                <Text theme="h2">{withdraw_limit.withdraws_per_week}</Text>
                             </View>
                         </View>
                         {withdraw_limit?.week_withdraw_count ?
-                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                             <View style={{ flex:1 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Withdraws Remaining</Text>
-                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Withdraw transaction limit minus the number of withdraws already processed in the last 7 days</Text>
+                                <Text theme="h2">Withdraws Remaining</Text>
+                                <Text style={{ marginTop:5 }} theme="description">Withdraw transaction limit minus the number of withdraws already processed in the last 7 days</Text>
                             </View>
-                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight="bold">{withdraw_limit.withdraws_per_week - withdraw_limit.week_withdraw_count}</Text>
+                            <View>
+                                <Text theme="h2">{withdraw_limit.withdraws_per_week - withdraw_limit.week_withdraw_count}</Text>
                             </View>
                         </View>
                         :<></>}
-                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                             <View style={{ flex:1 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>ACH Withdraw Daily Limit</Text>
-                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Maximum amount of withdraws that can be made per rolling 24 hours to an ACH account.</Text>
+                                <Text theme="h2">ACH Withdraw Daily Limit</Text>
+                                <Text style={{ marginTop:5 }} theme="description">Maximum amount of withdraws that can be made per rolling 24 hours to an ACH account.</Text>
                             </View>
-                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight="bold">{withdraw_limit.ach_daily_limit}</Text>
+                            <View>
+                                <Text theme="h2">{withdraw_limit.ach_daily_limit}</Text>
                             </View>
                         </View>
-                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                        <View style={{ marginTop:10, flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                             <View style={{ flex:1 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight='semibold'>Card Withdraw Daily Limit</Text>
-                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Maximum amount of withdraws that can be made per rolling 24 hours to a card account.</Text>
+                                <Text theme="h2">Card Withdraw Daily Limit</Text>
+                                <Text style={{ marginTop:5 }} theme="description">Maximum amount of withdraws that can be made per rolling 24 hours to a card account.</Text>
                             </View>
-                            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                <Text size={14} color={Colors.brand.midnight} weight="bold">{withdraw_limit.card_daily_limit}</Text>
+                            <View>
+                                <Text theme="h2">{withdraw_limit.card_daily_limit}</Text>
                             </View>
                         </View>
                     </View>
                     </View>
-                    :<></>}
-                </View>
-                :active_tab == 'referral' ?
-                <View> 
-                {player_referral && promo ?
+                )
+            case 'referral':
+                if(active_tab != 'referral' || !player_referral || !promo){ return <></> }
+                return (
                     <View nativeID="referral_settings">
-                        <View style={{ backgroundColor:Colors.shades.shade100, padding:10 }}>
-                            <Text size={14} color={Colors.brand.midnight} weight='semibold'>Referral Settings</Text>
-                            <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>Below are your current referral settings. Share your code with others to earn cash from referrals.</Text>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:15 }}>
+                            <View transparent style={{flex:1}}>
+                                <Text theme='h1'>REFERRAL SETTINGS</Text>
+                                <Text style={{ marginTop:3}} theme='description'>Below are your current referral settings. Share your code with others to earn cash from referrals.</Text>
+                            </View>
                         </View>
                         <View style={{ padding:10 }}>
-                            {false ?
-                            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:8, backgroundColor:Colors.brand.electric }}>
-                                <Icons.ShareIcon color={Colors.shades.white} size={8}/>
-                                <Text style={{ marginLeft:5 }} size={10} color={Colors.shades.white} weight='regular'>Share Code</Text>
-                            </TouchableOpacity>
-                            :<></>}
-                            <View style={{ flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                            <View style={{ flexDirection:'row', alignItems:'flex-start', padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                                 <View style={{ flex:1 }}>
-                                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>My Referral Code</Text>
-                                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='regular'>{WalletHelpers.getReferralDescription(promo)}</Text>
+                                    <Text theme="h2">My Referral Code</Text>
+                                    <Text style={{ marginTop:5 }} theme="description">{WalletHelpers.getReferralDescription(promo)}</Text>
                                 </View>
-                                <View style={{ backgroundColor:Colors.shades.shade100, padding:10, marginLeft:10, borderRadius:8 }}>
-                                    <Text size={14} color={Colors.brand.midnight} weight="bold">{player_referral.referral_code}</Text>
+                                <View>
+                                    <Text theme="h2">{player_referral.referral_code}</Text>
                                 </View>
                             </View>
                         </View>
                     </View>
-                    :<></>}
-                </View>
-                :<></>}
-            </ScrollView>
-            {false && player?.type == 'freemium' ?
-            <View style={{ backgroundColor:Colors.shades.shade600, borderRadius:8, padding:10, margin:10 }}>
-                <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign="center">Want better limits and higher referral awards?</Text>
-                <TouchableOpacity style={{ marginTop:5, borderRadius:8, backgroundColor:Colors.incentive.gold, padding:15 }} onPress={() => {if(onPremium){ return onPremium() }}}>
-                    <Text size={14} color={Colors.shades.white} weight='bold' textAlign="center">VIEW PREMIUM</Text>
-                </TouchableOpacity>
+                )
+            default: return <></>
+        }
+    }
+
+    if(!player){ return <></> }
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
+                <FlatList
+                    data={sections}
+                    key={`setting_sections`}
+                    renderItem={renderSections}
+                    keyExtractor={(item) => item}
+                />
             </View>
-            :<></>}
-            <View style={{ padding:20 }}>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
                 <Button
                     title='BACK'
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    padding={15}
+                    type='close'
+                    style={{ flex:1 }}
                     onPress={() => onClose()}
                 />
             </View>

package/src/Wallet/components/WalletSetup.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { View, Image, TouchableOpacity, Linking, ScrollView } from "react-native";
+import { Image, Keyboard, Linking, TouchableWithoutFeedback } from "react-native";
 import type { MyPlayerProps, WalletSettingsProps } from '../../types';
-import { Button, Checkbox, Icons, Text, TextInput } from '../../Components';
-import Colors from '../../constants/colors';
+import { Checkbox, Icons } from '../../Components';
 import { WalletApi } from '../api';
 import moment from 'moment-mini';
 import { button_styles } from '../../constants/styles';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
 
 type WalletSetupProps = {
     player: MyPlayerProps,
@@ -16,6 +17,7 @@ type WalletSetupProps = {
 }
 
 const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:WalletSetupProps) => {
+    const Colors = useColors();
     const [ terms_agreed, setTermsAgreed ] = useState(false);
     const [ auth_error, setAuthError ] = useState<string>();
     const [ pin_view, setPinView ] = useState<'set'|'confirm'>('set');
@@ -52,23 +54,24 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
     const auth_required = wallet_settings.auth_end_datetime && moment().isAfter(wallet_settings.auth_end_datetime) ? true : false
 
     return (
+        <TouchableWithoutFeedback style={{ flex:1 }} onPress={() => Keyboard.dismiss()}>
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>MY WALLET</Text>
+                <Text size={26} theme='h1'>MY WALLET</Text>
                 {onNext ?
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Welcome to your wallet.  Go through the wizard to get set up to deposit and withdraw!</Text>
+                <Text style={{ marginTop:10 }} size={16} theme='description'>Welcome to your wallet.  Go through the wizard to get set up to deposit and withdraw!</Text>
                 :!wallet_settings.agreed_to_terms ?
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Welcome to your wallet.  This is where your sensitive account details are kept.  Please review our terms and conditions!</Text>
+                <Text style={{ marginTop:10 }} size={16}  theme='description'>Welcome to your wallet.  This is where your sensitive account details are kept.  Please review our terms and conditions!</Text>
                 :
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Welcome to your wallet.  Please enter your security pin to continue!</Text>
+                <Text style={{ marginTop:10 }} size={16}  theme='description'>Welcome to your wallet.  Please enter your security pin to continue!</Text>
                 }
             </View>
-            <ScrollView style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
             {!wallet_settings.agreed_to_terms ?
             <View style={{ flex:1, padding:20 }}>
                 <View>
-                    <Text size={20} color={Colors.brand.slate} weight='semibold' textAlign='center'>BettorEdge Wallet</Text>
-                    <Text style={{ marginTop:5 }} size={26} color={Colors.brand.midnight} weight='bold' textAlign='center'>Terms and Conditions</Text>
+                    <Text size={20} theme='h2' textAlign='center'>BettorEdge Wallet</Text>
+                    <Text style={{ marginTop:5 }} size={26} theme='h1' textAlign='center'>Terms and Conditions</Text>
                 </View>
                 <View style={{ justifyContent:'center', alignItems:'center' }}>
                 <Image
@@ -78,21 +81,21 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                 />
                 
                 </View>
-                <TouchableOpacity onPress={() => Linking.openURL('https://www.bettoredge.com/wallet-terms-of-use')}>
-                    <Text size={14} color={Colors.brand.midnight} textAlign='center'>Press here to review our <Text size={14} color={Colors.brand.electric} weight='bold'>Wallet Terms of Use</Text>. To continue setting up your wallet please review and agree to the terms.</Text>
-                </TouchableOpacity>
-                <TouchableOpacity 
-                    style={{ marginTop:15, flexDirection:'row', alignItems:'center', backgroundColor:Colors.highlights.highlight400Faded, padding:20, borderRadius:8 }}
+                <Button onPress={() => Linking.openURL('https://www.bettoredge.com/wallet-terms-of-use')}>
+                    <Text size={14} theme='description' textAlign='center'>Press here to review our <Text size={14} theme='action'>Wallet Terms of Use</Text>. To continue setting up your wallet please review and agree to the terms.</Text>
+                </Button>
+                <Button 
+                    style={{ marginTop:15, flexDirection:'row', alignItems:'center', padding:20, borderRadius:8 }}
                     onPress={() => setTermsAgreed(!terms_agreed)}>
-                    <Text style={{ flex:1 }} size={16} color={Colors.brand.midnight}>I have read and agree to the terms</Text>
+                    <Text style={{ flex:1 }} size={16} theme='description'>I have read and agree to the terms</Text>
                     <Checkbox size={30} checked={terms_agreed} disabled onSelect={() => console.log('')}/>
-                </TouchableOpacity>
+                </Button>
             </View>
             : !wallet_settings.pin ?
             <View style={{ flex:1, padding:20 }}>
                 <View>
-                    <Text size={20} color={Colors.brand.slate} weight='semibold' textAlign='center'>BettorEdge Wallet</Text>
-                    <Text style={{ marginTop:5 }} size={26} color={Colors.brand.midnight} weight='bold' textAlign='center'>{pin_view == 'set' ? 'Set' : 'Confirm'} Security PIN</Text>
+                    <Text size={20} theme='h1' textAlign='center'>BettorEdge Wallet</Text>
+                    <Text style={{ marginTop:5 }} size={26} theme='h1' textAlign='center'>{pin_view == 'set' ? 'Set' : 'Confirm'} Security PIN</Text>
                 </View>
                 <View style={{ justifyContent:'center', alignItems:'center' }}>
                     <Image
@@ -102,13 +105,12 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                     />
                 </View>
                 <View style={{ marginBottom:15 }}>
-                    <Text size={14} color={Colors.brand.midnight} textAlign='center'>Let's secure your sensitive information. Before doing any activity in your wallet, you will be required to enter a pin.  Lets set it now.</Text>
+                    <Text size={14} theme='description'>Let's secure your sensitive information. Before doing any activity in your wallet, you will be required to enter a pin.  Lets set it now.</Text>
                 </View>
                 {pin_view == 'set' ?
                 <TextInput
                     style={{ width:200, alignSelf:'center' }}
                     placeholder='HARDPIN'
-                    placeholderTextColor={Colors.brand.slate}
                     value={pin}
                     onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
                 />
@@ -117,7 +119,6 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                     <TextInput
                         style={{ width:200, alignSelf:'center' }}
                         placeholder='RE-Enter PIN'
-                        placeholderTextColor={Colors.brand.slate}
                         value={confirm_pin}
                         onChangeText={(text) => setPinSettings({ ...pin_settings, confirm_pin: text })}
                     />
@@ -128,8 +129,8 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
             :auth_required ?
             <View style={{ flex:1, padding:20 }}>
                 <View>
-                    <Text size={20} color={Colors.brand.slate} weight='semibold' textAlign='center'>BettorEdge Wallet</Text>
-                    <Text style={{ marginTop:5 }} size={26} color={Colors.brand.midnight} weight='bold' textAlign='center'>Enter Security PIN</Text>
+                    <Text size={20} theme='h2' textAlign='center'>BettorEdge Wallet</Text>
+                    <Text style={{ marginTop:5 }} size={26} theme='h1' textAlign='center'>Enter Security PIN</Text>
                 </View>
                 <View style={{ justifyContent:'center', alignItems:'center' }}>
                     <Image
@@ -139,19 +140,18 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                     />
                 </View>
                 <View style={{ marginBottom:15 }}>
-                    <Text size={14} color={Colors.brand.midnight} textAlign='center'>Before you can continue to your wallet.  Please enter your security pin.</Text>
+                    <Text size={14} theme='description'>Before you can continue to your wallet.  Please enter your security pin.</Text>
                 </View>
                 
                 <TextInput
                     style={{ width:200, alignSelf:'center' }}
                     placeholder='ENTER PIN'
-                    placeholderTextColor={Colors.brand.slate}
                     value={pin}
                     onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
                 />
                 {auth_error ? 
                 <View style={{ padding:10 }}>
-                    <Text size={14} color={Colors.utility.warning} weight='bold' textAlign='center'>{auth_error}</Text>
+                    <Text size={14} color={Colors.text.warning} weight='bold' textAlign='center'>{auth_error}</Text>
                 </View>
                 :<></>}
             </View>
@@ -165,29 +165,26 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                     />
                 </View>
                 <View style={{ margin:15, borderRadius:8, padding:10 }}>
-                    <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='center'>WALLET SECURED!</Text>
-                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} textAlign='center'>Select next to continue your wallet set up by adding a transaction account.</Text>
+                    <Text size={18} theme='h1' textAlign='center'>WALLET SECURED!</Text>
+                    <Text style={{ marginTop:5 }} size={14} theme='description' textAlign='center'>Select next to continue your wallet set up by adding a transaction account.</Text>
                 </View>
             </View>
             }
-            </ScrollView>
+            </View>
             <View style={{ flexDirection:'row', padding:20 }}>
                 {!wallet_settings.agreed_to_terms && onClose ?
                 <View style={{ flex:1, flexDirection:'row' }}>
                     <Button
                         title='EXIT SETUP'
                         style={{ flex:1, marginRight:5 }}
-                        title_color={Colors.utility.error}
-                        backgroundColor='transparent'
+                        type='error'
                         onPress={() => onClose()}
                     />
                     <Button
                         title='I AGREE'
                         style={{ flex:3, opacity:terms_agreed?1:0.5 }}
                         disabled={!terms_agreed}
-                        backgroundColor={Colors.brand.electric}
-                        title_color={Colors.shades.white}
-                        padding={15}
+                        type='success'
                         onPress={() => handleAgreeTerms()}
                     />
                 </View>
@@ -196,9 +193,7 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                         title='CONFIRM PIN'
                         style={{ flex:3, opacity:pin_valid?1:0.5 }}
                         disabled={!pin_valid}
-                        backgroundColor={Colors.utility.success}
-                        title_color={Colors.shades.white}
-                        padding={15}
+                        type='success'
                         onPress={() => setPinView('confirm')}
                     />
                 : !wallet_settings.pin && pin_view == 'confirm' ?
@@ -206,9 +201,7 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                         title='LETS GO!'
                         style={{ flex:3, opacity:go_valid ? 1: 0.5}}
                         disabled={!go_valid}
-                        backgroundColor={Colors.utility.success}
-                        title_color={Colors.shades.white}
-                        padding={15}
+                        type='success'
                         onPress={() => handleSetPin()}
                     />
                 : auth_required ?
@@ -217,8 +210,7 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                     <Button
                         style={{ flex:1, marginRight:5 }}
                         title='CLOSE'
-                        title_color={Colors.utility.error}
-                        backgroundColor='transparent'
+                        type='close'
                         onPress={() => onClose()}
                     />
                     :<></>}
@@ -226,9 +218,7 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                         title='SUBMIT'
                         style={{ flex:3, opacity:pin_valid ? 1: 0.5}}
                         disabled={!pin_valid}
-                        backgroundColor={Colors.utility.success}
-                        title_color={Colors.shades.white}
-                        padding={15}
+                        type='success'
                         onPress={() => handleAuthPin()}
                     />
                 </View>
@@ -236,22 +226,22 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                 <View style={{ flex:1, flexDirection:'row', alignItems:'center', justifyContent:'space-between' }}>
                     <Button
                         title='EXIT SETUP'
-                        title_color={Colors.utility.error}
-                        backgroundColor='transparent'
+                        type='close'
                         onPress={() => onClose()}
                     />
-                    <TouchableOpacity
+                    <Button
                         style={button_styles.wizard_valid}
                         onPress={() => onNext()}
                         //disabled={loading}
                         >
-                        <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
-                    </TouchableOpacity>
+                        <Icons.ChevronIcon size={20} direction='right' color={Colors.text.h1}/>
+                    </Button>
                 </View>
                 :<></>
                 }
             </View>
         </View>
+        </TouchableWithoutFeedback>
     )
 }