be-components 3.5.9 → 3.6.1

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/DepositCard.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, Image, ScrollView } from "react-native";
+import { ActivityIndicator, Image, Keyboard, KeyboardAvoidingView, Platform, TouchableWithoutFeedback } from "react-native";
 import type { AccountProps, AccountSnoozeProps, CodeRequestProps, ItemOrderProps, MyPlayerProps, PlayerDepositLimitProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps, WalletSettingsProps } from '../../types';
 import { ItemOrderApi, ItemOrderHelpers, WalletApi } from '../api';
-import Colors from '../../constants/colors';
-import { Button, Icons, Text, TextInput } from '../../Components';
-import { view_styles } from '../../constants/styles';
+import { Icons } from '../../Components';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type DepositCardProps = {
     player:MyPlayerProps,
@@ -23,6 +23,7 @@ type DepositCardProps = {
 }
 
 const DepositCard = ({ wallet_settings, code_details, account, deposit_limit, onTransact, onCancel }:DepositCardProps) => {
+    const Colors = useColors();
     const [ draft_order, setDraftOrder ] = useState<ItemOrderProps>();
     const [ account_snooze, setAccountSnooze ] = useState<AccountSnoozeProps>();
 
@@ -48,7 +49,7 @@ const DepositCard = ({ wallet_settings, code_details, account, deposit_limit, on
     if(!draft_order){
         return (
             <View style={{ padding:20 }}>
-                <ActivityIndicator style={{ alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+                <ActivityIndicator style={{ alignSelf:'center' }} size='large' color={Colors.text.h1} />
             </View>
         )
     }
@@ -56,62 +57,65 @@ const DepositCard = ({ wallet_settings, code_details, account, deposit_limit, on
     let order_amount = parseFloat(draft_order.amount as string);
 
     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'>MAKE A DEPOSIT</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>In order to participate in real-money activities, you will need to fund your BettorEdge Wallet.  Please enter the amount you wish to deposit below.</Text>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:15 }}>
+                <View transparent style={{flex:1}}>
+                    <Text size={20} theme='h1'>MAKE A DEPOSIT</Text>
+                    <Text style={{ marginTop:5}} theme='description'>In order to participate in real-money activities, you will need to fund your BettorEdge Wallet.  Please enter the amount you wish to deposit below</Text>
+                </View>
             </View>
-            <ScrollView style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
                 <View nativeID='deposit_amount' style={{ justifyContent:'center', alignItems:'center', padding:20 }}>
-                    <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.midnight} weight='regular'>Minumum $25 / Maximum ${ItemOrderHelpers.getDepositAvailable(deposit_limit, account).toFixed(2)}</Text>
+                    <Text style={{ marginBottom:15 }} size={14} theme='description'>Minumum $25 / Maximum ${ItemOrderHelpers.getDepositAvailable(deposit_limit, account).toFixed(2)}</Text>
                     <TextInput 
-                        style={{ flex:1 }}
+                        style={{ flexGrow:1, width:200, textAlign:'center', color:Colors.text.success, fontSize:28 }}
                         placeholder='25'
-                        placeholderTextColor={Colors.brand.slate}
+                        keyboardType='decimal-pad'
                         value={draft_order.amount as string}
                         onChangeText={(text) => setDraftOrder({ ...draft_order, amount:text })}
                     />
-                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign='center'>*All deposits are held for {deposit_limit.hold_days} days before they are eligible for withdraw</Text>
+                    <Text style={{ marginTop:15 }} size={14} theme='warning' textAlign='center'>*All deposits are held for {deposit_limit.hold_days} days before they are eligible for withdraw</Text>
 
                 </View>
                 {errors.length == 0 && order_amount > deposit_limit.instant_available ?
-                <View nativeID='instant_available' style={{ backgroundColor:Colors.shades.shade100, padding:5, borderRadius:8, margin:10 }}>
-                    <View style={{ padding:10, borderBottomWidth:1, borderColor:Colors.highlights.highlight200Faded }}>
+                <View nativeID='instant_available' style={{  padding:5, borderRadius:8, margin:10 }}>
+                    <View style={{ padding:10, borderBottomWidth:1  }}>
                         <View style={{flexDirection:'row', marginBottom:5 }}>
-                            <Icons.AlertIcon color={Colors.utility.warning} size={16}/>
-                            <Text style={{ marginLeft:10 }} size={14} color={Colors.utility.warning} weight='bold'>INSTANT DEPOSIT NOTICE</Text>
+                            <Icons.AlertIcon color={Colors.text.warning} size={16}/>
+                            <Text style={{ marginLeft:10 }} size={14} color={Colors.text.warning} weight='bold'>INSTANT DEPOSIT NOTICE</Text>
                         </View>
-                        <Text size={14} color={Colors.brand.midnight} weight='regular'>Transactions take time to leave your account and settle in ours. In order to get you started before they arrive, we allow for some to be instantly available. The remainder is available after settlement.</Text>
+                        <Text size={14} theme='description'>Transactions take time to leave your account and settle in ours. In order to get you started before they arrive, we allow for some to be instantly available. The remainder is available after settlement.</Text>
                     </View>
                     <View style={{ padding:5 }}>
                         <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
-                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight}>Available Instantly</Text>
-                            <Text size={14} color={Colors.brand.midnight} weight='bold'>${deposit_limit.instant_available.toFixed(2)}</Text>
+                            <Text style={{ flex:1 }} size={14} theme='h2'>Available Instantly</Text>
+                            <Text size={14} theme='h1'>${deposit_limit.instant_available.toFixed(2)}</Text>
                         </View>
                         <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
-                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight}>Available after settlement ({deposit_limit.hold_days} days)</Text>
-                            <Text size={14} color={Colors.brand.midnight}>${(order_amount - deposit_limit.instant_available).toFixed(2)}</Text>
+                            <Text style={{ flex:1 }} theme='h2'>Available after settlement ({deposit_limit.hold_days} days)</Text>
+                            <Text size={14} theme='h1'>${(order_amount - deposit_limit.instant_available).toFixed(2)}</Text>
                         </View>
                         <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
-                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight}>Total Deposit</Text>
-                            <Text size={14} color={Colors.brand.midnight} weight='bold'>${order_amount.toFixed(2)}</Text>
+                            <Text style={{ flex:1 }} theme='h2'>Total Deposit</Text>
+                            <Text size={14} theme='h1'>${order_amount.toFixed(2)}</Text>
                         </View>
                     </View>
                 </View>
                 :<></>}
                 {errors.length > 0 ?
-                <View style={{ margin:20, borderRadius:8, padding:20, backgroundColor:Colors.shades.white, ...view_styles.float }}>
-                    <Text style={{ marginBottom:10 }} size={14} color={Colors.brand.midnight}>Please fix the following before continuing</Text>
+                <View float style={{ margin:20, borderRadius:8, padding:20 }}>
+                    <Text style={{ marginBottom:10 }} theme='h2'>Please fix the following before continuing</Text>
                     {errors.map(e => {
                         return (
-                            <Text size={14} color={Colors.utility.warning}>{e}</Text>
+                            <Text size={14} color={Colors.text.warning}>{e}</Text>
                         )
                     })}
                 </View>
                 :<></>}
-            </ScrollView>
+            </View>
             {code_details && code_details.code_request?.pending_deposit && code_details.promo && code_details.referrer && ['referral_code','referral_sweepstakes'].includes(code_details.promo.type) ?
-            <View style={{ margin:15, flexDirection:'row', backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
+            <View style={{ margin:15, flexDirection:'row' }}>
                 <View style={{ justifyContent:'center' }}>
                     {code_details.referrer?.profile_pic?
                     <Image
@@ -120,36 +124,34 @@ const DepositCard = ({ wallet_settings, code_details, account, deposit_limit, on
                         resizeMode='cover'
                     />
                     :
-                    <Icons.GiftIcon size={40} color={Colors.incentive.gold} />
+                    <Icons.GiftIcon size={40} color={Colors.text.gold} />
                     }
                 </View>
-                <View style={{flex:1, backgroundColor:Colors.incentive.gold_faded, padding:10 }}>
-                    <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} size={14} color={Colors.brand.midnight} weight='bold'>Give back to {code_details.referrer?.username}</Text>
-                    <Text style={{ paddingTop:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>Make a qualifying deposit and {code_details.referrer.username} will receive a reward!</Text>
+                <View style={{flex:1, backgroundColor:Colors.absolutes.incentive.gold_faded, padding:10 }}>
+                    <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light }} theme='h1'>Give back to {code_details.referrer?.username}</Text>
+                    <Text style={{ paddingTop:5 }} size={12} theme='h2'>Make a qualifying deposit and {code_details.referrer.username} will receive a reward!</Text>
                 </View>
             </View>
             :<></>}
-            <View nativeID='action_row' 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}
-                    onPress={() => onCancel()}
-                />
-                <Button
-                    style={{ flex:3, opacity: errors.length > 0 ? 0.5: 1 }}
-                    disabled={errors.length > 0 ? true : false}
-                    title={'REVIEW DEPOSIT'}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
-                    padding={15}
-                    onPress={() => handleTransact()}
-                />
-            </View>
+            <KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding':'height'}>
+                <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
+                    <Button
+                        style={{ flex:1, marginRight:5, opacity: 1 }}
+                        title={'CANCEL'}
+                        type='close'
+                        onPress={() => onCancel()}
+                    />
+                    <Button
+                        style={{ flex:3, opacity: errors.length > 0 ? 0.5: 1 }}
+                        disabled={errors.length > 0 ? true : false}
+                        title={'REVIEW DEPOSIT'}
+                        type='success'
+                        onPress={() => handleTransact()}
+                    />
+                </View>
+            </KeyboardAvoidingView>
         </View>
+        </TouchableWithoutFeedback>
     )
 }
 

package/src/Wallet/components/ItemOrderCard.tsx

@@ -1,37 +1,38 @@
 import React, { useState } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
 import moment from 'moment-mini';
 import { ItemOrderHelpers } from '../api';
 import type { ItemOrderProps } from '../../types';
 import ItemOrderDetails from './ItemOrderDetailCard';
+import { useColors } from '../../constants/useColors';
+import { Button, View, Text } from '../../Components/Themed';
 
 type ItemOrderCardProps = {
     item_order:ItemOrderProps
 }
 const ItemOrderCard = ({ item_order }:ItemOrderCardProps) => {
+    const Colors = useColors();
     const [ expanded, setExpanded ] = useState(false);
 
     const status_label = ItemOrderHelpers.getStatusLabel(item_order);
 
     return (
-        <View style={{ backgroundColor:expanded?Colors.shades.shade600:undefined, borderRadius:8 }}>
-            <TouchableOpacity style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade100 }} onPress={() => setExpanded(!expanded)}>
-                <View nativeID='item_order_info' style={{ flex:3, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>{item_order.description}</Text>
-                    <Text style={{ marginTop:4 }} size={12} color={Colors.brand.midnight} weight='regular'>Created at {moment(item_order.create_datetime).format('YYYY-MM-DD hh:mm a')}</Text>
+        <View float style={{ borderRadius:0 }}>
+            <Button style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderBottomColor:Colors.borders.light }} onPress={() => setExpanded(!expanded)}>
+                <View nativeID='item_order_info' style={{ flex:3, borderRightWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='h2'>{item_order.description}</Text>
+                    <Text style={{ marginTop:4 }} theme='light'>Created at {moment(item_order.create_datetime).format('YYYY-MM-DD hh:mm a')}</Text>
                 </View>
                 <View nativeID='item_order_amount' style={{ flex:1, padding:5 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign='center'>${item_order.total_amount.toFixed(2)}</Text>
+                    <Text size={14} theme='h1' textAlign='center'>${item_order.total_amount.toFixed(2)}</Text>
                     <View style={{ marginTop:3, padding:3, paddingRight:10, paddingLeft:10, backgroundColor:status_label.color, borderRadius:8}}>
-                        <Text color={Colors.shades.white} weight='regular' textAlign='center'>{status_label.text}</Text>
+                        <Text theme='description' color={Colors.text.white} textAlign='center'>{status_label.text}</Text>
                     </View>
                 </View>
                 <View style={{ padding:10 }}>
-                    <Icons.ChevronIcon direction={expanded?'up':'down'} size={10} color={Colors.brand.midnight}/>
+                    <Icons.ChevronIcon direction={expanded?'up':'down'} size={8} color={Colors.text.h1}/>
                 </View>
-            </TouchableOpacity>
+            </Button>
             {expanded ?
             <View style={{ padding:20 }}>
                 <ItemOrderDetails

package/src/Wallet/components/ItemOrderDetailCard.tsx

@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from "react"
-import { FlatList, View, ActivityIndicator} from "react-native"
-import { Text } from '../../Components';
+import { FlatList, ActivityIndicator} from "react-native"
 import { ItemOrderApi, WalletApi } from '../api';
 import type { AccountProps, ItemOrderProps, TransactionDetailProps, TransactionProps } from '../../types';
-import Colors from '../../constants/colors';
 import moment from 'moment-mini';
+import { useColors } from "../../constants/useColors";
+import { Text, View } from "../../Components/Themed";
 
 type ItemOrderDetailsProps = {
     item_order: ItemOrderProps,
 }
 
 const ItemOrderDetails = ({ item_order }:ItemOrderDetailsProps) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ data, setData ] = useState<{
         account?:AccountProps,
@@ -43,8 +44,8 @@ const ItemOrderDetails = ({ item_order }:ItemOrderDetailsProps) => {
     const renderTransactionDetails = (data : { item:TransactionDetailProps, index:number }) => {
         return (
             <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
-                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.description}</Text>
-                <Text size={14} color={Colors.brand.midnight} weight="bold">${data.item.amount.toFixed(2)}</Text>
+                <Text style={{ flex:1 }} theme="description">{data.item.description}</Text>
+                <Text size={14} theme="h1">${data.item.amount.toFixed(2)}</Text>
             </View>
         )
     }
@@ -58,40 +59,40 @@ const ItemOrderDetails = ({ item_order }:ItemOrderDetailsProps) => {
 
 
     return (
-        <View nativeID="item_order_details">
+        <View float style={{ padding:5 }}>
             {account ?
-                <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
-                    <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>Account</Text>
-                    <Text size={14} color={Colors.brand.midnight} weight="bold">{account.account_label}</Text>
+                <View transparent style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                    <Text style={{ flex:1 }} theme="description">Account</Text>
+                    <Text size={14} theme="h1">{account.account_label}</Text>
                 </View>
             :<></>}
             {loading ?
-            <ActivityIndicator size='small' color={Colors.brand.midnight} />
+            <ActivityIndicator size='small' color={Colors.text.h1} />
             :<></>}
             <FlatList
                 data={transaction_details}
                 renderItem={renderTransactionDetails}
             />
             {transaction?.status == 'posted' && transaction?.estimated_settle_datetime && moment().isBefore(moment(transaction.estimated_settle_datetime)) ?
-                <View>
-                    <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
-                        <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>Estimated Settle Time</Text>
-                        <Text size={14} color={Colors.brand.midnight} weight="bold">{moment(transaction.estimated_settle_datetime).format('MM/DD @ h a')}</Text>
+                <View transparent>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <Text style={{ flex:1 }} size={14} theme="h2">Estimated Settle Time</Text>
+                        <Text size={14} theme="h1">{moment(transaction.estimated_settle_datetime).format('MM/DD @ h a')}</Text>
                     </View>
                     {unsettled > 0 ?
-                    <View style={{ padding:10, backgroundColor:Colors.shades.shade100, borderRadius:8, marginTop:10 }}>
-                        <View style={{ flexDirection:'row', alignItems:'center' }}>
-                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>Awaiting Settlement</Text>
-                            <Text size={14} color={Colors.utility.warning} weight="bold">${unsettled.toFixed(2)}</Text>
+                    <View transparent style={{ padding:10, borderRadius:8, marginTop:10 }}>
+                        <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                            <Text style={{ flex:1 }} theme="h2">Awaiting Settlement</Text>
+                            <Text size={14} color={Colors.text.warning} weight="bold">${unsettled.toFixed(2)}</Text>
                         </View>
-                        <Text style={{ marginTop:10 }} size={12} color={Colors.brand.midnight} weight='regular'>This amount exceeded your <Text size={12} weight='bold'>Instant Deposit Limit</Text> and will be added to your wallet after the transaction settles based on the date noted above.</Text>
+                        <Text style={{ marginTop:10 }} theme="description">This amount exceeded your <Text size={12} weight='bold'>Instant Deposit Limit</Text> and will be added to your wallet after the transaction settles based on the date noted above.</Text>
                     </View>
                     :<></>}
                 </View>
             :<></>}
-            {false && item_order.type == 'wallet' && transaction?.status == 'posted' ?
-            <View style={{ borderRadius:8, backgroundColor:Colors.utility.warning, padding:10, marginTop:10 }}>
-                <Text size={14} color={Colors.shades.white} weight='semibold' textAlign="center">Deposits in posted status are not eligible for withdraw until they settle.</Text>
+            {item_order.type == 'wallet' && transaction?.status == 'posted' ?
+            <View style={{ borderRadius:8, backgroundColor:Colors.text.warning, padding:10, marginTop:10 }}>
+                <Text size={14} color={Colors.text.white} weight='semibold' textAlign="center">Deposits in posted status are not eligible for withdraw until they settle.</Text>
             </View>
             :<></>}
         </View>