be-components 3.3.6 → 3.3.7

package/src/Squares/components/SquaresBoard.tsx

@@ -1,13 +1,13 @@
-import { Button, Icons, Text } from "../../Components";
+import { Icons } from "../../Components";
 import type { EventProps, PlayerSquareProps, SquareOfferProps, SquareProps, SquareResultProps, SquaresCompetitionProps } from "../../types"
-import { View, FlatList, Image, TouchableOpacity, ScrollView, Platform } from 'react-native';
+import { FlatList, Image, ScrollView, Platform } from 'react-native';
 import SquareCard from "./SquareCard";
 import Countdown from './Countdown';
 import { SqauresHelpers } from "../api";
-import Colors from "../../constants/colors";
-import { view_styles } from "../../constants/styles";
 import React, { useState } from "react";
 import moment from "moment-mini";
+import { Button, Text, View } from "../../Components/Themed";
+import { useColors } from "../../constants/useColors";
 
 type SquaresBoardProps = {
     squares_competition:SquaresCompetitionProps,
@@ -28,6 +28,7 @@ type SquaresBoardProps = {
 const SquaresBoard = ({ 
     player_id, event, square_bids, draft_square_offers, squares_competition, player_square_history, square_offers, squares, player_squares, onRefreshCompetition, onSquareBid, onSquareOffer 
 }:SquaresBoardProps) => {
+    const C = useColors();
     const [ expanded, setExpanded ] = useState(true);
     const [ times_up, setTimesUp ] = useState(false);
     const [ refresh_allowed, setRefreshAllowed ] = useState(false);
@@ -57,7 +58,7 @@ const SquaresBoard = ({
         }
         const event_status = SqauresHelpers.getCompStatus(event, squares_competition);
         return (
-            <View>
+            <View transparent>
                 <SquareCard
                     player_id={player_id}
                     square={data.item}
@@ -78,7 +79,7 @@ const SquaresBoard = ({
     const renderYSquares = (data: { item:number, index:number }) => {
         const x_squares = squares.filter(s => s.square_score_y == data.item);
         return (
-            <View>
+            <View transparent>
                 <FlatList
                     data={x_squares.sort((a,b) => a.square_score_x - b.square_score_x)}
                     horizontal
@@ -99,18 +100,18 @@ const SquaresBoard = ({
     if(squares_competition.guaranteed_payout && squares_competition.guaranteed_payout > total_payout){ total_payout = squares_competition.guaranteed_payout }
 
     return (
-        <View style={{ ...view_styles.section, minWidth:350, maxWidth:600 }}>
-            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
-                <Icons.SquaresIcon size={18} color={Colors.brand.midnight} />
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme="header">SQUARES BOARD</Text>
-                    <Text style={{ marginTop:3 }} theme="body_2">Bid, buy, sell squares using the board below.</Text>
+        <View float style={{ minWidth:350, maxWidth:600 }}>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+                <Icons.SquaresIcon size={18} color={C.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="h1">SQUARES BOARD</Text>
+                    <Text style={{ marginTop:3 }} theme="description">Bid, buy, sell squares using the board below.</Text>
                 </View>
-                <View style={{ paddingLeft:10, paddingRight:10 }}>
-                    <Text size={14} color={Colors.utility.success} weight='bold'>${total_payout.toFixed(2)}</Text>
+                <View transparent style={{ paddingLeft:10, paddingRight:10 }}>
+                    <Text size={14} theme="success" weight='bold'>${total_payout.toFixed(2)}</Text>
                 </View>
-                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
-                <View style={{ position:'absolute', top:0, left:10, bottom:0, justifyContent:'center' }}>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={C.text.h1} size={8} />
+                <View transparent style={{ position:'absolute', top:0, left:10, bottom:0, justifyContent:'center' }}>
                     <Countdown 
                         end_datetime={moment(squares_competition.begin_datetime)}
                         label={'Auction ends in'}
@@ -122,21 +123,21 @@ const SquaresBoard = ({
                         }}
                     />
                 </View>
-            </TouchableOpacity>
+            </Button>
             {expanded ?
-            <View style={{ ...view_styles.section_body, flex:1 }} nativeID="board">
+            <View transparent style={{ flex:1 }} nativeID="board">
                 <ScrollView horizontal style={{ flexDirection:'row', marginLeft:20 }}>
-                    <View>
-                        <View style={{ flexDirection:'row',  marginLeft:4 }}>
+                    <View transparent>
+                        <View transparent style={{ flexDirection:'row',  marginLeft:4 }}>
                             {unique_score_y.map(num => {
                                 return (
-                                    <View key={`y_${num}`} style={{ margin:3, justifyContent:'center', alignItems:'center', height:20, width:40, backgroundColor:'transparent' }}>
-                                        <Text theme="header_2" textAlign="center">{num}</Text>
+                                    <View transparent key={`y_${num}`} style={{ margin:3, justifyContent:'center', alignItems:'center', height:20, width:40, backgroundColor:'transparent' }}>
+                                        <Text theme="h2" textAlign="center">{num}</Text>
                                     </View>
                                 )
                             })}
                         </View>
-                        <View style={{ backgroundColor:Colors.shades.shade100, padding:2, borderRadius:8, marginLeft:2 }}>
+                        <View transparent style={{ padding:2, borderRadius:8, marginLeft:2 }}>
                             <FlatList
                                 data={unique_score_y}
                                 renderItem={renderYSquares}
@@ -146,23 +147,23 @@ const SquaresBoard = ({
                         </View>
                     </View>
                 </ScrollView>
-                <View style={{ position:'absolute', top: 47,left:20, backgroundColor:'transparent' }}>
+                <View transparent style={{ position:'absolute', top: 47,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' }}>
-                                <Text theme='header_2'>{num}</Text>
+                                <Text theme='h2'>{num}</Text>
                             </View>
                         )
                     })}
                 </View>
                 {event && event.home ?
-                <View style={{ position:'absolute', top:4, left:0, right:0, justifyContent:'center', alignItems:'center' }}>
-                    <Text theme="header_2">{event.home.market_name} {event.home.name}</Text>
+                <View transparent style={{ position:'absolute', top:4, left:0, right:0, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme="h2">{event.home.market_name} {event.home.name}</Text>
                 </View>
                 :<></>}
                 {event && event.away ?
-                <View style={{ position:'absolute', top:0, left:4, bottom:0, justifyContent:'center' }}>
-                    <View style={{ width: TEXT_HEIGHT, height: TEXT_LENGTH }}>
+                <View transparent style={{ position:'absolute', top:0, left:4, bottom:0, justifyContent:'center' }}>
+                    <View transparent style={{ width: TEXT_HEIGHT, height: TEXT_LENGTH }}>
                         <Text 
                             textAlign="center"
                             style={{
@@ -174,7 +175,7 @@ const SquaresBoard = ({
                                 width: TEXT_LENGTH,
                                 height: TEXT_HEIGHT
                             }}
-                            theme="header_2"
+                            theme="h2"
                         >
                             {away_name}
                         </Text>
@@ -182,29 +183,25 @@ const SquaresBoard = ({
                 </View>
                 :<></>}
                 {times_up ?
-                <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
-                    <View style={{ ...view_styles.section, width:250, height:250 }}>
-                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, justifyContent:'center' }}>
-                            <Text theme="header">AUCTION HAS ENDED</Text>
+                <View type='blur' transparent style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                    <View transparent style={{ width:250, height:250 }}>
+                        <View transparent style={{   justifyContent:'center' }}>
+                            <Text theme="h1">AUCTION HAS ENDED</Text>
                         </View>
-                        <View style={{ ...view_styles.section_body, justifyContent:'center', alignItems:'center'}}>
+                        <View transparent style={{  justifyContent:'center', alignItems:'center'}}>
                             <Image
                                 source={{ uri : squares_competition.image?.url }}
                                 style={{ height:75, width:75, borderRadius:4, marginBottom:20 }}
                                 resizeMode="cover"
                             />
-                            <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign="center">Assigning unbid squares based on board ownership % ...</Text>
+                            <Text size={14} color={C.text.h1} weight='semibold' textAlign="center">Assigning unbid squares based on board ownership % ...</Text>
                         </View>
-                        <View style={{ ...view_styles.section_footer }}>
+                        <View type='footer' style={{ flexDirection:'row', alignItems:'center' }}>
                             <Button
                                 title="SEE FINAL BOARD"
                                 style={{ flex:1, opacity:refresh_allowed?1:0.5 }}
                                 disabled={!refresh_allowed}
-                                title_color={Colors.brand.electric}
-                                borderRadius={8}
-                                borderWidth={1}
-                                borderColor={Colors.brand.electric}
-                                backgroundColor={Colors.shades.white}
+                                type='close'
                                 onPress={() => {
                                     setRefreshAllowed(false);
                                     onRefreshCompetition();

package/src/Squares/components/SquaresDetails.tsx

@@ -1,9 +1,9 @@
-import { TouchableOpacity, View } from "react-native"
 import type { SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps } from "../../types"
 import { view_styles } from "../../constants/styles"
-import { Icons, Text } from "../../Components"
-import Colors from "../../constants/colors"
+import { Icons } from "../../Components"
 import React, { useState } from "react"
+import { Button, Text, View } from "../../Components/Themed"
+import { useColors } from "../../constants/useColors"
 
 type SquaresDetailsProps = {
     squares_competition:SquaresCompetitionProps,
@@ -12,38 +12,39 @@ type SquaresDetailsProps = {
 }
 
 const SquaresDetails = ({ squares_competition, squares_type, squares_payout_type }:SquaresDetailsProps) => {
+    const C = useColors();
     const [ expanded, setExpanded ] = useState(false);
     return (
-        <View nativeID="competition_details" style={{ ...view_styles.section, minWidth:350 }}>
-            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
-                <Icons.SettingsIcon size={18} color={Colors.brand.midnight} />
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme="header">COMPETITION DETAILS</Text>
-                    <Text style={{ marginTop: 4 }} theme="body_2">Detailed Information on this competition</Text>
+        <View float nativeID="competition_details" style={{ minWidth:350 }}>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
+                <Icons.SettingsIcon size={18} color={C.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="h1">COMPETITION DETAILS</Text>
+                    <Text style={{ marginTop: 4 }} theme="description">Detailed Information on this competition</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 transparent style={{ padding:20 }}>
                 {squares_type ?
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Type</Text>
-                    <Text theme="header_2">{squares_type.sq_type_name}</Text>
+                <View transparent style={view_styles.body_row}>
+                    <Text style={{flex:1}} theme="description">Type</Text>
+                    <Text theme="h2">{squares_type.sq_type_name}</Text>
                 </View>
                 :<></>}
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Initial Square Price</Text>
-                    <Text theme="header_2">${squares_competition.minimum_square_price.toFixed(2)}</Text>
+                <View transparent style={view_styles.body_row}>
+                    <Text style={{flex:1}} theme="description">Initial Square Price</Text>
+                    <Text theme="h2">${squares_competition.minimum_square_price.toFixed(2)}</Text>
                 </View>
                 {squares_payout_type ?
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Payout</Text>
-                    <Text theme="header_2">{squares_payout_type.sq_payout_name.toUpperCase()}</Text>
+                <View transparent style={view_styles.body_row}>
+                    <Text style={{flex:1}} theme="description">Payout</Text>
+                    <Text theme="h2">{squares_payout_type.sq_payout_name.toUpperCase()}</Text>
                 </View>
                 :<></>}
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Payout Frequency</Text>
-                    <Text theme="header_2">{squares_competition.payout_frequency} Quarters</Text>
+                <View transparent style={view_styles.body_row}>
+                    <Text style={{flex:1}} theme="description">Payout Frequency</Text>
+                    <Text theme="h2">{squares_competition.payout_frequency} Quarters</Text>
                 </View>
             </View>
             :<></>}