be-components 3.3.5 → 3.3.7

package/src/Competition/components/CompetitionPlay.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlatList, TouchableOpacity, View } from "react-native"
+import { FlatList } from "react-native"
 import type { AthleteProps, BEEventProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionPlayerProps, CompetitionProps, CompetitionTypeProps, LeagueProps, MarketProps, PlayerPickProps } from "../../types";
 import Colors from '../../constants/colors';
 import { useEffect, useState } from "react"
@@ -10,8 +10,10 @@ import type { EventProps, MatchProps, TournamentProps } from "../../types";
 import moment from "moment-mini";
 import { view_styles } from "../../constants/styles";
 import {LinearGradient} from "expo-linear-gradient";
-import { Icons, Text } from "../../Components";
+import { Icons } from "../../Components";
 import LinearDiagnal from "../../Components/LinearDiagnal";
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type CompetitionPlayProps = {
     player_id?:string,
@@ -41,6 +43,7 @@ type CompetitionPlayProps = {
     onChangeCompetition?: (competition_id:string) => void
 }
 const CompetitionPlay = ( { authenticated_competition_player, pick_loading, competition, competition_type, onPick, competition_matches, competition_match_markets, leagues, athletes, events, tournaments, matches, markets, player_id, player_picks }:CompetitionPlayProps ) => {
+    const C = useColors();
     //const [ complete_loaded, setCompleteLoaded ] = useState(false);
     const [ contest_view, setContestView ] = useState<'upcoming'|'closed'>('upcoming')
     //const [ show_completed, setShowCompleted ] = useState(false);
@@ -85,7 +88,7 @@ const CompetitionPlay = ( { authenticated_competition_player, pick_loading, comp
         const isLoading = pick_loading == data.item.competition_match_id ? true : false
         if(match_markets.length != 2){ return <></> }
         return (
-            <View style={{ minWidth:150, flex:1, flexGrow:1, margin:5, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8, backgroundColor:Colors.shades.white, ...view_styles.float }}>
+            <View float transparent style={{ minWidth:150, margin:5, flex:1 }}>
                 <AthleteMarketCard
                     event={event}
                     athlete={athlete}
@@ -111,7 +114,7 @@ const CompetitionPlay = ( { authenticated_competition_player, pick_loading, comp
         const event_picks = player_picks.filter(pp => pp.competition_match_id == data.item.competition_match_id);
         const isLoading = pick_loading == data.item.competition_match_id ? true : false
         return (
-            <View style={{ flex:1, flexGrow:1, margin:5 }}>
+            <View transparent style={{ margin:5 }}>
                 <TeamEventCard
                     event={event}
                     markets={markets}
@@ -137,7 +140,7 @@ const CompetitionPlay = ( { authenticated_competition_player, pick_loading, comp
         return (
             <View>
                 <LinearDiagnal label_size={12} label={market.description} left_color={Colors.brand.midnight} right_color={Colors.brand.midnightTopGradient}/>
-                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center', paddingTop:10, paddingBottom:10 }}>
+                <View style={{ flexDirection:'row', flexWrap:'wrap', paddingTop:10, paddingBottom:10 }}>
                     {athlete_non_primary_matches.map((cm,i) => {
                         return renderAthleteEvents({ item: cm, index:i })
                     })}
@@ -215,13 +218,13 @@ const CompetitionPlay = ( { authenticated_competition_player, pick_loading, comp
         const non_primary_markets = [ ... new Set(competition_matches.filter(cm => cm.event_type == 'team' && cm.event_id == data.item && cm.market_id_override).map(cm => cm.market_id_override ?? ''))]
         const expanded = expanded_markets.includes(data.item) ? true : false
         return (
-            <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}}  colors={[Colors.shades.white, '#F8F8F8']} style={{ minWidth:350, flex:1, flexGrow:1, margin:10, borderWidth:1, borderColor:Colors.shades.shade100, borderRadius:8, ...view_styles.float }}>
-                <View style={{ padding:10, flexDirection:'row', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+            <View float style={{ margin:5, borderRadius:8 }}>
+                <View transparent type='header' style={{ padding:10, flexDirection:'row', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
                     {league ?
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{league.league_name}: </Text>
+                    <Text size={14} theme='h1'>{league.league_name}: </Text>
                     :<></>}
-                    <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>{event.event_title}</Text>
-                    <Text size={14} color={Colors.brand.midnight} weight='regular'>{event.time_detail == 'scheduled' ? moment(event.scheduled_datetime).format('MM/DD @ hh:mm a'): event.time_detail}</Text>
+                    <Text style={{ flex:1 }} theme='h2'>{event.event_title}</Text>
+                    <Text size={14} theme='description'>{event.time_detail == 'scheduled' ? moment(event.scheduled_datetime).format('MM/DD @ hh:mm a'): event.time_detail}</Text>
                 </View>
                 
                 <LinearDiagnal label_size={12} label="Primary Markets" left_color={Colors.brand.midnight} right_color={Colors.brand.midnightTopGradient}/>
@@ -229,43 +232,47 @@ const CompetitionPlay = ( { authenticated_competition_player, pick_loading, comp
                     return renderEvents({ item: cm, index: i })
                 })}
                 {non_primary_markets.length > 0 ?
-                <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                <View transparent style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                     {expanded ?
-                    <View>
+                    <View transparent>
                         {non_primary_markets.map((id, i) => {
                             return renderNonPrimaryMarkets({ item:id, index:i, event_id: data.item, event_type: 'team' })
                         })}
                     </View>
                     :<></>}
-                     <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:15, borderTopWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => expanded ? setExpandedMarkets(expanded_markets.filter(m => m != data.item)): setExpandedMarkets(expanded_markets.concat(data.item))}>
-                        <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='semibold'>{expanded?'Hide Markets':`${non_primary_markets.length} More Markets` }</Text>
-                        <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8}/>
-                    </TouchableOpacity>
+                     <Button transparent style={{ flexDirection:'row', alignItems:'center', padding:15, borderTopWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => expanded ? setExpandedMarkets(expanded_markets.filter(m => m != data.item)): setExpandedMarkets(expanded_markets.concat(data.item))}>
+                        <Text style={{ flex:1 }} theme='h2'>{expanded?'Hide Markets':`${non_primary_markets.length} More Markets` }</Text>
+                        <Icons.ChevronIcon direction={expanded?'up':'down'} color={C.text.h1} size={8}/>
+                    </Button>
                 </View>
                 :<></>}
-            </LinearGradient>
+            </View>
         )
     }
 
 
 
     return (
-        <View style={{ ...view_styles.section, minWidth:350 }}>
-                <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
-                    <Icons.SelectorIcon size={18} color={Colors.brand.midnight} />
-                    <View style={{ flex:1, marginLeft:10 }}>
-                        <Text theme="header">MANAGE MY {competition_type.type == 'pick' ? 'PICKS' : 'WAGERS'}</Text>
-                        <Text style={{ marginTop: 4 }} theme="body_2">Make {competition_type.type == 'pick' ? 'Picks' : 'Wagers'} from the available contests.</Text>
-                    </View>
-                    <View style={{marginLeft:8, marginRight:8, borderRadius:100, height:24, width:24, backgroundColor:picks_completed ? Colors.utility.success : Colors.highlights.highlight200, justifyContent:'center', alignItems:'center'}}>
-                        <Text size={12} color={Colors.shades.white} weight='bold' textAlign='center'>{player_picks.filter(pp => pp.status != 'deleted').length}</Text>
-                    </View>
-                    <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
-                </TouchableOpacity>
+        <View float nativeID="competition_play">    
+            <Button 
+            style={{ flexDirection:'row', alignItems:'center', borderBottomWidth:expanded?1:0, borderColor:C.borders.light }}
+            transparent
+            onPress={() => setExpanded(!expanded)}>
+                <Icons.SettingsIcon size={18} color={C.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="h1">MANAGE MY {competition_type.type == 'pick' ? 'PICKS' : 'WAGERS'}</Text>
+                    <Text style={{ marginTop: 4 }} theme="description">Make {competition_type.type == 'pick' ? 'Picks' : 'Wagers'} from the available contests.</Text>
+                </View>
+                <View transparent style={{ margin:10 }}>
+                    <Text size={16} color={picks_completed?C.text.success:C.text.warning} weight='bold'>{player_picks.filter(pp => pp.status != 'deleted').length}</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={C.text.h1} size={8} />
+            </Button>
                 {expanded ?
-                <View style={{ ...view_styles.section_body, padding:0 }}>
-                    <View style={{ flexDirection:'row', backgroundColor:Colors.shades.white, margin:5, marginTop:15, borderRadius:22, borderWidth:4, borderColor:Colors.shades.shade100 }}>
-                        <TouchableOpacity
+                <View transparent style={{ ...view_styles.section_body, padding:10 }}>
+                    <View transparent style={{ flexDirection:'row', backgroundColor:Colors.shades.white, margin:5, marginTop:15, borderRadius:22, borderWidth:4, borderColor:Colors.shades.shade100 }}>
+                        <Button
+                            transparent
                             style={{ flex:1, flexDirection:'row', alignItems:'center', borderRadius:22, padding:10, backgroundColor: contest_view=='upcoming'?Colors.brand.midnight:Colors.shades.white }}
                             onPress={() => setContestView('upcoming')}
                         >
@@ -273,32 +280,32 @@ const CompetitionPlay = ( { authenticated_competition_player, pick_loading, comp
                             <View style={{ borderRadius:100, justifyContent:'center', alignItems:'center', height:25, width:25, backgroundColor:contest_view == 'upcoming' ? Colors.shades.white : Colors.brand.midnight }}>
                                 <Text weight='bold' size={12} color={contest_view == 'upcoming' ? Colors.brand.midnight: Colors.shades.white}>{ip_unique_team_events.length}</Text>
                             </View>
-                        </TouchableOpacity>
-                        <TouchableOpacity
+                        </Button>
+                        <Button
+                            transparent
                             style={{ flex:1, flexDirection:'row', alignItems:'center', borderRadius:22, padding:10, backgroundColor: contest_view=='closed'?Colors.brand.midnight:Colors.shades.white }}
                             onPress={() => setContestView('closed')}
                         >
                             <Text style={{  flex:1 }} size={12} color={contest_view == 'closed'?Colors.shades.white:Colors.brand.midnight} weight={contest_view == 'closed' ? 'bold': 'semibold'}>CLOSED CONTESTS</Text>
-                            <View style={{ borderRadius:100, justifyContent:'center', alignItems:'center', height:25, width:25, backgroundColor:contest_view == 'closed' ? Colors.shades.white : Colors.brand.midnight }}>
+                            <View transparent style={{ borderRadius:100, justifyContent:'center', alignItems:'center', height:25, width:25, backgroundColor:contest_view == 'closed' ? Colors.shades.white : Colors.brand.midnight }}>
                                 <Text weight='bold' size={12} color={contest_view == 'closed' ? Colors.brand.midnight: Colors.shades.white}>{closed_unique_team_events.length}</Text>
                             </View>
-                        </TouchableOpacity>
+                        </Button>
 
                     </View>
-                    <View nativeID="picks" style={{ marginTop:15 }}>
-                        <View style={{flexDirection:'row', alignItems:'center', justifyContent:'space-between', marginBottom:15}} >
-                            <View style={{ flex:1, flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.shade100 }}>
-                                    <View style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10 }}>
-                                        <Text size={16} color={Colors.brand.midnight} weight='bold'>{contest_view.toUpperCase()} CONTESTS</Text>
-                                        
+                    <View transparent nativeID="picks" style={{ marginTop:15 }}>
+                        <View transparent style={{flexDirection:'row', alignItems:'center', justifyContent:'space-between', marginBottom:15}} >
+                            <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                                    <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10 }}>
+                                        <Text size={16} theme='h1'>{contest_view.toUpperCase()} CONTESTS</Text>
                                     </View>
                                     {authenticated_competition_player ?
-                                    <View>
-                                            { competition_type?.type == 'wager' ?
-                                            <Text style={{ flex:1 }} size={14} color={Colors.shades.white} weight='semibold' textAlign="right">{authenticated_competition_player.wager_based_balance.toFixed(2)} Remaining</Text>
-                                               :
-                                            <Text style={{ flex:1 }} size={14} color={Colors.shades.white} weight='semibold' textAlign="right">{parseFloat(competition.max_pick_count as string) - player_picks.length} Picks Remaining</Text>
-                                            }
+                                    <View transparent>
+                                        { competition_type?.type == 'wager' ?
+                                        <Text style={{ flex:1 }} theme='h2' textAlign="right">{authenticated_competition_player.wager_based_balance.toFixed(2)} Remaining</Text>
+                                            :
+                                        <Text style={{ flex:1 }} theme='h2' textAlign="right">{parseFloat(competition.max_pick_count as string) - player_picks.length} Picks Remaining</Text>
+                                        }
                                     </View>
                                     :<></>}
                             </View>

package/src/Competition/components/EnterCompetitionPrompt.tsx

@@ -1,12 +1,12 @@
-import { TouchableOpacity, View } from "react-native"
-
 import React, { useEffect, useState } from "react"
 import type { CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, MyPlayerProps, PlayerBalanceProps } from "../../types"
 import Colors from "../../constants/colors"
-import { Button, Icons, Text } from "../../Components"
+import { Icons } from "../../Components"
 import { CompetitionHelpers } from "../api"
 import { view_styles } from "../../constants/styles"
 import moment from "moment-mini"
+import { Button, Text, View } from "../../Components/Themed"
+import { useColors } from "../../constants/useColors"
 
 type EnterCompetitionPromptProps = {
     player?:MyPlayerProps,
@@ -21,6 +21,7 @@ type EnterCompetitionPromptProps = {
 }
 
 const EnterCompetitionPrompt = ({ player, player_balance, competition, competition_type, competition_result_type, onCancel, onEnter, onVerify }:EnterCompetitionPromptProps) => {
+    const C = useColors();
     const [ use_promo_balance, setUsePromoBalance ] = useState(false)
 
     
@@ -31,13 +32,13 @@ const EnterCompetitionPrompt = ({ player, player_balance, competition, competiti
     const requires_verification = player && parseInt(competition?.buy_in as string ?? 0) > 0 && competition?.market_type == 'FOR_MONEY' && player?.vouched_status != 'verified' ? true : false
     const cl = competition.market_type == 'FOR_MONEY'?'$':'E'
     return (
-        <View style={{ backgroundColor:Colors.shades.white, borderTopRightRadius:22, borderTopLeftRadius:22, paddingTop:22 }}>
-           <View nativeID="competition_info">
-            <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign="center">Competition Details</Text>
+        <View float style={{ borderTopRightRadius:22, borderTopLeftRadius:22, paddingTop:22 }}>
+           <View transparent nativeID="competition_info">
+            <Text size={16} theme="h1" textAlign="center">Competition Details</Text>
                 {competition_type ?
-                <View style={{ flexDirection:'row', justifyContent:'center', margin:10 }}>
-                    <View style={{ padding:10, marginRight:4, backgroundColor: CompetitionHelpers.getCompColors(competition_type.type).borderColor, borderRadius:4 }}>
-                        <Text size={12} color={Colors.shades.white} weight='semibold'>{competition_type.type_label}</Text>
+                <View transparent style={{ flexDirection:'row', justifyContent:'center', margin:10 }}>
+                    <View transparent style={{ padding:10, marginRight:4, backgroundColor: CompetitionHelpers.getCompColors(competition_type.type).borderColor, borderRadius:4 }}>
+                        <Text size={12} theme="h2">{competition_type.type_label}</Text>
                     </View>
                     <View style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:4, backgroundColor: Colors.shades.white, borderRadius:4, ...view_styles.float }}>
                         <Text style={{ marginRight:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{competition.invite_only?'Private':'Public'}</Text>
@@ -49,58 +50,48 @@ const EnterCompetitionPrompt = ({ player, player_balance, competition, competiti
                     </View>
                 </View>
                 :<></>}
-                <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign="center">{competition.competition_name}</Text>
+                <Text size={14} theme="h2" textAlign="center">{competition.competition_name}</Text>
             </View>
-            <View>
-                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{moment(competition.scheduled_datetime).format('MMM DD - hh:mm a')}</Text>
+            <View transparent>
+                <Text style={{ marginTop:5 }} theme="description" textAlign="center">{moment(competition.scheduled_datetime).format('MMM DD - hh:mm a')}</Text>
                 {competition.competition_description ?
-                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{competition.competition_description}</Text>
+                <Text style={{ marginTop:5 }} theme="description" textAlign="center">{competition.competition_description}</Text>
                 :<></>}
                 {competition_result_type ?
-                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{competition_result_type.label}</Text>
+                <Text style={{ marginTop:5 }} theme="description" textAlign="center">{competition_result_type.label}</Text>
                 :<></>}
                 {competition_type?.type == 'pick' ?
-                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Picks: {competition.max_pick_count}</Text>
+                <Text style={{ marginTop:5 }} theme="description" textAlign="center">Picks: {competition.max_pick_count}</Text>
                 :<></>}
-                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Potential Winnings: {cl}{competition.ticket_revenue.toFixed(2)}</Text>
-                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Ticket Price: {cl}{(competition.buy_in as number).toFixed(2)}</Text>
-                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Entries: {competition.tickets_sold}/{competition.available_tickets}</Text>
+                <Text style={{ marginTop:5 }} theme="description" textAlign="center">Potential Winnings: {cl}{competition.ticket_revenue.toFixed(2)}</Text>
+                <Text style={{ marginTop:5 }} theme="description" textAlign="center">Ticket Price: {cl}{(competition.buy_in as number).toFixed(2)}</Text>
+                <Text style={{ marginTop:5 }} theme="description" textAlign="center">Entries: {competition.tickets_sold}/{competition.available_tickets}</Text>
             </View>
-            <View nativeID="pick_actions" style={{ flexDirection:'row', padding:10 }}>
+            <View transparent nativeID="pick_actions" style={{ flexDirection:'row', padding:10 }}>
                 <Button
                     style={{ flex:1, marginRight:3 }}
-                    borderRadius={4}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    padding={10}
+                    type='close'
                     title="Cancel"
-                    title_color={Colors.brand.electric}
                     onPress={() => onCancel()}
                 />
                 {requires_verification ?
                 <Button
-                    borderRadius={4}
                     style={{ flex:2, marginLeft:2 }}
-                    backgroundColor={Colors.utility.warning}
-                    padding={10}
                     title={`Verify My Account`}
-                    title_color={Colors.shades.white}
+                    type='success'
                     onPress={() => onVerify()}
                 />
                 :
                  <Button
-                    borderRadius={4}
                     style={{ flexGrow:2, marginLeft:2 }}
-                    backgroundColor={Colors.utility.success}
-                    padding={10}
                     title={`Enter Competition${competition.buy_in == 0 ? ``:` ${cl}${competition.buy_in}`}`}
-                    title_color={Colors.shades.white}
+                    type='success'
                     onPress={() => onEnter(use_promo_balance)}
                 />
                 }
             </View>
             {player_balance && player_balance.promo_balance > 0 ?
-            <TouchableOpacity style={{ backgroundColor:Colors.incentive.gold, padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => {
+            <Button style={{ backgroundColor:C.text.gold, padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => {
                 if(use_promo_balance){
                     //Remove promo balance and open_amt
                     setUsePromoBalance(false);
@@ -108,17 +99,17 @@ const EnterCompetitionPrompt = ({ player, player_balance, competition, competiti
                     setUsePromoBalance(true);                    
                 }
             }}>
-                    <View style={{ marginRight:10, height:30, width:30, borderWidth:1, borderColor:Colors.brand.midnight, justifyContent:'center', alignItems:'center' }}>
+                    <View transparent style={{ marginRight:10, height:30, width:30, borderWidth:1, borderColor:C.text.h1, justifyContent:'center', alignItems:'center' }}>
                         {use_promo_balance ?
-                        <View style={{ height:20, width:20, backgroundColor:Colors.brand.midnight }} />
+                        <View style={{ height:20, width:20, backgroundColor:C.text.h1 }} />
                         :<></>}
                     </View>
-                    <View>
-                        <Text size={14} weight='bold' color={Colors.shades.white}>${player_balance?.promo_balance} Promotion Available</Text>
-                        <Text style={{ marginTop:2}} size={12} color={Colors.shades.white} weight='regular'>Press / Click here to use promo balance</Text>
+                    <View transparent>
+                        <Text size={14} theme="h1">${player_balance?.promo_balance} Promotion Available</Text>
+                        <Text style={{ marginTop:2}} theme="description">Press / Click here to use promo balance</Text>
                     </View>
                 
-            </TouchableOpacity>
+            </Button>
             :<></>}
         </View>
     )

package/src/Competition/components/LeaderPicks.tsx

@@ -23,7 +23,7 @@ type LeaderPicksProps = {
     competition_matches:CompetitionMatchProps[],
     competition_match_markets:CompetitionMatchMarketProps[],
     height: number,
-    leader:PublicPlayerProps,
+    leader?:PublicPlayerProps,
     onNext?:() => void
     onPrevious?:() => void,
     onClose:() => void
@@ -46,7 +46,7 @@ const LeaderPicks = ({ markets, events, matches, athletes, competition, competit
     useEffect(() => {
         if(!competition || !leader){ return }
         getPlayerPicksFromServer(competition.competition_id, leader.player_id, 0)
-    },[competition, leader.player_id])
+    },[competition, leader?.player_id])
 
     const getPlayerPicksFromServer = async(competition_id:string, player_id:string, offset:number) => {
         setData({ ...data, loading:true });
@@ -154,13 +154,13 @@ const LeaderPicks = ({ markets, events, matches, athletes, competition, competit
                         </View>
                         <View nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
                             <Image
-                                source={{ uri: leader.profile_pic }}
+                                source={{ uri: leader?.profile_pic }}
                                 style={{ height:30, width:30, borderRadius:100 }}
                                 resizeMode="cover"
                             />
                         </View>
                         <View nativeID="details" style={{ flex:1 }}>
-                            <Text size={12} color={Colors.brand.midnight} weight='semibold'>{leader.username}</Text>
+                            <Text size={12} color={Colors.brand.midnight} weight='semibold'>{leader?.username}</Text>
                             {competition_type?.type == 'wager' ?
                                 <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{record.earnings.toFixed(2)} Earned ({record.remaining_stakes.toFixed(2)} at risk)</Text>
                                 :
@@ -186,7 +186,7 @@ const LeaderPicks = ({ markets, events, matches, athletes, competition, competit
             :<></>}
     
             <ScrollView style={{flex:1, backgroundColor:Colors.shades.white}} nativeID="leader_picks">
-                <Text style={{ margin:10 }} color={Colors.brand.midnight} textAlign="center" weight='bold' size={18}>{leader.username} Picks</Text>
+                <Text style={{ margin:10 }} color={Colors.brand.midnight} textAlign="center" weight='bold' size={18}>{leader?.username} Picks</Text>
                 <Text style={{ margin:10 }} color={Colors.brand.slate} textAlign="center" weight='bold' size={14}>Locked picks will appear after event is live</Text>
                 <View nativeID="picks" style={{ marginTop:10 }}>
                     <FlatList

package/src/Competition/components/MarketsCard.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from "react"
-import { ActivityIndicator, FlatList, TouchableOpacity, View } from "react-native"
+import { ActivityIndicator, FlatList } from "react-native"
 import type { CompetitionMatchMarketProps, MarketProps, PlayerPickProps } from "../../types"
 import Colors from "../../constants/colors"
-import { Icons, Text } from "../../Components"
+import { Icons } from "../../Components"
 import { CompetitionHelpers } from "../api"
+import { Text, View, Button } from "../../Components/Themed"
+import { useColors } from "../../constants/useColors"
 
 
 type MarketsCardProps = {
@@ -17,6 +19,7 @@ type MarketsCardProps = {
     onMarketSelect:(cmm:CompetitionMatchMarketProps, player_pick?:PlayerPickProps) => void
 }
 const MarketsCard = ({ competition_match_markets, markets, orientation, onMarketSelect, player_picks, locked, disabled, mode }:MarketsCardProps) => {
+    const C = useColors();
     const [ markets_width, setMarketsWidth ] = useState(0)
 
     let unique_market_ids = [ ...new Set(competition_match_markets.map(cmm => cmm.market_id))]
@@ -38,7 +41,7 @@ const MarketsCard = ({ competition_match_markets, markets, orientation, onMarket
         const market_width = orientation == "horizontal" ? markets_width : markets_width / unique_market_ids.length
 
         return (
-            <View style={{ flex:1, flexDirection:orientation == 'horizontal'?'row':'column', width: market_width }}>
+            <View transparent style={{ flex:1, flexDirection:orientation == 'horizontal'?'row':'column', width: market_width }}>
                 {orientation == 'horizontal' ?
                 <></>
                 :
@@ -49,7 +52,8 @@ const MarketsCard = ({ competition_match_markets, markets, orientation, onMarket
                 }).map(mm => {
                     const player_pick = player_picks.find(pp => pp.market_id == data.item && pp.side == mm.side)
                     return (
-                        <TouchableOpacity
+                        <Button
+                            float
                             delayPressIn={0} 
                             disabled={locked || mode == 'view' || disabled}
                             onPress={() => onMarketSelect(mm, player_pick)}
@@ -68,22 +72,22 @@ const MarketsCard = ({ competition_match_markets, markets, orientation, onMarket
                             <Text size={12} color={player_pick&&!locked?Colors.shades.white:Colors.shades.black} textAlign="center" weight='bold'>{CompetitionHelpers.getOddsLabel(mm.odds as number)}</Text>
                             {locked ?
                             <View style={{ position:'absolute', backgroundColor:Colors.shades.shade600, borderRadius:4, top:0, bottom:0, right:0, left:0, justifyContent:'center', alignItems:'center' }}>
-                                <Icons.LockClosedIcon size={14} color={Colors.shades.black} />
+                                <Icons.LockClosedIcon size={14} color={C.text.h1} />
                             </View>
                             :<></>}
-                        </TouchableOpacity>
+                        </Button>
                     )
                 })}
             </View>
         )
     }
     return (
-        <View style={{ flex:1 }} onLayout={(ev) => {
+        <View transparent style={{ flex:1 }} onLayout={(ev) => {
             const { width } = ev.nativeEvent.layout;
             setMarketsWidth(width)
         }}>
             {markets_width > 0 ?
-            <View>
+            <View transparent>
                 {unique_market_ids.length > 0 ?
                 <FlatList
                     horizontal
@@ -91,13 +95,13 @@ const MarketsCard = ({ competition_match_markets, markets, orientation, onMarket
                     renderItem={renderMarkets}
                 />
                 :
-                <View style={{ height:100, justifyContent:'center', alignItems:'center' }}>
+                <View transparent style={{ height:100, justifyContent:'center', alignItems:'center' }}>
                     <Icons.LockClosedIcon color={Colors.brand.midnight} size={32}/>
                 </View>
                 }
             </View>
             :
-            <View style={{ height:100, justifyContent:'center', alignItems:'center' }}>
+            <View transparent style={{ height:100, justifyContent:'center', alignItems:'center' }}>
                 <ActivityIndicator size={'large'} color={Colors.brand.midnight}/>
             </View>
             }

package/src/Competition/components/TeamEventCard.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { ActivityIndicator, FlatList, Image, View } from "react-native"
+import { ActivityIndicator, FlatList, Image } from "react-native"
 import type { CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionProps, CompetitionTypeProps, EventProps, MarketProps, PlayerPickProps } from "../../types"
 import MarketsCard from './MarketsCard';
-import { Text } from '../../Components';
 import Colors from '../../constants/colors';
 import moment from 'moment-mini';
 import { CompetitionHelpers, FINALIZED_STATUSES } from '../api';
+import { Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type TeamEventCardProps = {
     competition:CompetitionProps,
@@ -21,7 +22,7 @@ type TeamEventCardProps = {
 }
 
 const TeamEventCard = ({ loading, event, markets, competition_type, competition_match, competition_match_markets, player_picks, mode, onPick }:TeamEventCardProps) => {
-
+    const C = useColors();
     const wager_picks = player_picks.filter(pp => pp.stake > 0)
 
     const handleMarketSelect = async(mm:CompetitionMatchMarketProps, player_pick?:PlayerPickProps) => {
@@ -44,23 +45,23 @@ const TeamEventCard = ({ loading, event, markets, competition_type, competition_
         let locked = mode == 'view' && moment().isBefore(moment(event.scheduled_datetime)) ? true : false
         return (
             <View style={{ flexDirection:'row', marginTop:5 }}>
-                <Text style={{ flex:1 }} size={12} color={Colors.highlights.highlight200}>{locked?'WAGER LOCKED':data.item.pick_title}</Text>
-                <Text style={{ flex:1 }} size={12} color={Colors.highlights.highlight200} textAlign="right">{locked?'':`${data.item.stake.toFixed(2)} to win ${data.item.potential_winnings.toFixed(2)}`}</Text>
+                <Text style={{ flex:1 }} size={12} color={C.text.highlight}>{locked?'WAGER LOCKED':data.item.pick_title}</Text>
+                <Text style={{ flex:1 }} size={12} color={C.text.highlight} textAlign="right">{locked?'':`${data.item.stake.toFixed(2)} to win ${data.item.potential_winnings.toFixed(2)}`}</Text>
             </View>
         )
     }
 
     if(!event){ return <></> }
     return (
-        <View style={{ padding:5 }}>
-            <View style={{ flexDirection:'row' }}>
-                <View nativeID="event_details" style={{ flex:1 }}>
+        <View transparent style={{ padding:5 }}>
+            <View transparent style={{ flexDirection:'row' }}>
+                <View transparent nativeID="event_details" style={{ flex:1 }}>
                     <View />
-                    <View nativeID="away_team" style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:5 }}>
-                        <View style={{ flex:1, marginRight:5 }}> 
-                            <View style={{ flexDirection:'row', alignItems:'flex-start' }}>
+                    <View transparent nativeID="away_team" style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:5 }}>
+                        <View transparent style={{ flex:1, marginRight:5 }}> 
+                            <View transparent style={{ flexDirection:'row', alignItems:'flex-start' }}>
                                 {event?.away?.rank ?
-                                <Text style={{ marginRight:4 }} size={12} color={Colors.brand.cyan} weight='bold'>{event.away.rank}</Text>
+                                <Text style={{ marginRight:4 }} size={12} color={C.text.highlight} weight='bold'>{event.away.rank}</Text>
                                 :<></>}
                                 {event?.away?.image?.url?
                                 <Image
@@ -69,19 +70,19 @@ const TeamEventCard = ({ loading, event, markets, competition_type, competition_
                                     resizeMode="cover"
                                 />
                                 :<></>}
-                                <Text size={12} color={Colors.shades.black} weight='semibold'>{event.away?.market_name} {event.away?.name}</Text>
+                                <Text size={12} theme='h2'>{event.away?.market_name} {event.away?.name}</Text>
                             </View>                            
                             {event?.away_sub_title ?
-                            <Text size={12} color={Colors.shades.black} weight='regular'>{event?.away_sub_title}</Text>
+                            <Text size={12} theme='description'>{event?.away_sub_title}</Text>
                             :<></>}
                         </View>
-                        <Text size={12} color={Colors.shades.black} weight='bold'>{event.away_team_score}</Text>
+                        <Text size={12} theme='h1' weight='bold'>{event.away_team_score}</Text>
                     </View>
-                    <View nativeID="home_team" style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:5 }}>
-                        <View style={{ flex:1, marginRight:5 }}> 
-                            <View style={{ flexDirection:'row', alignItems:'flex-start' }}>
+                    <View transparent nativeID="home_team" style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:5 }}>
+                        <View transparent style={{ flex:1, marginRight:5 }}> 
+                            <View transparent style={{ flexDirection:'row', alignItems:'flex-start' }}>
                                 {event?.home?.rank ?
-                                <Text style={{ marginRight:4 }} size={12} color={Colors.brand.cyan} weight='bold'>{event.home.rank}</Text>
+                                <Text style={{ marginRight:4 }} size={12} color={C.text.highlight} weight='bold'>{event.home.rank}</Text>
                                 :<></>}
                                 {event?.home?.image?.url?
                                 <Image
@@ -90,16 +91,16 @@ const TeamEventCard = ({ loading, event, markets, competition_type, competition_
                                     resizeMode="cover"
                                 />
                                 :<></>}
-                                <Text size={12} color={Colors.shades.black} weight='semibold'>{event.home?.market_name} {event.home?.name}</Text>
+                                <Text size={12} theme='h2' weight='semibold'>{event.home?.market_name} {event.home?.name}</Text>
                             </View>                            
                             {event?.home_sub_title ?
-                            <Text size={12} color={Colors.shades.black} weight='regular'>{event?.home_sub_title}</Text>
+                            <Text size={12} theme='description'>{event?.home_sub_title}</Text>
                             :<></>}
                         </View>
-                        <Text size={12} color={Colors.shades.black} weight='bold'>{event.home_team_score}</Text>
+                        <Text size={12} theme='h1' weight='bold'>{event.home_team_score}</Text>
                     </View>
                 </View>
-                <View nativeID="market_details" style={{ flex:1 }}>
+                <View transparent nativeID="market_details" style={{ flex:1 }}>
                     <MarketsCard
                         player_picks={player_picks}
                         markets={markets}