be-components 3.3.5 → 3.3.7

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { View, Image, FlatList, TouchableOpacity, ActivityIndicator, ScrollView, StyleSheet } from 'react-native';
+import { Image, FlatList, ActivityIndicator, ScrollView } from 'react-native';
 import type { AthleteProps, BEEventProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, LeagueProps, MarketProps, MarketSideOptionProps, OrderProps, PodcastProps, SquaresCompetitionProps, TradeProps } from '../../../types';
 import { view_styles } from '../../../constants/styles';
-import { Button, Icons, LinearDiagnal, Text } from '../../../Components';
+import { Icons, LinearDiagnal } from '../../../Components';
 import {TeamEventMarketHelpers} from './api';
 import MarketButton from '../../components/MarketButton';
 import Colors from '../../../constants/colors';
@@ -15,6 +15,8 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { useIsInViewport } from '../../../Components/ViewportObserver';
 import ContestStatsCard from '../ContestStats';
 import PodcastCard from '../PodcastCard';
+import { Button, Text, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 
 type TeamEventMarketProps = {
     event:EventProps,
@@ -24,6 +26,7 @@ type TeamEventMarketProps = {
     competitions?:CompetitionProps[],
     show_id?:string,
     hide_liquidity?:boolean,
+    float?:boolean,
     hot_markets_direction?:'vertical'|'horizontal'
     show_podcasts?:boolean,
     squares_competitions?:SquaresCompetitionProps[],
@@ -47,11 +50,9 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_direction, show_id, hide_liquidity, show_podcasts, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onTeamSelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
-    let set_style = { ...styles.container_style }
-    if(style){
-        set_style = style
-    }
+const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_markets_direction, show_id, hide_liquidity, show_podcasts, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onTeamSelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
+    const C = useColors();
+    
     const [ market_width, setMarketWidth ] = useState(180);
     const [ expanded_data, setExpandedData ] = useState<{
         expanded:boolean,
@@ -155,39 +156,45 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
 
     const renderCompetitions = (data:{ item:CompetitionProps, index: number }) => {
         return (
-            <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => {
-                setCompetitionsExpanded(false);
-                onCompetitionSelect(data.item.competition_id)
-            }}>
+            <Button 
+                type='text'
+                style={{ flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:C.borders.light }} 
+                onPress={() => {
+                    setCompetitionsExpanded(false);
+                    onCompetitionSelect(data.item.competition_id)
+                }}>
                 <Image
                     source={{ uri: data.item.image?.url }}
                     style={{ height:25, width:25 }}
                     resizeMode='cover'
                 />
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='header_2'>{data.item.competition_name}</Text>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='description'>{data.item.competition_name}</Text>
                 </View>
-                <Icons.ChevronIcon direction='right' size={10} color={Colors.brand.midnight} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' size={10} color={C.text.h1} />
+            </Button>
         )
     }
 
     const renderSquaresCompetitions = (data:{ item:SquaresCompetitionProps, index: number }) => {
         return (
-            <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => {
-                setSquaresExpanded(false);
-                onSquaresSelect(data.item.sq_comp_id)
-            }}>
+            <Button 
+                type='text'
+                style={{ flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:C.borders.light }} 
+                onPress={() => {
+                    setCompetitionsExpanded(false);
+                    onSquaresSelect(data.item.sq_comp_id)
+                }}>
                 <Image
                     source={{ uri: data.item.image?.url }}
                     style={{ height:25, width:25 }}
                     resizeMode='cover'
                 />
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='header_2'>{data.item.sq_comp_name}</Text>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='description'>{data.item.sq_comp_name}</Text>
                 </View>
-                <Icons.ChevronIcon direction='right' size={10} color={Colors.brand.midnight} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' size={10} color={C.text.h1} />
+            </Button>
         )
     }
 
@@ -201,7 +208,7 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
         }
         if(!trade){ return <></> }
         return (
-            <View key={`${event.event_id}_${data.item.side}`} style={{ margin:2, width:primary_width, height:50 }}>
+            <View transparent key={`${event.event_id}_${data.item.side}`} style={{ margin:2, width:primary_width, height:50 }}>
                 <MarketButton
                     side_option={data.item}
                     market={data.market}
@@ -222,8 +229,8 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
 
     const renderMarketHeaders = useCallback((data:{ item:MarketProps, index:number }) => {
         return (
-            <View style={{ width:primary_width, marginLeft:2, marginRight:2 }}>
-                <Text size={12} color={Colors.brand.midnight} textAlign='center'>{data.item.type.toUpperCase()}</Text>
+            <View transparent style={{ width:primary_width, marginLeft:2, marginRight:2 }}>
+                <Text size={12} color={C.text.h1} textAlign='center'>{data.item.type.toUpperCase()}</Text>
             </View>
         )
     },[primary_markets.length, primary_width])
@@ -253,11 +260,12 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
                 const athlete_trades = latest_trades.filter(t => t.market_type == 'FOR_MONEY' && t.market_id == data.item.market_id && t.side_type == 'athlete' && t.side_id == data.item.side_id);
                 const athlete_orders = best_available_orders.filter(t => t.market_id == data.item.market_id && t.side_type == 'athlete' && t.side_id == data.item.side_id);
                 return (
-                    <View style={{ flexGrow:1 }}>
+                    <View transparent style={{ flexGrow:1 }}>
                         <AthleteMarket
                             event={event}
                             event_type='team'
                             athlete={athlete}
+                            float
                             direction={hot_markets_direction=='vertical' ? 'horizontal' : 'vertical'}
                             show_grades={show_grades}
                             market={market}
@@ -276,10 +284,11 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
                 const event_trades = latest_trades.filter(t => t.market_type == 'FOR_MONEY' && t.market_id == data.item.market_id);
                 const event_orders = best_available_orders.filter(t => t.market_id == data.item.market_id);
                 return (
-                    <View>
+                    <View transparent style={{ flexGrow:1 }}>
                         <EventMarket
                             event={event}
                             market={market}
+                            float
                             direction={hot_markets_direction=='vertical' ? 'horizontal' : 'vertical'}
                             hide_liquidity={hide_liquidity}
                             onTradeLongPress={onTradeLongPress}
@@ -300,7 +309,7 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
     const renderPrimaryMarkets = useCallback((data:{ item:MarketProps, index:number }) => {
         const is_locked = MarketComponentHelpers.isEventMarketLocked(event, data.item.market_id);
         return (
-            <View>
+            <View transparent>
                 <FlatList
                     key={`${event.event_id}_side_options`}
                     scrollEnabled={false}
@@ -322,9 +331,9 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
     const { non_primary_markets, available } = useMemo(() => TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades),[])
 
     return (
-        <View ref={ref} style={set_style}>
+        <View float={float} style={[style]}>
             {sponsor ?
-            <LinearGradient style={{ marginTop:-1, marginLeft:-1, marginRight:-1, padding:10, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8 }} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[sponsor.brand_primary ?? Colors.brand.midnight, sponsor.brand_secondary ?? Colors.brand.cyan]}>
+            <LinearGradient style={{ marginTop:-1, marginLeft:-1, marginRight:-1, padding:10, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8 }} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[sponsor.brand_primary ?? C.text.h1, sponsor.brand_secondary ?? C.text.h1]}>
                 <View style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.shades.white }}>
                     <Image
                         source={{ uri: sponsor.company_image?.url }}
@@ -359,14 +368,14 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
                 />
                 :<></>}
                 {onShare ?
-                <TouchableOpacity style={{ marginLeft:10 }} onPress={() => onShare(event)}>
-                    <Icons.ShareIcon size={14} color={Colors.brand.electric} />
-                </TouchableOpacity>
+                <Button type='text' style={{ marginLeft:10 }} onPress={() => onShare(event)}>
+                    <Icons.ShareIcon size={14} color={C.text.action} />
+                </Button>
                 :<></>}
             </LinearGradient>
             :
-            <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' }}>
+            <View transparent nativeID='event_header_data' style={{ flexDirection:'row', alignItems:'center', flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:C.borders.light }}>
+                <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
                     {league ?
                     <Image
                         source={{ uri: league.league_image }}
@@ -375,99 +384,106 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
                     />
                     :<></>}
                     {show_id ?
-                    <Text style={{ marginLeft:2, marginRight:3 }} size={12} color={Colors.brand.midnight} weight='semibold' selectable>{event.event_id} </Text>
+                    <Text style={{ marginLeft:2, marginRight:3 }} theme='description' selectable>{event.event_id} </Text>
                     :<></>}
                     {event.event_sub_title ?
-                    <Text size={12} color={Colors.brand.midnight} weight='semibold'>{event.event_sub_title}</Text>
+                    <Text size={12} theme='description'>{event.event_sub_title}</Text>
                     :<></>}
                 </View>
                 <View style={{ flexDirection:'row', alignItems:'center' }}>
-                    <Icons.TVIcon size={10} color={Colors.brand.midnight} />
-                    <Text style={{ marginLeft:8 }} size={12} color={Colors.brand.midnight} weight='semibold'>{event.info?.broadcast?.network}</Text>
+                    <Icons.TVIcon size={16} color={C.text.h1} />
+                    <Text style={{ marginLeft:8 }} theme='description'>{event.info?.broadcast?.network}</Text>
                 </View>
                 {onActivate && event_status != 'closed' ?
                 <Button
                     title={event_status == 'active' ? 'Refresh' : 'Activate'}
-                    style={{ opacity: activate_loading ? 0.5 : 1, marginLeft:5 }}
+                    style={{ opacity: activate_loading ? 0.5 : 1, marginLeft:5, padding:10 }}
                     disabled={activate_loading}
                     loading={activate_loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={() => onActivate(event.event_id, 'team')}
                 />
                 :<></>}
                 {onShare ?
-                <TouchableOpacity style={{ marginLeft:10 }} onPress={() => onShare(event)}>
-                    <Icons.ShareIcon size={14} color={Colors.brand.electric} />
-                </TouchableOpacity>
+                <Button type='text' style={{ marginLeft:10 }} onPress={() => onShare(event)}>
+                    <Icons.ShareIcon size={14} color={C.text.action} />
+                </Button>
                 :<></>}
             </View>
             }
-            <View nativeID='primary_markets' style={{ flexDirection:'row' }}>
-                <View nativeID='team_details' style={{ flex:1, padding:5, paddingRight:0 }}>
-                    <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', marginTop:5, marginBottom:5, marginLeft:10 }} onPress={() => setShowStats(!show_stats)}>
+            <View transparent nativeID='primary_markets' style={{ flexDirection:'row' }}>
+                <View transparent nativeID='team_details' style={{ flex:1, padding:5, paddingRight:0 }}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', marginTop:5, marginBottom:5, marginLeft:10 }}>
                         {show_stats ?
                         <Button
                             title='X'
-                            title_size={10}
-                            padding={0}
-                            style={{ marginRight:5 }}
-                            disabled={true}
+                            style={{ marginRight:5, padding:10 }}
+                            type='error'
                             title_color={Colors.utility.error}
-                            onPress={() => console.log('')}
+                            onPress={() => setShowStats(!show_stats)}
                         />
                         :<></>}
                         {!show_stats ?
-                            <View style={{ marginRight:5, height:10, width:10, borderRadius:100, backgroundColor:event_status=='active'?Colors.utility.success:event_status=='inactive'?Colors.brand.electric:Colors.utility.error }} />
+                            <View style={{ marginRight:5, height:10, width:10, borderRadius:100, backgroundColor:event_status=='active'?C.text.success:event_status=='inactive'?C.text.action:C.text.error }} />
                         :<></>}
                         
-                        <Text size={12} color={show_stats ? Colors.utility.error : Colors.brand.electric}>{show_stats ? 'Hide Boxscore': `${TeamEventMarketHelpers.getTimeDetail(event)}`}</Text>
-                    </TouchableOpacity>
-                    <TouchableOpacity disabled={!onTeamSelect} style={{ ...view_styles.body_row, minHeight:48 }} onPress={() => onTeamSelect ? onTeamSelect(event.away_team_id) : console.log('')}>
+                        <Text size={12} color={show_stats ? C.text.error : C.text.action}>{show_stats ? 'Hide Boxscore': `${TeamEventMarketHelpers.getTimeDetail(event)}`}</Text>
+                    </View>
+                    <Button 
+                        disabled={!onTeamSelect} 
+                        style={{ ...view_styles.body_row, minHeight:48 }} 
+                        type='text'
+                        onPress={() => onTeamSelect ? onTeamSelect(event.away_team_id) : console.log('')}
+                        >
                         <Image
                             source={{ uri: event.away.image?.url }}
                             style={{ height:30, width:30 }}
                             resizeMode='cover'
                         />
-                        <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:5 }}>
+                        <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:5 }}>
                             {event.away.rank ?
-                            <Text style={{ marginRight:3 }} size={12} color={Colors.brand.cyan} weight='semibold'>{event.away.rank}</Text>
+                            <Text style={{ marginRight:3 }} size={12} color={C.text.highlight} weight='semibold'>{event.away.rank}</Text>
                             :<></>}
