be-components 4.2.1 → 4.2.2

package/src/Competition/components/CompetitionLeaderboard.tsx

@@ -4,9 +4,9 @@ import type { CompetitionProps, CompetitionRecordProps, CompetitionResultProps,
 import { CompetitionApi, CompetitionHelpers, CompetitionResultApi } from "../api"
 import { Icons } from "../../Components"
 import Colors from "../../constants/colors"
-import { view_styles } from "../../constants/styles"
 import { Button, Text, View } from "../../Components/Themed"
 import { useColors } from "../../constants/useColors"
+import Pagination from "../../Components/Pagination"
 
 type CompetitionLeaderboardProps = {
     competition:CompetitionProps,
@@ -116,7 +116,7 @@ const CompetitionLeaderboard = ({ hidden, disable_collapse, competition, competi
     if(hidden){ return <></> }
 
     return (
-        <View float nativeID="leaderboard" style={{flex:1}}>
+        <View float nativeID="leaderboard" style={{flex:1, borderRadius: view_mode == 'full' ? 22 : undefined}}>
             {view_mode == 'short' ?
             <Button 
             disabled={disable_collapse}
@@ -189,28 +189,17 @@ const CompetitionLeaderboard = ({ hidden, disable_collapse, competition, competi
             </View>
             :<></>}
              {onClose ?
-            <View style={{ padding:10, ...view_styles.float }}>
-                <View style={{ padding:10, flexDirection:'row', alignItems:'center', justifyContent:'space-between' }}>
-                    {offset > 0 ?
-                    <Button
-                        title='PREV'
-                        title_color={Colors.brand.electric}
-                        backgroundColor='transparent'
-                        onPress={() => getLeaderboardFromServer(competition.competition_id, offset - 1)}
-                    />
-                    :<View/>}
-                    <Button
-                        title='NEXT'
-                        title_color={Colors.brand.electric}
-                        backgroundColor='transparent'
-                        onPress={() => getLeaderboardFromServer(competition.competition_id, offset + 1)}
-                    />
-                </View>
+            <View type='footer' style={{ padding:10, borderBottomRightRadius:22, borderBottomLeftRadius:22 }}>
+                <Pagination
+                    offset={offset}
+                    onNext={() => getLeaderboardFromServer(competition.competition_id, offset+1)}
+                    onPrevious={() => getLeaderboardFromServer(competition.competition_id, offset-1)}
+
+                />
                 <Button
                     title='Close'
                     style={{ padding:15 }}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
+                    type='close'
                     onPress={() => onClose()}
                 />
             </View>

package/src/Competition/components/EnterCompetitionPrompt.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useState } from "react"
 import type { CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, MyPlayerProps, PlayerBalanceProps } from "../../types"
-import Colors from "../../constants/colors"
-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"
+import { Image } from "react-native"
 
 type EnterCompetitionPromptProps = {
     player?:MyPlayerProps,
@@ -15,15 +13,40 @@ type EnterCompetitionPromptProps = {
     competition_type:CompetitionTypeProps,
     competition_result_type:CompetitionResultTypeProps,
     width:number,
+    mode:'desktop'|'mobile',
     onVerify: () => void
     onCancel:() => void,
     onEnter: (promo_balance?:boolean) => void
 }
 
-const EnterCompetitionPrompt = ({ player, player_balance, competition, competition_type, competition_result_type, onCancel, onEnter, onVerify }:EnterCompetitionPromptProps) => {
+const EnterCompetitionPrompt = ({ player, mode, player_balance, competition, competition_type, competition_result_type, onCancel, onEnter, onVerify }:EnterCompetitionPromptProps) => {
     const C = useColors();
-    const [ use_promo_balance, setUsePromoBalance ] = useState(false)
-
+    const [ use_promo_balance, setUsePromoBalance ] = useState(false);
+    let potential_winnings = competition.ticket_revenue
+    if(competition.promo_payout){
+        potential_winnings += competition.promo_payout
+    }
+    if(competition.guaranteed_payout){
+        if(potential_winnings < parseFloat(competition.guaranteed_payout as string)){ potential_winnings = parseFloat(competition.guaranteed_payout as string) }
+    }
+    const isBalanceEnough = () => {
+        if(!player_balance){ return false }
+        let buy_in = parseFloat(competition.buy_in as string);
+        switch(competition.market_type){
+            case 'FREE':
+                if(player_balance.free_market_balance < buy_in){ return false }
+                return true
+            case 'FOR_MONEY':
+                if(use_promo_balance){
+                    if(player_balance.promo_balance < buy_in){ return false }
+                    return true
+                }
+                if(player_balance.balance < buy_in){ return false }
+                return true
+            default: return false
+        }
+    }
+    const balance_enough = isBalanceEnough();
     
     useEffect(() => {
         if(!player){ return }
@@ -32,66 +55,52 @@ 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 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 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>
-                        {competition.invite_only ?
-                        <Icons.EyeOffIcon color={Colors.brand.midnight} size={14}/>
-                        :
-                        <Icons.EyeOnIcon color={Colors.brand.midnight} size={14}/>
-                        }
-                    </View>
+        <View float style={mode=='desktop'?{borderRadius:22, width:400 }:{ borderTopRightRadius:22, borderTopLeftRadius:22 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:22, borderTopLeftRadius:22 }}>
+                <Image
+                    source={{ uri: competition.image?.url }}
+                    style={{ height:40, width:40, borderRadius:4 }}
+                />
+                <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                    <Text theme="h1">{competition.competition_name}</Text>
+                    <Text theme="description" style={{ marginTop:3 }}>{competition.competition_description}</Text>
+                </View>
+                <View transparent style={{ padding:10, marginRight:4, backgroundColor: CompetitionHelpers.getCompColors(competition_type.type).borderColor, borderRadius:4 }}>
+                    <Text size={12} theme="h2" color={C.text.white}>{competition_type.type_label}</Text>
                 </View>
-                :<></>}
-                <Text size={14} theme="h2" textAlign="center">{competition.competition_name}</Text>
             </View>
             <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 }} theme="description" textAlign="center">{competition.competition_description}</Text>
-                :<></>}
                 {competition_result_type ?
-                <Text style={{ marginTop:5 }} theme="description" textAlign="center">{competition_result_type.label}</Text>
+                <View type='row' style={{ padding:5, paddingLeft:15, paddingRight:15 }}>
+                    <Text style={{ flex:1 }} theme="h2">Payout Type</Text>
+                    <Text theme="h1">{competition_result_type.label}</Text>
+                </View>
                 :<></>}
                 {competition_type?.type == 'pick' ?
-                <Text style={{ marginTop:5 }} theme="description" textAlign="center">Picks: {competition.max_pick_count}</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 transparent nativeID="pick_actions" style={{ flexDirection:'row', padding:10 }}>
-                <Button
-                    style={{ flex:1, marginRight:3 }}
-                    type='close'
-                    title="Cancel"
-                    onPress={() => onCancel()}
-                />
-                {requires_verification ?
-                <Button
-                    style={{ flex:2, marginLeft:2 }}
-                    title={`Verify My Account`}
-                    type='success'
-                    onPress={() => onVerify()}
-                />
+                <View type='row' style={{padding:5, paddingLeft:15, paddingRight:15}}>
+                    <Text style={{ flex:1 }} theme="h2">Number of Picks</Text>
+                    <Text theme="h1">{competition.max_pick_count}</Text>
+                </View>
                 :
-                 <Button
-                    style={{ flexGrow:2, marginLeft:2 }}
-                    title={`Enter Competition${competition.buy_in == 0 ? ``:` ${cl}${competition.buy_in}`}`}
-                    type='success'
-                    onPress={() => onEnter(use_promo_balance)}
-                />
+                <View type='row' style={{padding:5, paddingLeft:15, paddingRight:15}}>
+                    <Text style={{ flex:1 }} theme="h2">Starting Balance</Text>
+                    <Text theme="h1">{competition.initial_balance}</Text>
+                </View>
                 }
+                <View type='row' style={{padding:5, paddingLeft:15, paddingRight:15}}>
+                    <Text style={{ flex:1 }} theme="h2">Available Tickets</Text>
+                    <Text theme="h1">{parseFloat(competition.available_tickets as string) - competition.tickets_sold}</Text>
+                </View>
+                <View style={{ backgroundColor:C.views.liquidMarket }}>
+                    <View transparent type='row' style={{ padding:5, paddingLeft:15, paddingRight:15}}>
+                        <Text style={{ flex:1 }} theme="h2">Total Payout*</Text>
+                        <Text theme="h1">{cl}{potential_winnings.toFixed()}</Text>
+                    </View>
+                    <Text style={{ padding:5,  paddingLeft:15, paddingRight:15 }} theme="description">* Payout is always number of entries * ticket price (We take NO FEES on competitions).  We may guarantee a minimum payout which will increase as more entries come in.</Text>
+                </View>               
             </View>
-            {player_balance && player_balance.promo_balance > 0 ?
-            <Button style={{ backgroundColor:C.text.gold, padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => {
+            {player_balance && player_balance.promo_balance >= parseFloat(competition.buy_in as string) ?
+            <Button style={{ margin:10, backgroundColor:C.text.gold, padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => {
                 if(use_promo_balance){
                     //Remove promo balance and open_amt
                     setUsePromoBalance(false);
@@ -105,12 +114,42 @@ const EnterCompetitionPrompt = ({ player, player_balance, competition, competiti
                         :<></>}
                     </View>
                     <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>
+                        <Text size={14} theme="h1" color={C.text.white}>${player_balance?.promo_balance} Promotion Available</Text>
+                        <Text style={{ marginTop:2}} color={C.text.white} theme="description">Press / Click here to use promo balance</Text>
                     </View>
                 
             </Button>
             :<></>}
+            <View type='footer' style={{ borderBottomRightRadius:22, borderBottomLeftRadius:22 }}>
+                <View transparent style={{ flexDirection:'row', padding:10 }}>
+                    <Button
+                        style={{ flex:1, marginRight:3 }}
+                        type='close'
+                        title="Cancel"
+                        onPress={() => onCancel()}
+                    />
+                    {requires_verification ?
+                    <Button
+                        style={{ flex:2, marginLeft:2 }}
+                        title={`Verify My Account`}
+                        type='success'
+                        onPress={() => onVerify()}
+                    />
+                    :
+                    <Button
+                        style={{ flexGrow:2, marginLeft:2, opacity:balance_enough?1:0.5 }}
+                        disabled={!balance_enough}
+                        title={`Enter Competition${competition.buy_in == 0 ? ``:` ${cl}${competition.buy_in}`}`}
+                        type='success'
+                        onPress={() => onEnter(use_promo_balance)}
+                    />
+                    }
+                </View>
+                <View transparent type='row' style={{ padding:10 }}>
+                    <Text style={{ flex:1 }}>Join Until</Text>
+                    <Text theme="h1">{moment(competition.scheduled_datetime).format('MMM DD - hh:mm a')}</Text>
+                </View>
+            </View>
         </View>
     )
 }

package/src/Competition/components/WagerPickForm.tsx

@@ -12,13 +12,15 @@ type WagerPickFormProps = {
     event_start:string,
     player_pick: PlayerPickProps,
     loading?:string,
+    mode:'desktop'|'mobile',
+    padding_bottom?:number,
     onFocusPosition?:(pos:FocusPositionProps) => void,
     width:number,
     onCancel: () => void,
     onSubmit: (pp:PlayerPickProps) => void
 }
 
-const WagerPickForm = ({ player_pick, event_title, balance, event_start, loading, onCancel, onFocusPosition, onSubmit }:WagerPickFormProps) => {
+const WagerPickForm = ({ player_pick, mode, event_title, balance, event_start, padding_bottom, loading, onCancel, onFocusPosition, onSubmit }:WagerPickFormProps) => {
     const C = useColors();
     const [ reviewed, setReviewed ] = useState(false);
     const [ wager, setWager ] = useState({ stake:0, stake_label: '0', potential_winnings: 0 });
@@ -40,7 +42,7 @@ const WagerPickForm = ({ player_pick, event_title, balance, event_start, loading
     }
 
     return (
-        <View float style={{ borderTopRightRadius:22, borderTopLeftRadius:22 }}>
+        <View float style={mode=='desktop' ?{borderRadius:22, width:500}:{ borderTopRightRadius:22, borderTopLeftRadius:22, paddingBottom:padding_bottom }}>
             <View transparent nativeID="event_info" style={{ padding:20 }}>
                 <Text size={14} theme="h2" weight='bold' textAlign="center">{moment(event_start).format('MM/DD @ hh:mm a')}</Text>
                 <Text style={{ marginTop:5 }} size={14} theme="h2" weight='bold' textAlign="center">{event_title}</Text>

package/src/Competition/index.tsx

@@ -18,6 +18,7 @@ import { useColors } from '../constants/useColors';
 type CompetitionModuleProps = {
     player_id?:string,
     competition_id:string,
+    view_mode:'desktop'|'mobile',
     insets?:{ top:number, bottom:number, left:number, right:number }
     confirm_padding?:number,
     onFocusPosition?:(position:FocusPositionProps) => void,
@@ -32,7 +33,7 @@ type CompetitionModuleProps = {
 
 const competition_sections = ['header','join','test','details','leaderboard','play']
 
-const CompetitionModule = ({ competition_id, insets, player_id, confirm_padding, onManageCompetition, onFocusPosition, onRequestAuthentication, onShareCompetition, onClose, onViewCompetitionSeason }:CompetitionModuleProps) => {
+const CompetitionModule = ({ competition_id, view_mode, insets, player_id, confirm_padding, onManageCompetition, onFocusPosition, onRequestAuthentication, onShareCompetition, onClose, onViewCompetitionSeason }:CompetitionModuleProps) => {
     const C = useColors();
     const [ active_tab, setActiveTab ] = useState('play');
     const [ viewing_leader, setViewingLeader ] = useState<PublicPlayerProps|undefined>();
@@ -533,7 +534,8 @@ const CompetitionModule = ({ competition_id, insets, player_id, confirm_padding,
             </View>
             :<></>}
             {show_full_leaderboard ?
-            <View type='blur' style={{ position:'absolute', bottom:0, left:0, right:0, top:0 }}>
+            <View type='blur' style={view_mode=='desktop'?{position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center'}:{ position:'absolute', bottom:0, left:0, right:0, top:0 }}>
+                <View style={view_mode=='desktop'?{ width:500, height:676, borderRadius:22 }:{flex:1}}>
                     <CompetitionLeaderboard 
                         competition={competition}
                         competition_type={competition_type}
@@ -544,13 +546,15 @@ const CompetitionModule = ({ competition_id, insets, player_id, confirm_padding,
                         onClose={() => setShowFullLeaderboard(false)}
                         onSeeFull={() => setShowFullLeaderboard(!show_full_leaderboard)}
                         viewer_id={player_id}
-                    />    
+                    /> 
+                </View>   
             </View>
             :<></>}
             <View style={{ position:'absolute' }}>
                 <ConfirmationModal
                     visible={nav_out.visible}
                     title={nav_out.title}
+                    mode={view_mode}
                     padding_bottom={confirm_padding}
                     confirm_title={'Edit My Picks'}
                     cancel_title='Close'
@@ -565,16 +569,17 @@ const CompetitionModule = ({ competition_id, insets, player_id, confirm_padding,
                 transparent
                 visible={draft_player_pick.draft_pick ? true : false}
                 onRequestClose={() => setShowEnterPrompt(false)}
-                animationType='slide'
+                animationType={view_mode=='desktop' ? 'fade' : 'slide'}
             >
                 <View
                     style={{ flex:1 }}
                 >
-                    <View type='blur' style={{ flex:1, justifyContent:'flex-end', paddingTop:insets?.top, paddingBottom:insets?.bottom }}>
+                    <View type='blur' style={view_mode=='desktop'?{ flex:1, justifyContent:'center', alignItems:'center' }:{ flex:1, justifyContent:'flex-end', paddingTop:insets?.top, paddingBottom:insets?.bottom }}>
                         <WagerPickForm
                             event_start={draft_player_pick.event_start ?? ''}
                             event_title={draft_player_pick.event_title ?? ''}
                             width={module_size.width}
+                            mode={view_mode}
                             onFocusPosition={onFocusPosition}
                             balance={authenticated_competition_player?.wager_based_balance ?? 0}
                             loading={pick_loading}
@@ -590,15 +595,16 @@ const CompetitionModule = ({ competition_id, insets, player_id, confirm_padding,
                 transparent
                 visible={show_enter_prompt}
                 onRequestClose={() => setShowEnterPrompt(false)}
-                animationType='slide'
-            >
-                <View type='blur' style={{ flex:1, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
+                animationType={view_mode=='desktop' ? 'fade' : 'slide'}
+                >
+                    <View type='blur' style={view_mode=='desktop'?{ flex:1, justifyContent:'center', alignItems:'center' }:{ flex:1, justifyContent:'flex-end', paddingTop:insets?.top, paddingBottom:insets?.bottom }}>
                         <EnterCompetitionPrompt
                             competition={competition}
                             competition_result_type={competition_result_type}
                             competition_type={competition_type}
                             player_balance={player_balance}
                             player={player}
+                            mode={view_mode}
                             width={module_size.width}
                             onCancel={() => setShowEnterPrompt(false)}
                             onEnter={(promo_balance) => handleEnterCompetition(promo_balance)}
@@ -612,24 +618,26 @@ const CompetitionModule = ({ competition_id, insets, player_id, confirm_padding,
             transparent
             visible={viewing_leader ? true : false}
             onRequestClose={() => setShowEnterPrompt(false)}
-            animationType='slide'
+            animationType={view_mode=='desktop' ? 'fade' : 'slide'}
         >
-            <View type='blur' style={{ flex:1, justifyContent:'flex-end', paddingTop:insets?.top, paddingBottom:insets?.bottom }}>
-                <LeaderPicks
-                    competition={competition}
-                    leader={viewing_leader}
-                    competition_matches={competition_matches}
-                    competition_match_markets={competition_match_markets}
-                    markets={markets}
-                    events={events}
-                    tournaments={tournaments}
-                    matches={matches}
-                    athletes={athletes}
-                    teams={teams}
-                    competition_type={competition_type}
-                    onClose={() => setViewingLeader(undefined)}
-                />
-            </View>
+                <View type='blur' style={view_mode=='desktop'?{ flex:1, justifyContent:'center', alignItems:'center' }:{ flex:1, justifyContent:'flex-end', paddingTop:insets?.top, paddingBottom:insets?.bottom }}>
+                    <View style={view_mode == 'desktop' ? { width:500, height:676 } : { flex:1 }}>
+                        <LeaderPicks
+                            competition={competition}
+                            leader={viewing_leader}
+                            competition_matches={competition_matches}
+                            competition_match_markets={competition_match_markets}
+                            markets={markets}
+                            events={events}
+                            tournaments={tournaments}
+                            matches={matches}
+                            athletes={athletes}
+                            teams={teams}
+                            competition_type={competition_type}
+                            onClose={() => setViewingLeader(undefined)}
+                        />
+                    </View>
+                </View>
             </Modal>
             {competition.status == 'inactive' ?
             <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>

package/src/Components/ConfirmationModal.tsx

@@ -6,6 +6,7 @@ import { Button, Text, View } from './Themed';
 type ConfirmationModalProps = {
     visible:boolean,
     title?:string,
+    mode: 'desktop'|'mobile',
     description?:string,
     confirm_title?:string,
     padding_bottom?:number,
@@ -14,16 +15,16 @@ type ConfirmationModalProps = {
     onCancel?: () => void,
     onConfirm: () => void
 }
-const ConfirmationModal = ({ visible, title, padding_bottom, image, description, confirm_title, cancel_title, onCancel, onConfirm }:ConfirmationModalProps) => {
+const ConfirmationModal = ({ visible, mode, title, padding_bottom, image, description, confirm_title, cancel_title, onCancel, onConfirm }:ConfirmationModalProps) => {
 
     return (
         <Modal 
             visible={visible}
-            animationType='slide'
+            animationType={mode=='desktop' ? 'fade' : 'slide'}
             transparent
             style={{ flex:1 }}>
-            <View type='blur' style={{ flex:1, justifyContent:'flex-end', paddingBottom:padding_bottom }}>
-                <View float style={{ borderTopRightRadius:22, borderTopLeftRadius:22  }}>
+            <View type='blur' style={mode=='desktop' ?{ flex:1, justifyContent:'center', alignItems:'center' }:{ flex:1, justifyContent:'flex-end', paddingBottom:padding_bottom }}>
+                <View float style={mode=='desktop'?{width:500, borderRadius:22}:{ borderTopRightRadius:22, borderTopLeftRadius:22  }}>
                     <View type='header' style={{ padding:20, borderTopRightRadius:22, borderTopLeftRadius:22 }}>
                         <Text theme='h1'>{title ?? 'Are you sure?'}</Text>
                     </View>

package/src/Components/SearchBox.tsx

@@ -8,10 +8,11 @@ type SearchBoxProps = {
     onChange? : (text:string) => void,
     hide_search_button?:boolean,
     placeholder?: string,
-    style?:any
+    style?:any,
+    button_style?:any
 }
 
-const SearchBox = ({ placeholder, onSearch, onChange, hide_search_button, style }:SearchBoxProps) => {
+const SearchBox = ({ placeholder, onSearch, onChange, hide_search_button, style, button_style }:SearchBoxProps) => {
     const [ search_value, setSearchValue ] = useState('');
     const Colors = useColors();
     const handleSearch = () => {
@@ -42,6 +43,7 @@ const SearchBox = ({ placeholder, onSearch, onChange, hide_search_button, style
             {!hide_search_button ?
             <Button
                 title="Search"
+                style={button_style}
                 type='info'
                 onPress={() => handleSearch()}
             />

package/src/MarketComponents/components/ContestOrderStatsCard.tsx

@@ -12,13 +12,14 @@ type ContestOrderStatsCardProps = {
     contest_title:string,
     league?:LeagueProps,
     hedges:HedgeProps[],
+    view_mode?:'desktop'|'mobile',
     market_type:'FOR_MONEY'|'FREE',
     contest_time_detail:string,
     onPress: (player_order_stat:OrderStatsProps) => void,
     onOrdersUpdate: (orders:OrderProps[]) => void
 }
 
-const ContestOrderStatsCard = ({ player_order_stat, league, market_type, contest_time_detail, hedges, contest_title, onPress, onOrdersUpdate }:ContestOrderStatsCardProps) => {
+const ContestOrderStatsCard = ({ player_order_stat, view_mode, league, market_type, contest_time_detail, hedges, contest_title, onPress, onOrdersUpdate }:ContestOrderStatsCardProps) => {
     const [ confirm_data, setConfirmData ] = useState<{
         visible:boolean,
         title?:string,
@@ -134,6 +135,7 @@ const ContestOrderStatsCard = ({ player_order_stat, league, market_type, contest
                         <ConfirmationModal
                             visible={confirm_data.visible}
                             title={confirm_data.title}
+                            mode={view_mode ?? 'mobile'}
                             description={confirm_data.description}
                             confirm_title={confirm_data.confirm_title}
                             cancel_title={confirm_data.cancel_title}

package/src/MarketMaker/components/Contest.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
-import { View, Image, FlatList, TouchableOpacity } from 'react-native';
+import { Image, FlatList } from 'react-native';
 import type { AthleteProps, BestAvailableOrderProps, EventProps, ExternalPriceProps, FundOrderProps, FundProps, LeagueProps, MarketProps, MatchProps, OrderProps, TournamentProps, TradeProps } from '../../types';
-import { view_styles } from '../../constants/styles';
-import { Text } from '../../Components';
 import ContestMarket from './ContestMarkets';
 import { MarketMaketHelpers } from '../api';
-import Colors from '../../constants/colors';
+//import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type ContestProps = {
     fund:FundProps,
@@ -32,6 +31,7 @@ type ContestProps = {
 }
 
 const Contest = ({ fund, init_show_detail, contest_id, time_detail, event, external_prices, backup_prices, tournament, match, contest_type, league, contest_title, best_available_orders, latest_trades, orders, fund_orders, markets, onSetMarket, onClearMarket, onOrder }:ContestProps) => {
+    //const Colors = useColors();
     const [ show_detail, setShowDetail ] = useState(init_show_detail ? true : false);
     const [ viewing_markets, setViewingMarkets ] = useState<MarketProps[]>([])
 
@@ -57,7 +57,7 @@ const Contest = ({ fund, init_show_detail, contest_id, time_detail, event, exter
         let backup_market_prices = backup_prices ? backup_prices.filter(p => p.market_id == data.item.market_id) : []
         const { unique_var_1, default_var_1 } = MarketMaketHelpers.getAvailableVar1s(market_orders, market_available_orders, market_prices, data.item, backup_market_prices);
         return (
-            <View style={{ borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+            <View style={{ borderBottomWidth:1 }}>
                 <ContestMarket
                     fund={fund}
                     contest_id={contest_id}
@@ -95,8 +95,8 @@ const Contest = ({ fund, init_show_detail, contest_id, time_detail, event, exter
         */
 
     return (
-        <View style={{ ...view_styles.section, margin:5, borderWidth:1, borderColor:Colors.shades.shade600, padding:0 }}>
-            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setShowDetail(!show_detail)}>
+        <View style={{ margin:5, borderWidth:1, padding:0 }}>
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:4 }} onPress={() => setShowDetail(!show_detail)}>
                 <View style={{}}>
                     {league ?
                     <Image
@@ -107,23 +107,23 @@ const Contest = ({ fund, init_show_detail, contest_id, time_detail, event, exter
                     :<></>}
                 </View>
                 <View style={{ flex:1, padding:8, justifyContent:'center' }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{contest_title}</Text>
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='semibold'>{time_detail}</Text>
+                    <Text size={14} theme='h1'>{contest_title}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='h2'>{time_detail}</Text>
                 </View>
 
-                <View style={{ marginLeft:10, padding:5, backgroundColor:Colors.shades.shade100, borderRadius:4 }}>
-                    <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='bold'>{[].length}</Text>
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} textAlign='center' weight='bold'>Markets</Text>
+                <View style={{ marginLeft:10, padding:5, borderRadius:4 }}>
+                    <Text size={12} theme='h1' textAlign='center' weight='bold'>{[].length}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='description' textAlign='center' weight='bold'>Markets</Text>
                 </View>
-                <View style={{ marginLeft:10, padding:5, backgroundColor:Colors.shades.shade100, borderRadius:4 }}>
-                    <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='bold'>${stake_amt.toFixed(2)}</Text>
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} textAlign='center' weight='bold'>Position</Text>
+                <View style={{ marginLeft:10, padding:5, borderRadius:4 }}>
+                    <Text size={12} theme='h1' textAlign='center' weight='bold'>${stake_amt.toFixed(2)}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='h1' textAlign='center' weight='bold'>Position</Text>
                 </View>
                 <View style={{ marginLeft:10, padding:5}}>
-                    <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='bold'>${net_hedge.toFixed(2)}</Text>
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} textAlign='center' weight='bold'>Hedge</Text>
+                    <Text size={12} theme='h1' textAlign='center' weight='bold'>${net_hedge.toFixed(2)}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='description' textAlign='center' weight='bold'>Hedge</Text>
                 </View>
-            </TouchableOpacity>
+            </Button>
             {show_detail ?
             <View>
                 <FlatList
@@ -137,12 +137,12 @@ const Contest = ({ fund, init_show_detail, contest_id, time_detail, event, exter
                     keyExtractor={(item) => item.toString()}
                 />
                 {other_markets.length > 0 ?
-                <View style={{ ...view_styles.section_footer }}>
+                <View type='footer' style={{ flexDirection:'row', alignItems:'center' }}>
                     {other_markets.map(m => {
                         return (
-                            <TouchableOpacity onPress={() => setViewingMarkets(viewing_markets.filter(vm => vm.market_id != m.market_id).concat(m))}>
+                            <Button onPress={() => setViewingMarkets(viewing_markets.filter(vm => vm.market_id != m.market_id).concat(m))}>
                                 <Text>{m.type == 'Stat' ? m.stat_label : m.type}</Text>
-                            </TouchableOpacity>
+                            </Button>
                         )
                     })}
                 </View>