be-components 3.3.6 → 3.3.7

package/src/ProfileManager/Components/BasicInfoManager.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, TouchableOpacity, ScrollView } from 'react-native';
-import { Button, Icons, Text, TextInput } from '../../Components';
+import { ActivityIndicator, TouchableOpacity, ScrollView } from 'react-native';
+import { Icons, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
 import { ProfileApi } from '../api';
 import { button_styles } from '../../constants/styles';
 import type { MyPlayerProps } from '../../types';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type BasicInfoManagerProps = {
     player:MyPlayerProps,
@@ -15,6 +17,7 @@ type BasicInfoManagerProps = {
 }
 
 const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:BasicInfoManagerProps) => {
+    const C = useColors();
     const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>(player)
     const [ loading, setLoading ] = useState(false);
     const [ username_valid, setUsernameValid ] = useState<{
@@ -57,20 +60,20 @@ const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
     const allow_next = username_valid.valid && !username_valid.loading && draft_player.first_name && draft_player.last_name ? true : false
 
     return (
-        <View style={{ flex:1 }}>
-            <ScrollView style={{ flex:1 }}>
+        <View style={{ flexGrow:1 }}>
+            <ScrollView style={{ flexGrow:1 }}>
                 {walkthrough ?
                 <View style={{ padding:20 }}>
-                    <Text size={30} color={Colors.brand.midnight} weight='bold'>Let's start with the basics</Text>
-                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>You can change this later, but will be required to verify your account.</Text>
+                    <Text size={30} theme='h1'>Let's start with the basics</Text>
+                    <Text style={{ marginTop:15 }} size={16} theme='h2'>You can change this later, but will be required to verify your account.</Text>
                 </View>
                 :<></>}
                 <View style={{ padding:30 }}>
-                    <Text weight='bold' size={18} color={Colors.brand.midnight}>USERNAME</Text>
-                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>To start, we randomly generate a username for you!  Change it if you'd like here.</Text>
+                    <Text weight='bold' size={18} theme='h1'>USERNAME</Text>
+                    <Text style={{ marginTop:5 }} theme='h2'>To start, we randomly generate a username for you!  Change it if you'd like here.</Text>
                     <View style={{ marginTop:20, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
-                        <View style={{ paddingLeft:15, paddingRight:15 }}>
-                            <Text size={20} color={Colors.brand.midnight} weight='bold'>@</Text>
+                        <View transparent style={{ paddingLeft:15, paddingRight:15 }}>
+                            <Text theme='h1'>@</Text>
                         </View>
                         <TextInput
                             value={draft_player.username}
@@ -92,15 +95,15 @@ const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
                                 }
                             }}
                         />
-                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <View transparent style={{ paddingLeft:15, paddingRight:15 }}>
                         {username_valid.loading ?
                         <ActivityIndicator size='small' color={Colors.brand.midnight}/>
                         :
-                        <View>
+                        <View transparent>
                             {username_valid.valid ?
-                            <Icons.CheckIcon size={16} color={Colors.utility.success} />
+                            <Icons.CheckIcon size={16} color={C.text.success} />
                             :
-                            <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                            <Icons.AlertIcon size={16} color={C.text.warning} />
                             }
                         </View>
                         }
@@ -109,12 +112,12 @@ const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
                 </View>
 
                 <View style={{ padding:30 }}>
-                    <Text weight='bold' size={18} textAlign='left' color={Colors.brand.midnight}>NAME</Text>
-                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>Add / Update your name below.  This is required to verify your account</Text>
+                    <Text weight='bold' size={18} theme='h1'>NAME</Text>
+                    <Text style={{ marginTop:5 }} theme='h2'>Add / Update your name below.  This is required to verify your account</Text>
                     <View style={{ marginTop:20, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
-                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <View transparent style={{ paddingLeft:15, paddingRight:15 }}>
                             <Icons.UserIcon
-                                color={Colors.brand.midnight}
+                                color={C.text.h1}
                                 size={18}
                             />
                         </View>
@@ -128,9 +131,9 @@ const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
                         />
                     </View>
                     <View style={{ marginTop:10, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
-                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <View transparent style={{ paddingLeft:15, paddingRight:15 }}>
                             <Icons.UserIcon
-                                color={Colors.brand.midnight}
+                                color={C.text.h1}
                                 size={18}
                             />
                         </View>
@@ -149,8 +152,7 @@ const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
             <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
                 <Button
                     title='EXIT SETUP'
-                    title_color={Colors.utility.error}
-                    backgroundColor='transparent'
+                    type='text'
                     onPress={() => onClose()}
                 />
                 <TouchableOpacity 
@@ -166,19 +168,14 @@ const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
                 <Button
                     style={{ flex:1, marginRight:5 }}
                     title='BACK'
-                    padding={15}
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
+                    type='close'
                     onPress={() => onClose()}
                 />
                 <Button
                     style={{ flex:3, opacity:allow_next && is_changed?1:0.5 }}
                     disabled={!is_changed || !allow_next}
                     title='UPDATE'
-                    padding={15}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={async() => {
                         await updatePlayer()
                         onClose()

package/src/ProfileManager/Components/BasicStatus.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { View, Image, ScrollView } from 'react-native';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Image, ScrollView } from 'react-native';
+import { Icons } from '../../Components';
 import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
-import { view_styles } from '../../constants/styles';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type BasicStatusProps = {
     player:MyPlayerProps,
@@ -18,7 +18,7 @@ type BasicStatusProps = {
 }
 
 const BasicStatus = ({ onVerify, code_details, player, onClose }:BasicStatusProps) => {
-
+    const C = useColors();
     const { code_request, promo } = code_details;
 
     const getStatus = (p:MyPlayerProps) => {
@@ -31,8 +31,8 @@ const BasicStatus = ({ onVerify, code_details, player, onClose }:BasicStatusProp
     const errors = getStatus(player)
 
     return (
-        <View style={{ flex:1 }}>
-            <ScrollView style={{ flex:1 }}>
+        <View style={{ flexGrow:1 }}>
+            <ScrollView style={{ flexGrow:1 }}>
                
                 <View style={{ justifyContent:'center', alignItems:'center' }}>
                     <Image
@@ -41,29 +41,29 @@ const BasicStatus = ({ onVerify, code_details, player, onClose }:BasicStatusProp
                         resizeMode='cover'
                     />
                 </View>
-                <View style={{ padding:10, backgroundColor:Colors.shades.black_faded_super_heavy, marginTop:-100 }}>
+                <View style={{ padding:10, marginTop:-100 }}>
                     <View style={{ padding:10, flexDirection:'row' }}>
-                        <Icons.CheckCirlceIcon color={Colors.utility.success} size={32}/>
+                        <Icons.CheckCirlceIcon color={C.text.success} size={32}/>
                         <View style={{ flex:1, marginLeft:20 }}>
-                            <Text weight='bold' size={16} color={Colors.shades.white}>FREE TO PLAY - ENGAGED!</Text>
-                            <Text style={{ marginTop:5 }} color={Colors.shades.white} size={14} textAlign='left'>Your profile is ready to go for play money betting and all our FREE TO PLAY games.</Text>
+                            <Text theme='h1'>FREE TO PLAY - ENGAGED!</Text>
+                            <Text style={{ marginTop:5 }} theme='h2'>Your profile is ready to go for play money betting and all our FREE TO PLAY games.</Text>
                         </View>
                     </View> 
                     {player.vouched_status != 'verified' ? 
                     <View style={{ padding:10, flexDirection:'row' }}>
-                        <Icons.AlertIcon color={Colors.utility.warning} size={32}/>
+                        <Icons.AlertIcon color={C.text.warning} size={32}/>
                         <View style={{ flex:1, marginLeft:20 }}>
 
-                        <Text weight='bold' size={16} color={Colors.shades.white}>WANT TO USE REAL MONEY?</Text>
+                        <Text theme='h1'>WANT TO USE REAL MONEY?</Text>
                         {errors.length == 0 ?
-                        <Text style={{ marginTop:5 }} color={Colors.shades.white} size={14} textAlign='left'>Continue on your journey and complete the verification steps in just a couple minutes.</Text>
+                        <Text style={{ marginTop:5 }} theme='description'>Continue on your journey and complete the verification steps in just a couple minutes.</Text>
                         :
                         <View style={{ marginTop:5 }}>
-                            <Text size={14} color={Colors.utility.warning} weight='bold'>FIX THE FOLLOWING BEFORE CONTINUING</Text>
+                            <Text size={14} theme='warning'>FIX THE FOLLOWING BEFORE CONTINUING</Text>
                             <View style={{ padding:10 }}>
                                 {errors.map((e,i) => {
                                     return (
-                                        <Text style={{ padding:2 }} size={14} color={Colors.utility.warning} weight='bold'>{i+1} - {e}</Text>
+                                        <Text style={{ padding:2 }} theme='warning'>{i+1} - {e}</Text>
                                     )
                                 })}
                             </View>
@@ -73,44 +73,40 @@ const BasicStatus = ({ onVerify, code_details, player, onClose }:BasicStatusProp
                     </View>
                     :
                     <View style={{ padding:10, flexDirection:'row' }}>
-                        <Icons.CheckCirlceIcon color={Colors.utility.success} size={32}/>
+                        <Icons.CheckCirlceIcon color={C.text.success} size={32}/>
                         <View style={{ flex:1, marginLeft:20 }}>
-                            <Text weight='bold' size={16} color={Colors.shades.white}>REAL MONEY - ENGAGED!</Text>
-                            <Text style={{ marginTop:5 }} color={Colors.shades.white} size={14} textAlign='left'>Way to go! Your profile is ready to go for real-money activities!</Text>
+                            <Text theme='h1'>REAL MONEY - ENGAGED!</Text>
+                            <Text style={{ marginTop:5 }} theme='h2'>Way to go! Your profile is ready to go for real-money activities!</Text>
                         </View>
                     </View> 
                     }
                 </View>  
             </ScrollView>
             {code_request && !['closed','fulfilled'].includes(code_request.status) && promo ?
-            <View style={{ margin:15, marginTop:-50, flexDirection:'row', backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
-                <View style={{ padding:10, justifyContent:'center' }}>
-                    <Icons.GiftIcon size={40} color={Colors.incentive.gold} />
+            <View float style={{ margin:15, marginTop:-50, flexDirection:'row' }}>
+                <View transparent style={{ padding:10, justifyContent:'center' }}>
+                    <Icons.GiftIcon size={40} color={C.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={16} color={Colors.brand.midnight} weight='bold'>Verify to claim your gift!</Text>
-                    <Text style={{ paddingTop:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>Did you know on average it only takes 3 minutes to complete the verification process?</Text>
+                <View transparent style={{flex:1, padding:10 }}>
+                    <Text theme='h1'>Verify to claim your gift!</Text>
+                    <Text style={{ paddingTop:5 }} theme='h2'>Did you know on average it only takes 3 minutes to complete the verification process?</Text>
                 </View>
             </View>
             :<></>}
+
             {player.vouched_status != 'verified' ?
             <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
                 <Button
                     title='DO IT LATER'
                     style={{ flex:3, marginRight:5 }}
-                    padding={15}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    title_color={Colors.brand.electric}
+                    type='close'
                     onPress={() => onClose()}
                 />
                 <Button
                     title='VERIFY ACCOUNT'
                     style={{ flex:5, opacity: errors.length > 0 ? 0.5 : 1 }}
-                    padding={15}
                     disabled={errors.length > 0}
-                    backgroundColor={Colors.utility.success}
-                    title_color={Colors.shades.white}
+                    type='success'
                     onPress={() => onVerify()}
                 />
             </View>
@@ -119,10 +115,7 @@ const BasicStatus = ({ onVerify, code_details, player, onClose }:BasicStatusProp
                 <Button
                     title='CLOSE'
                     style={{ flex:3, marginRight:5 }}
-                    padding={15}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    title_color={Colors.brand.electric}
+                    type='close'
                     onPress={() => onClose()}
                 />
             </View>

package/src/ProfileManager/Components/CodeRedeem.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, View, Image } from 'react-native';
-import { Button, Icons, Text, TextInput } from '../../Components';
-import Colors from '../../constants/colors';
+import { ActivityIndicator, Image } from 'react-native';
+import { Icons } from '../../Components';
 import { ProfileApi, ProfileHelpers } from '../api';
 import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../../types';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type CodeRedeemProps = {
     player:MyPlayerProps,
@@ -20,6 +21,7 @@ type CodeRedeemProps = {
 }
 
 const CodeRedeem = ({ walkthrough, onVerify, onClose, onRedeemCode }:CodeRedeemProps) => {
+    const C = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ show_reward, setShowReward ] = useState(false);
     const [ action_loading, setActionLoading ] = useState(false);
@@ -73,7 +75,7 @@ const CodeRedeem = ({ walkthrough, onVerify, onClose, onRedeemCode }:CodeRedeemP
 
     if(loading){
         return (
-            <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:40, alignSelf:'center' }} />
+            <ActivityIndicator size='large' color={C.text.h1} style={{ padding:40, alignSelf:'center' }} />
         )
     }
 
@@ -81,80 +83,79 @@ const CodeRedeem = ({ walkthrough, onVerify, onClose, onRedeemCode }:CodeRedeemP
     const try_allowed = draft_code ? true : false
     const change_allowed = !loading && ProfileHelpers.isChangeCodeAllowed(code_request) ? true : false
     return (
-        <View style={{ flex:1 }}>
-            <View style={{ flex:1, padding:20 }}>
+        <View style={{ flexGrow:1 }}>
+            <View style={{ flexGrow:1, padding:20 }}>
             <View style={{ padding:20 }}>
-                    <Text size={30} color={Colors.brand.midnight} weight='bold'>How Did You Find Us?</Text>
-                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>All new players are eligible for a one-time sign up bonus. Below is the code / referrer used during sign up.</Text>
+                    <Text size={30} theme='h1'>How Did You Find Us?</Text>
+                    <Text style={{ marginTop:15 }} size={16} theme='h2'>All new players are eligible for a one-time sign up bonus. Below is the code / referrer used during sign up.</Text>
                 </View>
                 <View style={{ padding:10, marginTop:20 }}>
-                    <Text size={20} weight='bold' textAlign='center' color={Colors.brand.midnight}>CODE USED</Text>
-                    <View style={{ marginTop:20, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
-                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                    <Text size={20} theme='h1' textAlign='center'>CODE USED</Text>
+                    <View type='input' style={{ marginTop:20, flexDirection:'row', alignItems:'center' }}>
+                        <View transparent style={{ paddingLeft:15, paddingRight:15 }}>
                             <Icons.USDIcon
-                                color={Colors.brand.midnight}
+                                color={C.text.h1}
                                 size={18}
                             />
                         </View>
                         <TextInput
                             value={draft_code}
-                            style={{ flex:1, borderRadius:0, backroundColor:change_allowed?Colors.shades.white:Colors.shades.shade100 }}
+                            style={{ flex:1, textAlign: 'center' }}
                             placeholder='Add Code Here'
                             editable={change_allowed}
-                            placeholderTextColor={Colors.brand.slate}
+                            transparent
                             onChangeText={(text) => setDraftCode(text)}
                         />
-                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <View transparent style={{ paddingLeft:15, paddingRight:15 }}>
                             {loading ?
-                            <ActivityIndicator size='small' color={Colors.brand.midnight}/>
+                            <ActivityIndicator size='small' color={C.text.h1}/>
                             :
                             <View>
                                 { !is_changed && code_request ?
-                                <Icons.CheckIcon size={16} color={Colors.utility.success} />
+                                <Icons.CheckIcon size={16} color={C.text.success} />
                                 : !code_error ?
-                                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                                <Icons.AlertIcon size={16} color={C.text.warning} />
                                 :
-                                <Icons.CloseIcon size={14} color={Colors.utility.error} />
+                                <Icons.CloseIcon size={14} color={C.text.error} />
                                 }
                             </View>
                             }
                         </View>
                     </View>
                     {code_error ?
-                    <Text style={{ padding:5 }} size={14} color={Colors.utility.error} textAlign='center'>{code_error}</Text>
+                    <Text style={{ padding:5 }} theme='error' textAlign='center'>{code_error}</Text>
                     :<></>}
                     {is_changed ?
                         <Button
                             title='Apply Code'
                             style={{ marginTop:20, opacity:try_allowed?1:0.5 }}
                             disabled={!try_allowed}
-                            padding={15}
                             onPress={() => handleTryCodeRequest()}
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.brand.electric}
+                            type='success'
+                            
                         />
                         :<></>}
                     {false ?
-                    <Text size={14} color={Colors.utility.warning}>{'ERROR GOES HERE'}</Text>
+                    <Text theme='warning'>{'ERROR GOES HERE'}</Text>
                     :<></>}
                 </View>
                 {!reward_option ?
-                <View style={{ padding:10, marginTop:20 }}>
-                    <Text size={20} weight='bold' textAlign='center' color={Colors.brand.midnight}>CODE OFFER</Text>
+                <View float style={{ padding:10, marginTop:20 }}>
+                    <Text size={20} weight='bold' textAlign='center' theme='h1'>CODE OFFER</Text>
                     {promo ?
-                    <View style={{ marginTop:20, backgroundColor:Colors.shades.white, borderRadius:8, padding:10 }}>
-                        <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign='center'>{ProfileHelpers.getReferralDescription(promo)}</Text>
+                    <View transparent style={{ marginTop:20, borderRadius:8, padding:10 }}>
+                        <Text style={{ marginTop:5 }} theme='description' textAlign='center'>{ProfileHelpers.getReferralDescription(promo)}</Text>
                     </View>
                     :<></>}
                 </View>
                 :
-                <View style={{ padding:10, marginTop:20 }}>
-                    <Text size={20} weight='bold' textAlign='center' color={Colors.brand.midnight}>CODE REDEEMED</Text>
+                <View float style={{ padding:10, marginTop:20 }}>
+                    <Text size={20} theme='h1' textAlign='center'>CODE REDEEMED</Text>
                     {reward_option ?
-                    <View style={{ marginTop:10, backgroundColor:Colors.highlights.highlight400Faded, padding:10, borderRadius:8 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='semibold'>AWARDED: {reward_option.reward_name}</Text>
+                    <View transparent style={{ marginTop:10, padding:10, borderRadius:8 }}>
+                        <Text size={14} theme='h2'>AWARDED: {reward_option.reward_name}</Text>
                         {code_request && promo && ['referral_sweepstakes','referral_code'].includes(promo.type) ?
-                        <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} weight='semibold'>KICKBACK STATUS: {code_request.status == 'fulfilled' ? 'Referrer will get the same reward amount after you make your first deposit': 'Kickback received'}</Text>
+                        <Text style={{ marginTop:10 }} theme='h2'>KICKBACK STATUS: {code_request.status == 'fulfilled' ? 'Referrer will get the same reward amount after you make your first deposit': 'Kickback received'}</Text>
                         :<></>}
                     </View>
                     :<></>}
@@ -162,7 +163,7 @@ const CodeRedeem = ({ walkthrough, onVerify, onClose, onRedeemCode }:CodeRedeemP
                 }
             </View>
             {referrer ?
-            <View style={{ margin:10, marginRight:30, marginLeft:30, padding:5, backgroundColor:Colors.shades.white, borderRadius:8 }}>
+            <View float style={{ margin:20, padding:5 }}>
                     <View nativeID='referrer_details' style={{ flexDirection:'row', padding:5}}>
                         <Image
                             source={{ uri:referrer.profile_pic }}
@@ -170,8 +171,8 @@ const CodeRedeem = ({ walkthrough, onVerify, onClose, onRedeemCode }:CodeRedeemP
                             resizeMode='cover'
                         />
                         <View style={{ flex:1, marginLeft:20 }}>
-                            <Text size={16} weight='bold'>Referred By: {referrer.first_name} {referrer.last_name}</Text>
-                            <Text style={{ marginTop:5 }} size={14} weight='regular'>@{referrer.username}</Text>
+                            <Text size={16} theme='h1'>Referred By: {referrer.first_name} {referrer.last_name}</Text>
+                            <Text style={{ marginTop:5 }} theme='description'>@{referrer.username}</Text>
                         </View>
                     </View>
                 </View>
@@ -180,28 +181,21 @@ const CodeRedeem = ({ walkthrough, onVerify, onClose, onRedeemCode }:CodeRedeemP
                 <Button
                     title={walkthrough ? 'SKIP' : 'CLOSE'}
                     style={{ flex:1, marginRight:5 }}
-                    borderColor={Colors.brand.electric}
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    padding={15}
+                    type='close'
                     onPress={() =>  onClose()}
                 />
                 {code_request?.status == 'requested' ?
                     <Button
                         title='VERIFY MY ACCOUNT'
                         style={{ flex:3 }}
-                        backgroundColor={Colors.utility.warning}
-                        title_color={Colors.shades.white}
-                        padding={15}
+                        type='success'
                         onPress={() => onVerify()}
                     />
                     :code_request?.status == 'verified' ?
                     <Button
                         title='REDEEM CODE'
                         style={{ flex:3 }}
-                        backgroundColor={Colors.utility.success}
-                        title_color={Colors.shades.white}
-                        padding={15}
+                        type='success'
                         onPress={() => handleRedeemCode()}
                     />
                     :
@@ -209,34 +203,30 @@ const CodeRedeem = ({ walkthrough, onVerify, onClose, onRedeemCode }:CodeRedeemP
                         title='CODE REDEEMED'
                         style={{ flex:3 }}
                         disabled
-                        backgroundColor={Colors.brand.slate}
-                        title_color={Colors.shades.white}
-                        padding={15}
+                        type='info'
                         onPress={() => console.log('REDEEMED!!!')}
                     />
                     }
                 </View>
                 {show_reward ?
-                <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
-                    <View style={{ borderRadius:8, backgroundColor:Colors.shades.white, padding:20, minWidth:250, minHeight:200 }}>
+                <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                    <View float style={{ padding:20, minWidth:250, minHeight:200 }}>
                         {reward_option ?
-                        <View>
-                            <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>CONGRATULATIONS!</Text>
-                            <Text style={{ marginTop:10 }} size={30} color={Colors.utility.success} weight='bold' textAlign='center'>{reward_option.reward_name}</Text>
-                            <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign='center'>AWARD RECEIVED</Text>
+                        <View transparent>
+                            <Text size={14} theme='h1' textAlign='center'>CONGRATULATIONS!</Text>
+                            <Text style={{ marginTop:10 }} size={30} theme='success' weight='bold' textAlign='center'>{reward_option.reward_name}</Text>
+                            <Text style={{ marginTop:10 }} size={14} theme='description' textAlign='center'>AWARD RECEIVED</Text>
                             <Button
                                 title='CLOSE'
-                                title_color={Colors.shades.white}
                                 style={{ marginTop:20 }}
-                                padding={15}
-                                backgroundColor={Colors.brand.electric}
+                                type='close'
                                 onPress={() => setShowReward(false)}
                             />
                         </View>
                         :
                         <View>
-                            <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>GETTING YOUR REWARD...</Text>
-                            <ActivityIndicator size='large' color={Colors.brand.midnight} style={{alignSelf:'center', marginTop:20 }}/>
+                            <Text size={14} theme='h1' textAlign='center'>GETTING YOUR REWARD...</Text>
+                            <ActivityIndicator size='large' color={C.text.h1} style={{alignSelf:'center', marginTop:20 }}/>
                         </View>
                         }
                     </View>