-                            <View style={{ flex:1, marginRight:5 }}>
-                                <Text theme='header_2'>{event.away.market_name} {event.away.name}</Text>
+                            <View transparent style={{ flex:1, marginRight:5 }}>
+                                <Text theme='h2'>{event.away.market_name} {event.away.name}</Text>
                                 {event.away_sub_title ?
-                                <Text style={{ marginTop:3 }} theme='body_2'>{event.away_sub_title}</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>{event.away_sub_title}</Text>
                                 :<></>}
                             </View>
-                            <Text theme='body'>{event.away_team_score}</Text>
+                            <Text theme='description'>{event.away_team_score}</Text>
                         </View>
-                    </TouchableOpacity>
-                    <TouchableOpacity disabled={!onTeamSelect} style={{ ...view_styles.body_row, minHeight:48 }} onPress={() => onTeamSelect ? onTeamSelect(event.home_team_id) : console.log('')}>
+                    </Button>
+                    <Button 
+                        disabled={!onTeamSelect} 
+                        style={{ ...view_styles.body_row, minHeight:48 }} 
+                        type='text'
+                        onPress={() => onTeamSelect ? onTeamSelect(event.home_team_id) : console.log('')}
+                        >
                         <Image
                             source={{ uri: event.home.image?.url }}
                             style={{ height:30, width:30 }}
                             resizeMode='cover'
                         />
