be-components 3.6.0 → 3.6.2

package/src/Wallet/components/AccountManager.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { FlatList, View, TouchableOpacity, Image, ScrollView } from 'react-native';
+import { FlatList, Image } from 'react-native';
 import type { AccountProps } from '../../types';
 import AccountCard from './AccountCard';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type AccountManagerProps = {
     accounts:AccountProps[],
@@ -13,15 +14,16 @@ type AccountManagerProps = {
     onSelectManualCard: () => void,
     onSelectInstantBankTransfer: () => void
 }
+const screen_sections = ['header','my_accounts','new_account']
 
 const AccountManager = ({ accounts,  onSelectAccount, onSelectManualACH, onSelectManualCard, onSelectInstantBankTransfer , onClose}:AccountManagerProps) => {
-
+    const Colors = useColors();
     const my_accounts = accounts.filter(a => !a.ibt_placeholder && !['bettoredge'].includes(a.account_type))
     //const ibt_placeholder = accounts.find(a => a.ibt_placeholder);
 
     const renderAccounts = (data:{item:AccountProps, index:number}) => {
         return (
-            <View style={{ margin:5 }}>
+            <View transparent style={{ margin:5 }}>
                 <AccountCard
                     account={data.item}
                     onSelectAccount={(account) => onSelectAccount(account)}
@@ -30,70 +32,102 @@ const AccountManager = ({ accounts,  onSelectAccount, onSelectManualACH, onSelec
         )
     }
 
-    return (
-        <View style={{ flex:1 }}>
-             <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>WALLET ACCOUNTS</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Below are the accounts we have on file for you.  Please select one to manage or transact!</Text>
-            </View>
-            <ScrollView style={{ flex:1, padding:10 }}>
-                {my_accounts.length > 0 ?
-                <View style={{ padding:10 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='bold'>MY ACCOUNTS</Text>
-                    <View style={{ marginTop:10 }}>
-                        <FlatList
-                            data={my_accounts}
-                            renderItem={renderAccounts}
-                            keyExtractor={(item) => item.account_id.toString()}
-                        />
-                    </View>
-                </View>
-                :<></>}
-                <View style={{ padding:10, marginTop:20 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='bold'>ADD NEW ACCOUNT</Text>
-                    <TouchableOpacity style={{ marginTop:10, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.shades.white }}
-                    onPress={() => onSelectInstantBankTransfer()}>
-                        <View style={{  height:50, width:110, borderRadius:100, justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.brand.cobalt }}>
-                            <Image
-                                source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1695821528/1630344814441_wjq98b.png' }}
-                                style={{ width:50, height:30 }}
-                                resizeMode='cover'
-                            />
-                        </View>
-                        <View style={{ flex:1, marginLeft:5 }}>
-                            <Text size={10} color={Colors.utility.success} weight='bold'>RECOMMENDED</Text>
-                            <Text size={14} color={Colors.brand.cobalt} textAlign='left' weight='bold'>INSTANT BANK TRANSFER</Text>
+    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'>MANAGE MY ACCOUNTS</Text>
+                            <Text style={{ marginTop:5}} theme='description'>Below are the accounts we have on file for you.  Please select one to manage or transact!</Text>
                         </View>
-                    </TouchableOpacity>
-                    <TouchableOpacity style={{ marginTop:10, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.brand.midnight }}
-                    onPress={() => onSelectManualACH()}>
-                        <View style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center', backgroundColor:Colors.shades.white }}>
-                            <Icons.BankIcon size={22} color={Colors.brand.midnight} />
-                        </View>
-                        <View style={{ flex:1 }}>
-                            <Text size={14} color={Colors.shades.white} textAlign='center' weight='bold'>ADD MANUAL ACH ACCOUNT</Text>
+                    </View>
+                )
+            case 'my_accounts':
+                return (
+                    <View style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:20, flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>MY ACCOUNTS</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Accounts already linked or ways to transact immediately</Text>
+                            </View>
                         </View>
-                    </TouchableOpacity>
-                    <TouchableOpacity style={{ marginTop:10, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.brand.cyan }}
-                    onPress={() => onSelectManualCard()}>
-                        <View style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center', backgroundColor:Colors.shades.white }}>
-                            <Icons.CreditCardIcon size={22} color={Colors.brand.cyan} />
+                        <View type='body' style={{ padding:20 }}>
+                            <FlatList
+                                data={my_accounts}
+                                renderItem={renderAccounts}
+                                keyExtractor={(item) => item.account_id.toString()}
+                            />
                         </View>
-                        <View style={{ flex:1 }}>
-                            <Text size={14} color={Colors.shades.white} textAlign='center' weight='bold'>ADD NEW CARD ACCOUNT</Text>
+                    </View>
+                )
+            case 'new_account':
+                return (
+                    <View>
+                        <View type='header' style={{ padding:20, flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1' color={Colors.text.success}>ADD NEW ACCOUNT</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Link a new account and use to transact</Text>
+                            </View>
                         </View>
-                    </TouchableOpacity>
+                        <View type='body' style={{ padding:20 }}>
+                            <Button float style={{ marginTop:10, padding:5, flexDirection:'row', alignItems:'center' }}
+                            onPress={() => onSelectInstantBankTransfer()}>
+                                <View  style={{  height:50, width:80, borderRadius:8, justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.absolutes.brand.cobalt }}>
+                                    <Image
+                                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1695821528/1630344814441_wjq98b.png' }}
+                                        style={{ width:50, height:30 }}
+                                        resizeMode='cover'
+                                    />
+                                </View>
+                                <View transparent style={{ flex:1, marginLeft:10 }}>
+                                    <Text size={10} color={Colors.text.success} weight='bold'>RECOMMENDED</Text>
+                                    <Text size={14} theme='h1' textAlign='left'>INSTANT BANK TRANSFER</Text>
+                                </View>
+                            </Button>
+                            <Button float style={{ marginTop:10, padding:5, flexDirection:'row', alignItems:'center' }}
+                            onPress={() => onSelectManualACH()}>
+                                <View float style={{  height:50, width:50, justifyContent:'center', alignItems:'center' }}>
+                                    <Icons.BankIcon size={22} color={Colors.text.h1} />
+                                </View>
+                                <View transparent style={{ flex:1, marginLeft:10 }}>
+                                    <Text size={14} theme='h2' textAlign='left'>ADD MANUAL ACH ACCOUNT</Text>
+                                </View>
+                            </Button>
+                            <Button float style={{ marginTop:10, padding:5, flexDirection:'row', alignItems:'center' }}
+                            onPress={() => onSelectManualCard()}>
+                            <View float style={{  height:50, width:50, justifyContent:'center', alignItems:'center'}}>
+                                <Icons.CreditCardIcon size={22} color={Colors.text.highlight} />
+                            </View>
+                            <View transparent style={{ flex:1, marginLeft:10 }}>
+                                <Text size={14} theme='h2' textAlign='left'>ADD NEW CARD ACCOUNT</Text>
+                            </View>
+                        </Button>
+                    </View>
                 
                 </View>
-            </ScrollView>
-            <View nativeID='action_row' style={{ padding:20 }}>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+             
+            <View style={{ flex:1 }}>
+                <FlatList
+                    key='account_sections'
+                    data={screen_sections}
+                    renderItem={renderSections}
+                    keyExtractor={(item) => item}
+                />
+                
+            </View>
+            <View type='footer' style={{ flexDirection:'row', padding:20 }}>
                 <Button
-                    style={{ flex:1, opacity: 1 }}
+                    style={{ flex:1 }}
                     title={'BACK'}
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    padding={15}
+                    type='close'
                     onPress={() => onClose()}
                 />
             </View>

package/src/Wallet/components/AccountSnoozeManager.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, TouchableOpacity, View, ScrollView } from 'react-native';
+import { FlatList } from 'react-native';
 import type { AccountProps, AccountSnoozeProps } from '../../types';
 import { WalletApi } from '../api';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
 import moment from 'moment-mini';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 const duration_options = [1,7,14,30]
 
@@ -15,6 +16,7 @@ type AccountSnoozeManagerProps = {
 }
 
 const AccountSnoozeManager = ({ account, onCancel, onSnooze } : AccountSnoozeManagerProps) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ dropdown_visible, setDropdownVisible ] = useState(false);
     const [ disclaimer, setDisclaimer ] = useState(false);
@@ -66,58 +68,56 @@ const AccountSnoozeManager = ({ account, onCancel, onSnooze } : AccountSnoozeMan
 
     const renderOptions = (data: { item:number, index:number }) => {
         return (
-            <TouchableOpacity style={{ padding:10 }} onPress={() => {
+            <Button style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => {
                 setActiveDuration(data.item);
                 setDropdownVisible(false);
             }}>
-                <Text color={Colors.brand.midnight} weight='semibold' size={14}>{data.item} days</Text>
-            </TouchableOpacity>
+                <Text theme='h2' size={14}>{data.item} days</Text>
+            </Button>
         )
     }
     const valid = active_duration ? true : false;
     return (
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>Snooze Account</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Take a break from the real money features of BettorEdge using this account.</Text>
+                <Text size={30} theme='h2'>Snooze Account</Text>
+                <Text style={{ marginTop:15 }} size={16} theme='description'>Take a break from the real money features of BettorEdge using this account.</Text>
             </View>
-            <ScrollView style={{ flex:1, padding:16}}>
-                <Text size={16} color={Colors.brand.cobalt} weight='semibold'>Amount</Text>
-                <TouchableOpacity 
+            <View style={{ flex:1, padding:16}}>
+                <Text size={16} theme='h2'>Amount</Text>
+                <Button 
+                float
                 onPress={() => setDropdownVisible(!dropdown_visible)}
-                style={{marginTop:8, flexDirection:'row', alignItems:'center', justifyContent:'space-between', padding:15, backgroundColor:Colors.shades.shade100}}>
-                    <Text color={Colors.brand.cobalt} size={14} weight='semibold'>{active_duration?`${active_duration} Days`:'Select Duration'}</Text>
-                    <Icons.ChevronIcon direction='down' color={Colors.brand.cobalt} size={8} />
-                </TouchableOpacity>
+                style={{marginTop:8, flexDirection:'row', alignItems:'center', justifyContent:'space-between', padding:15 }}>
+                    <Text theme='h2'>{active_duration?`${active_duration} Days`:'Select Duration'}</Text>
+                    <Icons.ChevronIcon direction='down' color={Colors.text.h1} size={8} />
+                </Button>
                 {dropdown_visible ?
-                <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10, borderWidth:1, borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10, borderWidth:1, borderTopWidth:1, borderColor:Colors.borders.light }}>
                     <FlatList
                         data={duration_options}
                         renderItem={renderOptions}
                     />
                 </View>
                 :<></>}
-            </ScrollView>
+            </View>
             { valid ?
             <View nativeID='snooze_disclaimer' style={{ margin:10 }}>
-                <TouchableOpacity style={{ flexDirection:'row', padding:5 }} onPress={() => setDisclaimer(!disclaimer)}>
-                    <View style={{ justifyContent:'center', marginRight:10, alignItems:'center', height:25, width:25, borderRadius:4, backgroundColor: disclaimer ? Colors.brand.midnight : 'transparent', borderWidth:1, borderColor:Colors.brand.midnight }}>
+                <Button style={{ flexDirection:'row', padding:5 }} onPress={() => setDisclaimer(!disclaimer)}>
+                    <View style={{ justifyContent:'center', marginRight:10, alignItems:'center', height:25, width:25, borderRadius:4, backgroundColor: disclaimer ? Colors.text.h1 : 'transparent', borderWidth:1, borderColor:Colors.text.h1 }}>
                         {disclaimer ?
-                        <Icons.CheckIcon color={Colors.shades.white} size={14} />
+                        <Icons.CheckIcon color={Colors.text.h1} size={14} />
                         :<></>}
                     </View>
-                    <Text size={14} color={Colors.brand.midnight} weight='regular'>I confirm I wwould like to snooze my account for {active_duration} days. This cannot be undone!</Text>
-                </TouchableOpacity>
+                    <Text size={14} theme='description'>I confirm I wwould like to snooze my account for {active_duration} days. This cannot be undone!</Text>
+                </Button>
             </View>
             :<></>}
             <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
             <Button
                     style={{ flex:1, marginRight:5, opacity: 1 }}
                     title={'CLOSE'}
-                    title_color={Colors.brand.electric}
-                    borderColor={Colors.brand.electric}
-                    borderWidth={1}
-                    padding={15}
+                    type='close'
                     onPress={() => onCancel()}
                 />
                 <Button
@@ -125,24 +125,26 @@ const AccountSnoozeManager = ({ account, onCancel, onSnooze } : AccountSnoozeMan
                     title={'SAVE SNOOZE'}
                     disabled={!valid||!disclaimer}
                     loading={loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
-                    padding={15}
+                    type='success'
                     onPress={() => handleSetSnooze()}
                 />
             </View>
 
             {account_snooze ?
-            <View style={{ position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
-                <View style={{ backgroundColor:Colors.shades.white, borderRadius:8, padding:20}}>
-                    <View style={{ padding:10, backgroundColor:Colors.brand.cyan, borderRadius:8, alignSelf:'center' }}>
-                        <Icons.SnoozeIcon size={24} color={Colors.shades.white} />
+            <View type='blur' style={{ position:'absolute', top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                <View style={{ borderRadius:8, padding:20}}>
+                    <View float style={{ padding:10, borderRadius:8, alignSelf:'center' }}>
+                        <Icons.SnoozeIcon size={24} color={Colors.text.h1} />
                     </View>
                     <Text style={{ padding:10 }} size={18} weight='bold' textAlign='center'>Account is Snoozing</Text>
-                    <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>Snooze ends {moment(account_snooze.end_datetime).fromNow()}</Text>
-                    <TouchableOpacity style={{  marginTop:10, padding:10, borderWidth:1, borderColor:Colors.brand.electric, borderRadius:8 }} onPress={() => onCancel()}>
-                        <Text size={14} color={Colors.brand.electric} textAlign='center'>Go Back</Text>
-                    </TouchableOpacity>
+                    <Text size={14} theme='h1' textAlign='center'>Snooze ends {moment(account_snooze.end_datetime).fromNow()}</Text>
+                    <Button 
+                        type='close' 
+                        style={{ marginTop:10 }}
+                        onPress={() => onCancel()}
+                    >
+                        <Text size={14} theme='action' textAlign='center'>Go Back</Text>
+                    </Button>
                 </View>
             </View>
             :<></>}

package/src/Wallet/components/AddressCard.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
 import type { PlayerAddressProps } from '../../types';
-import { Button, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type AddressCardProps = {
     address:PlayerAddressProps,
@@ -12,18 +11,19 @@ type AddressCardProps = {
 }
 
 const AddressCard = ({ hide_delete, address, onSelect, onDelete }:AddressCardProps) => {
+    const Colors = useColors();
     return (
-        <View nativeID='address_info' style={{ padding:10, flexDirection:'row', alignItems:'center', borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8 }} >
-            <TouchableOpacity style={{ flex:1 }} onPress={() => onSelect(address)}>
-                <Text color={Colors.brand.midnight} weight='bold' size={16}>{address.name}</Text>
-                <Text style={{ marginTop:4 }} size={14} weight='regular'>{address.street}</Text>
-                <Text style={{ marginTop:2 }} size={14} weight='regular'>{address.city} {address.state} {address.zip}</Text>
-            </TouchableOpacity>
+        <View nativeID='address_info' style={{ padding:10, flexDirection:'row', alignItems:'center', borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }} >
+            <Button style={{ flex:1, padding:5 }} onPress={() => onSelect(address)}>
+                <Text theme='h1' size={16}>{address.name}</Text>
+                <Text style={{ marginTop:4 }} size={14} theme='description'>{address.street}</Text>
+                <Text style={{ marginTop:2 }} size={14} theme='description'>{address.city} {address.state} {address.zip}</Text>
+            </Button>
             {!hide_delete ?
             <Button
                 title='DELETE'
-                title_color={Colors.shades.white}
-                backgroundColor={Colors.utility.error}
+                style={{ padding:10 }}
+                type='error'
                 onPress={() => onDelete(address)}
             />
             :<></>}

package/src/Wallet/components/AddressManager.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { FlatList, TouchableOpacity, View, ScrollView } from 'react-native';
+import { FlatList } from 'react-native';
 import type { LocationProps, MyPlayerProps, PlayerAddressProps } from '../../types';
 import { WalletApi, WalletHelpers } from '../api';
 import AddressCard from './AddressCard';
-import { Button, Text, TextInput } from '../../Components';
-import Colors from '../../constants/colors';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type AddressManaertProps = {
     player?:MyPlayerProps
@@ -25,12 +25,12 @@ type AddressManaertProps = {
 }
 
 const AddressManager = ({ location, player_addresses, onSelect, onCancel, onAddAddress, onRemoveAddress }:AddressManaertProps) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ draft_address, setDraftAddress ] = useState<PlayerAddressProps|undefined>(undefined)
 
     const address_errors = WalletHelpers.isAddressValid(draft_address)
 
-
     const handleCreateAddress = async() => {
         if(!draft_address){ return } //
         if(loading){ return } //Prevent button mashing
@@ -77,27 +77,26 @@ const AddressManager = ({ location, player_addresses, onSelect, onCancel, onAddA
         return (
             <View style={{ flex:1, minHeight:600 }}>
                 <View style={{ padding:20 }}>
-                    <Text size={30} color={Colors.brand.midnight} weight='bold'>CREATE NEW ADDRESS</Text>
-                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Use the form below to create a new address.</Text>
+                    <Text size={30} theme='h1'>CREATE NEW ADDRESS</Text>
+                    <Text style={{ marginTop:15 }} size={16} theme='description'>Use the form below to create a new address.</Text>
                 </View>
-                <ScrollView style={{ flex:1, padding:20 }}>
-                    <View nativeID='address_name' style={{ backgroundColor:Colors.shades.shade100, borderRadius:4, margin:5, padding:10 }}>
-                        <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign='center'>Address Name / Label</Text>
-                        <Text style={{ margin:3 }} size={12} color={Colors.brand.midnight} weight='regular' textAlign='center'>Give address a name (i.e., Home) to make it easily identifiable.</Text>
+                <View style={{ flex:1, padding:20 }}>
+                    <View nativeID='address_name' style={{ borderRadius:4, margin:5, padding:10 }}>
+                        <Text size={16} theme='h1' textAlign='center'>Address Name / Label</Text>
+                        <Text style={{ margin:3 }} size={12} theme='description' textAlign='center'>Give address a name (i.e., Home) to make it easily identifiable.</Text>
                         <TextInput
                             value={draft_address.name}
                             placeholder='My Home'
-                            placeholderTextColor={Colors.brand.slate}
                             onChangeText={(e) => setDraftAddress({ ...draft_address, name: e })}
                         />
                         {location?.player_address ?
-                        <TouchableOpacity style={{ marginTop:5, padding:10 }} onPress={() => tryAutoFill()}>
-                            <Text size={14} textAlign='center' weight='regular' color={Colors.brand.electric}>Autofill with Location</Text>
-                        </TouchableOpacity>
+                        <Button style={{ marginTop:5, padding:10 }} onPress={() => tryAutoFill()}>
+                            <Text size={14} textAlign='center' weight='regular' theme='action'>Autofill with Location</Text>
+                        </Button>
                         :<></>}
                     </View>
                     <View nativeID='address_street' style={{ flexDirection:'row', alignItems:'center', margin:5 }}>
-                        <Text style={{ flex:1/4 }} size={14} color={Colors.brand.midnight} weight='regular'>Street</Text>
+                        <Text style={{ flex:1/4 }} size={14} theme='description'>Street</Text>
                         <TextInput 
                             style={{ flex:1 }}
                             value={draft_address.street}
@@ -105,7 +104,7 @@ const AddressManager = ({ location, player_addresses, onSelect, onCancel, onAddA
                         />
                     </View>
                     <View nativeID='address_city' style={{ flexDirection:'row', alignItems:'center', margin:5 }}>
-                        <Text style={{ flex:1/4 }} size={14} color={Colors.brand.midnight} weight='regular'>City</Text>
+                        <Text style={{ flex:1/4 }} size={14} theme='description'>City</Text>
                         <TextInput 
                             style={{ flex:1 }}
                             value={draft_address.city}
@@ -113,43 +112,36 @@ const AddressManager = ({ location, player_addresses, onSelect, onCancel, onAddA
                         />
                     </View>
                     <View nativeID='address_state' style={{ flexDirection:'row', alignItems:'center', margin:5 }}>
-                        <Text style={{ flex:1/4 }} size={14} color={Colors.brand.midnight} weight='regular'>State</Text>
+                        <Text style={{ flex:1/4 }} size={14} theme='description'>State</Text>
                         <TextInput 
                             value={draft_address.state}
                             placeholder='MN'
                             style={{ flex:1 }}
-                            placeholderTextColor={Colors.shades.shade600}
                             onChangeText={(e) => setDraftAddress({ ...draft_address, state: e })}
                         />
                     </View>
-                    <Text size={12} color={Colors.utility.warning} textAlign='right'>Two letter codes only accepted</Text>
+                    <Text size={12} color={Colors.text.warning} textAlign='right'>Two letter codes only accepted</Text>
                     <View nativeID='address_zip' style={{ flexDirection:'row', alignItems:'center', margin:5 }}>
-                        <Text style={{ flex:1/4 }} size={14} color={Colors.brand.midnight} weight='regular'>Zip</Text>
+                        <Text style={{ flex:1/4 }} size={14} theme='description'>Zip</Text>
                         <TextInput 
                             style={{ flex:1 }}
                             value={draft_address.zip}
                             onChangeText={(e) => setDraftAddress({ ...draft_address, zip: e })}
                         />
                     </View>
-                </ScrollView>
+                </View>
                 <View style={{ flexDirection:'row', padding:20 }}>
                     <Button
                         style={{ flex:1, marginRight:5, opacity: 1 }}
                         title={'CANCEL'}
-                        title_color={Colors.brand.electric}
-                        borderWidth={1}
-                        borderColor={Colors.brand.electric}
-                        padding={15}
+                        type='error'
                         onPress={() => setDraftAddress(undefined)}
                     />
                     <Button
                         style={{ flex:3, opacity:address_errors.length == 0 && !loading ? 1 : 0.5 }}
                         title={'CREATE'}
                         disabled={address_errors.length > 0 || loading ? true : false}
-                        title_color={Colors.shades.white}
-                        loading={loading}
-                        backgroundColor={Colors.utility.success}
-                        padding={15}
+                        type='success'
                         onPress={() => handleCreateAddress()}
                     />
                 </View>
@@ -162,16 +154,18 @@ const AddressManager = ({ location, player_addresses, onSelect, onCancel, onAddA
     return (
         <View style={{ flex:1, minHeight:600 }}>
             <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>MY ADDRESSES</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Below are the addresses we have on file. Manage or add a new one below</Text>
+                <Text size={30} theme='h1'>MY ADDRESSES</Text>
+                <Text style={{ marginTop:15 }} size={16} theme='description'>Below are the addresses we have on file. Manage or add a new one below</Text>
             </View>
             {player_addresses.length == 0 ?
-            <View style={{ flex:1, padding:10, borderRadius:8, margin:10, backgroundColor:Colors.shades.shade600, justifyContent:'center', alignItems:'center' }}>
-                <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='center'>Uh Oh!</Text>
-                <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign='center'>It looks like you dont have any saved addresses</Text>
-                <TouchableOpacity style={{ marginTop:20, padding:10, backgroundColor:Colors.brand.electric, borderRadius:4 }} onPress={() => setDraftAddress(WalletHelpers.getEmptyAddress())}>
-                    <Text size={14} color={Colors.shades.white} textAlign='center'>Create New Address</Text>
-                </TouchableOpacity>
+            <View float style={{ flex:1, padding:10, borderRadius:8, margin:10, justifyContent:'center', alignItems:'center' }}>
+                <Text size={18} theme='h1' textAlign='center'>Uh Oh!</Text>
+                <Text style={{ marginTop:10 }} size={14} theme='description' textAlign='center'>It looks like you dont have any saved addresses</Text>
+                <Button 
+                    style={{ marginTop:20, padding:10, borderRadius:4 }} 
+                    type='success'
+                    title='Create New Address'
+                    onPress={() => setDraftAddress(WalletHelpers.getEmptyAddress())}/>
             </View>
             :<></>}
             <View style={{ flex:1, padding:20 }}>
@@ -181,18 +175,13 @@ const AddressManager = ({ location, player_addresses, onSelect, onCancel, onAddA
                 <Button
                     style={{ flex:1, marginRight:5, opacity: 1 }}
                     title={'CLOSE'}
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    padding={15}
+                    type='close'
                     onPress={() => onCancel()}
                 />
                 <Button
                     style={{ flex:3 }}
                     title={'NEW ADDRESS'}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
-                    padding={15}
+                    type='success'
                     onPress={() => setDraftAddress(WalletHelpers.getEmptyAddress())}
                 />
             </View>