be-components 4.5.5 → 4.5.8

package/src/Bracket/components/BracketPlay/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, ScrollView, Image } from "react-native";
 import type { AthleteProps, BracketGroupProps, BracketProps, BracketRoundProps, CompetitionPlayerBracketProps, EventProps, MyPlayerProps, PlayerBracketPickProps, PlayerBracketProps, RoundEventProps, TeamProps } from '../../../types';
 import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from '../../api';
-import { Icons } from '../../../Components';
 import BracketRoundSection from './BracketRound';
 import { Button, Text, View } from '../../../Components/Themed';
 import { useColors } from '../../../constants/useColors';
@@ -12,13 +11,12 @@ type BracketPlayProps = {
     player_bracket_id?:string,
     bracket_id?:string,
     width:number,
-    onEditPlayerBracket: (pb:PlayerBracketProps) => void,
     onRequestAuthenticate: () => void,
     onChangePlayerBracket: (bracket_id:string) => void,
     onPlayerBracketUpdate: (pb:PlayerBracketProps, cpbs:CompetitionPlayerBracketProps[]) => void,
 }
 
-const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onEditPlayerBracket, onPlayerBracketUpdate, onChangePlayerBracket, onRequestAuthenticate }:BracketPlayProps) => {
+const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onPlayerBracketUpdate, onChangePlayerBracket, onRequestAuthenticate }:BracketPlayProps) => {
     const Colors = useColors();
     const [ round_event_loading, setRoundEventLoading ] = useState<string|undefined>(undefined);
     const [ play_data, setPlayData ] = useState<{
@@ -146,18 +144,18 @@ const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onEditPlaye
 
     const renderBracketRounds = (data: { item:BracketRoundProps, index:number }) => {
         return (
-            <BracketRoundSection 
-                round_event_loading={round_event_loading}
-                bracket_round={data.item}
-                round_events={round_events}
-                teams={teams}
-                athletes={athletes}
-                player_bracket_picks={player_bracket_picks}
-                width={round_width}
-                orientation='right'
-                onPick={(pick) => handlePick(pick)}
-            
-            />
+                <BracketRoundSection 
+                    round_event_loading={round_event_loading}
+                    bracket_round={data.item}
+                    round_events={round_events}
+                    teams={teams}
+                    athletes={athletes}
+                    player_bracket_picks={player_bracket_picks}
+                    width={round_width}
+                    orientation='right'
+                    onPick={(pick) => handlePick(pick)}
+                
+                />
         )
     }
 
@@ -195,9 +193,6 @@ const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onEditPlaye
                     <Text size={14} theme='h1'>{player_bracket.bracket_name}</Text>
                     <Text style={{ marginTop:3 }} size={12} theme='description'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
                 </View>
-                <Button transparent onPress={() => onEditPlayerBracket(player_bracket)}>
-                    <Icons.EditIcon size={14} color={Colors.text.action} />
-                </Button>
                 <Button
                     title='Change'
                     style={{ padding:10 }}

package/src/Bracket/components/EditPlayerBracket.tsx

@@ -1,18 +1,25 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button, Text, TextInput, View } from "../../Components/Themed"
 import type { PlayerBracketProps } from "../../types"
 import { BracketComeptitionApi } from '../api';
+import { Modal } from 'react-native';
 
 type EditPlayerBracketProps = {
     player_bracket?:PlayerBracketProps,
+    view_mode?:'desktop'|'mobile',
+    insets?:{ top:number, bottom:number, left:number, right:number },
     onUpdatePlayerBracket:(pb:PlayerBracketProps) => void,
     onFocusPosition?:(data:{ x:number, y:number, height:number, width:number }) => void,
     onClose:() => void
 }
-const EditPlayerBracket = ({ player_bracket, onUpdatePlayerBracket, onFocusPosition, onClose }:EditPlayerBracketProps) => {
+const EditPlayerBracket = ({ player_bracket, view_mode, onUpdatePlayerBracket, onFocusPosition, insets, onClose }:EditPlayerBracketProps) => {
     const [ draft_pb, setDraftPb ] = useState(player_bracket);
     const [ action_loading, setActionLoading ] = useState(false);
 
+    useEffect(() => {
+        setDraftPb(player_bracket)
+    },[player_bracket])
+
     const is_changed = JSON.stringify(draft_pb) != JSON.stringify(player_bracket) ? true : false
 
     const handleUpdate = async() => {
@@ -35,48 +42,57 @@ const EditPlayerBracket = ({ player_bracket, onUpdatePlayerBracket, onFocusPosit
     if(!player_bracket || !draft_pb){ return <></> }
 
     return (
-        <View transparent>
-            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
-                <View transparent style={{ flex:1 }}>
-                    <Text theme='h1'>EDIT MY BRACKET</Text>
-                    <Text style={{ marginTop:3 }} theme='description'>{player_bracket.bracket_name}</Text>
-                </View>
-                <Button
-                    title='DELETE'
-                    type='error'
-                    loading={action_loading}
-                    style={{ padding:10, opacity:action_loading?0.5:1 }}
-                    disabled={action_loading}
-                    onPress={() => handleDelete()}
-                />
-            </View>
-            <View type='body' style={{ padding:10 }}>
-                <View>
-                    <Text style={{ marginBottom:10 }} theme='h2'>Update Bracket Name</Text>
-                    <TextInput
-                        value={draft_pb?.bracket_name}
-                        onFocusPosition={onFocusPosition}
-                        onChangeText={(text) => setDraftPb({ ...draft_pb, bracket_name: text })}
-                    />
+        <Modal
+            visible={player_bracket ? true : false}
+            style={{ flex:1 }}
+            transparent
+            animationType={view_mode == 'desktop' ? 'fade' : 'slide'}
+        >
+            <View type='blur' style={view_mode == 'desktop' ? { flex:1, justifyContent:'center', alignItems:'center' } : { flex:1, justifyContent:'flex-end', paddingBottom:(insets?.bottom ?? 0)}}>
+                <View float style={view_mode == 'desktop' ? { width:500 }:{ margin:10 }}>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>EDIT MY BRACKET</Text>
+                            <Text style={{ marginTop:3 }} theme='description'>{player_bracket.bracket_name}</Text>
+                        </View>
+                        <Button
+                            title='DELETE'
+                            type='error'
+                            loading={action_loading}
+                            style={{ padding:10, opacity:action_loading?0.5:1 }}
+                            disabled={action_loading}
+                            onPress={() => handleDelete()}
+                        />
+                    </View>
+                    <View type='body' style={{ padding:10 }}>
+                        <View>
+                            <Text style={{ marginBottom:10 }} theme='h2'>Update Bracket Name</Text>
+                            <TextInput
+                                value={draft_pb?.bracket_name}
+                                onFocusPosition={onFocusPosition}
+                                onChangeText={(text) => setDraftPb({ ...draft_pb, bracket_name: text })}
+                            />
+                        </View>
+                    </View>
+                    <View type='footer' style={{ flexDirection:'row', padding:10, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                        <Button
+                            style={{ flex:1 }}
+                            title='CANCEL'
+                            type='close'
+                            onPress={() => onClose()}
+                        />
+                        <Button
+                            style={{ flex:2, marginLeft:5, opacity: is_changed?1:0.5 }}
+                            title='UPDATE'
+                            loading={action_loading}
+                            type='success'
+                            disabled={!is_changed || action_loading}
+                            onPress={handleUpdate}
+                        />
+                    </View>
                 </View>
             </View>
-            <View type='footer' style={{ flexDirection:'row', padding:10, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
-                <Button
-                    style={{ flex:1 }}
-                    title='CANCEL'
-                    type='close'
-                    onPress={() => onClose()}
-                />
-                <Button
-                    style={{ flex:2, marginLeft:5, opacity: is_changed?1:0.5 }}
-                    title='UPDATE'
-                    loading={action_loading}
-                    type='success'
-                    disabled={!is_changed || action_loading}
-                    onPress={handleUpdate}
-                />
-            </View>
-        </View>
+        </Modal>
     )
 }
 

package/src/Bracket/components/EnteredCompetitionsModal.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { FlatList, Image, Modal } from "react-native"
+import type { AthleteProps, BracketCompetitionProps, CompetitionPlayerBracketProps, PlayerBracketProps, TeamProps } from "../../types"
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { BracketCompetitionHelpers } from '../api';
+
+type EnteredCompetitionsModalProps = {
+    view_mode: 'desktop'|'mobile',
+    player_bracket?:PlayerBracketProps,
+    insets?:{ top:number, bottom:number, left:number, right:number },
+    entered_competitions:BracketCompetitionProps[],
+    entered_brackets:CompetitionPlayerBracketProps[],
+    champion_team?:TeamProps,
+    champion_athlete?:AthleteProps,
+    onClose:() => void,
+    onSelectCompetition:(bracket_competition:BracketCompetitionProps) => void
+}
+const EnteredCompetitionsModal = ({ view_mode, champion_athlete, champion_team, player_bracket, insets, entered_brackets, entered_competitions, onClose, onSelectCompetition }:EnteredCompetitionsModalProps) => {
+    const Colors = useColors();
+
+    const renderCompetitions = (data:{item:BracketCompetitionProps, index:number}) => {
+        const cl = data.item.market_type == 'FOR_MONEY' ? "$" : 'E'
+        const cpb = entered_brackets.find(b => b.bracket_competition_id == data.item.bracket_competition_id && b.player_bracket_id == player_bracket?.player_bracket_id);
+        let pot = BracketCompetitionHelpers.getPayout(data.item)
+        return (
+            <Button style={{ flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onSelectCompetition(data.item)}>
+                <Image
+                    source={{ uri: data.item.image?.url }}
+                    style={{ height:40, width:40 }}
+                    resizeMode='cover'
+                />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h2'>{data.item.competition_name}</Text>
+                    {cpb ?
+                    <Text style={{ marginTop:3 }}>{pot > 0 ? `Total Pot: ${cl}${pot.toFixed(2)}`:''}Place {cpb.place} / {data.item.tickets_sold}</Text>
+                    :<></>}
+                </View>
+                {cpb ?
+                <View style={{ justifyContent:'center', alignItems:'center', marginRight:20, marginLeft:20 }}>
+                    <Text theme='h2' color={Colors.text.success} textAlign='center'>{cl}{cpb.winnings.toFixed(2)}</Text>
+                    <Text theme='description' color={Colors.text.success} textAlign='center'>winnings</Text>
+                </View>
+                :<></>}
+                <Icons.ChevronIcon direction='right' size={10} color={Colors.text.action} />
+            </Button>
+        )
+    }
+
+    return (
+        <Modal
+            visible={player_bracket?true : false}
+            style={{ flex:1 }}
+            transparent
+            animationType={view_mode == 'desktop' ? 'fade' : 'slide'}
+            >
+            <View type='blur' style={view_mode == 'desktop' ? { flex:1, justifyContent:'center', alignItems:'center' } : { flex:1, justifyContent:'flex-end', paddingBottom:(insets?.bottom ?? 0)}}>
+                <View float style={view_mode == 'desktop' ? { width:500 }:{ margin:10 }}>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>{player_bracket?.bracket_name ?? ''}</Text>
+                            <Text style={{ marginTop:3 }} theme='description'>Entered Competitions</Text>
+                        </View>
+                        {player_bracket?
+                        <View transparent>
+                            <Text theme='h1' color={Colors.text.h1}>{(player_bracket.completion_pct*100).toFixed(2)}%</Text>
+                        </View>
+                        :<></>}
+                        {champion_team ? 
+                        <View transparent style={{ padding:5, justifyContent:'center', alignItems:'center' }}>
+                            <Image
+                                source={{ uri: champion_team.image?.url }}
+                                style={{ height:30, width:30 }}
+                                resizeMode='cover'
+                            />
+                            <Text theme="description" textAlign="center">{champion_team.abbr}</Text>
+                        </View>
+                        :champion_athlete ?
+                        <View transparent style={{ padding:5, justifyContent:'center', alignItems:'center' }}>
+                            <Image
+                                source={{ uri: champion_athlete.image?.url }}
+                                style={{ height:30, width:30 }}
+                                resizeMode='cover'
+                            />
+                            <Text theme="description" textAlign="center">{champion_athlete.abbr_name}</Text>
+                        </View>
+                        :<></>}
+                    </View>
+                    <View type='body' style={{ flexGrow:1 }}>
+                        <FlatList
+                            key={'entered_comps'}
+                            keyExtractor={(item) => item.bracket_competition_id}
+                            data={entered_competitions}
+                            renderItem={renderCompetitions}
+                        />
+                    </View>
+                    <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                        <Button
+                            type='close'
+                            title='CLOSE'
+                            style={{ flex:1 }}
+                            onPress={() => onClose()}
+                        />
+                    </View>
+                </View>
+            </View>
+
+        </Modal>
+    )
+}
+
+export default EnteredCompetitionsModal

package/src/Bracket/components/JoinCompetitionCard.tsx

@@ -5,6 +5,7 @@ import type { BracketCompetitionProps, CompetitionPlayerBracketProps, MyPlayerPr
 import { BracketComeptitionApi, BracketCompetitionHelpers } from '../api';
 import PlayerBalanceCard from './PlayerBalanceCard';
 import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type JoinCompetitionCardProps = {
     player?:MyPlayerProps,
@@ -12,18 +13,39 @@ type JoinCompetitionCardProps = {
     player_bracket?:PlayerBracketProps,
     player_balance?:PlayerBalanceProps,
     bracket_competition:BracketCompetitionProps,
+    onRequestAuthenticate:(auth_strategy_id?:string) => void,
     onNotEnoughBalance:(data:{ bracket_competition:BracketCompetitionProps }) => void,
     onEnterCompetition:(cpb:CompetitionPlayerBracketProps, player_bracket?:PlayerBracketProps) => void,
     onClose:() => void
 }
 
-const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket, bracket_competition, onNotEnoughBalance, onEnterCompetition, onClose }:JoinCompetitionCardProps) => {
+const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket, bracket_competition, onRequestAuthenticate, onNotEnoughBalance, onEnterCompetition, onClose }:JoinCompetitionCardProps) => {
+    const Colors = useColors();
     const [ disclaimed, setDisclaimed ] = useState(true);
+    const [ use_promo_balance, setUsePromoBalance ] = useState(false);
 
     const buy_in_label = BracketCompetitionHelpers.getBuyInTitle(bracket_competition)
 
+    const isBalanceEnough = () => {
+        if(!player_balance){ return false }
+        let buy_in = bracket_competition.buy_in;
+        switch(bracket_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 handleEnter = async() => {
-        if(!player){ return }
+        if(!player){ return onRequestAuthenticate(bracket_competition?.auth_strategy_id) }
         let player_bracket_id = player_bracket?.player_bracket_id
         let new_pb:PlayerBracketProps | undefined = undefined
         if(!player_bracket_id){
@@ -39,7 +61,7 @@ const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket,
             })
             player_bracket_id = new_pb.player_bracket_id
         }
-        const is_enough_balance = BracketCompetitionHelpers.isEnoughBalance(bracket_competition, player_balance);
+        const is_enough_balance = isBalanceEnough();
         if(!is_enough_balance){ return onNotEnoughBalance({ bracket_competition }) }
         const cpb = BracketCompetitionHelpers.generateCompetitionPlayerBracket(bracket_competition.bracket_competition_id, player_bracket_id)
         onEnterCompetition(cpb, new_pb)
@@ -79,6 +101,27 @@ const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket,
                 />
             </View>
             :<></>}
+            {bracket_competition.buy_in > 0 && player_balance && player_balance.promo_balance >= bracket_competition.buy_in ?
+            <Button style={{ margin:10, backgroundColor:Colors.text.gold, padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => {
+                if(use_promo_balance){
+                    //Remove promo balance and open_amt
+                    setUsePromoBalance(false);
+                } else {
+                    setUsePromoBalance(true);                    
+                }
+                }}>
+                    <View transparent style={{ marginRight:10, height:30, width:30, borderWidth:1, borderColor:Colors.text.h1, justifyContent:'center', alignItems:'center' }}>
+                        {use_promo_balance ?
+                        <View style={{ height:20, width:20, backgroundColor:Colors.text.h1 }} />
+                        :<></>}
+                    </View>
+                    <View transparent>
+                        <Text size={14} theme="h1" color={Colors.text.white}>${player_balance?.promo_balance} Promotion Available</Text>
+                        <Text style={{ marginTop:2}} color={Colors.text.white} theme="description">Press / Click here to use promo balance</Text>
+                    </View>
+                
+            </Button>
+            :<></>}
             <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 <Button
                     title='Close'

package/src/Bracket/components/ManageBracketCompetitionForm.tsx

@@ -197,7 +197,7 @@ const ManageBracketCompetitionForm = ({ player_id, bracket_competition_id, onFai
                         </View>
                     </View>
                     <TextInput
-                        value={scoring_rule.win_points as unknown as string}
+                        value={scoring_rule.win_points.toString() as unknown as string}
                         editable={scoring}
                         style={{ textAlign:'center', width:80 }}
                         onChangeText={(text) => handleUpdateScoringRule({ ...scoring_rule, win_points: text as unknown as number })}
@@ -206,8 +206,8 @@ const ManageBracketCompetitionForm = ({ player_id, bracket_competition_id, onFai
                     <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
                         <Text style={{ padding:4 }} theme='h1'>X</Text>
                         <TextInput
-                            value={scoring_rule.underdog_multiplier  as unknown as string}
-                            style={{ textAlign:'center', width:50 }}
+                            value={scoring_rule.underdog_multiplier.toString() as unknown as string}
+                            style={{ textAlign:'center', width:65 }}
                             editable={scoring}
                             onChangeText={(text) => handleUpdateScoringRule({ ...scoring_rule, underdog_multiplier: text  as unknown as number })}
                         />

package/src/Bracket/components/PlayerBracketCard.tsx

@@ -11,17 +11,16 @@ type PlayerBracketCardProps = {
     champion_team?:TeamProps,
     champion_athlete?:AthleteProps,
     onEdit: (player_bracket:PlayerBracketProps) => void,
-    onView: (bracket_id:string, player_bracket_id?:string, bracket_competition_id?:string) => void,
+    onShowCompetitions:() => void,
+    onView: (bracket_id:string, player_bracket_id?:string, bracket_competition?:BracketCompetitionProps) => void,
     bracket_competitions:BracketCompetitionProps[],
     player_bracket:PlayerBracketProps,
     competition_player_brackets:CompetitionPlayerBracketProps[]
 }
 
-const PlayerBracketCard = ({ onEdit, champion_team, onView, player_bracket, bracket }:PlayerBracketCardProps) => {
+const PlayerBracketCard = ({ onEdit, champion_team, onView, player_bracket, bracket, competition_player_brackets, onShowCompetitions }:PlayerBracketCardProps) => {
     const Colors = useColors();
     
-
-    //const cl = bracket_competition.market_type == 'FOR_MONEY' ? '$' : 'E'
     return (
         <View type='row' style={{ flex:1 }}>
             {player_bracket.champion_id ?
@@ -49,6 +48,12 @@ const PlayerBracketCard = ({ onEdit, champion_team, onView, player_bracket, brac
                <Text theme="h1">{player_bracket.bracket_name}</Text>
                <Text style={{ marginTop:4 }} theme="description">{(player_bracket.completion_pct * 100).toFixed(2)}%</Text>
             </View>
+            {competition_player_brackets.length > 0 ?
+            <Button float style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => onShowCompetitions()}>
+                <Text style={{ marginRight:5 }} theme="h1" color={Colors.text.action}>{competition_player_brackets.length}</Text>
+                <Icons.TrophyIcon size={12} color={Colors.text.action} />
+            </Button>
+            :<></>}
             {player_bracket.status != 'closed' ?
             <Button
                 type='text'

package/src/Bracket/components/PlayerBrackets.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FlatList, Image } from "react-native"
+import { FlatList, Image, Modal } from "react-native"
 import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, LeagueProps, PlayerBracketProps, TeamProps } from '../../types';
 import moment from 'moment-mini';
 import { Button, Text, View } from '../../Components/Themed';
@@ -9,8 +9,11 @@ import { BracketComeptitionApi, BracketCompetitionHelpers } from '../api';
 type PlayerBracketSelectorProps = {
     brackets:BracketProps[],
     player_id?:string,
+    visible?:boolean,
+    view_mode?:'desktop'|'mobile',
     bracket_id?:string,
     leagues:LeagueProps[],
+    insets?:{ top:number, bottom:number, left:number, right:number },
     teams:TeamProps[],
     athletes:AthleteProps[],
     player_brackets:PlayerBracketProps[],
@@ -21,7 +24,7 @@ type PlayerBracketSelectorProps = {
     onSelect:(pb:PlayerBracketProps) => void,
 }
 
-const PlayerBracketSelector = ({ brackets, bracket_id, leagues, teams, athletes, player_brackets, onSelect, onClose, onCreateNew }:PlayerBracketSelectorProps) => {
+const PlayerBracketSelector = ({ brackets, visible, view_mode, insets, bracket_id, leagues, teams, athletes, player_brackets, onSelect, onClose, onCreateNew }:PlayerBracketSelectorProps) => {
     const Colors = useColors();
     const [ action_loading, setActionLoading ] = useState(false);
     const active_brackets = player_brackets.filter(pb => pb.status == 'active');
@@ -109,39 +112,48 @@ const PlayerBracketSelector = ({ brackets, bracket_id, leagues, teams, athletes,
 
 
     return (
-        <View transparent style={{ flexGrow:1 }}>
-            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
-                <View transparent style={{ flex:1 }}>
-                    <Text theme='h1'>My Brackets</Text>
+        <Modal
+            visible={visible}
+            style={{ flex:1 }}
+            transparent
+            animationType={view_mode == 'desktop' ? 'fade' : 'slide'}
+            >
+            <View type='blur' style={view_mode == 'desktop' ? { flex:1, justifyContent:'center', alignItems:'center' } : { flex:1, justifyContent:'flex-end', paddingBottom:(insets?.bottom ?? 0) }}>
+                <View float style={view_mode == 'desktop' ? { width:500 }:{ margin:10 }}>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>My Brackets</Text>
+                        </View>
+                        {bracket_id && onCreateNew ?
+                        <Button 
+                            type='success' 
+                            disabled={action_loading}
+                            loading={action_loading}
+                            style={{ flexDirection:'row', alignItems:'center', padding:10, opacity: action_loading?0.5:1 }} 
+                            onPress={() => handleCreateNew()}
+                            >
+                            <Text size={14} color={Colors.text.white}>NEW</Text>
+                        </Button>
+                        :<></>}
+                    </View>
+                    <View transparent style={{ flexGrow:1, marginTop:1 }}>
+                        <FlatList
+                            data={unique_bracket_ids}
+                            renderItem={renderBrackets}
+                            keyExtractor={(item) => item.toString()}
+                        />
+                    </View>
+                    <View type='footer' style={{ flexDirection:'row', padding:10 }}>
+                        <Button
+                            type='close'
+                            title='CLOSE'
+                            style={{ flex:1 }}
+                            onPress={() => onClose()}
+                        />
+                    </View>
                 </View>
-                {bracket_id && onCreateNew ?
-                <Button 
-                    type='success' 
-                    disabled={action_loading}
-                    loading={action_loading}
-                    style={{ flexDirection:'row', alignItems:'center', padding:10, opacity: action_loading?0.5:1 }} 
-                    onPress={() => handleCreateNew()}
-                    >
-                    <Text size={14} color={Colors.text.white}>NEW</Text>
-                </Button>
-                :<></>}
-            </View> 
-            <View transparent style={{ flexGrow:1, marginTop:1 }}>
-                <FlatList
-                    data={unique_bracket_ids}
-                    renderItem={renderBrackets}
-                    keyExtractor={(item) => item.toString()}
-                />
-            </View>
-            <View type='footer' style={{ flexDirection:'row', padding:10 }}>
-                <Button
-                    type='close'
-                    title='CLOSE'
-                    style={{ flex:1 }}
-                    onPress={() => onClose()}
-                />
             </View>
-        </View>
+        </Modal>
     )
 }