be-components 3.3.6 → 3.3.8

package/src/ProfileManager/Components/SettingsManager.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
-import { ScrollView, View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
-import { Button, Icons, Text, TextInput } from '../../Components';
+import { ScrollView, FlatList, TouchableOpacity } from 'react-native';
+import { Icons } from '../../Components';
 import Colors from '../../constants/colors';
 import type { SettingProps } from '../api/types';
 import type { MyPlayerProps, PlayerSettingProps } from '../../types';
 import { ProfileApi } from '../api';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
 
 type SettingsManagerProps = {
     title: string,
@@ -17,6 +19,7 @@ type SettingsManagerProps = {
 }
 
 const SettingsManager = ({ player, title, description, icon, settings, player_settings, onUpdatePlayerSetting }:SettingsManagerProps) => {
+    const C = useColors();
     const [ draft_setting, setDraftSetting ] = useState<PlayerSettingProps>()
 
     const handleUpdateSetting = async(setting:SettingProps, option:string, status:'active'|'inactive', player_setting?:PlayerSettingProps) => {
@@ -44,46 +47,46 @@ const SettingsManager = ({ player, title, description, icon, settings, player_se
         let disabled = false
         if(data.item.setting == 'collar_pct' && player.type != 'premium'){ disabled = true }
         return (
-            <View style={local_styles.settings_container}>
-                <View style={{ padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                    <View style={{ flexDirection:'row', alignItems:'center' }}>
-                        <Text style={{flex:1}} size={14} color={Colors.brand.midnight} weight='bold'>{data.item.setting_label}</Text>
+            <View float style={{ margin:5 }}>
+                <View transparent style={{ padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{flex:1}} theme='h2'>{data.item.setting_label}</Text>
                         {disabled ?
-                        <Text style={{ marginLeft:5 }} size={14} color={Colors.incentive.gold} weight='bold'>PREMIUM ONLY</Text>
+                        <Text style={{ marginLeft:5 }} theme='description' color={C.text.gold}>PREMIUM ONLY</Text>
                         :<></>}
                     </View>
-                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight}>{data.item.setting_description}</Text>
+                    <Text style={{ marginTop:5 }} theme='description'>{data.item.setting_description}</Text>
                 </View>
-                <View>
+                <View transparent>
                     {data.item.option_type == 'number_input' ?
-                    <View>
-                        <View style={{flexDirection:'row', alignItems:'center', padding:10}}>
-                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>My Setting</Text>
-                            <TextInput
-                                style={{ padding:10 }}
-                                editable={editing}
-                                value={shown_setting?.selected_option}
-                                onChangeText={(text) => {
-                                    if(!draft_setting){ return }
-                                    setDraftSetting({ ...draft_setting, selected_option: text })
-                                }}
-                            />
+                    <View transparent>
+                        <View transparent style={{flexDirection:'row', alignItems:'center', padding:10}}>
+                            <Text style={{ flex:1 }} theme='h1'>My Setting</Text>
+                            <View type='input'>
+                                <TextInput
+                                    style={{minWidth:75, textAlign:'center' }}
+                                    editable={editing}
+                                    transparent
+                                    value={shown_setting?.selected_option}
+                                    onChangeText={(text) => {
+                                        if(!draft_setting){ return }
+                                        setDraftSetting({ ...draft_setting, selected_option: text })
+                                    }}
+                                />
+                            </View>
                             {!editing ?
                             <Button
                                 title='EDIT'
                                 style={{ marginLeft:5, opacity:disabled?0.5:1 }}
                                 disabled={disabled}
-                                title_color={Colors.shades.white}
-                                backgroundColor={Colors.brand.electric}
+                                type='close'
                                 onPress={() => setDraftSetting(my_settings[0])}
                             />
                             :
                             <Button
                                 title='X'
                                 style={{ marginLeft:5 }}
-                                title_color={Colors.utility.error}
-                                borderColor={Colors.utility.error}
-                                borderWidth={1}
+                                type='error'
                                 onPress={() => setDraftSetting(undefined)}
                             />
                             }
@@ -91,8 +94,8 @@ const SettingsManager = ({ player, title, description, icon, settings, player_se
                         {is_changed ?
                         <Button
                             title='SAVE'
-                            backgroundColor={Colors.utility.success}
                             title_color={Colors.shades.white}
+                            type='success'
                             onPress={() => {
                                 if(!shown_setting){ return }
                                 handleUpdateSetting(data.item, shown_setting.selected_option, 'active', shown_setting)}
@@ -101,18 +104,18 @@ const SettingsManager = ({ player, title, description, icon, settings, player_se
                         :<></>}
                     </View>
                     :data.item.option_type == 'select' ?
-                    <View nativeID='setting_options' style={{ padding:15, flexDirection:'row', justifyContent:'space-between' }}>
+                    <View transparent nativeID='setting_options' style={{ padding:15, flexDirection:'row', justifyContent:'space-between' }}>
                     {data.item.setting_options.map(so => {
                         const my_setting = my_settings.find(ms => ms.selected_option == so)
                         return (
                             <TouchableOpacity style={{ flexDirection:'row', alignItems:'center' }}
                             onPress={() => handleUpdateSetting(data.item, so, my_setting?.status == 'active' ? 'inactive' : 'active', my_setting)}>
-                                <View style={{ height:20, width:20, justifyContent:'center', alignItems:'center', borderWidth:1, borderRadius:100, borderColor:Colors.brand.electric, backgroundColor:my_setting?.status == 'active' ? Colors.brand.electric : 'transparent' }}>
+                                <View style={{ height:20, width:20, justifyContent:'center', alignItems:'center', borderWidth:1, borderRadius:100, borderColor:C.text.action, backgroundColor:my_setting?.status == 'active' ? C.text.action : 'transparent' }}>
                                     {my_setting?.status == 'active' ?
-                                    <Icons.CheckIcon color={Colors.shades.white} size={10} />
+                                    <Icons.CheckIcon color={C.text.h1} size={10} />
                                     :<></>}
                                 </View>
-                                <Text style={{ marginLeft:10 }} size={12} color={Colors.brand.midnight} weight='semibold'>{so.toUpperCase()}</Text>
+                                <Text style={{ marginLeft:10 }} theme='h2'>{so.toUpperCase()}</Text>
                             </TouchableOpacity>
                         )
                     })}
@@ -124,16 +127,16 @@ const SettingsManager = ({ player, title, description, icon, settings, player_se
     }
 
     return (
-        <View style={{ flex:1 }}>
-            <ScrollView style={{ flex:1 }}>
-                <View nativeID='preference_settings' style={{ padding:30 }}>
+        <View style={{ flexGrow:1 }}>
+            <ScrollView style={{ flexGrow:1 }}>
+                <View nativeID='preference_settings' style={{ padding:10 }}>
                     <View nativeID='header' style={{ flexDirection:'row', alignItems:'center' }}>
-                        <View style={{ padding:10, backgroundColor:Colors.brand.electric, borderRadius:8 }}>
+                        <View float style={{ padding:10, borderRadius:8 }}>
                             {icon}
                         </View>
-                        <View style={{ flex:1, marginLeft:5 }}>
-                            <Text size={16} color={Colors.brand.midnight} weight='bold'>{title}</Text>
-                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{description}</Text>
+                        <View style={{ flex:1, marginLeft:10 }}>
+                            <Text size={16} theme='h1'>{title}</Text>
+                            <Text style={{ marginTop:3 }} size={12} theme='description'>{description}</Text>
                         </View>
                     </View>
                     <View nativeID='notification_options' style={{ marginTop:20 }}>
@@ -149,12 +152,5 @@ const SettingsManager = ({ player, title, description, icon, settings, player_se
     )
 }
 
-const local_styles = StyleSheet.create({
-    settings_container: {
-        margin:3,
-        backgroundColor:Colors.shades.shade100,
-        padding:10
-    }
-})
 
 export default SettingsManager

package/src/ProfileManager/Components/VouchCard.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { View, Platform, TouchableOpacity, Image, ScrollView } from 'react-native';
-import { Button, Icons, Text } from '../../Components';
+import { Platform, TouchableOpacity, Image, ScrollView } from 'react-native';
+import { Icons } from '../../Components';
 import Colors from '../../constants/colors';
 import { ProfileApi, ProfileHelpers } from '../api';
 import moment from 'moment-mini';
 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 VouchCardProps = {
     player:MyPlayerProps,
@@ -23,6 +24,7 @@ type VouchCardProps = {
 }
 
 const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpdate, onClaimGift, onClose }:VouchCardProps) => {
+    const C = useColors();
     const [ vouching, setVouching ] = useState(false);
     const [ view_height, setViewHeight ] = useState(0);
     const [ job_complete, setJobComplete ] = useState(false);
@@ -32,7 +34,6 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
     const [ info_visible, setInfoVisible ] = useState(false);
     
     const { code_request, promo } = code_details;
-
     useEffect(() => {
         getPlayerFromServer()
     },[])
@@ -146,11 +147,11 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
           }));
     }
 
-    if(Platform.OS != 'web'){ return <></> }
+    //if(Platform.OS != 'web'){ return <></> }
 
     if(vouched){
         return (
-            <View style={{ flex:1, borderRadius:8, backgroundColor:Colors.shades.shade100, paddingBottom:10 }}>
+            <View style={{ flexGrow:1, borderRadius:8, backgroundColor:Colors.shades.shade100, paddingBottom:10 }}>
                 <View nativeID='vouch_header' style={{ padding:10 }}>
                     <Text size={16} color={Colors.brand.midnight} weight='semibold'>Verify your account</Text>
                     <Text style={{ marginTop:3 }} color={Colors.brand.midnight} size={14} weight='light'>Follow the prompts below to verify your identity instantly.</Text>
@@ -175,22 +176,22 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
     let new_date = `${split_dob[1]}/${split_dob[2]}/${split_dob[0]}`
 
     return (
-        <View style={{ flex:1 }} onLayout={(ev) => {
+        <View style={{ flexGrow:1 }} onLayout={(ev) => {
             const { height } = ev.nativeEvent.layout;
             setViewHeight(height)
             }}>
-            <ScrollView style={{ flex:1 }}>
+            <ScrollView style={{ flexGrow:1 }}>
                 <View style={{ padding:20 }}>
-                    <Text size={30} color={Colors.brand.midnight} weight='bold'>Help us identify you</Text>
-                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>We need to take extra steps to verify your account. Scan your Driver's License or state issued ID and take a selfie for instant verification</Text>
+                    <Text size={30} theme='h1'>Help us identify you</Text>
+                    <Text style={{ marginTop:15 }} size={16} theme='h2'>We need to take extra steps to verify your account. Scan your Driver's License or state issued ID and take a selfie for instant verification</Text>
                 </View>
-                <TouchableOpacity style={{padding:10, borderRadius:8, backgroundColor:Colors.highlights.highlight500Faded, margin:20}} onPress={() => setInfoVisible(!info_visible)}>
-                    <View style={{ flexDirection:'row', alignItems:'center' }}>
-                        <Text style={{ flex:1 }} size={14} weight='semibold' color={Colors.brand.midnight}>Why is this step required?</Text>
-                        <Icons.ChevronIcon direction={info_visible?'up':'down'} size={10} color={Colors.brand.midnight} />
+                <TouchableOpacity style={{padding:10, borderRadius:8, backgroundColor:C.views.gold, margin:20}} onPress={() => setInfoVisible(!info_visible)}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} theme='h1'>Why is this step required?</Text>
+                        <Icons.ChevronIcon direction={info_visible?'up':'down'} size={10} color={C.text.h1} />
                     </View>
                     {info_visible ?
-                    <Text size={12} weight='regular' color={Colors.brand.midnight} style={{ marginTop:4 }}>When betting with real money, legally, BettorEdge has to verify your identity to make sure you are old enough to bet and that you are who you say you are.</Text>
+                    <Text theme='description' style={{ marginTop:4 }}>When betting with real money, legally, BettorEdge has to verify your identity to make sure you are old enough to bet and that you are who you say you are.</Text>
                     :<></>}
                 </TouchableOpacity>
                 <View style={{ alignSelf:'center' }}>
@@ -203,59 +204,54 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
                 {player.vouched_status == 'unverified' ? 
                 <View style={{ padding:10 }}>
                     <TouchableOpacity 
-                    style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:15, marginRight:15, borderRadius:8, backgroundColor:Colors.shades.shade100, marginTop:5 }}
                     onPress={() => setDisclaimerConfirmed(!disclaimer_confirmed)}>
-                        <View>
-                        <View style={{ justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.brand.midnight, borderRadius:4, height:20, width:20 }}>
-                            {disclaimer_confirmed ?
-                            <Icons.CheckIcon size={14} color={Colors.brand.midnight} />
-                            :<></>}
+                        <View float style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:C.text.h1, borderRadius:4, height:20, width:20 }}>
+                                {disclaimer_confirmed ?
+                                <Icons.CheckIcon size={14} color={C.text.h1} />
+                                :<></>}
+                            </View>
+                            <Text style={{ marginLeft:10, flex:1 }} theme='h2'>I confirm that my name is <Text size={14} theme='warning'>{player.first_name} {player.last_name}</Text> and that my date of birth is <Text size={14} theme='warning'>{new_date}</Text>. Mismatch will cause failure.</Text>
                         </View>
-                    </View>
-                        <Text style={{ marginLeft:10 }} size={14} color={Colors.brand.midnight} weight='regular'>I confirm that my name is <Text size={12} weight='bold'>{player.first_name} {player.last_name}</Text> and that my date of birth is <Text size={12} weight='bold'>{new_date}</Text>. Mismatch will cause failure.</Text>
                     </TouchableOpacity>
                     <TouchableOpacity 
-                    style={{ flexDirection:'row', marginTop:5, alignItems:'center', padding:10, marginLeft:15, marginRight:15, borderRadius:8, backgroundColor:Colors.shades.shade100 }}
                     onPress={() => setIDDisclaimerConfirmed(!id_disclaimer_confirmed)}
                     >
-                    <View>
-                        <View style={{ justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.brand.midnight, borderRadius:4, height:20, width:20 }}>
-                            {id_disclaimer_confirmed ?
-                            <Icons.CheckIcon size={14} color={Colors.brand.midnight} />
-                            :<></>}
+                        <View float style={{  marginTop:10, padding:10, flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:C.text.h1, borderRadius:4, height:20, width:20 }}>
+                                {id_disclaimer_confirmed ?
+                                <Icons.CheckIcon size={14} color={C.text.h1} />
+                                :<></>}
+                            </View>
+                            <Text style={{ marginLeft:10, flex:1 }} theme='h2'>I confirm that I am using a valid <Text size={14} theme='warning'>(Not Expired)</Text> US government issued ID. Expired ID will cause failure.</Text>
                         </View>
-                    </View>
-                    <Text style={{ marginLeft:10 }} size={14} color={Colors.brand.midnight} weight='regular'>I confirm that I am using a valid <Text size={12} weight='bold'>(Not Expired)</Text> US government issued ID. Expired ID will cause failure.</Text>
                     </TouchableOpacity>
                 </View>
                 :<></>}
-                {code_request && !['fulfilled','closed'].includes(code_request.status) && promo ?
-                <TouchableOpacity 
-                    disabled={player.vouched_status!='verified' ? true : false}
-                    style={{ margin:15, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}
-                    onPress={() => onClaimGift()}
-                    >
-                    <View style={{ flexDirection:'row' }}>
-                        <View style={{ padding:10, justifyContent:'center', alignItems:'center' }}>
-                            <Icons.GiftIcon size={40} color={Colors.incentive.gold} />
-                            {player.vouched_status == 'verified' ? 
-                            <Text style={{ marginTop:5 }} textAlign='center' size={12} color={Colors.incentive.gold}>CLAIM NOW</Text>
-                            :<></>}
-                        </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'>{player.vouched_status == 'verified'?`Congrats! Press Here to claim your gift!`: 'Almost there! Last step to get your gift!'}</Text>
-                            <Text style={{ paddingTop:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{ProfileHelpers.getReferralDescription(promo)}</Text>
-                        </View>
+                {code_request && !['closed','fulfilled'].includes(code_request.status) && promo ?
+                <View float style={{ margin:15, flexDirection:'row' }}>
+                    <View transparent style={{ padding:10, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.GiftIcon size={40} color={C.text.gold} />
+                        {player.vouched_status == 'verified' ? 
+                        <Text style={{ marginTop:5 }} textAlign='center' size={12} color={C.text.gold}>CLAIM NOW</Text>
+                        :<></>}
+                    </View>
+                    <View transparent style={{flex:1, padding:10 }}>
+                        <Text theme='h1'>{player.vouched_status == 'verified'?`Congrats! Press Here to claim your gift!`: 'Almost there! Last step to get your gift!'}</Text>
+                        <Text style={{ paddingTop:5 }} theme='h2'>{ProfileHelpers.getReferralDescription(promo)}</Text>
                     </View>
                     {player.vouched_status == 'verified' ?
-                    <View style={{ position:'absolute', top: -60, right:0, left:0, justifyContent:'center', alignItems:'center' }}>
-                        <View style={{ borderRadius:22, padding:10, marginBottom:7, backgroundColor:Colors.shades.white }}>
+                    <TouchableOpacity 
+                        disabled={player.vouched_status!='verified' ? true : false}
+                        onPress={() => onClaimGift()}
+                        style={{ position:'absolute', top: -60, right:0, left:0, justifyContent:'center', alignItems:'center' }}>
+                        <View float style={{ borderRadius:22, padding:10, marginBottom:7 }}>
                             <Text size={14} color={Colors.incentive.gold} weight='bold'>CLAIM ME NOW!</Text>
                         </View>
                         <Icons.ChevronIcon direction='down' size={8} color={Colors.incentive.gold} />
-                    </View>
+                    </TouchableOpacity>
                     :<></>}
-                </TouchableOpacity>
+                </View>
                 :<></>}
             </ScrollView>
             
@@ -276,22 +272,17 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
                 <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()}
                 />
                 }
                 {player.vouched_status == 'unverified' ?
                 <Button
                     title={!job_complete ? 'SCAN MY ID' : 'REVIEWING ACCOUNT'}
-                    title_color={Colors.shades.white}
                     loading={vouching}
                     disabled={!scan_ready || job_complete}
                     style={{ flex:3, opacity:scan_ready && scan_ready&&!vouching?1:0.5 }}
-                    padding={15}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={() => startVouchingPlayer()}
                 />
 

package/src/ProfileManager/index.tsx

@@ -1,14 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { View, Image, ActivityIndicator } from 'react-native';
+import { Image, ActivityIndicator } from 'react-native';
 import Colors from '../constants/colors';
-import { Text } from '../Components';
 import ProfileWizard from './Components/ProfileWizard';
 import { ProfileApi } from './api';
 import type { SettingProps } from './api/types';
 import type { CodeRequestProps, MyPlayerProps, PlayerBalanceProps, PlayerReferralProps, PlayerSettingProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../types';
+import { Text, View } from '../Components/Themed';
 
 type ProfileOverviewProps = {
-    width:number,
     show_welcome?:boolean,
     //access_token:string,
     hide_powered_by?:boolean,
@@ -35,7 +34,8 @@ type ProfileOverviewProps = {
     }
 }
 
-const ProfileManager = ({ profile_attribute, hide_profile_header, player, hide_powered_by, onRedeemCode, onPlayerUpdate, onNextStep, onVouchStart, show_welcome, hidden_groups, hidden_steps, hidden_levels, walkthrough, width, onClose, onLogout }: ProfileOverviewProps ) => {
+const ProfileManager = ({ profile_attribute, hide_profile_header, player, hide_powered_by, onRedeemCode, onPlayerUpdate, onNextStep, onVouchStart, show_welcome, hidden_groups, hidden_steps, hidden_levels, walkthrough, onClose, onLogout }: ProfileOverviewProps ) => {
+    const [ width, setModuleWidth ] = useState(400);
     const [ loading, setLoading ] = useState(false);
     const [ vouching, setVouching ] = useState(false);
     const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>();
@@ -82,15 +82,18 @@ const ProfileManager = ({ profile_attribute, hide_profile_header, player, hide_p
 
     if(!draft_player || loading){
         return (
-            <View style={{ flex:1, width }}>
+            <View style={{ flexGrow:1 }}>
                 <ActivityIndicator size={'large'} color={Colors.brand.midnight} />
             </View>
         )
     }
 
     return (
-        <View style={{ flex:1, width, minHeight:650 }}>
-            <View style={{ flex:1 }}>
+        <View style={{ flexGrow:1 }} onLayout={(ev) => {
+            const { width } = ev.nativeEvent.layout
+            setModuleWidth(width)
+        }}>
+            <View style={{ flexGrow:1 }}>
                 {!hide_profile_header && !walkthrough && !vouching ?
                 <View style={{ flexDirection:'row', alignItems:'center' }}>
                     <View nativeID='profile_picture' style={{ padding:10 }}>
@@ -101,18 +104,18 @@ const ProfileManager = ({ profile_attribute, hide_profile_header, player, hide_p
                         />
                     </View>
                     <View style={{ flex:1 }}>
-                        <Text size={20} color={Colors.brand.midnight} weight='bold'>{draft_player.first_name} {draft_player.last_name}</Text>
-                        <Text style={{ marginTop:5 }} size={16} color={Colors.brand.slate} weight='bold'>@{draft_player.username}</Text>
+                        <Text size={20} theme='h1'>{draft_player.first_name} {draft_player.last_name}</Text>
+                        <Text style={{ marginTop:5 }} size={16} theme='h2'>@{draft_player.username}</Text>
                     </View>
                     {player_balance ?
                     <View style={{ paddingRight:10 }}>
-                        <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign='right'>${player_balance.balance.toFixed(2)}</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular' textAlign='right'>Promo {player_balance.promo_balance.toFixed(2)}</Text>
+                        <Text size={16} theme='h1' textAlign='right'>${player_balance.balance.toFixed(2)}</Text>
+                        <Text style={{ marginTop:3 }} theme='description' textAlign='right'>Promo {player_balance.promo_balance.toFixed(2)}</Text>
                     </View>
                     :<></>}
                 </View>
                 :<></>}
-                <View style={{ marginTop:10, flex:1 }}>
+                <View style={{ marginTop:10, flexGrow:1 }}>
                         <ProfileWizard
                             player={draft_player}
                             player_settings={player_settings}
@@ -120,11 +123,11 @@ const ProfileManager = ({ profile_attribute, hide_profile_header, player, hide_p
                                 if(active && onVouchStart){ onVouchStart() }
                                 setVouching(active)
                             }}
+                            width={width}
                             onRedeemCode={onRedeemCode}
                             settings={settings}
                             show_welcome={show_welcome}
                             hide_powered_by={hide_powered_by}
-                            width={width}
                             hidden_groups={hidden_groups}
                             hidden_steps={hidden_steps}
                             hidden_levels={hidden_levels}

package/src/Share/api/index.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import { APIOverrides } from "../../ApiOverrides";
 import type { BEEventProps, GeneratedLinkProps, PlayerReferralProps } from '../../types';
+import * as Sharing from 'expo-sharing';
 import { Platform, Share } from 'react-native';
 let ANALYTICS_SVC_API = '';
 let AUTH_SVC_API = '';
@@ -101,9 +102,14 @@ const ShareApi = {
 
 
 const ShareHelpers = {
-    nativeShareAvailable : () => {
-        if(!navigator){ return false }
-        if(!navigator.share){ return false }
+    nativeShareAvailable : async() => {
+        if(Platform.OS == 'web'){
+            if(!navigator){ return false }
+            if(!navigator.share){ return false }
+        } else {
+            return await Sharing.isAvailableAsync()
+        }
+        
         return true
     },
     extractQueryParams: (url?:string):{ key:string, value:string }[] => {

package/src/Share/index.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Text from '../Components/Text';
-import { View, TouchableOpacity, FlatList, ActivityIndicator, Clipboard, ScrollView } from 'react-native';
+import { View, TouchableOpacity, FlatList, ActivityIndicator, Clipboard, ScrollView, Platform } from 'react-native';
 import { view_styles } from '../constants/styles';
 import { Button, Icons, TextInput } from '../Components';
 import Colors from '../constants/colors';
@@ -45,6 +45,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
     const [ link_status, setLinkStatus ] = useState<{
         loading: boolean,
         update_loading:boolean,
+        native_share_allowed?:boolean,
         editing:boolean,
         generated_link?:GeneratedLinkProps,
         draft_generated_link?:GeneratedLinkProps,
@@ -54,16 +55,12 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
     }>({
         loading: false,
         update_loading: false,
+        native_share_allowed:false,
         editing:false,
         visible_id_valid: true,
         query_params: []
     });
-    const { loading, editing, generated_link, draft_generated_link, url, visible_id_valid, update_loading } = link_status;
-
-
-    const native_share_allowed = useCallback(() => {
-        return ShareHelpers.nativeShareAvailable()
-    },[])
+    const { loading, editing, generated_link, draft_generated_link, url, visible_id_valid, update_loading, native_share_allowed } = link_status;
 
     useEffect(() => {
         if(!redirect_url && !generated_link_id){ return }//Unable to get redirect link
@@ -76,9 +73,11 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
     const getGeneratedLink = async(generated_link_id:string) => {
         setLinkStatus({ ...link_status, loading:true });
         const retrieved_link = await ShareApi.getGeneratedLinkById(generated_link_id);
+        const nsa = await ShareHelpers.nativeShareAvailable()
         setLinkStatus({
             ...link_status,
             loading:false,
+            native_share_allowed: nsa,
             generated_link:retrieved_link?.generated_link,
             draft_generated_link: retrieved_link?.generated_link,
             query_params: ShareHelpers.extractQueryParams(retrieved_link?.generated_link.redirect_url),
@@ -91,6 +90,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
         setLinkStatus({ ...link_status, loading: true });
         //If there is a player id - lets append the referral code if one is not supplied!
         if(player_id){ redirect_url = await ShareHelpers.appendPlayerReferral(redirect_url) }
+        const nsa = await ShareHelpers.nativeShareAvailable()
         const { generated_link, url } = await ShareApi.generateShortLink({
             generator: generator,
             generated_link_id:'',
@@ -105,6 +105,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
             ...link_status,
             loading: false,
             generated_link,
+            native_share_allowed: nsa,
             draft_generated_link: generated_link,
             url
         });
@@ -122,7 +123,6 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
 
     const link_is_changed = JSON.stringify(draft_generated_link) != JSON.stringify(generated_link)
     const needs_verification = link_is_changed && !visible_id_valid
-
     return (
         <View style={{ ...view_styles.section, minWidth:250, maxWidth, maxHeight }}>
             <View style={{ ...view_styles.section_header, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
@@ -139,7 +139,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                     onPress={() => onCancel()}
                 />
             </View>
-            <ScrollView style={{ flex:1 }}>
+            <ScrollView>
                 {loading || !generated_link ?
                 <View>
                     <ActivityIndicator style={{ padding:20, alignSelf:'center' }} color={Colors.brand.midnight} size={'large'} />
@@ -263,7 +263,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                             <View style={{ ...view_styles.body_row }}>
                                 <Text size={16} color={Colors.brand.midnight} weight='regular'>Share this link via</Text>
                             </View>
-                            {native_share_allowed() ? 
+                            {native_share_allowed ? 
                             <TouchableOpacity style={{ ...view_styles.body_row }} onPress={async() => {
                                 const share_event = await ShareApi.share(title, body, link_status.url, generated_link.generated_link_id);
                                 if(onShare && share_event){ onShare(share_event) }
@@ -321,12 +321,13 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                                 <Text style={{ marginLeft:4 }} size={12} color={Colors.shades.white} textAlign='left'>Copy</Text>
                             </TouchableOpacity>
                             <View style={{ flex:1 }} />
-                            {embed.widget_element && embed.script_source && embed.div_id ?
+                            {embed.widget_element && embed.script_source && embed.div_id && Platform.OS == 'web' ?
                             <Button
                                 title={preview_embed ? 'Hide Preview' : 'Show Preview'}
                                 title_color={Colors.shades.white}
                                 borderRadius={4}
                                 padding={10}
+                                disabled={Platform.OS != 'web' ? true : false}
                                 backgroundColor={preview_embed ? Colors.utility.error : Colors.brand.cyan}
                                 onPress={() => setPreviewEmbed(!preview_embed)}
                             />