be-components 2.8.2 → 3.0.0

package/src/MarketComponents/components/TeamEventMarket/index.tsx

@@ -11,7 +11,7 @@ import EventMarket from '../../components/EventMarket';
 
 import { MarketComponentApi, MarketComponentHelpers } from '../../api';
 import { MarketButtonHelpers } from '../MarketButton/api';
-import LinearGradient from 'react-native-linear-gradient';
+import { LinearGradient } from 'expo-linear-gradient';
 import { useIsInViewport } from '../../../Components/ViewportObserver';
 import ContestStatsCard from '../ContestStats';
 import PodcastCard from '../PodcastCard';
@@ -70,7 +70,9 @@ const TeamEventMarket = ({ event, league, init_expanded, show_id, hide_liquidity
 
     useEffect(() => {
         MarketComponentApi.setEnvironment();
-        if(init_expanded){ expandedEvent(); }
+        if(init_expanded){ 
+            expandedEvent(); 
+        }
         if(event.sponsor_id){ getCompanyFromServer(event.sponsor_id) }
     },[])
 
@@ -111,7 +113,6 @@ const TeamEventMarket = ({ event, league, init_expanded, show_id, hide_liquidity
 
         if(loaded){ return setExpandedData({ ...expanded_data, expanded: true }) }
         setExpandedData({ ...expanded_data, expanded:true, loading:true });
-
         //Need to load our athletes in here!
         const away_athletes = await MarketComponentApi.getAthletesByTeamId(event.away_team_id);
         const home_athletes = await MarketComponentApi.getAthletesByTeamId(event.home_team_id);
@@ -336,7 +337,7 @@ const TeamEventMarket = ({ event, league, init_expanded, show_id, hide_liquidity
                     title={event_status == 'active' ? 'Refresh' : 'Activate'}
                     style={{ opacity: activate_loading ? 0.5 : 1, marginLeft:5 }}
                     disabled={activate_loading}
-                    loading={activate_loading}
+                    loading={activate_loading} 
                     title_color={Colors.shades.white}
                     backgroundColor={Colors.utility.success}
                     onPress={() => onActivate(event.event_id, 'team')}
@@ -349,7 +350,7 @@ const TeamEventMarket = ({ event, league, init_expanded, show_id, hide_liquidity
                 :<></>}
             </LinearGradient>
             :
-            <View nativeID='event_header_data' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+            <View nativeID='event_header_data' style={{ flexDirection:'row', alignItems:'center', flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
                 <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
                     {league ?
                     <Image
@@ -577,18 +578,21 @@ const TeamEventMarket = ({ event, league, init_expanded, show_id, hide_liquidity
                     <Button
                         title='SEE ALL'
                         padding={15}
+                        backgroundColor='transparent'
                         title_color={Colors.brand.electric}
                         onPress={() => onViewAdditionalMarkets(event.event_id, 'team')}
                     />
                     }
                 </View>
-                <FlatList
-                    data={non_primary_markets}
-                    renderItem={renderNonPrimaryMarkets}
-                    showsHorizontalScrollIndicator={false}
-                    keyExtractor={(item) => `${item.market_id}:${item.side_type}:${item.side_id}`}
-                    horizontal
-                />
+                <View>
+                    <FlatList
+                        data={non_primary_markets}
+                        renderItem={renderNonPrimaryMarkets}
+                        showsHorizontalScrollIndicator={false}
+                        keyExtractor={(item) => `${item.market_id}:${item.side_type}:${item.side_id}`}
+                        horizontal
+                    />
+                </View>
                 {podcasts.length > 0 ?
                 <View style={{ flexDirection:'row', marginTop:10, borderBottomRightRadius:8, borderBottomLeftRadius:8, backgroundColor:Colors.shades.shade100 }}>
                     <View style={{ padding:5, paddingRight:20, paddingLeft:20, justifyContent:'center', backgroundColor:Colors.brand.midnight, borderBottomLeftRadius:8 }}>

package/src/MarketComponents/components/TournamentMarket/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, FlatList, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
+import { View, FlatList, TouchableOpacity, ActivityIndicator, Image, ScrollView } from 'react-native';
 import { view_styles } from '../../../constants/styles';
 import Colors from '../../../constants/colors';
 import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, LeagueProps, MarketProps, MatchProps, OrderProps, TeamProps, TournamentProps, TradeProps } from '../../../types';
@@ -61,7 +61,6 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
     });
     const { loaded, athletes, active_type, loading, matches, teams, active_market, match_trades } = tournament_data;
     const [ show_markets, setShowMarkets ] = useState(false);
-
     const ref = useRef(null);
     const is_in_viewport = useIsInViewport(ref)
 
@@ -108,8 +107,8 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
         const tms = await MarketComponentApi.getTeamsByIds(t_ids);
         setTournamentData({
             ...tournament_data,
-            loaded: true,
             loading:false,
+            loaded: true,
             active_type: type as 'futures' | 'matches',
             athletes: aths,
             match_trades: trades,
@@ -145,7 +144,7 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
         let m_order_stats = match_order_stats.filter(os => os.event_id == data.item.match_id && os.event_type == 'match');
 
         return (
-            <View style={{ }}>
+            <View key={`${tournament.tournament_id}_${data.item.match_id}`}>
                 <MatchMarket
                     match={data.item}
                     league={league}
@@ -176,7 +175,7 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
         let team_trades = latest_trades.filter(t => t.side_type == 'team' && t.side_id == data.item.team_id);
         let team_order_stats = event_order_stats.filter(os => os.side_type == 'team' && os.side_id == data.item.team_id);
         return (
-            <View>
+            <View key={data.item.team_id.toString()}>
                 <TeamTournamentMarket
                     team={data.item}
                     event_type='tournament'
@@ -203,7 +202,7 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
         let team_trades = latest_trades.filter(t => t.side_type == 'athlete' && t.side_id == data.item.athlete_id);
         let team_order_stats = event_order_stats.filter(os => os.side_type == 'athlete' && os.side_id == data.item.athlete_id);
         return (
-            <View>
+            <View key={data.item.athlete_id.toString()}>
                 <AthleteTournamentMarket
                     athlete={data.item}
                     event_type='tournament'
@@ -327,11 +326,13 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
             {active_type == 'futures' && show_teams && teams.length > 0 ?
             <View>
                 {wrap_markets ?
-                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
-                    {sorted_teams.map((t,i) => {
-                        return renderTeams({ item:t, index:i })
-                    })}
-                </View>
+                <ScrollView>
+                    <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                        {sorted_teams.map((t,i) => {
+                            return renderTeams({ item:t, index:i })
+                        })}
+                    </View>
+                </ScrollView>
                 :
                 <FlatList
                     data={sorted_teams}

package/src/ProfileManager/Components/PasswordManager.tsx

@@ -92,7 +92,7 @@ const PasswordManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
     }
 
     return (
-        <View style={{ flex:1 }}>
+        <View style={{ flex:1}}>
             {walkthrough ?
             <View style={{ padding:20 }}>
                 <Text size={30} color={Colors.brand.midnight} weight='bold'>Secure Your Account</Text>
@@ -100,7 +100,7 @@ const PasswordManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
             </View>
             :<></>}
             {draft_player.no_password || change_visible ?
-            <View style={{ flex:1, padding:20 }}>
+            <View style={{ padding:20, flex:1 }}>
                 {!draft_player.no_password ?
                 <View style={{ margin:10, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
                     <View style={{ paddingLeft:15, paddingRight:15 }}>
@@ -114,12 +114,12 @@ const PasswordManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
                         placeholder='My Current Password'
                         secureTextEntry
                         placeholderTextColor={Colors.brand.slate}
-                        style={{ flex:1, borderTopLeftRadius:0, borderBottomLeftRadius:0 }}
+                        style={{ borderTopLeftRadius:0, borderBottomLeftRadius:0, flex:1 }}
                         onChangeText={(text) => setDraftPassword({ ...draft_password, current_password : text })}
                     />
                 </View>
                 :<></>}
-                <View style={{ margin:10, marginTop:0, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                <View style={{ flex:1, margin:10, marginTop:0, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
                     <View style={{ paddingLeft:15, paddingRight:15 }}>
                         <Icons.LockClosedIcon
                             color={Colors.brand.midnight}
@@ -157,7 +157,7 @@ const PasswordManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
 
             </View>
             :
-            <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+            <View style={{ flex:1, justifyContent:'center', alignItems:'center', padding:10 }}>
                 <View style={{ borderRadius:8, backgroundColor:Colors.shades.shade600, justifyContent:'center', alignItems:'center', padding:30 }}>
                     
                     <Text style={{ marginBottom:30 }} size={24} color={Colors.brand.midnight} weight='bold'>Password Set</Text>
@@ -165,8 +165,7 @@ const PasswordManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
                     <Icons.LockClosedIcon size={40} color={Colors.utility.success} />
                     <Button
                         title='CHANGE'
-                        style={{ marginTop:20, padding:15, paddingLeft:40, paddingRight:40 }}
-                        
+                        style={{ marginTop:20, padding:15, flex:0 }}
                         title_color={Colors.shades.white}
                         backgroundColor={Colors.brand.electric}
                         onPress={() => setDraftPassword({ ...draft_password, change_visible: true })}

package/src/ProfileManager/Components/ProfilePicManager.tsx

@@ -46,7 +46,10 @@ const ProfilePicManager = ({ player, onPlayerUpdate, walkthrough, onNext, onClos
                         public_id={`${player.player_id}_${Math.random()}`}
                         onStartUpload={() => setLoading(true)}
                         onCancelUpload={() => setLoading(false)}
-                        onFinishUpload={(obj) => handleUpdatePic(obj.secure_url)}
+                        onFinishUpload={(obj) => {
+                            console.log(obj)
+                            handleUpdatePic(obj.secure_url)
+                        }}
                     >
                         <Button
                             title={player.profile_pic ? 'CHANGE' : 'ADD PICTURE'}

package/src/SocialComponents/AudioPlayer.tsx

@@ -13,6 +13,7 @@ type AudioPlayerProps = {
     onClose:() => void
 }
 const AudioPlayer = ({podcast_episode_id, player_id, onClose}:AudioPlayerProps) => {
+
     const [ audio_size, setAudioSize ] = useState({ width:50 });
     const [ audio_data, setAudioData ] = useState<{
         audio_loading:boolean,
@@ -49,7 +50,7 @@ const AudioPlayer = ({podcast_episode_id, player_id, onClose}:AudioPlayerProps)
     });
     const { player_loading, player_podcast } = player_data;
 
-    const audio_ref:any = useRef(null)
+    const audio_ref:any = useRef(null);
 
     useEffect(() => {
         const handleBeforeUnload = async(event:any) => {
@@ -207,8 +208,7 @@ const AudioPlayer = ({podcast_episode_id, player_id, onClose}:AudioPlayerProps)
 
 
 
-
-    if(Platform.OS != 'web'){ return <></> } //Only built for web at this moment
+    if(Platform.OS != 'web'){ return <></> }
 
     return (
         <View style={{ ...view_styles.section, flex:1 }} onLayout={(ev) => {
@@ -274,7 +274,7 @@ const AudioPlayer = ({podcast_episode_id, player_id, onClose}:AudioPlayerProps)
                 </View>
             </View>
             }
-            {podcast_episode ?
+            {Platform.OS == 'web' && podcast_episode ?
             <audio onLoad={(ev) => console.log(ev)} ref={audio_ref} onDurationChange={() => handleLoad()} onTimeUpdate={() => handleTimeChange()} src={podcast_episode.url} />
             :<></>}
         </View>

package/src/SocialComponents/PlayerProfile/components/PostsList.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { View, FlatList, ActivityIndicator } from 'react-native';
+//import { View, FlatList, ActivityIndicator } from 'react-native';
 import { useEffect, useState } from "react"
 import type {  OrderProps, PostProps, PublicPlayerProps } from "../../../types"
 import { SocialProfileApi } from '../api';
-import PostCard from '../../PostCard';
-import Colors from '../../../constants/colors';
-import { Button } from '../../../Components';
+//import PostCard from '../../PostCard';
+//import Colors from '../../../constants/colors';
+//import { Button } from '../../../Components';
 
 type PostsListProps = {
     viewing_player:PublicPlayerProps,
@@ -16,7 +16,7 @@ type PostsListProps = {
     onViewComments:(post_id:string) => void
 }
 
-const PostsList = ({ viewing_player, player_id, onRequestAuthenticate, onCopyOrder, onFadeOrder, onViewComments}:PostsListProps) => {
+const PostsList = ({ viewing_player}:PostsListProps) => {
     const [ post_data, setPostData ] = useState<{
         posts_loading:boolean,
         posts:PostProps[],
@@ -28,7 +28,7 @@ const PostsList = ({ viewing_player, player_id, onRequestAuthenticate, onCopyOrd
         orders:[],
         posts_offset:0
     });
-    const { posts_loading, posts, orders, posts_offset } = post_data;
+    const { posts, orders } = post_data;
     
     useEffect(() => {
         getPostData(0);
@@ -58,8 +58,11 @@ const PostsList = ({ viewing_player, player_id, onRequestAuthenticate, onCopyOrd
     }
 
 
+    /*
     const renderPosts = (data: { item:PostProps, index:number }) => {
         const post_orders = data.item.memo_orders ?  orders.filter(o => data.item.memo_orders.includes(o.order_id)) : []
+        return <></>
+        
         return (
             <View>
                 <PostCard 
@@ -74,9 +77,12 @@ const PostsList = ({ viewing_player, player_id, onRequestAuthenticate, onCopyOrd
                 />
             </View>
         )
+            
     }
+        */
 
-
+    return  <></>
+    /*
     return (
         <View>
             <View>
@@ -102,6 +108,7 @@ const PostsList = ({ viewing_player, player_id, onRequestAuthenticate, onCopyOrd
             </View>
         </View>
     )
+        */
 }
 
 export default React.memo(PostsList, (left,right) => {

package/src/SocialComponents/PlayerProfile/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, Image, ScrollView, FlatList, TouchableOpacity, Linking } from 'react-native';
+import { View, ActivityIndicator, Image, ScrollView, FlatList, TouchableOpacity, Linking, Platform } from 'react-native';
 import type { OrderProps, PlayerFollowerProps, PlayerFollowerStatsProps, PlayerLinkProps, PublicPlayerProps } from '../../types';
 import { SocialProfileApi } from './api';
 import Colors from '../../constants/colors';
@@ -295,11 +295,11 @@ const PlayerProfile = ({ viewing_player_id, maxWidth, padding_insets, player_id,
                 </View>
                 <View style={{ ...view_styles.section }}>
                     <View style={{ ...view_styles.section_header }}>
-                        <View style={{ flex:1 }}>
+                        <View>
                             <Text theme='header'>Followers</Text>
                             <Text style={{ marginTop:3 }} theme='body_2'>Who is follwoing @{player.username}</Text>
                         </View>
-                        <View style={{ padding:10 }}>
+                        <View style={{ padding:10, flex:1, alignItems:'flex-end' }}>
                             <Text theme='header_2'>{player_follower_stats?.follower_count ?? 0}</Text>
                         </View>
                         <Button
@@ -380,7 +380,7 @@ const PlayerProfile = ({ viewing_player_id, maxWidth, padding_insets, player_id,
 
                             />
                         </View>
-                        {active_toggle == 'Posts' ?
+                        {active_toggle == 'Posts' && Platform.OS == 'web' ?
                         <PostsList
                             viewing_player={player}
                             player_id={player_id}

package/src/Squares/components/BidForm.tsx

@@ -21,9 +21,8 @@ type BidFormProps = {
     square_bids:PlayerSquareProps[],
     squares:SquareProps[]
 }
-const BidForm = ({ player_id, player_balance, width, market_type, home_abbr, away_abbr, submit_ready, square_bids, squares, onSubmitBid, onClearBids, onBidAmountChange, onRequestAuthenticate }:BidFormProps) => {
+const BidForm = ({ player_id, player_balance, market_type, home_abbr, away_abbr, submit_ready, square_bids, squares, onSubmitBid, onClearBids, onBidAmountChange, onRequestAuthenticate }:BidFormProps) => {
     const [ promo_balance, setPromoBalance ] = useState(false);
-    
     const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
     const total_bid_amount = square_bids.reduce((a,b) => a + b.purchase_price, 0)
 
@@ -45,10 +44,10 @@ const BidForm = ({ player_id, player_balance, width, market_type, home_abbr, awa
             </View>
         )
     }
-
+ 
     return (
-        <View style={{ ...view_styles.section, width, padding:0, maxHeight:550, maxWidth:600 }}>
-            <ScrollView style={{ flex:1 }}>
+        <View style={{ ...view_styles.section, padding:0, maxHeight:550, maxWidth:600 }}>
+            <ScrollView>
             <View style={ view_styles.section_header }>
                 <View style={{ flex:1 }}>
                     <Text theme="header">SET BID AMOUNTS</Text>

package/src/Squares/components/BidToggle.tsx

@@ -17,7 +17,7 @@ const BidToggle = ({ cl, amount, onAmountChange }:BidToggleProps) => {
             <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', padding:12, borderRightWidth:1, borderRightColor:Colors.accents.accent200}} onPress={() => onAmountChange('decrease')}>
                 <Text size={16} weight='semibold' color={Colors.brand.electric} textAlign='center'>-</Text>
             </TouchableOpacity>
-            <Text style={{ flex:1, marginLeft:4, marginRight:4 }} theme="header_2">{cl}{amount.toFixed(2)}</Text>
+            <Text style={{ marginLeft:4, marginRight:4 }} theme="header_2">{cl}{amount.toFixed(2)}</Text>
             <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', padding:12,  borderLeftWidth:1, borderLeftColor:Colors.accents.accent200}} onPress={() => onAmountChange('increase')}>
                 <Text size={16} weight='semibold' color={Colors.brand.electric} textAlign='center'>+</Text>
             </TouchableOpacity>

package/src/Squares/components/SquareCard.tsx

@@ -130,7 +130,7 @@ const SquareCard = ({ player_id, square, player_square, event, event_status, mar
 
     const isUserIconVisible = (square_state:SquareStateProps) => {
         if(!square_state){ return false }
-        if(player_square?.player_id == player_id){ return true }
+        if(player_id && player_square?.player_id == player_id){ return true }
         if(draft_square_offer){ return true }
         if(draft_player_square){ return true }
         if(player_square && player_square.player_id == player_id){ return true }
@@ -175,7 +175,7 @@ const SquareCard = ({ player_id, square, player_square, event, event_status, mar
             :<></>}
             <View>
                 {square_state == 'no_bid' ?
-                <Icons.UnbidSquare color={event?.home?.primary_color} secondary_color={event?.away?.primary_color}/>
+                <Icons.UnbidSquare size={42} color={event?.home?.primary_color} secondary_color={event?.away?.primary_color}/>
                 :
                 <Text size={12} weight='regular' color={getSquareFontColor(square_state)} textAlign='center'>{getSquareText(square_state)}</Text>
                 }

package/src/Squares/components/SquaresBoard.tsx

@@ -1,6 +1,6 @@
 import { Button, Icons, Text } from "../../Components";
 import type { EventProps, PlayerSquareProps, SquareOfferProps, SquareProps, SquareResultProps, SquaresCompetitionProps } from "../../types"
-import { View, FlatList, Image, TouchableOpacity } from 'react-native';
+import { View, FlatList, Image, TouchableOpacity, ScrollView, Platform } from 'react-native';
 import SquareCard from "./SquareCard";
 import Countdown from './Countdown';
 import { SqauresHelpers } from "../api";
@@ -57,19 +57,21 @@ const SquaresBoard = ({
         }
         const event_status = SqauresHelpers.getCompStatus(event, squares_competition);
         return (
-            <SquareCard
-                player_id={player_id}
-                square={data.item}
-                outbid_player_square={outbid_player_square}
-                market_type={squares_competition.market_type}
-                player_square={player_square}
-                draft_player_square={draft_player_square}
-                draft_square_offer={draft_square_offer}
-                square_offer={square_offer}
-                event={event}
-                event_status={event_status}
-                onSquareSelect={(square, action) => handleSquareSelect(square, action)}
-            />
+            <View>
+                <SquareCard
+                    player_id={player_id}
+                    square={data.item}
+                    outbid_player_square={outbid_player_square}
+                    market_type={squares_competition.market_type}
+                    player_square={player_square}
+                    draft_player_square={draft_player_square}
+                    draft_square_offer={draft_square_offer}
+                    square_offer={square_offer}
+                    event={event}
+                    event_status={event_status}
+                    onSquareSelect={(square, action) => handleSquareSelect(square, action)}
+                />
+            </View>
         )
     }
     
@@ -80,7 +82,7 @@ const SquaresBoard = ({
                 <FlatList
                     data={x_squares.sort((a,b) => a.square_score_x - b.square_score_x)}
                     horizontal
-                    scrollEnabled={true}
+                    scrollEnabled={Platform.OS == 'web' ? true : false}
                     renderItem={renderXSquares}
                     keyExtractor={(item) => item.sq_square_id.toString()}
                 />
@@ -122,8 +124,8 @@ const SquaresBoard = ({
                 </View>
             </TouchableOpacity>
             {expanded ?
-            <View style={view_styles.section_body} nativeID="board">
-                <View style={{ flexDirection:'row', overflow:'scroll', marginLeft:20 }}>
+            <View style={{ ...view_styles.section_body, flex:1 }} nativeID="board">
+                <ScrollView horizontal style={{ flexDirection:'row', marginLeft:20 }}>
                     <View>
                         <View style={{ flexDirection:'row',  marginLeft:4 }}>
                             {unique_score_y.map(num => {
@@ -137,14 +139,14 @@ const SquaresBoard = ({
                         <View style={{ backgroundColor:Colors.shades.shade100, padding:2, borderRadius:8, marginLeft:2 }}>
                             <FlatList
                                 data={unique_score_y}
-                                scrollEnabled
                                 renderItem={renderYSquares}
+                                scrollEnabled={Platform.OS == 'web' ? true : false}
                                 keyExtractor={(item) => `x_${item}`}
                             />
                         </View>
                     </View>
-                </View>
-                <View style={{ position:'absolute', top: 47, backgroundColor:'transparent' }}>
+                </ScrollView>
+                <View style={{ position:'absolute', top: 47,left:20, backgroundColor:'transparent' }}>
                     {unique_score_y.map(num => {
                         return (
                             <View key={`x_${num}`} style={{ margin:3, justifyContent:'center', alignItems:'center', height:40, width:20, backgroundColor:'transparent' }}>

package/src/Squares/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { ActivityIndicator, View, Image, TouchableOpacity, ScrollView } from 'react-native';
+import { ActivityIndicator, View, Image, TouchableOpacity, ScrollView, Modal } from 'react-native';
 import type { BEEventProps, BuySquaresResponseProps, EventProps, LeagueProps, OfferResponseProps, PlayerBalanceProps, PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquarePrizeProps, SquareProps, SquareResultProps, SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps } from "../types"
 import Colors from "../constants/colors";
 import { SqauresHelpers, SquaresApi } from "./api";
@@ -79,7 +79,6 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
 
     const { square_bids, draft_square_offers, submit_ready } = board_data;
     const { loading, league, event, players, loaded, squares_competition, square_prizes, squares, squares_type, squares_payout_type, square_results, square_offers, player_square_history, player_squares } = module_data;
-
     const squares_expected_value = SqauresHelpers.getMyExpectedValue(squares, [ ...player_squares.filter(ps => ps.status == 'active' && ps.player_id == player_id) ], squares_competition, player_id)
     const my_squares = player_squares.filter(ps => ps.status == 'active' && ps.player_id == player_id);
     const home_abbr = event?.home?.abbr??squares_competition?.event_backup?.home?.abbr
@@ -393,7 +392,7 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
                     <Text theme="header">{square_bids.length} Squares</Text>
                     <Button
                         title="SET AMOUNTS"
-                        style={{ marginLeft:10 }}
+                        style={{ marginLeft:10, flex:1 }}
                         title_color={Colors.shades.white}
                         backgroundColor={Colors.brand.electric}
                         onPress={() => setBidFormExpanded(true)}
@@ -447,8 +446,12 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
                 subscribed_events={['V1_UPDATE_SQUARE_DETAILS']}
             />
             </ScrollView>
-            {bid_form_expanded ?
-            <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, justifyContent:module_size.width > 500 ? 'center' : 'flex-end', alignItems:'center', backgroundColor:Colors.shades.black_faded }}>
+            <Modal
+            transparent
+            visible={bid_form_expanded}
+            animationType='slide'
+        >
+            <View style={{ flex:1, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded }}>
                 <BidForm
                     player_id={player_id}
                     player_balance={player_balance}
@@ -464,8 +467,8 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
                     onRequestAuthenticate={() => onRequestAuthenticate(squares_competition.auth_strategy_id)}
                     onSubmitBid={(promo_balance) => handleSubmitBid(promo_balance)}
                 />
-            </View>
-            :<></>}
+                </View>
+            </Modal>
             {draft_square_offers.length > 0 ?
             <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, justifyContent:module_size.width > 500 ? 'center' : 'flex-end', alignItems:'center', backgroundColor:Colors.shades.black_faded }}>
                 <OfferForm

package/src/constants/styles.ts

@@ -17,9 +17,9 @@ export const view_styles = StyleSheet.create({
     float: {
         shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1
     },
-    section: { margin:10, backgroundColor:Colors.shades.white, borderRadius:8,  shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1 },
+    section: { margin:10, backgroundColor:Colors.shades.white, borderRadius:8,  shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1, elevation: 4 },
     section_header: { padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 },
-    section_body: { flex:1, padding:20 },
+    section_body: { padding:20 },
     section_footer: { padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center', borderTopWidth:1, borderTopColor:Colors.shades.shade600, backgroundColor:Colors.shades.shade100 },
     body_row : { padding:5, flexDirection:'row', alignItems:'center' }
 })
@@ -59,12 +59,12 @@ export const text_styles = StyleSheet.create({
         fontSize: 12,
         color:Colors.shades.white
     },
-    header: { color:Colors.brand.midnight, fontSize: 16, fontFamily: 'barlow-bold', textAlign:'left' },
-    header_2: { color:Colors.brand.midnight, fontSize: 14, fontFamily: 'barlow-semibold', textAlign:'left' },
-    error_header_2: { color:Colors.utility.error, fontSize: 14, fontFamily: 'barlow-semibold', textAlign:'left' },
+    header: { color:Colors.brand.midnight, fontSize: 16, fontFamily: 'BarlowBold', textAlign:'left' },
+    header_2: { color:Colors.brand.midnight, fontSize: 14, fontFamily: 'BarlowSemibold', textAlign:'left' },
+    error_header_2: { color:Colors.utility.error, fontSize: 14, fontFamily: 'BarlowSemibold', textAlign:'left' },
 
-    body: { color:Colors.brand.midnight, fontSize: 14, fontFamily: 'barlow-regular', textAlign:'left' },
-    error_body: { color:Colors.utility.error, fontSize: 14, fontFamily: 'barlow-regular', textAlign:'left' },
-    body_2: { color:Colors.brand.midnight, fontSize: 12, fontFamily: 'barlow-regular', textAlign:'left' },
-    error_body_2: { color:Colors.utility.error, fontSize: 12, fontFamily: 'barlow-regular', textAlign:'left' }
+    body: { color:Colors.brand.midnight, fontSize: 14, fontFamily: 'BarlowRegular', textAlign:'left' },
+    error_body: { color:Colors.utility.error, fontSize: 14, fontFamily: 'BarlowRegular', textAlign:'left' },
+    body_2: { color:Colors.brand.midnight, fontSize: 12, fontFamily: 'BarlowRegular', textAlign:'left' },
+    error_body_2: { color:Colors.utility.error, fontSize: 12, fontFamily: 'BarlowRegular', textAlign:'left' }
 })

package/src/index.tsx

@@ -1,3 +1,5 @@
+import { LogBox } from 'react-native';
+LogBox.ignoreAllLogs()
 import Authenticator from "./Authenticator";
 import ProfileManager from "./ProfileManager";
 import * as Components from './Components';