be-components 3.3.6 → 3.3.8

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

@@ -1,13 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import type { BestAvailableOrderProps, EventOrderStatProps, MarketProps, MarketSideOptionProps, OrderProps, TeamProps, TournamentProps, TradeProps } from "../../../types"
 import { view_styles } from '../../../constants/styles';
 import MarketButton from '../../components/MarketButton';
-import { Icons, LinearDiagnal, Text } from '../../../Components';
-import Colors from '../../../constants/colors';
+import { Icons, LinearDiagnal } from '../../../Components';
 import { MarketButtonHelpers } from '../MarketButton/api';
 import { MarketComponentHelpers } from '../../api';
 import { TeamImage } from '../../../Components/Jerseys';
+import { Button, Text, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 
 type TeamTournamentMarketProps = {
     tournament:TournamentProps,
@@ -15,6 +15,7 @@ type TeamTournamentMarketProps = {
     team:TeamProps,
     hide_stat_banner?:boolean,
     width?:number,
+    float?:boolean,
     market:MarketProps,
     direction?:'horizontal'|'vertical',
     show_event?:boolean,
@@ -30,12 +31,8 @@ type TeamTournamentMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-const TeamTournamentMarket = ({ tournament, direction, show_event, hide_liquidity, hide_stat_banner, style, width, team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:TeamTournamentMarketProps) => {
-    let set_style = { ...styles.container_style, width }
-    if(style){
-        set_style = style
-    }
-
+const TeamTournamentMarket = ({ tournament, float, direction, show_event, hide_liquidity, hide_stat_banner, style, team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:TeamTournamentMarketProps) => {
+    const C = useColors();
     const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
     const is_locked = useMemo(() => MarketComponentHelpers.isTournamentMarketLocked(tournament, market.market_id),[JSON.stringify(tournament.supported_markets)])
 
@@ -69,33 +66,33 @@ const TeamTournamentMarket = ({ tournament, direction, show_event, hide_liquidit
     },[JSON.stringify(best_available_orders)])
 
     return (
-        <View style={set_style}>
+        <View float={float} style={[{ borderRadius:8 }, style]}>
             {!hide_stat_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
                 label_size={14}
                 style={{ borderTopLeftRadius:8, padding:5  }}
-                left_color={Colors.incentive.gold}
+                left_color={C.text.gold}
                 right_color={'#ebd197'}
             />
             :<></>}
             {show_event ?
-            <View style={{ padding:5, backgroundColor:Colors.shades.shade100 }}>
-                <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='semibold'>{tournament.tournament_name}</Text>
+            <View transparent style={{ padding:5 }}>
+                <Text theme='description'>{tournament.tournament_name}</Text>
             </View>
             :<></>}
-            <View style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column' }}>
-                <View style={{ ...view_styles.section_body, flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:2, padding:0, justifyContent:'center', alignItems:'center' }}>
+            <View transparent style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column' }}>
+                <View transparent style={{ ...view_styles.section_body, flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:2, padding:0, justifyContent:'center', alignItems:'center' }}>
                     <TeamImage
                         team={team}
                         size={24}
                     />
-                    <View style={{ padding:10, paddingBottom:0 }}>
-                        <Text weight='bold' size={14} color={Colors.brand.midnight} textAlign='center'>{team.market_name} {team.name}</Text>
-                        <Text style={{ marginTop:3 }} color={Colors.brand.midnight} weight='regular' textAlign='center' size={12}>{team.division}</Text>
+                    <View transparent style={{ padding:10, paddingBottom:0 }}>
+                        <Text theme='h2' textAlign='center'>{team.market_name} {team.name}</Text>
+                        <Text style={{ marginTop:3 }} theme='light' textAlign='center' size={12}>{team.division}</Text>
                     </View>
                 </View>
-                <View nativeID='market_sides' style={{ flexDirection:'row',flexGrow:1.5, justifyContent:'center', alignItems:'center', padding:10 }}>
+                <View transparent nativeID='market_sides' style={{ flexDirection:'row',flexGrow:1.5, justifyContent:'center', alignItems:'center', padding:10 }}>
                     {market.side_options.sort((a,b) => {
                         let a_t = a.side == market.trade_side ? 1 : 0
                         let b_t = b.side == market.trade_side ? 1 : 0
@@ -106,8 +103,8 @@ const TeamTournamentMarket = ({ tournament, direction, show_event, hide_liquidit
                 </View>
             </View>
             {!hide_liquidity ?
-            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
-                <TouchableOpacity style={{ flex:1, flexDirection:'row' }} onPress={() => {
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                <Button transparent style={{ flexGrow:1, flexDirection:'row', padding:10 }} onPress={() => {
                     onView({
                         event_id: tournament.tournament_id, 
                         event_type: 'tournament', 
@@ -116,22 +113,19 @@ const TeamTournamentMarket = ({ tournament, direction, show_event, hide_liquidit
                         side_id: team.team_id
                     });
                 }}>
-                    <View style={{ backgroundColor:Colors.shades.white, height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
-                        <Icons.LiquidityIcon color={Colors.brand.midnight} size={30}/>
+                    <View float style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.LiquidityIcon color={C.text.h1} size={30}/>
                     </View>
-                    <View style={{ marginLeft:10 }}>
-                        <Text theme='body_2'>Liquidity</Text>
-                        <Text size={12} color={Colors.brand.electric} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
+                    <View transparent style={{ marginLeft:10 }}>
+                        <Text theme='description'>Liquidity</Text>
+                        <Text size={12} style={{ marginTop:3 }} color={C.text.highlight} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
                     </View>
-                </TouchableOpacity>
+                </Button>
             </View>
             :<></>}
         </View>
     )
 }
 
-const styles = StyleSheet.create({
-    container_style: { ...view_styles.section, flexGrow:1, borderWidth:1, borderColor:Colors.shades.shade600 }
-})
 
 export default TeamTournamentMarket

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

@@ -1,9 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, FlatList, TouchableOpacity, ActivityIndicator, Image, ScrollView } from 'react-native';
-import { view_styles } from '../../../constants/styles';
+import { FlatList, ActivityIndicator, Image } from 'react-native';
 import Colors from '../../../constants/colors';
 import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, LeagueProps, MarketProps, MatchProps, OrderProps, TeamProps, TournamentProps, TradeProps } from '../../../types';
-import { Button, Icons, LinearDiagnal, Text, TextInput } from '../../../Components';
+import { Icons, LinearDiagnal } from '../../../Components';
 import { MarketComponentApi, MarketComponentHelpers } from '../../api';
 import AthleteTournamentMarket from '../AthleteTournamentMarket';
 import TeamTournamentMarket from '../TeamTournamentMarket';
@@ -11,6 +10,8 @@ import MatchMarket from '../MatchMarket';
 import moment from 'moment-mini';
 import { TournamentMarketHelpers } from './api';
 import { useIsInViewport } from '../../../Components/ViewportObserver';
+import { Button, Text, TextInput, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 
 
 type TournamentMarketProps = {
@@ -19,8 +20,10 @@ type TournamentMarketProps = {
     markets:MarketProps[],
     hide_liquidity?:boolean,
     width?:number,
+    style?:any,
     hide_match_liquidity?:boolean,
     show_grades?:boolean,
+    float?:boolean,
     hide_participant_liquidity?:boolean,
     activate_loading?:boolean,
     wrap_markets?:boolean,
@@ -39,7 +42,8 @@ type TournamentMarketProps = {
     onOrder:(order:OrderProps) => void
 }
 
-const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_location, hide_match_liquidity, show_grades, hide_participant_liquidity, league, markets, latest_trades, hide_liquidity, best_available_orders, event_order_stats, match_available_orders, match_latest_trades, match_order_stats, activate_loading, onView, onTradeLongPress, onViewAdditionalMarkets, onOrder, onActivate, onShare }:TournamentMarketProps) => {
+const TournamentMarket = ({ tournament, float, wrap_markets, width, style, market_selector_location, hide_match_liquidity, show_grades, hide_participant_liquidity, league, markets, latest_trades, hide_liquidity, best_available_orders, event_order_stats, match_available_orders, match_latest_trades, match_order_stats, activate_loading, onView, onTradeLongPress, onViewAdditionalMarkets, onOrder, onActivate, onShare }:TournamentMarketProps) => {
+    const C = useColors();
     const [ search_value, setSearchValue ] = useState<string | undefined>(undefined);
     const [ tournament_data, setTournamentData ] = useState<{
         loaded:boolean,
@@ -61,6 +65,7 @@ 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);
+    console.log(loaded, loading)
     const ref = useRef(null);
     const is_in_viewport = useIsInViewport(ref)
 
@@ -80,7 +85,7 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
     if(!wrap_markets){ sorted_matches = sorted_matches.filter(m => !['closed','cancelled','postponed','suspended'].includes(m.status)) }
     const market_width = TournamentMarketHelpers.getMarketWrapWidth(50, width, wrap_markets)
     useEffect(() => {
-        if(!is_in_viewport || loaded || loading){ return }
+        if(loaded || loading){ return }
         MarketComponentApi.setEnvironment();
         getTournamentData(tournament)
     },[is_in_viewport, tournament.tournament_id]);
@@ -120,12 +125,12 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
 
     const renderMarkets = (data: { item:MarketProps, index:number }) => {
         return (
-            <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => {
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:C.borders.light }} onPress={() => {
                 setTournamentData({ ...tournament_data, active_market: data.item });
                 setShowMarkets(false);
             }}>
-                <Text size={12} color={Colors.brand.midnight} weight='semibold'>{data.item.type == 'Stat' ? data.item.stat_label : data.item.type}</Text>
-            </TouchableOpacity>
+                <Text size={12} theme='h2'>{data.item.type == 'Stat' ? data.item.stat_label : data.item.type}</Text>
+            </Button>
         )
     }
 
@@ -144,10 +149,12 @@ 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 key={`${tournament.tournament_id}_${data.item.match_id}`}>
+            <View key={`${tournament.tournament_id}_${data.item.match_id}`} style={{ margin:4 }}>
                 <MatchMarket
                     match={data.item}
                     league={league}
+                    float
+                    style={{ flexGrow:1 }}
                     away_athlete={away_athlete}
                     home_athlete={home_athlete}
                     away_team={away_team}
@@ -175,7 +182,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 key={`${tournament.tournament_id}_${data.item.team_id.toString()}`}>
+            <View key={`${tournament.tournament_id}_${data.item.team_id.toString()}`} style={{ margin:4 }}>
                 <TeamTournamentMarket
                     team={data.item}
                     event_type='tournament'
@@ -183,6 +190,7 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
                     onView={onView}
                     width={wrap_markets ? market_width : undefined}
                     show_grades={show_grades}
+                    float
                     hide_liquidity={hide_participant_liquidity ? true : false}
                     tournament={tournament}
                     event_order_stats={team_order_stats}
@@ -202,12 +210,14 @@ 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 key={`${tournament.tournament_id}_${data.item.athlete_id.toString()}`}>
+            <View key={`${tournament.tournament_id}_${data.item.athlete_id.toString()}`} style={{ margin:4 }}>
                 <AthleteTournamentMarket
                     athlete={data.item}
                     event_type='tournament'
                     onTradeLongPress={onTradeLongPress}
                     onView={onView}
+                    float
+                    style={{ flexGrow:1 }}
                     show_grades={show_grades}
                     hide_liquidity={hide_participant_liquidity ? true : false}
                     tournament={tournament}
@@ -224,8 +234,8 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
     }
 
     return (
-        <View ref={ref} style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600 }}>
-            <View style={{ ...view_styles.section_header }}>
+        <View float={float} style={[{ borderRadius:8 }, style]}>
+            <View type='header' transparent nativeID='event_header_data' style={{ flexDirection:'row', alignItems:'center', flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:C.borders.light }}>
                 {league ?
                 <Image
                     source={{ uri: league.league_image }}
@@ -233,9 +243,9 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
                     resizeMode='cover'
                 />
                 :<></>}
-                <View style={{ flex:1 }}>
-                    <Text theme='header_2'>{tournament.tournament_name}</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>{moment(tournament.scheduled_datetime).format('MMM DD YYYY')}</Text>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h2'>{tournament.tournament_name}</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>{moment(tournament.scheduled_datetime).format('MMM DD YYYY')}</Text>
                 </View>
                 {onActivate && tournament.status != 'closed' ?
                 <Button
@@ -249,67 +259,68 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
                 />
                 :<></>}
                 {onShare ?
-                <TouchableOpacity style={{ marginLeft:10 }} onPress={() => onShare(tournament)}>
-                    <Icons.ShareIcon size={14} color={Colors.brand.electric} />
-                </TouchableOpacity>
+                <Button style={{ marginLeft:10 }} onPress={() => onShare(tournament)}>
+                    <Icons.ShareIcon size={14} color={C.text.action} />
+                </Button>
                 :<></>}
             </View>
             {loading || !loaded ?
-            <View style={{ padding:20 }}>
-                <ActivityIndicator size={'large'} color={Colors.brand.midnight} />
+            <View transparent style={{ padding:20 }}>
+                <ActivityIndicator size={'large'} color={C.text.h1} />
             </View>
             :
-            <View>
+            <View type='body' transparent style={{ flexGrow:1 }}>
             {market_selector_location == 'top_right' ?
-            <View style={{ ...view_styles.body_row, paddingLeft:10, paddingRight:10, zIndex:1, backgroundColor:Colors.shades.shade100 }}>
-                <View style={{ flexDirection:'row', alignItems:'center', flex:1, marginRight:10, paddingLeft:10, backgroundColor:Colors.shades.white, borderRadius:22 }}>
-                    <Icons.SearchIcon color={Colors.brand.electric} size={18} />
-                    <TextInput
-                        style={{ flex:1, marginLeft:10, borderRadius:0, borderTopRightRadius:22, borderBottomRightRadius:22 }}
-                        placeholder='Search athletes, teams, matches ...'
-                        placeholderTextColor={Colors.accents.accent200}
-                        onChangeText={(text) => setSearchValue(text)}
-                    />
-                </View>
-                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:4, padding:10, ...view_styles.float }} onPress={() => setShowMarkets(!show_markets)}>
-                    <Text style={{ marginRight:10 }} size={14} color={Colors.brand.midnight}>{active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type}</Text>
-                    <Icons.ChevronIcon color={Colors.brand.midnight} size={14} />
-                </TouchableOpacity>
-                {show_markets ?
-                <View style={{ ...view_styles.section, position:'absolute', top:5, right:5, minWidth:175 }}>
-                    <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header_2'>Select Market</Text>
+                <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10, zIndex:1 }}>
+                    <View type='input' style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                        <View transparent style={{ padding:5, paddingLeft:10, paddingRight:10 }}>
+                            <Icons.SearchIcon color={C.text.action} size={18} />
                         </View>
-                        <Button
-                            title='X'
-                            title_weight='regular'
-                            borderRadius={100}
-                            backgroundColor={Colors.shades.white}
-                            padding={5}
-                            onPress={() => setShowMarkets(false)}
+                        <TextInput
+                            style={{ flex:1}}
+                            transparent
+                            placeholder='Search athletes, teams, matches ...'
+                            onChangeText={(text) => setSearchValue(text)}
                         />
                     </View>
-                    <View style={{ ...view_styles.section_body, padding:10 }}>
-                        <FlatList
-                            data={supported_markets}
-                            renderItem={renderMarkets}
-                            keyExtractor={(item) => item.market_id.toString()}
-                        />
+                    <Button float style={{ flexDirection:'row', alignItems:'center', marginLeft:5 }} onPress={() => setShowMarkets(!show_markets)}>
+                        <Text style={{ marginRight:10 }} size={14} color={C.text.h1}>{active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type}</Text>
+                        <Icons.ChevronIcon color={C.text.h1} size={14} />
+                    </Button>
+                    {show_markets ?
+                    <View transparent float style={{ position:'absolute', top:5, right:5, minWidth:175 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:5, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h2'>Select Market</Text>
+                            </View>
+                            <Button
+                                title='X'
+                                title_color={C.text.action}
+                                style={{ borderRadius:100, padding:5, paddingLeft:10, paddingRight:10 }}
+                                type='close'
+                                onPress={() => setShowMarkets(false)}
+                            />
+                            
+                        </View>
+                        <View transparent style={{ padding:10 }}>
+                            <FlatList
+                                data={supported_markets}
+                                renderItem={renderMarkets}
+                                keyExtractor={(item) => item.market_id.toString()}
+                            />
+                        </View>
                     </View>
+                    :<></>}
                 </View>
-                :<></>}
-            </View>
             :<></>}
             <View style={{ flexDirection:'row', alignItems:'center' }}>
                 <View style={{flex:1}}>
-                    <LinearDiagnal label_size={14} label={active_type == 'futures' ? 'FUTURES' : 'MATCHES'} left_color={Colors.utility.warning} right_color={Colors.utility.error}/>
+                    <LinearDiagnal label_size={14} label={active_type == 'futures' ? 'FUTURES' : 'MATCHES'} left_color={C.text.warning} right_color={C.text.error}/>
                 </View>
                 {((active_type == 'matches' && show_futures) || (active_type == 'futures' && show_matches)) ?
                 <Button
                     title={`SEE ${active_type == 'futures' ? 'MATCHES' : 'FUTURES'}`}
-                    padding={15}
-                    title_color={Colors.brand.electric}
+                    type='close'
                     onPress={() => {
                         let new_active_market = active_market
                         if(active_type == 'futures'){
@@ -324,15 +335,13 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
                 :<></>}
             </View>
             {active_type == 'futures' && show_teams && teams.length > 0 ?
-            <View>
+            <View transparent style={{ padding:10 }}>
                 {wrap_markets ?
-                <ScrollView>
-                    <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
-                        {sorted_teams.map((t,i) => {
-                            return renderTeams({ item:t, index:i })
-                        })}
-                    </View>
-                </ScrollView>
+                <View transparent style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                    {sorted_teams.map((t,i) => {
+                        return renderTeams({ item:t, index:i })
+                    })}
+                </View>
                 :
                 <FlatList
                     data={sorted_teams}
@@ -344,9 +353,9 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
             </View>
             :<></>}
             {active_type == 'futures' && show_athletes && athletes.length > 0 ?
-            <View>
+            <View transparent style={{ padding:10 }}>
                 {wrap_markets ?
-                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                <View transparent style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
                     {sorted_athletes.map((a,i) => {
                         return renderAthletes({ item:a, index:i })
                     })}
@@ -361,9 +370,9 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
                 }
             </View>
             :active_type == 'matches' && show_matches && matches.length > 0 ?
-            <View>
+            <View transparent style={{ padding:10 }}>
                 {wrap_markets ?
-                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                <View transparent style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
                     {sorted_matches.map((m,i) => {
                         return renderMatches({ item:m, index:i })
                     })}
@@ -381,51 +390,52 @@ const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_loc
             </View>
             }
             
-            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+            <View type='footer' style={{  flexDirection:'row', alignItems:'center', padding:10, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                
                 {!hide_liquidity ?
-                <TouchableOpacity style={{ flex:1, flexDirection:'row', minWidth:115 }} onPress={() => {
+                <Button transparent style={{ flexGrow:1, flexDirection:'row', padding:10 }} onPress={() => {
                     if(!active_market){ return }
                     onViewAdditionalMarkets(tournament.tournament_id, 'tournament');
                 }}>
-                    <View style={{ backgroundColor:Colors.shades.white, height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
-                        <Icons.LiquidityIcon color={Colors.brand.midnight} size={30}/>
+                    <View float style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.LiquidityIcon color={C.text.h1} size={30}/>
                     </View>
-                    <View style={{ marginLeft:5 }}>
-                        <Text theme='body_2'>Tournament Liquidity</Text>
-                        <Text size={12} color={Colors.brand.electric} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
+                    <View transparent style={{ marginLeft:10 }}>
+                        <Text theme='description'>Liquidity</Text>
+                        <Text size={12} style={{ marginTop:3 }} color={C.text.highlight} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
                     </View>
-                </TouchableOpacity>
-                :<View style={{flex:1}} />}
+                </Button>
+                :<View transparent style={{flex:1}} />}
                 {!market_selector_location ?
-                <View>
-                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:4, padding:10, ...view_styles.float }} onPress={() => setShowMarkets(!show_markets)}>
-                    <Text style={{ marginRight:10 }} size={14} color={Colors.brand.midnight}>{active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type}</Text>
-                    <Icons.ChevronIcon color={Colors.brand.midnight} size={14} />
-                </TouchableOpacity>
-                {show_markets ?
-                <View style={{ ...view_styles.section, position:'absolute', bottom:5, right:5, minWidth:175 }}>
-                    <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header_2'>Select Market</Text>
+                <View transparent>
+                <Button float style={{ flexDirection:'row', alignItems:'center', marginLeft:5 }} onPress={() => setShowMarkets(!show_markets)}>
+                        <Text style={{ marginRight:10 }} size={14} color={C.text.h1}>{active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type}</Text>
+                        <Icons.ChevronIcon color={C.text.h1} size={14} />
+                    </Button>
+                    {show_markets ?
+                    <View transparent float style={{ position:'absolute', bottom:5, right:5, minWidth:175 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:5, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h2'>Select Market</Text>
+                            </View>
+                            <Button
+                                title='X'
+                                title_color={C.text.action}
+                                style={{ borderRadius:100, padding:5, paddingLeft:10, paddingRight:10 }}
+                                type='close'
+                                onPress={() => setShowMarkets(false)}
+                            />
+                            
+                        </View>
+                        <View transparent style={{ padding:10 }}>
+                            <FlatList
+                                data={supported_markets}
+                                renderItem={renderMarkets}
+                                keyExtractor={(item) => item.market_id.toString()}
+                            />
                         </View>
-                        <Button
-                            title='X'
-                            title_weight='regular'
-                            borderRadius={100}
-                            backgroundColor={Colors.shades.white}
-                            padding={5}
-                            onPress={() => setShowMarkets(false)}
-                        />
-                    </View>
-                    <View style={{ ...view_styles.section_body, padding:10 }}>
-                        <FlatList
-                            data={supported_markets}
-                            renderItem={renderMarkets}
-                            keyExtractor={(item) => item.market_id.toString()}
-                        />
                     </View>
-                </View>
-                :<></>}
+                    :<></>}
                 </View>
                 :<></>}
             </View>