be-components 6.9.2 → 6.9.4

package/src/Squares/components/BidForm.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { FlatList } from 'react-native';
-import { view_styles } from '../../constants/styles';
 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';
@@ -27,7 +25,7 @@ type BidFormProps = {
 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 Colors = 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)
@@ -39,7 +37,7 @@ 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 type='row' transparent style={{ borderBottomWidth:1, borderColor:C.borders.light, padding:5}}>
+            <View type='row' transparent style={{ borderBottomWidth:1, borderColor:Colors.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>
@@ -55,13 +53,13 @@ const BidForm = ({ player_id, player_balance, market_type, home_abbr, away_abbr,
         switch(data.item){
             case 'header':
                 return (
-                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                     <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>
+                        <Text style={{ marginTop:3 }} color={Colors.text.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 float style={{ height:24, width:24, borderRadius:100, justifyContent:'center', alignItems:'center', marginLeft: 5 }}>
+                        <Text size={12} theme='h1' textAlign='center'>{square_bids.length}</Text>
                     </View>
                 </View>
                 )
@@ -69,12 +67,12 @@ const BidForm = ({ player_id, player_balance, market_type, home_abbr, away_abbr,
                 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}>
+                    <View transparent type='row' style={{ marginTop:5 }}>
                         <Text style={{ flex:1 }} theme='description'>Total</Text>
                         <Text theme='h2'>{cl}{total_bid_amount.toFixed(2)}</Text>
                     </View>
                     {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)}>
+                    <Button transparent style={{ flexDirection:'row', alignItems:'center', margin:5, padding:5, backgroundColor:Colors.text.gold, borderRadius:8 }} onPress={() => setPromoBalance(!promo_balance)}>
                         <Checkbox
                             checked={promo_balance}
                             disabled
@@ -82,8 +80,8 @@ const BidForm = ({ player_id, player_balance, market_type, home_abbr, away_abbr,
                             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>
+                            <Text size={12} color={Colors.text.white} weight='bold'>${player_balance.promo_balance.toFixed(2)} Promotion Available</Text>
+                            <Text size={10} color={Colors.text.white} weight='regular' style={{ marginTop:3 }}>Press / Click here to use promo balance</Text>
                         </View>
                     </Button>
                     :<></>}
@@ -102,27 +100,27 @@ const BidForm = ({ player_id, player_balance, market_type, home_abbr, away_abbr,
                 renderItem={renderSections}
                 keyExtractor={(item) => item}
             />
-            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10}}>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>                
                 <Button 
+                    type='error'
                     title='CLEAR'
-                    style={{ flex:1 }}
-                    type='close'
-                    onPress={() => onClearBids()}>
+                    style={{ flex:1 }} onPress={() => onClearBids()}>
                 </Button>
                 {player_id ?
                 <Button 
+                    disabled={!can_submit || submit_ready.is_loading}
                     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}
+                    style={{ flex:2, opacity:submit_ready.is_loading || !can_submit ? 0.5:1, marginLeft:5, backgroundColor:submit_ready.is_ready?Colors.text.success:Colors.text.action }} 
+                    type='success'
+                    title={submit_ready.is_ready?'SUBMIT OFFER':'REVIEW OFFER'}
                     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 
+                    style={{ flex:2, marginLeft:5 }}
+                    type='success'
+                    onPress={() => onRequestAuthenticate()}>
+                    <Text size={14} weight='semibold' textAlign='center' color={Colors.text.white}>Sign Up</Text>
                 </Button>
                 }
             </View>

package/src/Squares/components/OfferForm.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { ActivityIndicator, FlatList } from "react-native"
+import { FlatList } from "react-native"
 import type { PlayerBalanceProps, PlayerSquareProps, SquareOfferProps, SquareProps } from "../../types"
 import BidToggle from "./BidToggle"
-import { view_styles } from "../../constants/styles"
-import Colors from "../../constants/colors"
 import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type OfferFormProps = {
     player_id?:string,
@@ -23,7 +22,8 @@ type OfferFormProps = {
     squares:SquareProps[]
 }
 
-const OfferForm = ({ player_id, player_balance, market_type, width, squares, submit_ready, home_abbr, away_abbr, player_squares, draft_square_offers, onRequestAuthenticate, onOfferAmountChange, onClearOffers, onSubmitOffer }:OfferFormProps) => {
+const OfferForm = ({ player_id, player_balance, market_type, squares, submit_ready, home_abbr, away_abbr, player_squares, draft_square_offers, onRequestAuthenticate, onOfferAmountChange, onClearOffers, onSubmitOffer }:OfferFormProps) => {
+    const Colors = useColors();
     const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
     const total_offer_amount = draft_square_offers.reduce((a,b) => a + b.amount, 0)
 
@@ -36,12 +36,12 @@ const OfferForm = ({ player_id, player_balance, market_type, width, squares, sub
         let square = squares.find(s => s.sq_square_id == ps?.sq_square_id)
         if(!square){ return ( <></> ) }
         return (
-            <View style={{flex:1, flexDirection:'row', alignItems:'center', marginBottom:8}}>
-                <View style={{flex:1}}>
+            <View transparent style={{flex:1, flexDirection:'row', alignItems:'center', marginBottom:8}}>
+                <View transparent style={{flex:1}}>
                     <Text theme='description'>SQUARE: {home_abbr}: {square.square_score_x}, {away_abbr}: {square.square_score_y}</Text>
                     <Text theme='description'>Purchased Price: {cl}{ps.purchase_price.toFixed(2)}</Text>
                 </View>
-                <View>
+                <View transparent>
                     <BidToggle sq_square_id={square.sq_square_id} amount={data.item.amount} cl={cl}  onAmountChange={(dir) => onOfferAmountChange(data.item, ps, dir)}/>
                 </View>
             </View>
@@ -51,9 +51,9 @@ const OfferForm = ({ player_id, player_balance, market_type, width, squares, sub
     if(!draft_square_offers[0]){ return <></> }
 
     return (
-        <View style={{ ...view_styles.section, width, padding:0, maxHeight:550, maxWidth:600 }}>
-            <View style={ view_styles.section_header }>
-                <View style={{ flex:1 }}>
+        <View float>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <View transparent style={{ flex:1 }}>
                     <Text theme="h1">SET YOUR {draft_square_offers[0].buy_sell_ind==='buy'?'OFFER AMOUNTS':'SELL PRICE'}</Text>
                     {draft_square_offers[0].buy_sell_ind === 'buy' ?
                     <Text style={{ marginTop:3 }} theme="description">How much are you willing to offer the current square owner</Text>
@@ -61,38 +61,42 @@ const OfferForm = ({ player_id, player_balance, market_type, width, squares, sub
                     <Text style={{ marginTop:3 }} theme="description">How much are you willing to sell the selected square for?</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'>{draft_square_offers.length}</Text>
+                <View float style={{ height:24, width:24, borderRadius:100, justifyContent:'center', alignItems:'center', marginLeft: 5 }}>
+                    <Text size={12} color={Colors.text.h1} textAlign='center'>{draft_square_offers.length}</Text>
                 </View>
             </View>
 
-            <View style={{ ...view_styles.section_body }}>
+            <View transparent type='body' style={{ padding:10 }}>
                 <FlatList data={draft_square_offers.sort((a,b) => parseInt(a.sq_player_square_id) - parseInt(b.sq_player_square_id))} renderItem={renderDraftOffers} keyExtractor={(item) => `o-${item.sq_player_square_id}`}/>
-                <View style={view_styles.body_row}>
-                    <Text style={{ flex:1 }} theme='description'>Total</Text>
-                    <Text theme='h2'>{cl}{total_offer_amount.toFixed(2)}</Text>
-                </View>
-                <View style={{ ...view_styles.body_row }}>
-                    <Button style={{ flex:1/3, padding:12, borderRadius:4, borderWidth:1, borderColor:Colors.brand.cobalt, justifyContent:'center', alignItems:'center', marginRight:4 }} onPress={() => onClearOffers()}>
-                        <Text size={14} weight='semibold' textAlign='center' color={Colors.brand.cobalt}>Clear</Text>
-                    </Button>
-                    {player_id ?
-                    <Button 
-                    disabled={!can_submit}
-                    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={() => onSubmitOffer()}>
-                        {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 Offers':'Review Offers'}</Text>
-                        }
-                    </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 transparent type='row' style={{ marginTop:5 }}>
+                    <Text style={{ flex:1 }} theme='h2'>Total</Text>
+                    <Text theme='h1'>{cl}{total_offer_amount.toFixed(2)}</Text>
                 </View>
             </View>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>                
+                <Button 
+                    type='error'
+                    title='CLEAR'
+                    style={{ flex:1 }} onPress={() => onClearOffers()}>
+                </Button>
+                {player_id ?
+                <Button 
+                    disabled={!can_submit || submit_ready.is_loading}
+                    loading={submit_ready.is_loading}
+                    style={{ flex:2, opacity:submit_ready.is_loading || !can_submit ? 0.5:1, marginLeft:5, backgroundColor:submit_ready.is_ready?Colors.text.success:Colors.text.action }} 
+                    type='success'
+                    title={submit_ready.is_ready?'SUBMIT OFFER':'REVIEW OFFER'}
+                    onPress={() => onSubmitOffer()}
+                />
+                :
+                <Button 
+                    style={{ flex:2, marginLeft:5 }}
+                    type='success'
+                    onPress={() => onRequestAuthenticate()}>
+                    <Text size={14} weight='semibold' textAlign='center' color={Colors.text.white}>Sign Up</Text>
+                </Button>
+                }
+            </View>
         </View>
     )
 }

package/src/Squares/components/SquareOfferCard.tsx

@@ -1,22 +1,25 @@
 import React, { useState } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { Text } from '../../Components';
-import Colors from '../../constants/colors';
-import type { PlayerSquareProps, SquareOfferProps, SquareProps } from '../../types';
+import type { PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquareProps } from '../../types';
 import { SquaresApi } from '../api';
-import { view_styles } from '../../constants/styles';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
+import { Image } from 'react-native';
 
 type SquareOfferCardProps = { 
     player_id?:string, 
     square:SquareProps, 
+    offer_owner?:PublicPlayerProps,
     player_square:PlayerSquareProps, 
     square_offer:SquareOfferProps, 
     home_abbr?:string,
     away_abbr?:string,
     onRequestAuthenticate: () => void
 }
-const SquareOfferCard = ({ player_id, square, player_square, square_offer, away_abbr, home_abbr, onRequestAuthenticate }: SquareOfferCardProps ) => {
-    const [ loading, setLoading ] = useState(false)
+const SquareOfferCard = ({ player_id, offer_owner, square, player_square, square_offer, away_abbr, home_abbr, onRequestAuthenticate }: SquareOfferCardProps ) => {
+    const Colors = useColors();
+    const [ loading, setLoading ] = useState(false);
+    const [ hidden, setHidden ] = useState(false);
     const handleResponse = async(response:string) => {
         if(loading){ return  } //No mashymashy
         if(!player_id){ onRequestAuthenticate() }
@@ -26,6 +29,7 @@ const SquareOfferCard = ({ player_id, square, player_square, square_offer, away_
                 await SquaresApi.offserSquare({ ...square_offer, status: 'accepted' })
                 break
             case 'rejected':
+                if(square_offer.buy_sell_ind == 'sell'){ return setHidden(true) }
                 await SquaresApi.offserSquare({ ...square_offer, status: 'rejected' })
                 break
             case 'withdrawn':
@@ -35,56 +39,82 @@ const SquareOfferCard = ({ player_id, square, player_square, square_offer, away_
         }
         setLoading(false)
     }
+
+    const handleConfirmResponse = (response:string) => {
+        showConfirmAlert('Are you sure?', 'Your response is final and cannot be modified',
+            () => handleResponse(response),
+            () => console.log('')
+        )
+    }
     
+    if(hidden){ return <></> }
     
     const cl = square_offer.market_type === 'FOR_MONEY' ? '$' : 'E'
     const mine = square_offer.offerer_id == player_id ? true : false
     return (
-        <View style={{ ...view_styles.section, minWidth:250, flex:1 }}>
-            <View style={{ ...view_styles.section_header, backgroundColor:square_offer.buy_sell_ind == 'buy' ? Colors.brand.midnight : Colors.brand.cyan}}>
-                <Text style={{flex:1}} size={16} weight='bold' color={Colors.shades.white}>Squares{square_offer.buy_sell_ind === 'sell'?' Sale':' Buy'} Offer</Text>
+        <View float style={{ minWidth:250, maxWidth:275, flexGrow:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius: 8, borderTopLeftRadius:8}}>
+                {offer_owner ?
+                <View float style={{ padding:2, marginRight:5, borderRadius:100 }}>
+                    <Image
+                        source={{ uri:offer_owner.profile_pic }}
+                        style={{ height:35, width:35, borderRadius:100 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                :<></>}
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>Squares{square_offer.buy_sell_ind === 'sell'?' Sale':' Buy'} Offer</Text>
+                    {square_offer.buy_sell_ind == 'sell' && mine ?
+                    <Text theme='description'>This is your sell offer. Other players can buy this square for the price noted below</Text>
+                    : square_offer.buy_sell_ind == 'sell' && !mine ?
+                    <Text theme='description'>This is a sale offer from another user. You can buy their square for the stated price right now</Text>
+                    :square_offer.buy_sell_ind == 'buy' && !mine ?
+                    <Text theme='description'>This is an offer from another user to purchase your square.  Sell or reject the offer below</Text>
+                    :
+                    <Text theme='description'>This is your buy offer.  The owner can accept or reject your offer</Text>
+                    }
+                </View>
             </View>
-            <View style={view_styles.section_body}>
-                <View style={view_styles.body_row}>
-                    <Text style={{ flex:1 }} theme='body'>Square</Text>
-                    <Text theme='header_2'>{home_abbr??''}: {square.square_score_x}, {away_abbr??''}: {square.square_score_y}</Text>
+            <View transparent type='body' style={{ padding:5, flexGrow:1 }}>
+                <View transparent type='row' style={{ padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <Text style={{ flex:1 }} theme='description'>Square</Text>
+                    <Text theme='h2'>{home_abbr??''}: {square.square_score_x}, {away_abbr??''}: {square.square_score_y}</Text>
                 </View>
-                <View style={view_styles.body_row}>
-                    <Text style={{ flex:1 }} theme='body'>Purchased For</Text>
-                    <Text theme='header_2'>{cl}{player_square.purchase_price.toFixed(2)}</Text>
+                <View transparent type='row' style={{ padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <Text style={{ flex:1 }} theme='description'>Purchased For</Text>
+                    <Text theme='h2'>{cl}{player_square.purchase_price.toFixed(2)}</Text>
                 </View>
-                <View style={view_styles.body_row}>
-                    <Text style={{ flex:1 }} theme='body'>Offer Amount</Text>
-                    <Text theme='header_2'>{cl}{square_offer.amount.toFixed(2)}</Text>
+                <View transparent type='row' style={{ padding:5 }}>
+                    <Text style={{ flex:1 }} theme='description'>Offer Amount</Text>
+                    <Text theme='h1' color={Colors.text.success}>{cl}{square_offer.amount.toFixed(2)}</Text>
                 </View>
             </View>
-            <View style={{ ...view_styles.section_footer,backgroundColor:square_offer.buy_sell_ind == 'buy' ? Colors.brand.midnight : Colors.brand.cyan, }}>
-            {mine ?
-                <View style={{  flexDirection:'row', alignItems:'center', borderBottomRightRadius:10, borderBottomLeftRadius:10}}>
-                    <View style={{flex:1, maxWidth:140}}>
-                        <Text size={12} color={Colors.shades.white} weight='semibold'>WITHDRAW OFFER?</Text>
-                        <Text size={12} color={Colors.shades.white} weight='regular'>Do you wish to withdraw this offer?</Text>
-                    </View>
-                    <View style={{ flexDirection:'row', alignItems:'center', paddingLeft:10}}>
-                        <TouchableOpacity style={{flex:1, borderWidth:1, borderColor:Colors.shades.white, borderRadius:60, padding:10, marginLeft:4}} onPress={() => handleResponse('withdrawn')}>
-                            <Text size={12} weight='semibold' textAlign='center' color={Colors.shades.white}>Withdraw</Text>
-                        </TouchableOpacity>
-                    </View>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10 }}>
+                {mine ?
+                <View type='row' transparent style={{ flex:1 }}>
+                    <Button 
+                        type='error'
+                        loading={loading}
+                        title='WITHDRAW'
+                        style={{flex:1, padding:12, opacity: loading?0.5:1 }} onPress={() => handleConfirmResponse('withdrawn')}
+                    />
                 </View>
                 :
-                <View style={{ flexDirection:'row', alignItems:'center', borderBottomRightRadius:10, borderBottomLeftRadius:10}}>
-                    <View style={{flex:1, maxWidth:140}}>
-                        <Text size={12} color={Colors.shades.white} weight='semibold'>ACCEPT OFFER?</Text>
-                        <Text size={12} color={Colors.shades.white} weight='regular'>Do you wish to sell your square for this offer?</Text>
-                    </View>
-                    <View style={{ flexDirection:'row', alignItems:'center', paddingLeft:10}}>
-                        <TouchableOpacity style={{flex:1, borderRadius:60, padding:10, marginRight:4, backgroundColor:Colors.shades.white}} onPress={() => handleResponse('accepted')}>
-                            <Text size={12} weight='semibold' textAlign='center' color={Colors.brand.midnight}>Accept</Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity style={{flex:1, borderWidth:1, borderColor:Colors.shades.white, borderRadius:60, padding:10, minWidth:75, marginLeft:4}} onPress={() => handleResponse('rejected')}>
-                            <Text size={12} weight='semibold' textAlign='center' color={Colors.shades.white}>Decline</Text>
-                        </TouchableOpacity>
-                    </View>
+                <View type='row' transparent style={{ flex:1 }}>
+                   <Button 
+                        style={{flex:1, padding:12, opacity: loading?0.5:1  }} 
+                        type='error'
+                        loading={loading}
+                        title='DECLINE'
+                        onPress={() => handleConfirmResponse('rejected')}
+                    />
+                   <Button 
+                        type='success'
+                        loading={loading}
+                        title='ACCEPT'
+                        style={{flex:1, padding:12, marginLeft:5, opacity: loading?0.5:1 }} onPress={() => handleConfirmResponse('accepted')}
+                    />
                 </View>
                 }
             </View>

package/src/Squares/components/SquareOffersCard.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { FlatList } from 'react-native';
-import type { PlayerSquareProps, SquareOfferProps, SquareProps } from "../../types"
-import { view_styles } from '../../constants/styles';
+import type { PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquareProps } from "../../types"
 import { Icons } from '../../Components';
 import SquareOfferCard from './SquareOfferCard';
 import { Button, Text, View } from '../../Components/Themed';
@@ -9,6 +8,7 @@ import { useColors } from '../../constants/useColors';
 
 type SquareOffersCardProps = {
     player_id?:string,
+    players:PublicPlayerProps[],
     squares:SquareProps[],
     player_squares:PlayerSquareProps[],
     home_abbr?:string,
@@ -16,7 +16,7 @@ type SquareOffersCardProps = {
     square_offers:SquareOfferProps[],
     onRequestAuthenticate:() => void
 }
-const SquareOffersCard = ({ square_offers, squares, player_squares, player_id, away_abbr, home_abbr, onRequestAuthenticate }:SquareOffersCardProps) => {
+const SquareOffersCard = ({ square_offers, players, squares, player_squares, player_id, away_abbr, home_abbr, onRequestAuthenticate }:SquareOffersCardProps) => {
     const C = useColors();
     const [ expanded, setExpanded ] = useState(true);
 
@@ -25,11 +25,13 @@ const SquareOffersCard = ({ square_offers, squares, player_squares, player_id, a
         if(!player_square){ return <></> }
         const square = squares.find(s => s.sq_square_id == player_square.sq_square_id);
         if(!square){ return <></> }
+        const offer_from = players.find(p => p.player_id == data.item.offerer_id);
         return (
-            <View>
+            <View transparent style={{ margin:5 }}>
                 <SquareOfferCard
                     square_offer={data.item}
                     square={square}
+                    offer_owner={offer_from}
                     home_abbr={home_abbr}
                     away_abbr={away_abbr}
                     player_square={player_square}
@@ -39,18 +41,20 @@ const SquareOffersCard = ({ square_offers, squares, player_squares, player_id, a
             </View>
         )
     }
-
     return (
-        <View float style={{ minWidth:350 }}>
-            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+        <View style={{ minWidth:350 }}>
+            <Button transparent style={{ borderRadius:0, flexDirection:'row', alignItems:'center', backgroundColor:C.views.header }} onPress={() => setExpanded(!expanded)}>
+                <View float style={{ marginRight:10, height:26, width:26, borderRadius:100, justifyContent:'center', alignItems:'center', backgroundColor:C.text.success }}>
+                    <Text theme='h1' color={C.text.white}>{square_offers.length}</Text>
+                </View>
                 <View transparent style={{flex:1, marginRight:10}}>
                     <Text theme='h1'>SQUARE OFFERS</Text>
-                    <Text style={{ marginTop:3 }} theme='description'>These are offers from other users to buy or sell squares during the game</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>These are offers from you or other users to buy or sell squares during the game</Text>
                 </View>
                 <Icons.ChevronIcon direction={expanded?'up':'down'} size={8} color={C.text.h1} />
             </Button>
             {expanded ?
-            <View style={view_styles.section_body}>
+            <View transparent type='body' style={{ padding:10 }}>
                 <FlatList
                     data={square_offers}
                     renderItem={renderOffers}

package/src/Squares/components/SquaresBoard.tsx

@@ -33,14 +33,17 @@ const SquaresBoard = ({
 }:SquaresBoardProps) => {
     const C = useColors();
     const [ expanded, setExpanded ] = useState(true);
+    const [ transform_ready, setTransformReady ] = useState(false);
     const [ times_up, setTimesUp ] = useState(false);
     const [ refresh_allowed, setRefreshAllowed ] = useState(false);
     const [ square_bid, setSquareBid ] = useState<{square?:SquareProps, action?:'remove'|'add'}>({});
 
     useEffect(() => {
+        if(!transform_ready){ setTransformReady(true) }
         if(!square_bid.square || !square_bid.action){ return }
         handleSquareSelect(square_bid.square, square_bid.action)
-    },[square_bid.action, square_bid.square])
+    },[square_bid.action, square_bid.square]);
+
 
     const comp_status = SqauresHelpers.getCompStatus(event, squares_competition);
     const unique_score_y = [ ...new Set(squares.map(s => s.square_score_y)) ].sort((a,b) => a - b)
@@ -179,18 +182,21 @@ const SquaresBoard = ({
                 </View>
                 :<></>}
                 {event && event.away ?
-                <View transparent style={{ position:'absolute', top:0, left:4, bottom:0, justifyContent:'center' }}>
+                <View key={transform_ready?'rotate':'nope'} transparent style={{ position:'absolute', top:0, left:4, bottom:0, justifyContent:'center' }}>
                     <View transparent style={{ width: TEXT_HEIGHT, height: TEXT_LENGTH }}>
-                        <Text 
+                        <Text
                             textAlign="center"
-                            style={{
+                              style={{
+                                ...(transform_ready && {
                                 transform: [
-                                    { rotate: "-90deg" }, 
-                                    { translateX: -OFFSET }, 
-                                    { translateY: -OFFSET }
+                                    { rotate: "-90deg" },
+                                    { translateX: -OFFSET },
+                                    { translateY: -OFFSET },
                                 ],
+                                }),
                                 width: TEXT_LENGTH,
-                                height: TEXT_HEIGHT
+                                height: TEXT_HEIGHT,
+                                textAlign: "center",
                             }}
                             theme="h2"
                         >