be-components 3.6.0 → 3.6.2

package/src/Wallet/components/WalletActionSelector.tsx

@@ -1,10 +1,11 @@
 
 import React, { useState } from 'react';
-import { View, FlatList, ScrollView, TouchableOpacity, Image } from "react-native"
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { FlatList, TouchableOpacity, Image } from "react-native"
+import { Icons } from '../../Components';
 import type { AccountProps, MyPlayerProps, PlayerBalanceProps } from '../../types';
 import { WalletHelpers } from '../api';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type WalletActionSelectorProps ={
     player:MyPlayerProps,
@@ -16,38 +17,41 @@ type WalletActionSelectorProps ={
     onStartWalkthrough:(walkthrough:any, account?:AccountProps) => void
 }
 
-const sections = [
-    { 
-        section: 'accounts', label:'Account Actions', actions : [
-            { 
-                action :'my_accounts', label: "View My Accounts", icon:<Icons.ListIcon color={Colors.brand.midnight} size={12}/>, description: 'Manage your connected accounts.  Transact, snooze, set limits or remove an existing account.'
-            },
-            { 
-                action :'wallet_settings', label: "View My Settings", icon:<Icons.SettingsIcon color={Colors.brand.midnight} size={20}/>, description: 'View your current settings including your deposit and withdraw limits.'
-            },
-            
-        ] 
-    },
-    { 
-        section: 'transact', label:'Transact', actions : [
-            { 
-                action :'order_history', label: "View Order History", icon:<Icons.TransactionIcon size={20} color={Colors.brand.midnight} />, description: 'View and manage past orders made on BettorEdge'
-            },
-            { 
-                action :'deposit', label: "Make A Deposit", icon:<Icons.DepositIcon size={20} color={Colors.brand.midnight} />, description: 'Fund your BettorEdge real-money balance by making a deposit from an existing account or new one.'
-            },
-            { 
-                action :'withdraw', label: "Make A Withdrawal", icon:<Icons.WithdrawIcon size={20} color={Colors.brand.midnight} />, description: 'Move funds from your BettorEdge real-money balance to a connected ACH account.'
-            },
-            
-        ] 
-    }
-]
+
 
 const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accounts, onClose, onActionSelect, onStartWalkthrough }: WalletActionSelectorProps) => {
+    const Colors = useColors();
     const [ show_steps, setShowSteps ] = useState(false);
     const [ width, setWidth ] = useState(0);
 
+    const sections = [
+        { 
+            section: 'accounts', label:'Account Actions', actions : [
+                { 
+                    action :'my_accounts', label: "View My Accounts", icon:<Icons.ListIcon color={Colors.text.h1} size={12}/>, description: 'Manage your connected accounts.  Transact, snooze, set limits or remove an existing account.'
+                },
+                { 
+                    action :'wallet_settings', label: "View My Settings", icon:<Icons.SettingsIcon color={Colors.text.h1} size={20}/>, description: 'View your current settings including your deposit and withdraw limits.'
+                },
+                
+            ] 
+        },
+        { 
+            section: 'transact', label:'Transact', actions : [
+                { 
+                    action :'order_history', label: "View Order History", icon:<Icons.TransactionIcon size={20} color={Colors.text.h1} />, description: 'View and manage past orders made on BettorEdge'
+                },
+                { 
+                    action :'deposit', label: "Make A Deposit", icon:<Icons.DepositIcon size={20} color={Colors.text.h1} />, description: 'Fund your BettorEdge real-money balance by making a deposit from an existing account or new one.'
+                },
+                { 
+                    action :'withdraw', label: "Make A Withdrawal", icon:<Icons.WithdrawIcon size={20} color={Colors.text.h1} />, description: 'Move funds from your BettorEdge real-money balance to a connected ACH account.'
+                },
+                
+            ] 
+        }
+    ]
+
     const handleActionSelect = (action:any) => {
         switch(action.action){
             case 'deposit':
@@ -64,7 +68,7 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
 
     const renderActions = (data:{ item:any, index:number }) => {
         return (
-            <TouchableOpacity style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}
+            <Button style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderBottomColor:Colors.borders.light }}
             onPress={() => handleActionSelect(data.item)}>
 
                 <View style={{ flex:1, marginRight:10 }}>
@@ -72,19 +76,21 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
                         {data.item.icon?
                             data.item.icon
                         :<></>}
-                        <Text style={{ marginLeft:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{data.item.label}</Text>
+                        <Text style={{ marginLeft:5 }} size={16} theme='h1'>{data.item.label}</Text>
                     </View>
-                    <Text style={{ padding:5 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.description}</Text>
+                    <Text style={{ padding:5 }} size={14} theme='description'>{data.item.description}</Text>
                 </View>
-                <Icons.ChevronIcon direction='right' color={Colors.brand.midnight} size={12} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' color={Colors.text.h1} size={12} />
+            </Button>
         )
     }
 
     const renderSections = (data: { item:any, index:number }) => {
         return (
-            <View style={{ padding:5 }}>
-                <Text size={16} color={Colors.brand.midnight} weight='regular'>{data.item.label.toUpperCase()}</Text>
+            <View style={{ marginTop:10 }}>
+                <View type='header' style={{ padding:15 }}>
+                    <Text theme='h1'>{data.item.label.toUpperCase()}</Text>
+                </View>
                 <View style={{ padding:5 }}>
                     <FlatList
                         key='actions'
@@ -99,7 +105,6 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
     }
 
     const handleStepSelect = (step:any, index:number) => {
-        console.log(step)
         switch(step.step){
             case 'deposit':
                 let default_account = accounts.find(a => a.default_account)
@@ -115,11 +120,11 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
     const renderSteps = (data: { item:any, index:number }) => {
         return (
             <TouchableOpacity
-                style={{ margin:5, padding:10, flexDirection:'row', alignItems:'center', borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8 }}
+                style={{ margin:5, padding:10, flexDirection:'row', alignItems:'center', borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}
                 onPress={() => handleStepSelect(data.item, data.index)}>
-                <Icons.CheckCirlceIcon size={14} color={data.item.complete?Colors.utility.success:Colors.brand.slate}/>
-                <Text style={{ flex:1, marginLeft:10 }} size={14} color={Colors.brand.midnight}>{data.item.label}</Text>
-                <Icons.ChevronIcon direction='right' size={8} color={Colors.brand.midnight} />
+                <Icons.CheckCirlceIcon size={14} color={data.item.complete?Colors.text.success:Colors.text.success}/>
+                <Text style={{ flex:1, marginLeft:10 }} theme='description'>{data.item.label}</Text>
+                <Icons.ChevronIcon direction='right' size={8} color={Colors.text.h1} />
             </TouchableOpacity>
         )
     }
@@ -131,48 +136,47 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
             const { width } = ev.nativeEvent.layout
             setWidth(width)
         }}>
-            <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+            <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
                 <Image
                     source={{ uri: player.profile_pic }}
                     style={{ height:60, width:60, borderRadius:4 }}
                     resizeMode='cover'
                 />
-                <View style={{ flex:1, marginLeft:5 }}>
-                    <Text size={20} color={Colors.brand.midnight} weight='bold'>Wallet Balances</Text>
-                    <View style={{ flexDirection:'row' }}>
-                        <View style={{ margin:3, backgroundColor:Colors.brand.cobalt, padding:5, borderRadius:8 }}>
-                            <Text size={14} color={Colors.shades.white} weight='bold'>${WalletHelpers.formatBalance(player_balance.balance)}</Text>
+                <View transparent style={{ flex:1, marginLeft:15 }}>
+                    <Text size={20} theme='h1'>My Wallet Balances</Text>
+                    <View transparent style={{ flexDirection:'row', marginTop:5 }}>
+                        <View float style={{ margin:3, padding:8, borderRadius:8 }}>
+                            <Text size={14} theme='h1'>${WalletHelpers.formatBalance(player_balance.balance)}</Text>
                         </View>
-                        <View style={{ margin:3, backgroundColor:Colors.brand.cobalt, padding:5, borderRadius:8 }}>
-                            <Text size={14} color={Colors.shades.white} weight='bold'>P{WalletHelpers.formatBalance(player_balance.promo_balance)}</Text>
+                        <View float style={{ margin:3, padding:8, borderRadius:8 }}>
+                            <Text size={14} theme='h1'>P{WalletHelpers.formatBalance(player_balance.promo_balance)}</Text>
                         </View>
-                        <View style={{ margin:3, backgroundColor:Colors.brand.cyan, padding:5, borderRadius:8 }}>
-                        <Text size={14} color={Colors.shades.white} weight='bold'>E{WalletHelpers.formatBalance(player_balance.free_market_balance)}</Text>
+                        <View float style={{ margin:3, padding:8, borderRadius:8 }}>
+                            <Text size={14} theme='h1'>E{WalletHelpers.formatBalance(player_balance.free_market_balance)}</Text>
                         </View>
                     </View>
                 </View>
             </View>
-            <ScrollView style={{ flex:1 }}>
-
+            <View style={{ flex:1 }}>
                 {pct_complete < 1 ?
-                <View style={{ backgroundColor:Colors.shades.white, padding:10 }}>
+                <View style={{ padding:10 }}>
                     <View>
                         <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => setShowSteps(!show_steps)}>
                             <View style={{ flex:1, marginRight:10 }}>
-                                <Text color={Colors.brand.midnight} size={14} weight='bold'>Setup your wallet</Text>
-                                <Text style={{ marginTop:3 }} color={Colors.brand.slate} size={14} weight='regular'>Complete all the steps below to have full access to move funds in and out of BettorEdge</Text>
+                                <Text theme='h1'>Setup your wallet</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Complete all the steps below to have full access to move funds in and out of BettorEdge</Text>
                             </View>
-                            <Icons.ChevronIcon direction={show_steps ? 'up' : 'down'} color={Colors.brand.midnight} size={10} />
+                            <Icons.ChevronIcon direction={show_steps ? 'up' : 'down'} color={Colors.text.h1} size={10} />
                         </TouchableOpacity>
                         <View style={{ flexDirection:'row', justifyContent:'center', alignItems:'center', }}>
                             <Text size={14} weight='bold'>{(pct_complete * 100).toFixed()}%</Text>
-                            <View style={{ marginLeft:20, height:10, width:width - 100, backgroundColor:Colors.brand.slate, borderRadius:15 }}>
-                                <View style={{ position:'absolute', top:0, left:0, bottom:0, width: (width-100)*pct_complete, backgroundColor:Colors.utility.success, borderRadius:15 }} />
+                            <View style={{ marginLeft:20, height:10, width:width - 100, borderRadius:15 }}>
+                                <View style={{ position:'absolute', top:0, left:0, bottom:0, width: (width-100)*pct_complete, backgroundColor:Colors.text.success, borderRadius:15 }} />
                             </View>
                         </View>
                     </View>
                     {show_steps ?
-                    <View style={{marginTop:5, borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{marginTop:5, borderTopWidth:1, borderColor:Colors.borders.light }}>
                         <FlatList
                             data={walkthrough_steps}
                             renderItem={renderSteps}
@@ -182,7 +186,7 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
                     :<></>}
                 </View>
                 :<></>}
-                <View style={{ padding:10 }}>
+                <View type='body' style={{ marginTop:5 }}>
                     <FlatList
                         key={'wallet_sections'}
                         data={sections}
@@ -190,18 +194,15 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
                         keyExtractor={(item) => item.section}
                     />
                 </View>
-            </ScrollView>
-            <View nativeID='action_row' style={{ padding:20 }}>
+            </View>
+            <View nativeID='action_row' style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
                 <Button
                     title='CLOSE'
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    padding={15}
+                    style={{ flex:1 }}
+                    type='close'
                     onPress={() => onClose()}
                 />
             </View>
-           
         </View>
     )
 }

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>