-                        <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:5 }}>
+                        <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:5 }}>
                             {event.home.rank ?
-                            <Text style={{ marginRight:3 }} size={12} color={Colors.brand.cyan} weight='semibold'>{event.home.rank}</Text>
+                            <Text style={{ marginRight:3 }} size={12} color={C.text.highlight} weight='semibold'>{event.home.rank}</Text>
                             :<></>}
-                            <View style={{ flex:1, marginRight:5 }}>
-                                <Text theme='header_2'>{event.home.market_name} {event.home.name}</Text>
+                            <View transparent style={{ flex:1, marginRight:5 }}>
+                                <Text theme='h2'>{event.home.market_name} {event.home.name}</Text>
                                 {event.home_sub_title ?
-                                <Text style={{ marginTop:3 }} theme='body_2'>{event.home_sub_title}</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>{event.home_sub_title}</Text>
                                 :<></>}
                             </View>
-                            <Text theme='body'>{event.home_team_score}</Text>
+                            <Text theme='description'>{event.home_team_score}</Text>
                         </View>
-                    </TouchableOpacity>
+                    </Button>
                 </View>
                 {event_status == 'active' ?
-                <View nativeID='primary_market_details' style={{ padding:5, flex:1 }} onLayout={(ev) => {
+                <View transparent nativeID='primary_market_details' style={{ padding:5, flex:1 }} onLayout={(ev) => {
                     const { width } = ev.nativeEvent.layout
                     setMarketWidth(width);
                 }}>
-                    <View style={{ marginTop:5, marginBottom:5 }}>
+                    <View transparent style={{ marginTop:5, marginBottom:5 }}>
                         <FlatList
                             key={`${event.event_id}_market_headers`}
                             data={primary_markets}
@@ -487,70 +503,84 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
                     />
                 </View>
                 : 
-                <TouchableOpacity disabled={!onActivate ? true: false} style={{ flex:0.5, padding:10, justifyContent:'center', alignItems:'center' }} onPress={() => onActivate ? onActivate(event.event_id, 'team') : console.log('')}>
-                    <Icons.MarketClosedIcon size={60} color={Colors.brand.midnight} />
-                </TouchableOpacity>
+                <Button 
+                    disabled={!onActivate ? true: false} 
+                    style={{ flex:0.5, justifyContent:'center', alignItems:'center' }} 
+                    type='text'
+                    transparent
+                    onPress={() => onActivate ? onActivate(event.event_id, 'team') : console.log('')}
+                    >
+                    <Icons.MarketClosedIcon size={60} color={C.text.h1} />
+                </Button>
                 }
             </View>
             {event_status == 'active' ?
-            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+            <View type='footer' style={{ padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
                 {!hide_liquidity ?
-                <TouchableOpacity style={{ flex:1, flexDirection:'row', minWidth:115 }} onPress={() => {
+                <Button 
+                style={{ flex:1, flexDirection:'row', minWidth:115, padding:0 }} 
+                type='text'
+                
+                onPress={() => {
                     if(!primary_markets[0]){ return }
                     onView({ event_id: event.event_id, event_type:'team', market_id: primary_markets[0].market_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 transparent 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'>Liquidity</Text>
-                        <Text size={12} color={Colors.brand.electric} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
+                    <View transparent style={{ marginLeft:5 }}>
+                        <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>
                 :<></>}
                 {squares_competitions && squares_competitions.length > 0 ?
-                <TouchableOpacity 
-                    style={{ marginRight:5, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, backgroundColor:Colors.highlights.highlight100, ...view_styles.float }}
+                <Button 
+                    float
+                    type='squares'
+                    style={{ marginRight:5, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
                     onPress={() => handleSelectSquares()}>
-                    <Icons.SquaresIcon size={18} color={Colors.shades.white} />
-                    <Text style={{ marginLeft:5 }} size={14} color={Colors.shades.white} weight='semibold'>Squares</Text>
-                </TouchableOpacity>
+                    <Icons.SquaresIcon size={18} color={C.text.white} />
+                    <Text style={{ marginLeft:5 }} size={14} color={C.text.white} weight='semibold'>Squares</Text>
+                </Button>
                 :<></>}
                 {competitions && competitions.length > 0 ?
-                <TouchableOpacity 
-                    style={{ marginRight:5, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, backgroundColor:Colors.highlights.highlight500, ...view_styles.float }}
+                <Button 
+                    float
+                    type='competition'
+                    style={{ marginRight:5, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
                     onPress={() => handleSelectCompetition()}>
-                    <Icons.PickEmIcon size={14} color={Colors.shades.white} />
-                    <Text style={{ marginLeft:5 }} size={14} color={Colors.shades.white} weight='semibold'>MultiPick</Text>
-                </TouchableOpacity>
+                    <Icons.PickEmIcon size={14} color={C.text.white} />
+                    <Text style={{ marginLeft:5 }} size={14} color={C.text.white} weight='semibold'>MultiPick</Text>
+                </Button>
                 :<></>}
                 {non_primary_markets.length > 0 ?
-                <TouchableOpacity style={{ height:35, width:35, justifyContent:'center', borderRadius:100, alignItems:'center', backgroundColor:Colors.shades.white, ...view_styles.float }} onPress={() => expandedEvent()}>
-                   <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.brand.midnight} />
-                </TouchableOpacity>
+                <Button 
+                    float
+                    style={{ height:35, width:35, justifyContent:'center', borderRadius:100, alignItems:'center' }} 
+                    onPress={() => expandedEvent()}
+                >
+                   <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={C.text.h1} />
+                </Button>
                 :available ?
                 <Button
                     title='MORE'
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
+                    type='info'
                     onPress={() => onViewAdditionalMarkets(event.event_id, 'team')}
                 />
                 :<></>}
                 {competitions && competitions_expanded ?
-                <View style={{ position:'absolute', bottom:0, right:0, ...view_styles.section, minWidth:300, maxHeight:220 }}>
-                    <TouchableOpacity style={{ ...view_styles.section_header, padding:15, paddingRight:10, backgroundColor:Colors.highlights.highlight500 }} onPress={() => setCompetitionsExpanded(false)}>
-                        <Icons.PickEmIcon size={16} color={Colors.shades.white} />
-                        <Text style={{ flex:1, marginLeft:10 }} size={16} weight='bold' color={Colors.shades.white}>Select Competition</Text>
+                <View float style={{ position:'absolute', bottom:0, right:0, justifyContent:'flex-end', maxHeight:230, minWidth:300 }}>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <Icons.PickEmIcon size={16} color={C.text.h1} />
+                        <Text style={{ flex:1, marginLeft:10 }} theme='h2'>Select Competition</Text>
                         <Button
                             title='X'
-                            backgroundColor='transparent'
-                            title_color={Colors.utility.error}
-                            disabled
-                            title_size={16}
-                            padding={0}
-                            onPress={() => console.log('')}
+                            style={{ padding:10, borderRadius:100 }}
+                            type='error'
+                            onPress={() => setCompetitionsExpanded(false)}
                         />
-                    </TouchableOpacity>
+                    </View>
                     <ScrollView style={{flex:1}}>
                         <FlatList
                             data={competitions}
@@ -561,20 +591,17 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
                 </View>
                 :<></>}
                 {squares_competitions && squares_expanded ?
-                <View style={{ position:'absolute', bottom:0, right:0, ...view_styles.section, minWidth:300, maxHeight:220 }}>
-                    <TouchableOpacity style={{ ...view_styles.section_header, padding:15, paddingRight:10, backgroundColor:Colors.highlights.highlight100 }} onPress={() => setSquaresExpanded(false)}>
-                        <Icons.SquaresIcon size={16} color={Colors.shades.white} />
-                        <Text style={{ flex:1, marginLeft:10 }} size={16} weight='bold' color={Colors.shades.white}>Select Squares Competition</Text>
+                <View float style={{ position:'absolute', bottom:0, right:0, justifyContent:'flex-end', maxHeight:230, minWidth:300 }}>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <Icons.PickEmIcon size={16} color={C.text.h1} />
+                        <Text style={{ flex:1, marginLeft:10 }} theme='h2'>Select Squares</Text>
                         <Button
                             title='X'
-                            backgroundColor='transparent'
-                            title_color={Colors.utility.error}
-                            disabled
-                            title_size={16}
-                            padding={0}
-                            onPress={() => console.log('')}
+                            style={{ padding:10, borderRadius:100 }}
+                            type='error'
+                            onPress={() => setSquaresExpanded(false)}
                         />
-                    </TouchableOpacity>
+                    </View>
                     <ScrollView style={{flex:1}}>
                         <FlatList
                             data={squares_competitions}
@@ -587,9 +614,9 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
             </View>
             :<></>}
             {expanded ?
-            <View>
-                <View style={{ flexDirection:'row', alignItems:'center' }}>
-                    <View style={{ flexGrow:1 }}>
+            <View transparent>
+                <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                    <View transparent style={{ flexGrow:1 }}>
                         <LinearDiagnal label_size={12} label={'Hot Markets'} left_color={Colors.utility.warning} right_color={Colors.utility.error}/>
                     </View>
                     {loading ?
@@ -597,14 +624,12 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
                     :
                     <Button
                         title='SEE ALL'
-                        padding={15}
-                        backgroundColor='transparent'
-                        title_color={Colors.brand.electric}
+                        type='text'
                         onPress={() => onViewAdditionalMarkets(event.event_id, 'team')}
                     />
                     }
                 </View>
-                <View>
+                <View transparent>
                     <FlatList
                         data={non_primary_markets}
                         renderItem={renderNonPrimaryMarkets}
@@ -614,12 +639,12 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
                     />
                 </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 }}>
-                        <Icons.HeadphoneIcon size={36} color={Colors.shades.white} />
+                <View type='footer' style={{ flexDirection:'row', marginTop:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                    <View transparent style={{ padding:5, paddingRight:20, paddingLeft:20, justifyContent:'center', borderBottomLeftRadius:8 }}>
+                        <Icons.HeadphoneIcon size={36} color={C.text.h1} />
                     </View>
-                    <View style={{ flex:1, padding:5 }}>
-                        <Text style={{ marginBottom:3 }} size={14} weight='semibold' color={Colors.brand.midnight}>Need Help? Checkout these podcasts!</Text>
+                    <View transparent style={{ flex:1, padding:5 }}>
+                        <Text style={{ marginBottom:3 }} theme='h2'>Need Help? Checkout these podcasts!</Text>
                         <FlatList
                             key={`${event.event_id}:pods`}
                             data={podcasts}
@@ -645,10 +670,6 @@ const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_dire
 }
 
 
-const styles = StyleSheet.create({
-    container_style: { ...view_styles.section,  borderWidth:1, borderColor:Colors.shades.shade600 }
-})
-
 
 export default React.memo(TeamEventMarket, (left, right) => {
     if(JSON.stringify(left) != JSON.stringify(right)){ return false }