be-components 3.3.9 → 3.4.0

package/src/MarketComponents/components/OrderBook.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { FlatList, TouchableOpacity, View } from "react-native"
+import { FlatList } from "react-native"
 import type { MarketProps, OrderProps } from '../../types';
 import OrderGradeBar from './OrderGradeBar';
-import { Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
 import { MarketComponentHelpers } from '../api';
 import moment from 'moment-mini';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type OrderBookCardProps = {
     player_id?:string,
@@ -17,6 +18,7 @@ type OrderBookCardProps = {
 }
 
 const OrderBookCard = ({ player_id, orders, market, show_orders, show_grades, onBuy }:OrderBookCardProps) => {    
+    const Colors = useColors();
     const trade_side_orders = orders.filter(o => o.side === market.trade_side).sort((a,b) => a.probability - b.probability).splice(0, 9)
     const o_side_orders = orders.filter(o => o.side !== market.trade_side).sort((a,b) => a.probability - b.probability).splice(0,9)
 
@@ -36,50 +38,50 @@ const OrderBookCard = ({ player_id, orders, market, show_orders, show_grades, on
         const cl = data.item.market_type === 'FOR_MONEY' ? '$' : 'E'
         const mine = data.item.player_id == player_id ? true : false
         return (
-            <TouchableOpacity style={{ minHeight:40, backgroundColor:show_orders||mine?Colors.shades.shade600:Colors.shades.black_faded, margin:4, marginLeft:8, borderRadius:4 }} onPress={() => handleOrderPress(data.item)}>
+            <Button transparent float style={{ minHeight:40, padding:8, backgroundColor:show_orders||mine?Colors.order_book.selected:Colors.views.header, margin:4, marginLeft:8, borderRadius:4 }} onPress={() => handleOrderPress(data.item)}>
                 {show_orders || mine ?
-                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                <View transparent style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
                     <OrderGradeBar mask={show_grades?false:true} grade={data.item.grade} view_type='book' />
-                    <Text size={12} color={Colors.shades.black} weight='semibold' textAlign='center' style={{flex:1/2}}>{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
-                    <Text size={12} color={Colors.shades.black} weight='semibold' textAlign='center' style={{flex:1/2}}>{cl}{data.item.open_amt.toFixed(2)}</Text>
+                    <Text size={12} theme='h2' textAlign='center' style={{flex:1/2}}>{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
+                    <Text size={12} theme='h2' textAlign='center' style={{flex:1/2}}>{cl}{data.item.open_amt.toFixed(2)}</Text>
                 </View>
                 :
-                <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
-                    <Icons.LockClosedIcon color={Colors.incentive.gold} size={14}/>
+                <View transparent style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <Icons.LockClosedIcon color={Colors.text.gold} size={14}/>
                 </View>
                 }
                 {mine ?
-                <View style={{ position:'absolute', right:0, bottom:0, top:0, width:5, backgroundColor:Colors.brand.electric, borderRadius:4 }} />
+                <View style={{ position:'absolute', right:0, bottom:0, top:0, width:5, backgroundColor:Colors.text.action, borderRadius:4 }} />
                 :<></>}
-            </TouchableOpacity>
+            </Button>
         )
     }
     const renderOSide = (data: {item: OrderProps, index:number}) => {
         const cl = data.item.market_type === 'FOR_MONEY' ? '$' : 'E'
         const mine = data.item.player_id == player_id ? true : false
         return (
-            <TouchableOpacity style={{ minHeight:40, backgroundColor:show_orders||mine?Colors.shades.shade600:Colors.shades.black_faded, margin:4, marginLeft:8, borderRadius:4 }} onPress={() => handleOrderPress(data.item)}>
+            <Button float style={{ minHeight:40, padding:8, backgroundColor:show_orders||mine?Colors.views.background:Colors.views.header, margin:4, marginLeft:8, borderRadius:4 }} onPress={() => handleOrderPress(data.item)}>
                 {show_orders || mine ?
-                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
-                    <Text size={12} color={Colors.shades.black} weight='semibold' textAlign='center' style={{flex:1}}>{cl}{data.item.open_amt.toFixed(2)}</Text>
-                    <Text size={12} color={Colors.shades.black} weight='semibold' textAlign='center' style={{flex:1}}>{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
-                    <OrderGradeBar mask={show_grades?false:true} grade={data.item.grade} view_type='book' />
+                <View transparent style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
+                    <Text size={12} theme='h2' textAlign='center' style={{flex:1}}>{cl}{data.item.open_amt.toFixed(2)}</Text>
+                    <Text size={12} theme='h2' textAlign='center' style={{flex:1}}>{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
+                    <OrderGradeBar  mask={show_grades?false:true} grade={data.item.grade} view_type='book' />
                 </View>
                 :
-                <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
-                    <Icons.LockClosedIcon color={Colors.incentive.gold} size={14}/>
+                <View transparent style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <Icons.LockClosedIcon color={Colors.text.gold} size={14}/>
                 </View>
                 }
                 {mine ?
-                <View style={{ position:'absolute', left:0, bottom:0, top:0, width:5, backgroundColor:Colors.brand.electric, borderRadius:4 }} />
+                <View style={{ position:'absolute', left:0, bottom:0, top:0, width:5, backgroundColor:Colors.text.action, borderRadius:4 }} />
                 :<></>}
-            </TouchableOpacity>
+            </Button>
         )
     }
 
     return (
         <View>
-            <View style={{ flex:1, flexDirection:'row' }}>
+            <View style={{ flexGrow:1, flexDirection:'row' }}>
                 <View nativeID="other_side_orders" style={{ flex:1 }}>
                     <FlatList data={o_side_orders} renderItem={renderOSide} keyExtractor={(item) => item.order_id.toString()}/>
                 </View>
@@ -88,8 +90,8 @@ const OrderBookCard = ({ player_id, orders, market, show_orders, show_grades, on
                 </View>
             </View>
             <View nativeID='legend' style={{ flexDirection:'row', alignItems:'center', justifyContent:'center', padding:10 }}>
-                <View style={{ height:10, width:10, borderRadius:4, marginRight:5, backgroundColor:Colors.brand.electric }} />
-                <Text size={12} color={Colors.shades.black} weight='regular'>Your order</Text>
+                <View style={{ height:10, width:10, borderRadius:4, marginRight:5, backgroundColor:Colors.text.action }} />
+                <Text size={12} theme='description'>Your order</Text>
             </View>
         </View>
         

package/src/MarketComponents/components/OrderBookChart.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { ActivityIndicator, FlatList, TouchableOpacity, View } from "react-native"
+import { ActivityIndicator, FlatList } from "react-native"
 import type { MarketProps, OrderBookProps } from '../../types';
-import { Text } from '../../Components';
-import Colors from '../../constants/colors';
 import { MarketComponentHelpers } from '../api';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type OrderBookChartProps = {
     order_book:OrderBookProps,
@@ -18,15 +18,15 @@ type OrderBookChartProps = {
 }
 
 const OrderBookChart = ({ order_book, market, active_var_1, onSelectVar1, away_label, home_label, side_id }:OrderBookChartProps) => {
+    const Colors = useColors();
     const [ loading ] = useState(false)
     const [ expanded, setExpanded ] = useState(false);
     const [ width, setWidth ] = useState(300)
 
-
+    console.log(width)
     const renderVariableBar = (data: { item: number, index:number }) => {
         const isActive = data.item == active_var_1 ? true :  false
         let trade_side_stat = order_book.book_stats.find(s => s.side === market.trade_side && s.var_1 == data.item)
-        console.log(data.item)
         if(side_id){ trade_side_stat =  order_book.book_stats.find(s => s.side === market.trade_side && s.var_1 == data.item && s.side_id == side_id)}
         let o_side_stat = order_book.book_stats.find(s => { 
             if(s.side !== market.trade_side && market.type === 'Spread' && s.var_1 * -1 == data.item){ return s }
@@ -40,55 +40,59 @@ const OrderBookChart = ({ order_book, market, active_var_1, onSelectVar1, away_l
                 return undefined
             })
         }
+
         return (
-            <TouchableOpacity style={{flex:1, flexDirection:'row', alignItems:'center', marginBottom:5, borderRadius:8, backgroundColor:isActive?Colors.shades.shade600:Colors.shades.shade100 }} onPress={() => onSelectVar1(data.item)}>
-                {market.var_1_required ?
-                    <Text size={12} textAlign='left' style={{padding:8, flex:1/12}} color={Colors.shades.black}>{market.type === 'Spread'? data.item * -1: data.item}</Text>
-                :
-                <></>
-                }
-                <View style={{flex:1, flexDirection:'row', alignItems:'center', justifyContent:'space-between'}} onLayout={(event) => {
-                    //if(Math.abs(event.nativeEvent.layout.width - width) < 5){ return }
-                    return setWidth(event.nativeEvent.layout.width)
-                }}>
-                    {o_side_stat ?
-                    <View style={{ width: width * (1 - o_side_stat.probability), height:25,  backgroundColor:Colors.chart.cyan, borderRightWidth:1, borderRightColor:Colors.brand.cyan,  borderTopLeftRadius:4, borderBottomLeftRadius:4, flexGrow:0 }}>
-                        {100 > -800 ?
-                        <View style={{ position: 'absolute', paddingRight:5, top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'flex-end' }}>
-                            <Text size={12} textAlign='right' color={Colors.shades.white}>{MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(o_side_stat.probability))}</Text>
-                        </View>
-                        :<Text size={12} textAlign='right' style={{padding:8}} color={Colors.shades.white}>-</Text> }
-                    </View>
+            <View float>
+                <Button transparent style={{ padding:0, flexDirection:'row', alignItems:'center', backgroundColor:isActive?Colors.order_book.selected:Colors.views.background }} onPress={() => onSelectVar1(data.item)}>
+                    {market.var_1_required ?
+                        <Text size={12} textAlign='left' theme='description'>{market.type === 'Spread'? data.item * -1: data.item}</Text>
                     :
-                    <View style={{ flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
-                        <Text size={12} textAlign='right' style={{padding:8}} color={Colors.shades.black}>No Orders</Text>
-                    </View>
+                    <></>
                     }
-                    {trade_side_stat ?
-                    <View style={{  width: width * (1 -trade_side_stat.probability), height:25, backgroundColor:Colors.chart.electric, borderLeftWidth:1, borderLeftColor:Colors.brand.electric, borderTopRightRadius:4, borderBottomRightRadius:4, flexGrow:0 }}>
-                        {100 > -800 ?
-                        <View style={{ position: 'absolute', paddingLeft:5, top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'flex-start' }}>
-                            <Text size={12} textAlign='right' color={Colors.shades.white}>{MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(trade_side_stat.probability))}</Text>
+                    <View transparent style={{flexGrow:1, flexDirection:'row', alignItems:'center', justifyContent:'space-between'}} onLayout={(event) => {
+                        //if(Math.abs(event.nativeEvent.layout.width - width) < 5){ return }
+                        return setWidth(event.nativeEvent.layout.width)
+                    }}>
+                        {o_side_stat ?
+                        <View transparent style={{ width: width * (1 - o_side_stat.probability), height:25,  backgroundColor:Colors.text.highlight, borderRightWidth:1, borderRightColor:Colors.text.highlight,  borderTopLeftRadius:4, borderBottomLeftRadius:4, flexGrow:0 }}>
+                            {100 > -800 ?
+                            <View transparent style={{ position: 'absolute', paddingRight:5, top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'flex-end' }}>
+                                <Text size={12} textAlign='right' theme='h2'>{MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(o_side_stat.probability))}</Text>
+                            </View>
+                            :<Text size={12} textAlign='right' style={{padding:8}} theme='h1'>-</Text> }
                         </View>
-                        :<Text size={12} textAlign='right' style={{padding:8}} color={Colors.shades.white}>-</Text>}
+                        :
+                        <View transparent style={{ flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
+                            <Text size={12} textAlign='right' style={{padding:8}} theme='description'>No Orders</Text>
+                        </View>
+                        }
+                        {trade_side_stat ?
+                        <View transparent style={{  width: width * (1 -trade_side_stat.probability), height:25, backgroundColor:Colors.text.action, borderLeftWidth:1, borderLeftColor:Colors.text.action, borderTopRightRadius:4, borderBottomRightRadius:4, flexGrow:0 }}>
+                            {100 > -800 ?
+                            <View transparent style={{ position: 'absolute', paddingLeft:5, top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'flex-start' }}>
+                                <Text size={12} textAlign='right' theme='h1'>{MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(trade_side_stat.probability))}</Text>
+                            </View>
+                            :<Text size={12} textAlign='right' style={{padding:8}} theme='h2'>-</Text>}
+                        </View>
+                        :
+                        <View transparent style={{ flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
+                            <Text size={12} textAlign='left' style={{padding:8}} theme='description'>No Orders</Text>
+                        </View>
+                        }
                     </View>
+                    {market.var_1_required ?
+                        <Text size={12} textAlign='right' style={{padding:8, flex:1/12}} theme='description'>{data.item}</Text>
                     :
-                    <View style={{ flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
-                        <Text size={12} textAlign='left' style={{padding:8}} color={Colors.shades.black}>No Orders</Text>
-                    </View>
+                        <></>
                     }
-                </View>
-                {market.var_1_required ?
-                    <Text size={12} textAlign='right' style={{padding:8, flex:1/12}} color={Colors.shades.black}>{data.item}</Text>
-                :
-                    <></>
-                }
-            </TouchableOpacity>
+                </Button>
+            </View>
+            
         )
     }
     if(!market || loading || !order_book){ return (
         <View style={{padding:10}}>
-            <ActivityIndicator size='small' color={Colors.brand.midnight} />
+            <ActivityIndicator size='small' color={Colors.text.h1} />
         </View>
     ) }
     
@@ -113,26 +117,26 @@ const OrderBookChart = ({ order_book, market, active_var_1, onSelectVar1, away_l
     }
 
     return (
-        <View style={{flex:1, margin:20, marginTop:5 }}>
-            {unique_var_1.length > 0 ?
-            <>
-            <View style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', marginBottom:8}}>
-                <Text size={14} weight='semibold' color={Colors.shades.black} textAlign='left'>{away_label?.toUpperCase()??'TBD'}</Text>
-                <Text size={14} weight='semibold' color={Colors.shades.black} textAlign='center'>{market.stat_label ?? market.type?.toUpperCase()??'TBD'}</Text>
-                <Text size={14} weight='semibold' color={Colors.shades.black} textAlign='right'>{home_label?.toUpperCase()??'TBD'}</Text>
+        <View transparent style={{flexGrow:1, margin:20, marginTop:5 }}>
+            
+            <View transparent style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', marginBottom:8}}>
+                <Text size={14} theme='h2' textAlign='left'>{away_label?.toUpperCase()??'TBD'}</Text>
+                <Text size={14} theme='h2' textAlign='center'>{market.stat_label ?? market.type?.toUpperCase()??'TBD'}</Text>
+                <Text size={14} theme='h2' textAlign='right'>{home_label?.toUpperCase()??'TBD'}</Text>
             </View>
             <FlatList data={var_1_options.sort((a,b) => a - b)} renderItem={renderVariableBar} keyExtractor={(item) => item.toString()} extraData={width} />
-            <TouchableOpacity style={{ padding:10 }} onPress={() => setExpanded(!expanded)}>
+            {market.var_1_required ?
+            <Button transparent style={{ padding:10 }} onPress={() => setExpanded(!expanded)}>
                 {!expanded ?
-                <Text size={12} color={Colors.brand.electric} weight='semibold' textAlign='center'>{unique_var_1.length} Other {market.type}s Available</Text>
+                <Text size={12} color={Colors.text.action} weight='semibold' textAlign='center'>{unique_var_1.length} Other {market.type}s Available</Text>
                 :
-                <Text size={12} color={Colors.utility.error} weight='semibold' textAlign='center'>Hide Alternatives</Text>
+                <Text size={12} color={Colors.text.error} weight='semibold' textAlign='center'>Hide Alternatives</Text>
                 }
-            </TouchableOpacity>
-            </>
-            :
-            <Text size={12} textAlign='center' style={{padding:8}} color={Colors.shades.black}>No Active Orders</Text> 
-            }
+            </Button>
+            :<></>}
+            {unique_var_1.length == 0 ?
+            <Text size={12} textAlign='center' style={{padding:8}} theme='description'>No Active Orders</Text> 
+            :<></>}
         </View>
     )
 }

package/src/MarketComponents/components/OrderGradeBar.tsx

@@ -1,7 +1,8 @@
-import React, {  } from 'react';
-import { FlatList, View, TouchableOpacity } from 'react-native';
+import React from 'react';
+import { FlatList } from 'react-native';
 import { Icons } from '../../Components';
-import Colors from '../../constants/colors';
+import { Button, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 //Typecast a grade box object
 type GradeBoxType = {
@@ -12,14 +13,7 @@ type GradeBoxType = {
     locked_color:string
 }
 
-//Stage the boxes and set the min / max and colors
-const grade_boxes:GradeBoxType[] = [
-    { min: 0, max: 79, success_color: 'rgba(125,205,133,0.2)', fail_color: 'rgba(213,87, 59, 0.2)', locked_color: Colors.shades.shade100 },
-    { min: 80, max: 94, success_color: 'rgba(125,205,133,0.4)', fail_color: 'rgba(213,87, 59, 0.4)', locked_color: Colors.shades.shade100 },
-    { min:95, max: 97.5, success_color: 'rgba(125,205,133,0.6)', fail_color: 'rgba(213,87, 59, 0.6)', locked_color: Colors.shades.shade100 },
-    { min:97.6, max: 99.99, success_color: 'rgba(125,205,133,0.8)', fail_color: 'rgba(213,87, 59, 0)', locked_color: Colors.shades.shade100 },
-    { min: 100, max: 200, success_color: 'rgba(125,205,133,1)', fail_color: 'rgba(213,87, 59, 0)', locked_color: Colors.shades.shade100 }
-]
+
 
 type OrderGradeBarProps = {
     mask?:boolean,
@@ -30,7 +24,17 @@ type OrderGradeBarProps = {
 
 //OrderGradeBar React Component
 const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarProps ) => {
-    
+    const Colors = useColors();
+
+    //Stage the boxes and set the min / max and colors
+    const grade_boxes:GradeBoxType[] = [
+        { min: 0, max: 79, success_color: 'rgba(125,205,133,0.2)', fail_color: 'rgba(213,87, 59, 0.2)', locked_color: Colors.views.header },
+        { min: 80, max: 94, success_color: 'rgba(125,205,133,0.4)', fail_color: 'rgba(213,87, 59, 0.4)', locked_color: Colors.views.header },
+        { min:95, max: 97.5, success_color: 'rgba(125,205,133,0.6)', fail_color: 'rgba(213,87, 59, 0.6)', locked_color: Colors.views.header },
+        { min:97.6, max: 99.99, success_color: 'rgba(125,205,133,0.8)', fail_color: 'rgba(213,87, 59, 0)', locked_color: Colors.views.header },
+        { min: 100, max: 200, success_color: 'rgba(125,205,133,1)', fail_color: 'rgba(213,87, 59, 0)', locked_color: Colors.views.header }
+    ]
+
     //Get the player's role
     let premium = true
     if(mask){ premium = false }
@@ -48,10 +52,10 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
         const locked = !premium ? true : false
         //Render the box
         return (
-            <View style={{ margin:2, height:15, width:15, borderRadius:4, backgroundColor:locked? data.item.locked_color : filled ? success ? data.item.success_color : data.item.fail_color : Colors.shades.shade100 }}>
+            <View float transparent style={{ margin:2, height:15, width:15, borderRadius:4, backgroundColor:locked? data.item.locked_color : filled ? success ? data.item.success_color : data.item.fail_color : Colors.borders.light }}>
             {locked ?
                 <View style={{ position:'absolute', top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
-                    <Icons.LockClosedIcon size={10} color={Colors.incentive.gold} />
+                    <Icons.LockClosedIcon size={10} color={Colors.text.gold} />
                 </View>
             :<></>}
             </View>
@@ -72,7 +76,7 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
 
         //Render the box
         return (
-            <View style={{ margin:1, height:4, width:15, borderRadius:4,  backgroundColor:locked? data.item.locked_color : filled ? success ? data.item.success_color : data.item.fail_color : Colors.shades.shade100 }} />
+            <View transparent style={{ margin:1, height:4, width:15, borderRadius:4,  backgroundColor:locked? data.item.locked_color : filled ? success ? data.item.success_color : data.item.fail_color : Colors.views.header }} />
         )
     }
 
@@ -88,19 +92,19 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
             return (<></>)
         }
         return (
-            <View style={{ height:3, backgroundColor:success?Colors.utility.success:Colors.utility.error, marginRight:3, marginLeft:3 }} />
+            <View style={{ height:3, backgroundColor:success?Colors.text.success:Colors.text.error, marginRight:3, marginLeft:3 }} />
         )
     }
 
     return (
-        <View>
-            <TouchableOpacity disabled={onSelectGrade ? false : true} onPress={() => onSelectGrade ? onSelectGrade() : console.log('')}>
+        <View transparent>
+            <Button style={{ padding:0 }} transparent disabled={onSelectGrade ? false : true} onPress={() => onSelectGrade ? onSelectGrade() : console.log('')}>
                 {view_type === 'card' ?
                 <FlatList style={{ alignSelf:'center' }} horizontal data={grade_boxes} renderItem={renderGradeBoxes} keyExtractor={(item) => item.min.toString()} />
                 :view_type === 'book' ?
                 <FlatList data={[ ...grade_boxes ].reverse()} renderItem={renderGradeDashes} keyExtractor={(item) => item.min.toString()} />
                 :<></>}
-            </TouchableOpacity>
+            </Button>
         </View>
     )
 }

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

@@ -260,12 +260,12 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
                 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 transparent style={{ flexGrow:1 }}>
                         <AthleteMarket
                             event={event}
                             event_type='team'
                             athlete={athlete}
                             float
+                            style={{ flexGrow:1, margin:5 }}
                             direction={hot_markets_direction=='vertical' ? 'horizontal' : 'vertical'}
                             show_grades={show_grades}
                             market={market}
@@ -278,7 +278,6 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
                             onOrder={onOrder}
                             onView={onView}
                         />
-                    </View>
                 )
             case 'event':
                 const event_trades = latest_trades.filter(t => t.market_type == 'FOR_MONEY' && t.market_id == data.item.market_id);
@@ -334,16 +333,16 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
         <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 ?? C.text.h1, sponsor.brand_secondary ?? C.text.h1]}>
-                <View style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.shades.white }}>
+                <View transparent style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.shades.white }}>
                     <Image
                         source={{ uri: sponsor.company_image?.url }}
                         style={{ height:30, width:30, borderRadius:4 }}
                         resizeMode='cover'
                     />
                 </View>
-                <View style={{ flex:1, marginLeft:10 }}>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
                     <Text size={12} color={Colors.shades.white} weight='bold'>Brought to you by {sponsor.company_name}</Text>
-                    <View style={{ marginTop:3, flexDirection:'row', alignItems:'center' }}>
+                    <View transparent style={{ marginTop:3, flexDirection:'row', alignItems:'center' }}>
                         {show_id ?
                         <Text style={{ marginLeft:2, marginRight:3 }} size={12} color={Colors.shades.white} weight='semibold' selectable>{event.event_id} </Text>
                         :<></>}
@@ -352,7 +351,7 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
                         :<></>}
                     </View>
                 </View>
-                <View style={{ flexDirection:'row', alignItems:'center' }}>
+                <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
                     <Icons.TVIcon size={10} color={Colors.shades.white} />
                     <Text style={{ marginLeft:8 }} size={12} color={Colors.shades.white} weight='semibold'>{event.info?.broadcast?.network}</Text>
                 </View>
@@ -411,7 +410,7 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
                 :<></>}
             </View>
             }
-            <View transparent nativeID='primary_markets' style={{ flexDirection:'row' }}>
+            <View type='body' 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 ?
@@ -538,7 +537,7 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
                 <Button 
                     float
                     type='squares'
-                    style={{ marginRight:5, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
+                    style={{ marginRight:3, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
                     onPress={() => handleSelectSquares()}>
                     <Icons.SquaresIcon size={18} color={C.text.white} />
                     <Text style={{ marginLeft:5 }} size={14} color={C.text.white} weight='semibold'>Squares</Text>
@@ -548,7 +547,7 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
                 <Button 
                     float
                     type='competition'
-                    style={{ marginRight:5, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
+                    style={{ marginRight:3, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
                     onPress={() => handleSelectCompetition()}>
                     <Icons.PickEmIcon size={14} color={C.text.white} />
                     <Text style={{ marginLeft:5 }} size={14} color={C.text.white} weight='semibold'>MultiPick</Text>
@@ -566,6 +565,7 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
                 <Button
                     title='MORE'
                     type='info'
+                    style={{ padding:10 }}
                     onPress={() => onViewAdditionalMarkets(event.event_id, 'team')}
                 />
                 :<></>}

package/src/Squares/components/BoardStats.tsx

@@ -21,8 +21,8 @@ const BoardStats = ({ squares_competition, squares, player_squares}:BoardStatsPr
     const ownership_pct = active_ps.length / squares.length * 100
 
     return (
-        <View float style={{ minWidth:350 }}>
-                <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+        <View float style={{ minWidth:350, borderRadius:0 }}>
+                <Button style={{ flexDirection:'row', alignItems:'center', backgroundColor:C.views.header, borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
                     <Icons.PieIcon color={C.text.h1} size={18} />
                     <View transparent style={{ flex:1, marginLeft:10 }}>
                         <Text theme="h1">BOARD STATS</Text>

package/src/Squares/components/EventCard.tsx

@@ -17,8 +17,8 @@ const EventCard = ({ event, league }:EventCardProps) => {
     const overtime_occurred = event.event_scoring && event.event_scoring.length > 4 ? true : false;
 
     return (
-        <View float style={{ minWidth:350 }}>
-            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+        <View type='header' float style={{ minWidth:350, borderRadius:0 }}>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center', borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
                 <View transparent style={{ flexDirection:'row', alignItems:'center', paddingRight:5, borderRightWidth:1, borderColor:C.borders.light }}>
                     {league ?
                     <Image

package/src/Squares/components/MySquaresCard.tsx

@@ -63,7 +63,7 @@ const MySquaresCard = ({ player_squares, squares, away_abbr, home_abbr, square_o
 
 
     return (
-        <View float style={{ minWidth:350 }}>
+        <View float style={{ minWidth:350, borderRadius:0 }}>
             <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
                 <View transparent style={{ height:18, width:18, borderRadius:100, backgroundColor:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center' }}>
                     <Text size={10} weight='bold' color={Colors.shades.white} textAlign='center'>{player_squares.length}</Text>

package/src/Squares/components/MyStatsCard.tsx

@@ -81,8 +81,8 @@ const MyStatsCard = ({ player_id, squares_expected_value, away_abbr, home_abbr,
     if(!isNaN(squares_expected_value.ev_pct)){ ev_pct = squares_expected_value.ev_pct }
 
     return (
-        <View float type='header' style={{ minWidth:350 }}>
-                <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+        <View float style={{ minWidth:350, borderRadius:0 }}>
+                <Button transparent style={{ flexDirection:'row', alignItems:'center', backgroundColor:C.views.header, borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
                     <View transparent style={{ justifyContent:'center', alignItems:'center' }}>
                         <Text size={14} color={squares_expected_value.expected_value > 0 ? C.text.success: C.text.error} weight='bold'>{(ev_pct * 100).toFixed(2)}%</Text>
                         <Text style={{ marginTop:3 }} size={12} color={C.text.h1} weight='regular'>EV</Text>

package/src/Squares/components/PrizeCard.tsx

@@ -66,8 +66,8 @@ const PrizeCard = ({ event, square_prizes, players, squares }:PrizeCardProps) =>
     }
 
     return (
-        <View float style={{ minWidth:350 }}>
-            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+        <View float style={{ minWidth:350, borderRadius:0 }}>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center', backgroundColor:C.views.header, borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
                 <Icons.AwardRibbonIcon size={18} color={C.text.gold} />
                 <View transparent style={{ flex:1, marginLeft:10 }}>
                     <Text theme='h1'>HIDDEN PRIZES</Text>

package/src/Squares/components/SquareCard.tsx

@@ -168,6 +168,8 @@ const SquareCard = ({ player_id, square, player_square, event, event_status, mar
     if(square_state === 'existing_buy_offer' && player_square?.player_id != player_id){ showSubText = 'OFFER' }
     if(square_state === 'existing_buy_offer' && player_square?.player_id == player_id){ showSubText = 'SELL' }
     if(square_state === 'existing_sell_offer' && player_square?.player_id != player_id){ showSubText = 'BUY' }
+
+
     return (
         <TouchableOpacity style={{ margin:3, height:40, width:40, borderRadius:4, justifyContent:'center', alignItems:'center', backgroundColor:getSquareBackgroundColor(square_state), borderWidth:getSquareBorderWidth(square_state), borderTopWidth:getSquareBorderTopWidth(square_state), borderColor:getSquareBorderColor(square_state) }} onPress={() => onSquareSelect(square, draft_player_square||draft_square_offer?'remove':'add')}>
             {isUserIconVisible(square_state) ? 

package/src/Squares/components/SquareOwners.tsx

@@ -44,8 +44,8 @@ const SquareOwnersCard = ({ player_squares, players, onPlayerSelect }:SquareOwne
     }
 
     return (
-        <View float style={{  minWidth:350 }}>
-            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+        <View float style={{  minWidth:350, borderRadius:0 }}>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center', backgroundColor:C.views.header, borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
                 <Icons.OwnedSquareIcon size={18} color={C.text.h1} />
                 <View transparent style={{ flex:1, marginLeft:10 }}>
                     <Text theme='h1'>SQUARE OWNERS</Text>

package/src/Squares/components/SquaresBoard.tsx

@@ -100,8 +100,8 @@ const SquaresBoard = ({
     if(squares_competition.guaranteed_payout && squares_competition.guaranteed_payout > total_payout){ total_payout = squares_competition.guaranteed_payout }
 
     return (
-        <View float style={{ minWidth:350, maxWidth:600 }}>
-            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+        <View float style={{ minWidth:350, maxWidth:600, borderRadius:0 }}>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center', backgroundColor:C.views.header, borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
                 <Icons.SquaresIcon size={18} color={C.text.h1} />
                 <View transparent style={{ flex:1, marginLeft:10 }}>
                     <Text theme="h1">SQUARES BOARD</Text>
@@ -126,7 +126,7 @@ const SquaresBoard = ({
             </Button>
             {expanded ?
             <View transparent style={{ flex:1 }} nativeID="board">
-                <ScrollView horizontal style={{ flexDirection:'row', marginLeft:20 }}>
+                <ScrollView horizontal style={{ flexDirection:'row', marginLeft:40, marginTop:20 }}>
                     <View transparent>
                         <View transparent style={{ flexDirection:'row',  marginLeft:4 }}>
                             {unique_score_y.map(num => {
@@ -147,7 +147,7 @@ const SquaresBoard = ({
                         </View>
                     </View>
                 </ScrollView>
-                <View transparent style={{ position:'absolute', top: 47,left:20, backgroundColor:'transparent' }}>
+                <View transparent style={{ position:'absolute', top: 45,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/components/SquaresDetails.tsx

@@ -15,8 +15,8 @@ const SquaresDetails = ({ squares_competition, squares_type, squares_payout_type
     const C = useColors();
     const [ expanded, setExpanded ] = useState(false);
     return (
-        <View float nativeID="competition_details" style={{ minWidth:350 }}>
-            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+        <View float nativeID="competition_details" style={{ minWidth:350, borderRadius:0 }}>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center', backgroundColor:C.views.header, borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
                 <Icons.SettingsIcon size={18} color={C.text.h1} />
                 <View transparent style={{ flex:1, marginLeft:10 }}>
                     <Text theme="h1">COMPETITION DETAILS</Text>