be-components 3.3.6 → 3.3.7

package/src/Squares/components/BidForm.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
-import { ActivityIndicator, FlatList, TouchableOpacity, View, ScrollView } from 'react-native';
+import { FlatList } from 'react-native';
 import { view_styles } from '../../constants/styles';
-import { Checkbox, Text } from '../../Components';
+import { Checkbox } from '../../Components';
 import Colors from '../../constants/colors';
 import type { PlayerBalanceProps, PlayerSquareProps, SquareProps } from '../../types';
 import BidToggle from './BidToggle';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type BidFormProps = {
     player_id?:string,
@@ -21,7 +23,11 @@ type BidFormProps = {
     square_bids:PlayerSquareProps[],
     squares:SquareProps[]
 }
+
+const form_sections = ['header','bids','actions']
+
 const BidForm = ({ player_id, player_balance, market_type, home_abbr, away_abbr, submit_ready, square_bids, squares, onSubmitBid, onClearBids, onBidAmountChange, onRequestAuthenticate }:BidFormProps) => {
+    const C = useColors();
     const [ promo_balance, setPromoBalance ] = useState(false);
     const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
     const total_bid_amount = square_bids.reduce((a,b) => a + b.purchase_price, 0)
@@ -33,76 +39,93 @@ const BidForm = ({ player_id, player_balance, market_type, home_abbr, away_abbr,
         let square = squares.find(s => s.sq_square_id == data.item.sq_square_id)
         if(!square){ return ( <></> ) }
         return (
-            <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                <View style={{flex:1}}>
-                    <Text theme="body">SQUARE: {home_abbr}: {square.square_score_x}, {away_abbr}: {square.square_score_y}</Text>
-                    <Text theme="body_2">Current Bid: {cl}{square.last_purchase_price.toFixed(2)}</Text>
+            <View type='row' transparent style={{ borderBottomWidth:1, borderColor:C.borders.light, padding:5}}>
+                <View transparent style={{flex:1}}>
+                    <Text theme='h2'>SQUARE: {home_abbr}: {square.square_score_x}, {away_abbr}: {square.square_score_y}</Text>
+                    <Text theme="description">Current Bid: {cl}{square.last_purchase_price.toFixed(2)}</Text>
                 </View>
-                <View>
+                <View transparent>
                     <BidToggle sq_square_id={data.item.sq_square_id} amount={data.item.purchase_price} cl={cl}  onAmountChange={(dir) => onBidAmountChange(data.item, square, dir)}/>
                 </View>
             </View>
         )
     }
- 
-    return (
-        <View style={{ ...view_styles.section, padding:0, maxHeight:550, maxWidth:600 }}>
-            <ScrollView>
-            <View style={ view_styles.section_header }>
-                <View style={{ flex:1 }}>
-                    <Text theme="header">SET BID AMOUNTS</Text>
-                    <Text style={{ marginTop:3 }} color={Colors.utility.error} size={12} weight='regular'>All purchases are final and cannot be removed</Text>
-                </View>
-                <View style={{ height:24, width:24, borderRadius:100, backgroundColor:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center', marginLeft: 5 }}>
-                    <Text size={12} color={Colors.shades.white} textAlign='center'>{square_bids.length}</Text>
-                </View>
-            </View>
-            <View style={{ ...view_styles.section_body }}>
-                <FlatList data={square_bids.sort((a,b) => parseInt(a.sq_square_id) - parseInt(b.sq_square_id))} renderItem={renderBids} keyExtractor={(item) => `b-${item.sq_square_id}`}/>
-                <View style={view_styles.body_row}>
-                    <Text style={{ flex:1 }} theme='body'>Total</Text>
-                    <Text theme='header_2'>{cl}{total_bid_amount.toFixed(2)}</Text>
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme="h1">SET BID AMOUNTS</Text>
+                        <Text style={{ marginTop:3 }} color={Colors.utility.error} size={12} weight='regular'>All purchases are final and cannot be removed</Text>
+                    </View>
+                    <View transparent style={{ height:24, width:24, borderRadius:100, backgroundColor:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center', marginLeft: 5 }}>
+                        <Text size={12} color={C.text.white} textAlign='center'>{square_bids.length}</Text>
+                    </View>
                 </View>
-                {player_balance && player_balance.promo_balance > 0 ?
-                <TouchableOpacity style={{ ...view_styles.body_row, margin:5, padding:5, backgroundColor:Colors.incentive.gold, borderRadius:8 }} onPress={() => setPromoBalance(!promo_balance)}>
-                    <Checkbox
-                        checked={promo_balance}
-                        disabled
-                        
-                        size={26}
-                        onSelect={() => setPromoBalance(!promo_balance)}
-                    />
-                    <View style={{ flex:1, marginLeft:10 }}>
-                        <Text size={12} color={Colors.shades.white} weight='bold'>${player_balance.promo_balance.toFixed(2)} Promotion Available</Text>
-                        <Text size={10} color={Colors.shades.white} weight='regular' style={{ marginTop:3 }}>Press / Click here to use promo balance</Text>
+                )
+            case 'bids':
+                return (
+                <View type='body' transparent style={{ padding:20, flexGrow:1 }}>
+                    <FlatList data={square_bids.sort((a,b) => parseInt(a.sq_square_id) - parseInt(b.sq_square_id))} renderItem={renderBids} keyExtractor={(item) => `b-${item.sq_square_id}`}/>
+                    <View transparent style={view_styles.body_row}>
+                        <Text style={{ flex:1 }} theme='description'>Total</Text>
+                        <Text theme='h2'>{cl}{total_bid_amount.toFixed(2)}</Text>
                     </View>
-                </TouchableOpacity>
-                :<></>}
-                <View style={{ ...view_styles.body_row }}>
-                    <TouchableOpacity 
-                        style={{ flex:1/3, padding:12, borderRadius:4, borderWidth:1, borderColor:Colors.brand.cobalt, justifyContent:'center', alignItems:'center', marginRight:4}} onPress={() => onClearBids()}>
-                        <Text size={14} weight='semibold' textAlign='center' color={Colors.brand.cobalt}>Clear</Text>
-                    </TouchableOpacity>
-                    {player_id ?
-                    <TouchableOpacity 
-                        style={{ flex:2/3, padding:12, borderRadius:4, backgroundColor:submit_ready.is_ready?Colors.highlights.highlight400:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center', marginLeft:4, opacity:submit_ready.is_loading || !can_submit?0.5:1 }} onPress={() => onSubmitBid(promo_balance)}
-                        disabled={!can_submit}
-
-                        >
-                        {submit_ready.is_loading ?
-                        <ActivityIndicator size='small' color={Colors.shades.white}/>
-                        :
-                        <Text size={14} weight='semibold' textAlign='center' color={Colors.shades.white}>{submit_ready.is_ready?'Submit Bids':'Review Bids'}</Text>
-                        }
-                    </TouchableOpacity>
-                    :
-                    <TouchableOpacity style={{ flex:2/3, padding:12, borderRadius:4, backgroundColor:Colors.highlights.highlight400, justifyContent:'center', alignItems:'center', marginLeft:4 }} onPress={() => onRequestAuthenticate()}>
-                        <Text size={14} weight='semibold' textAlign='center' color={Colors.shades.white}>Sign Up</Text>
-                    </TouchableOpacity>
-                    }
+                    {player_balance && player_balance.promo_balance > 0 ?
+                    <Button transparent style={{ flexDirection:'row', alignItems:'center', margin:5, padding:5, backgroundColor:C.text.gold, borderRadius:8 }} onPress={() => setPromoBalance(!promo_balance)}>
+                        <Checkbox
+                            checked={promo_balance}
+                            disabled
+                            size={26}
+                            onSelect={() => setPromoBalance(!promo_balance)}
+                        />
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text size={12} color={C.text.white} weight='bold'>${player_balance.promo_balance.toFixed(2)} Promotion Available</Text>
+                            <Text size={10} color={C.text.white} weight='regular' style={{ marginTop:3 }}>Press / Click here to use promo balance</Text>
+                        </View>
+                    </Button>
+                    :<></>}
                 </View>
+                )
+            
+            default: return <></>
+        }
+    }
+ 
+    return (
+        <View float style={{ padding:0, maxHeight:550, maxWidth:600 }}>
+            <FlatList
+                key='bid_form_sections'
+                data={form_sections}
+                renderItem={renderSections}
+                keyExtractor={(item) => item}
+            />
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10}}>
+                <Button 
+                    title='CLEAR'
+                    style={{ flex:1 }}
+                    type='close'
+                    onPress={() => onClearBids()}>
+                </Button>
+                {player_id ?
+                <Button 
+                    loading={submit_ready.is_loading}
+                    style={{ flex:3, marginLeft:10,  backgroundColor:submit_ready.is_ready?Colors.highlights.highlight400:Colors.highlights.highlight200, opacity:submit_ready.is_loading || !can_submit?0.5:1 }} 
+                    title_color={C.text.white}
+                    onPress={() => onSubmitBid(promo_balance)}
+                    disabled={!can_submit}
+                    title={submit_ready.is_ready?'Submit Bids':'Review Bids'}
+                    >
+                    
+                </Button>
+                :
+                <Button style={{ flex:2/3, padding:12, borderRadius:4, backgroundColor:Colors.highlights.highlight400, justifyContent:'center', alignItems:'center', marginLeft:4 }} onPress={() => onRequestAuthenticate()}>
+                    <Text size={14} weight='semibold' textAlign='center' color={Colors.shades.white}>Sign Up</Text>
+                </Button>
+                }
             </View>
-            </ScrollView>
         </View>
     )
 }

package/src/Squares/components/BidToggle.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { TouchableOpacity, View } from "react-native"
-import { Text } from "../../Components"
 import Colors from "../../constants/colors"
 import { view_styles } from "../../constants/styles"
+import { Button, Text, View } from '../../Components/Themed';
 
 type BidToggleProps = { 
     cl: string,
@@ -14,13 +13,13 @@ type BidToggleProps = {
 const BidToggle = ({ cl, amount, onAmountChange }:BidToggleProps) => {
     return (
         <View style={{ ...view_styles.body_row, borderWidth:1, borderColor:Colors.accents.accent200, borderRadius:4, padding:0 }}>
-            <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', padding:12, borderRightWidth:1, borderRightColor:Colors.accents.accent200}} onPress={() => onAmountChange('decrease')}>
-                <Text size={16} weight='semibold' color={Colors.brand.electric} textAlign='center'>-</Text>
-            </TouchableOpacity>
-            <Text style={{ marginLeft:4, marginRight:4 }} theme="header_2">{cl}{amount.toFixed(2)}</Text>
-            <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', padding:12,  borderLeftWidth:1, borderLeftColor:Colors.accents.accent200}} onPress={() => onAmountChange('increase')}>
-                <Text size={16} weight='semibold' color={Colors.brand.electric} textAlign='center'>+</Text>
-            </TouchableOpacity>
+            <Button style={{ justifyContent:'center', alignItems:'center', padding:12, borderRightWidth:1, borderRightColor:Colors.accents.accent200}} onPress={() => onAmountChange('decrease')}>
+                <Text size={16} weight='semibold' theme='action' textAlign='center'>-</Text>
+            </Button>
+            <Text style={{ marginLeft:4, marginRight:4 }} theme="h2">{cl}{amount.toFixed(2)}</Text>
+            <Button style={{ justifyContent:'center', alignItems:'center', padding:12,  borderLeftWidth:1, borderLeftColor:Colors.accents.accent200}} onPress={() => onAmountChange('increase')}>
+                <Text size={16} weight='semibold' theme='action' textAlign='center'>+</Text>
+            </Button>
         </View>
     )
 }

package/src/Squares/components/BoardStats.tsx

@@ -1,9 +1,8 @@
-import { View, TouchableOpacity } from "react-native"
-import { Icons, Text } from "../../Components"
-import { view_styles } from "../../constants/styles"
-import Colors from "../../constants/colors"
+import { Icons } from "../../Components"
 import type { PlayerSquareProps, SquareProps, SquaresCompetitionProps } from "../../types"
 import React, { useState } from "react"
+import { Button, Text, View } from "../../Components/Themed"
+import { useColors } from "../../constants/useColors"
 
 type BoardStatsProps = {
     squares_competition:SquaresCompetitionProps,
@@ -12,6 +11,7 @@ type BoardStatsProps = {
 }
 
 const BoardStats = ({ squares_competition, squares, player_squares}:BoardStatsProps) => {
+    const C = useColors();
     const [ expanded, setExpanded ] = useState(false);
 
     let total_payout = squares_competition.potential_winnings
@@ -21,37 +21,37 @@ const BoardStats = ({ squares_competition, squares, player_squares}:BoardStatsPr
     const ownership_pct = active_ps.length / squares.length * 100
 
     return (
-        <View style={{ ...view_styles.section, minWidth:350 }}>
-                <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
-                    <Icons.PieIcon color={Colors.brand.midnight} size={18} />
-                    <View style={{ flex:1, marginLeft:10 }}>
-                        <Text theme="header">BOARD STATS</Text>
-                        <Text style={{ marginTop: 4 }} theme="body_2">Current statistics from the squares board</Text>
+        <View float style={{ minWidth:350 }}>
+                <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+                    <Icons.PieIcon color={C.text.h1} size={18} />
+                    <View transparent style={{ flex:1, marginLeft:10 }}>
+                        <Text theme="h1">BOARD STATS</Text>
+                        <Text style={{ marginTop: 4 }} theme="description">Current statistics from the squares board</Text>
                     </View>
-                    <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={Colors.brand.midnight} size={8} />
-                </TouchableOpacity>
+                    <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={C.text.h1} size={8} />
+                </Button>
                 {expanded ?
-                <View style={view_styles.section_body}>
-                    <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                        <View style={{flex:1, marginRight:10}}>
-                            <Text theme="header_2">Unbid Squares</Text>
-                            <Text style={{ marginTop:3 }} theme="body_2">Percent of the board that has no bids</Text>
+                <View transparent style={{ padding:10 }}>
+                    <View transparent type='row'  style={{ borderBottomWidth:1, borderColor:C.borders.light, padding:10 }}>
+                        <View transparent style={{flex:1, marginRight:10}}>
+                            <Text theme="h2">Unbid Squares</Text>
+                            <Text style={{ marginTop:3 }} theme="description">Percent of the board that has no bids</Text>
                         </View>
-                        <Text theme="header_2">{(squares.length - active_ps.length).toFixed()} ({(100 - ownership_pct).toFixed(2)}%)</Text>
+                        <Text theme="h2">{(squares.length - active_ps.length).toFixed()} ({(100 - ownership_pct).toFixed(2)}%)</Text>
                     </View>
-                    <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                        <View style={{flex:1, marginRight:10}}>
-                            <Text theme="header_2">Current Total Payout</Text>
-                            <Text style={{ marginTop:3 }} theme="body_2">The current total amount to be paid out to the winners</Text>
+                    <View transparent type='row'  style={{ borderBottomWidth:1, borderColor:C.borders.light, padding:10 }}>
+                        <View transparent style={{flex:1, marginRight:10}}>
+                            <Text theme="h2">Current Total Payout</Text>
+                            <Text style={{ marginTop:3 }} theme="description">The current total amount to be paid out to the winners</Text>
                         </View>
-                        <Text size={16} color={Colors.utility.success} weight='bold'>${total_payout.toFixed(2)}</Text>
+                        <Text size={16} color={C.text.success} weight='bold'>${total_payout.toFixed(2)}</Text>
                     </View>
-                    <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                        <View style={{flex:1, marginRight:10}}>
-                            <Text theme="header_2">Current Iteration Payout</Text>
-                            <Text style={{ marginTop:3 }} theme="body_2">The current amount to be paid out per quarter</Text>
+                    <View transparent type='row'  style={{ borderBottomWidth:1, borderColor:C.borders.light, padding:10 }}>
+                        <View transparent style={{flex:1, marginRight:10}}>
+                            <Text theme="h2">Current Iteration Payout</Text>
+                            <Text style={{ marginTop:3 }} theme="description">The current amount to be paid out per quarter</Text>
                         </View>
-                        <Text size={16} color={Colors.utility.success} weight='bold'>${iteration_payout.toFixed(2)}</Text>
+                        <Text size={16} color={C.text.success} weight='bold'>${iteration_payout.toFixed(2)}</Text>
                     </View>
                 </View>
                 :<></>}

package/src/Squares/components/EventCard.tsx

@@ -1,68 +1,70 @@
-import { Image, View, TouchableOpacity } from "react-native"
+import { Image } from "react-native"
 import { view_styles } from "../../constants/styles"
-import { Icons, Text } from "../../Components"
+import { Icons } from "../../Components"
 import type { EventProps, LeagueProps } from "../../types"
 import moment from "moment-mini"
-import Colors from "../../constants/colors"
 import React, { useState } from "react"
+import { Button, Text, View } from "../../Components/Themed"
+import { useColors } from "../../constants/useColors"
 
 type EventCardProps = {
     league?:LeagueProps,
     event:EventProps
 }
 const EventCard = ({ event, league }:EventCardProps) => {
+    const C = useColors();
     const [ expanded, setExpanded ] = useState(true);
     const overtime_occurred = event.event_scoring && event.event_scoring.length > 4 ? true : false;
 
     return (
-        <View style={{ ...view_styles.section, minWidth:350 }}>
-                <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
-                    <View style={{ flexDirection:'row', alignItems:'center', paddingRight:5, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
-                        {league ?
-                        <Image
-                            source={{ uri: league.league_image }}
-                            style={{ height:30, width:30, borderRadius:4, marginRight:5 }}
-                            resizeMode="cover"
-                        />
-                        :<></>}
-                    </View>
-                    <View style={{ flex:1, marginLeft:5 }}>
-                        <Text theme="header">{event.away?.market_name} {event.away?.name} vs {event.home?.market_name} {event.home?.name}</Text>
-                        <Text style={{ marginTop:3 }} theme="body_2">{event.time_detail == 'scheduled' ? moment(event.scheduled_datetime).format('MMM D - hh:mm a') : event.time_detail}</Text>
-                    </View>
-                    <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
-                </TouchableOpacity>
+        <View float style={{ minWidth:350 }}>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+                <View transparent style={{ flexDirection:'row', alignItems:'center', paddingRight:5, borderRightWidth:1, borderColor:C.borders.light }}>
+                    {league ?
+                    <Image
+                        source={{ uri: league.league_image }}
+                        style={{ height:30, width:30, borderRadius:4, marginRight:5 }}
+                        resizeMode="cover"
+                    />
+                    :<></>}
+                </View>
+                <View transparent style={{ flex:1, marginLeft:5 }}>
+                    <Text theme="h1">{event.away?.market_name} {event.away?.name} vs {event.home?.market_name} {event.home?.name}</Text>
+                    <Text style={{ marginTop:3 }} theme="description">{event.time_detail == 'scheduled' ? moment(event.scheduled_datetime).format('MMM D - hh:mm a') : event.time_detail}</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={C.text.h1} size={8} />
+            </Button>
                 {event.event_scoring && expanded ?
-                <View style={view_styles.section_body}>
-                    <View style={view_styles.body_row}>
+                <View transparent style={{ borderTopWidth:1, borderColor:C.borders.light, padding:10 }}>
+                    <View transparent style={view_styles.body_row}>
                         <Image
                             source={{ uri: event.away?.image?.url }}
                             style={{ height:20, width:20, borderRadius:4, marginRight:5 }}
                             resizeMode="cover"
                         />
-                        <Text style={{ flex:1 }} theme="body">{event.away?.abbr}</Text>
-                        <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} theme="description">{event.away?.abbr}</Text>
+                        <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
                             {event.event_scoring.sort((a,b) => a.period - b.period).map(s => {
                                 return (
-                                    <View style={{ flex:1 }}>
-                                        <Text theme={overtime_occurred && s.period == 4 ? 'error_header_2': 'header_2'}>{s.away_cumulative_score}</Text>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme={overtime_occurred && s.period == 4 ? 'error': 'h2'}>{s.away_cumulative_score}</Text>
                                     </View>
                                 )
                             })}
                         </View>
                     </View>
-                    <View style={view_styles.body_row}>
+                    <View transparent style={view_styles.body_row}>
                         <Image
                             source={{ uri: event.home?.image?.url }}
                             style={{ height:20, width:20, borderRadius:4, marginRight:5 }}
                             resizeMode="cover"
                         />
-                        <Text style={{ flex:1 }} theme="body">{event.home?.abbr}</Text>
-                        <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} theme="description">{event.home?.abbr}</Text>
+                        <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
                             {event.event_scoring.map(s => {
                                 return (
-                                    <View style={{ flex:1 }}>
-                                        <Text theme={overtime_occurred && s.period == 4 ? 'error_header_2': 'header_2'}>{s.home_cumulative_score}</Text>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme={overtime_occurred && s.period == 4 ? 'error': 'h2'}>{s.home_cumulative_score}</Text>
                                     </View>
                                 )
                             })}

package/src/Squares/components/MySquaresCard.tsx

@@ -1,10 +1,11 @@
-import { View, TouchableOpacity, FlatList } from 'react-native';
+import { FlatList } from 'react-native';
 import type { PlayerSquareProps, SquareOfferProps, SquareProps, SquareValueProps } from '../../types';
-import { view_styles } from '../../constants/styles';
-import { Button, Icons, Text } from '../../Components';
+import { Icons } from '../../Components';
 import React, { useState } from 'react';
 import Colors from '../../constants/colors';
 import { SquaresApi } from '../api';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type MySquaresCardProps = {
     player_squares:PlayerSquareProps[],
@@ -18,8 +19,8 @@ type MySquaresCardProps = {
 }
 
 const MySquaresCard = ({ player_squares, squares, away_abbr, home_abbr, square_offers, my_square_values, comp_status, onSquareOffer }: MySquaresCardProps) => {
+    const C = useColors();
     const [ expanded, setExpanded ] = useState(false);
-    
     const renderPlayerSquares = (data: { item:SquareValueProps, index: number }) => {
         const player_square = player_squares.find(ps => ps.sq_square_id == data.item.sq_square_id);
         const square = squares.find(s => s.sq_square_id == data.item.sq_square_id);
@@ -27,18 +28,18 @@ const MySquaresCard = ({ player_squares, squares, away_abbr, home_abbr, square_o
         const square_offer = square_offers.find(so => so.sq_player_square_id == player_square.sq_player_square_id && so.status == 'offered');
         const square_value = my_square_values.find(sv => sv.sq_square_id == player_square.sq_square_id);
         return (
-            <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header_2'>SQUARE: {home_abbr}: {square.square_score_x}, {away_abbr}: {square.square_score_y}</Text>
-                    <Text style={{ marginTop:3 }} theme='body_2'>${player_square.purchase_price.toFixed(2)}</Text>
+            <View transparent type='row' style={{ padding:5, borderBottomWidth:1, borderColor:C.borders.light }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h2'>SQUARE: {home_abbr}: {square.square_score_x}, {away_abbr}: {square.square_score_y}</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>${player_square.purchase_price.toFixed(2)}</Text>
                 </View>
                 {square_value ?
-                <View style={{ paddingRight:20, paddingLeft:20 }}>
-                    <Text size={14} weight='bold' color={square_value.expected_value > 0 ? Colors.utility.success : Colors.utility.error}>EV ${square_value.expected_payout.toFixed(2)}</Text>
+                <View transparent style={{ paddingRight:20, paddingLeft:20 }}>
+                    <Text size={14} weight='bold' color={square_value.expected_value > 0 ? C.text.success : C.text.error}>EV ${square_value.expected_payout.toFixed(2)}</Text>
                 </View>
                 :<></>}
                 {comp_status == 'in_progress' ?
-                <View>
+                <View transparent>
                     {square_offer ?
                     <Button
                         title='WITHDRAW'
@@ -49,8 +50,8 @@ const MySquaresCard = ({ player_squares, squares, away_abbr, home_abbr, square_o
                     :
                     <Button
                         title='SELL'
-                        title_color={Colors.shades.white}
-                        backgroundColor={Colors.brand.electric}
+                        title_color={C.text.white}
+                        backgroundColor={C.text.action}
                         onPress={() => onSquareOffer(square, 'add')}
                     />
                     }
@@ -62,21 +63,21 @@ const MySquaresCard = ({ player_squares, squares, away_abbr, home_abbr, square_o
 
 
     return (
-        <View style={{ ...view_styles.section, minWidth:350 }}>
-            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
-                <View style={{ height:18, width:18, borderRadius:100, backgroundColor:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center' }}>
+        <View float style={{ minWidth:350 }}>
+            <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>
                 </View>
-                <View style={{flex:1, marginLeft:10}}>
-                    <Text theme='header'>MY SQUARES</Text>
-                    <Text style={{ marginTop:3 }} theme='body_2'>Square you either own or have the highest bid on</Text>
+                <View transparent style={{flex:1, marginLeft:10}}>
+                    <Text theme='h1'>MY SQUARES</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Square you either own or have the highest bid on</Text>
                 </View>
-                <Icons.ChevronIcon direction={expanded?'up':'down'} size={8} color={Colors.brand.midnight}/>
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} size={8} color={C.text.h1}/>
+            </Button>
             {expanded ? 
-            <View style={view_styles.section_body}>
+            <View transparent style={{ padding:20 }}>
                 <FlatList
-                    data={my_square_values.sort((a,b) => b.expected_value - a.expected_value)}
+                    data={my_square_values.filter(sv => player_squares.map(ps => ps.sq_square_id.toString()).includes(sv.sq_square_id.toString())).sort((a,b) => b.expected_value - a.expected_value)}
                     renderItem={renderPlayerSquares}
                     keyExtractor={(item) => item.sq_square_id.toString()}
                 />