be-components 3.3.6 → 3.3.7

package/src/Squares/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react"
-import { ActivityIndicator, View, Image, TouchableOpacity, ScrollView, Modal } from 'react-native';
+import { ActivityIndicator, Image, Modal, FlatList } from 'react-native';
 import type { BEEventProps, BuySquaresResponseProps, EventProps, LeagueProps, OfferResponseProps, PlayerBalanceProps, PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquarePrizeProps, SquareProps, SquareResultProps, SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps } from "../types"
 import Colors from "../constants/colors";
 import { SqauresHelpers, SquaresApi } from "./api";
-import { Button, Icons, Text } from "../Components";
+import { Icons } from "../Components";
 import SquaresBoard from "./components/SquaresBoard";
 import BidForm from "./components/BidForm";
 import SocketManager from "../Socket";
@@ -14,10 +14,11 @@ import BoardStats from "./components/BoardStats";
 import SquareOwnersCard from "./components/SquareOwners";
 import OfferForm from "./components/OfferForm";
 import MySquaresCard from "./components/MySquaresCard";
-import { view_styles } from "../constants/styles";
 import MyStatsCard from "./components/MyStatsCard";
 import SquareOffersCard from "./components/SquareOffersCard";
 import PrizeCard from './components/PrizeCard';
+import { Button, Text, View } from "../Components/Themed";
+import { useColors } from "../constants/useColors";
 
 type SquaresModuleProps = {
     player_id?:string,
@@ -29,7 +30,10 @@ type SquaresModuleProps = {
     onEvent:(ev:BEEventProps) => void
 }
 
+const squares_sections = ['header','event', 'board', 'board_stats', 'my_stats', 'results', 'my_squares', 'winners','hidden_prizes','details','owners']
+
 const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthenticate, onShareCompetition, onPlayerSelect }:SquaresModuleProps) => {
+    const C = useColors();
     const [ needs_reload, setNeedsReload ] = useState(false);
     const [ module_size, setModuleSize ] = useState({ width:0, height:0 })
     const [ bid_form_expanded, setBidFormExpanded ] = useState(false);
@@ -84,7 +88,7 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
     const home_abbr = event?.home?.abbr??squares_competition?.event_backup?.home?.abbr
     const away_abbr = event?.away?.abbr??squares_competition?.event_backup?.away?.abbr
     const joined = SqauresHelpers.amIParticipating(player_squares, player_square_history, player_id);
-
+    console.log(joined)
     useEffect(() => {
         if(!sq_comp_id){ return }
         if(!loaded){ SquaresApi.setEnvironment(); }
@@ -284,76 +288,163 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
         })
     }
 
+    const renderSections = (data: { item: string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                if(!squares_competition){ return <></> }
+                return (
+                    <View type='header' nativeID="squares_header" style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
+                        <View transparent>
+                            <Image
+                                source={{ uri: squares_competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
+                                style={{ height:50, width:50, borderRadius:4 }}
+                                resizeMode="cover"
+                            />
+                        </View>
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='h1'>{squares_competition.sq_comp_name}</Text>
+                            <Text style={{ marginTop:4 }} theme='h2'>{squares_competition.sq_comp_description}</Text>
+                        </View>
+                        <Button float onPress={() => onShareCompetition(squares_competition)}>
+                            <Icons.ShareIcon color={C.text.h1} size={14} />
+                        </Button>
+                    </View>
+                )
+            case 'event':
+                if(!event){ return <></> }
+                return (
+                    <EventCard
+                        event={event}
+                        league={league}
+                    />
+                )
+            case 'board_stats':
+                if(!squares_competition){ return <></> }
+                return (
+                    <BoardStats
+                        squares_competition={squares_competition}
+                        squares={squares}
+                        player_squares={player_squares}
+                    />
+                )
+            case 'my_stats':
+                if(!squares_competition){ return <></> }
+                return (
+                    <MyStatsCard
+                        player_id={player_id}
+                        players={players}
+                        home_abbr={home_abbr}
+                        squares_expected_value={squares_expected_value}
+                        away_abbr={away_abbr}
+                        onSquareBid={(square, action) => {
+                            handleSquareBid(square, action)
+                            setBidFormExpanded(true);
+                        }}
+                        squares={squares}
+                        player_square_history={player_square_history}
+                        player_squares={player_squares}
+                        square_results={square_results}
+                        squares_competition={squares_competition}
+                    />
+                )
+            case 'results':
+                if(square_results.length == 0){ return <></> }
+                return (
+                    <ResultsCard
+                        home_abbr={home_abbr}
+                        away_abbr={away_abbr}
+                        squares={squares}
+                        square_results={square_results}
+                        onPlayerSelect={onPlayerSelect}
+                    />
+                )
+            case 'hidden_prizes':
+                return (
+                    <PrizeCard 
+                        square_prizes={square_prizes}
+                        squares={squares}
+                        players={players}
+                        event={event}
+                    />
+                )
+            case 'details':
+                if(!squares_competition){ return <></> }
+                return (
+                    <SquaresDetails
+                        squares_competition={squares_competition}
+                        squares_payout_type={squares_payout_type}
+                        squares_type={squares_type}
+                    />
+                )
+            case 'owners':
+                return (
+                    <SquareOwnersCard
+                        players={players}
+                        player_squares={player_squares}
+                        onPlayerSelect={onPlayerSelect}
+                    />
+                )
+            case 'board':
+                if(!squares_competition){ return <></> }
+                return (
+                    <View>
+                        <SquaresBoard 
+                            player_id={player_id}
+                            onSquareBid={handleSquareBid}
+                            onSquareOffer={handleSquareOffer}
+                            onRefreshCompetition={() => getDataFromServer(sq_comp_id)}
+                            square_bids={square_bids}
+                            draft_square_offers={draft_square_offers}
+                            squares_competition={squares_competition}
+                            squares={squares}
+                            event={event}
+                            player_squares={player_squares}
+                            player_square_history={player_square_history}
+                            square_results={square_results}
+                            square_offers={square_offers}
+                        />
+                    </View>
+                )
+            case 'my_squares':
+                if(my_squares.length == 0){ return <></> }
+                console.log(squares.length)
+                return (
+                    <MySquaresCard
+                        player_squares={my_squares}
+                        squares={squares}
+                        square_offers={square_offers}
+                        away_abbr={away_abbr}
+                        my_square_values={squares_expected_value.my_square_values}
+                        home_abbr={home_abbr}
+                        comp_status={comp_status}
+                        onSquareOffer={handleSquareOffer}
+                    />
+                )
+            default: return <></>
+        }
+    }
+
     if(loading || !squares_competition){
         return (
-            <View style={{ flex:1, backgroundColor:Colors.shades.white }}>
-                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} color={Colors.brand.midnight} size='large' />
+            <View style={{ flex:1 }}>
+                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} color={C.text.h1} size='large' />
             </View>
         )
     }
 
     const comp_status = SqauresHelpers.getCompStatus(event, squares_competition)
     return (
-        <View style={{ flex:1, backgroundColor:Colors.shades.shade100 }}>
-            <ScrollView style={{flex:1}} onLayout={(ev) => {
+        <View style={{ flex:1 }} onLayout={(ev) => {
             const { width, height } = ev.nativeEvent.layout
             setModuleSize({ width, height })
         }}>
-
-            <View nativeID="squares_header" style={{ flexDirection:'row', alignItems:'center', padding:20, backgroundColor:Colors.shades.white }}>
-                <View>
-                    <Image
-                        source={{ uri: squares_competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
-                        style={{ height:50, width:50, borderRadius:4 }}
-                        resizeMode="cover"
-                    />
-                </View>
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='header'>{squares_competition.sq_comp_name}</Text>
-                    <Text style={{ marginTop:4 }} theme='header_2>'>{squares_competition.sq_comp_description}</Text>
-                </View>
-                <TouchableOpacity onPress={() => onShareCompetition(squares_competition)}>
-                    <Icons.ShareIcon color={Colors.brand.midnight} size={14} />
-                </TouchableOpacity>
-            </View>
-            {event ?
-            <EventCard
-                event={event}
-                league={league}
+            <FlatList
+                key='squares_section'
+                data={squares_sections}
+                renderItem={renderSections}
+                keyExtractor={(item) => item}
             />
-            :<></>}
-            <BoardStats
-                squares_competition={squares_competition}
-                squares={squares}
-                player_squares={player_squares}
-            />
-            {joined ?
-            <MyStatsCard
-                player_id={player_id}
-                players={players}
-                home_abbr={home_abbr}
-                squares_expected_value={squares_expected_value}
-                away_abbr={away_abbr}
-                onSquareBid={(square, action) => {
-                    handleSquareBid(square, action)
-                    setBidFormExpanded(true);
-                }}
-                squares={squares}
-                player_square_history={player_square_history}
-                player_squares={player_squares}
-                square_results={square_results}
-                squares_competition={squares_competition}
-            />
-            :<></>}
-            {square_results.length > 0 ?
-            <ResultsCard
-                home_abbr={home_abbr}
-                away_abbr={away_abbr}
-                squares={squares}
-                square_results={square_results}
-                onPlayerSelect={onPlayerSelect}
-            />
-            :<></>}
+            
             {square_offers.length > 0 ?
             <SquareOffersCard
                 player_squares={player_squares}
@@ -365,63 +456,7 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
                 onRequestAuthenticate={() => onRequestAuthenticate(squares_competition.auth_strategy_id)}
             />
             :<></>}
-            <PrizeCard 
-                square_prizes={square_prizes}
-                squares={squares}
-                players={players}
-                event={event}
-            />
-            <View>
-                <SquaresBoard 
-                    player_id={player_id}
-                    onSquareBid={handleSquareBid}
-                    onSquareOffer={handleSquareOffer}
-                    onRefreshCompetition={() => getDataFromServer(sq_comp_id)}
-                    square_bids={square_bids}
-                    draft_square_offers={draft_square_offers}
-                    squares_competition={squares_competition}
-                    squares={squares}
-                    event={event}
-                    player_squares={player_squares}
-                    player_square_history={player_square_history}
-                    square_results={square_results}
-                    square_offers={square_offers}
-                />
-                {square_bids.length > 0 && !bid_form_expanded ?
-                <View style={{ position:'absolute', flexDirection:'row', alignItems:'center', top:10, left:10, backgroundColor:Colors.shades.shade600, padding:10, borderRadius:8, borderBottomLeftRadius:0,  ...view_styles.float }}>
-                    <Text theme="header">{square_bids.length} Squares</Text>
-                    <Button
-                        title="SET AMOUNTS"
-                        style={{ marginLeft:10, flex:1 }}
-                        title_color={Colors.shades.white}
-                        backgroundColor={Colors.brand.electric}
-                        onPress={() => setBidFormExpanded(true)}
-                    />
-                </View>
-                :<></>}
-            </View>
-            {my_squares.length > 0 ?
-            <MySquaresCard
-                player_squares={my_squares}
-                squares={squares}
-                square_offers={square_offers}
-                away_abbr={away_abbr}
-                my_square_values={squares_expected_value.my_square_values}
-                home_abbr={home_abbr}
-                comp_status={comp_status}
-                onSquareOffer={handleSquareOffer}
-            />
-            :<></>}
-            <SquaresDetails
-                squares_competition={squares_competition}
-                squares_payout_type={squares_payout_type}
-                squares_type={squares_type}
-            />
-            <SquareOwnersCard
-                players={players}
-                player_squares={player_squares}
-                onPlayerSelect={onPlayerSelect}
-            />
+            
             <SocketManager 
                 //access_token={access_token}
                 onConnect={() => {
@@ -445,13 +480,12 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
                 }}
                 subscribed_events={['V1_UPDATE_SQUARE_DETAILS']}
             />
-            </ScrollView>
             <Modal
-            transparent
-            visible={bid_form_expanded}
-            animationType='slide'
-        >
-            <View style={{ flex:1, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded }}>
+                transparent
+                visible={bid_form_expanded}
+                animationType='slide'
+            >
+            <View type='blur' style={{ flex:1, justifyContent:'flex-end' }}>
                 <BidForm
                     player_id={player_id}
                     player_balance={player_balance}
@@ -469,25 +503,43 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
                 />
                 </View>
             </Modal>
-            {draft_square_offers.length > 0 ?
-            <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, justifyContent:module_size.width > 500 ? 'center' : 'flex-end', alignItems:'center', backgroundColor:Colors.shades.black_faded }}>
-                <OfferForm
-                    player_id={player_id}
-                    draft_square_offers={draft_square_offers}
-                    home_abbr={home_abbr}
-                    player_balance={player_balance}
-                    width={module_size.width}
-                    away_abbr={away_abbr}
-                    squares={squares}
-                    submit_ready={submit_ready}
-                    market_type={squares_competition.market_type}
-                    player_squares={player_squares}
-                    onClearOffers={handleClearOffers}
-                    onRequestAuthenticate={() => onRequestAuthenticate(squares_competition.auth_strategy_id)}
-                    onOfferAmountChange={(offer, player_square, direction) => handleOfferAmountChange(offer, player_square, direction)}
-                    onSubmitOffer={() => handleSubmitOffer()}
-                />
-            </View>
+            <Modal
+                transparent
+                visible={draft_square_offers.length > 0 ? true: false}
+                animationType='slide'
+            >
+                <View type='blur' style={{ flex:1, justifyContent:'flex-end' }}>
+                    <OfferForm
+                        player_id={player_id}
+                        draft_square_offers={draft_square_offers}
+                        home_abbr={home_abbr}
+                        player_balance={player_balance}
+                        width={module_size.width}
+                        away_abbr={away_abbr}
+                        squares={squares}
+                        submit_ready={submit_ready}
+                        market_type={squares_competition.market_type}
+                        player_squares={player_squares}
+                        onClearOffers={handleClearOffers}
+                        onRequestAuthenticate={() => onRequestAuthenticate(squares_competition.auth_strategy_id)}
+                        onOfferAmountChange={(offer, player_square, direction) => handleOfferAmountChange(offer, player_square, direction)}
+                        onSubmitOffer={() => handleSubmitOffer()}
+                    />
+                </View>
+            </Modal>
+             {square_bids.length > 0 && !bid_form_expanded ?
+                <View float style={{ position:'absolute', bottom:10, left:10, padding:10}}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center'}}>
+                        <Text theme="h1">{square_bids.length} Squares</Text>
+                        <Button
+                            title="SET AMOUNTS"
+                            style={{ marginLeft:10}}
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.brand.electric}
+                            onPress={() => setBidFormExpanded(true)}
+                        />
+                    </View>
+                </View>
             :<></>}
         </View>
 

package/src/constants/colors.ts

@@ -1,65 +1,73 @@
-
 const Colors = {
     brand: {
-      cobalt: '#003566',
-      midnight: '#002A51',
-      midnightTopGradient: '#003a85',
-      electric: '#005FB7',
-      cyan: '#08A4BD',
-      slate: '#6E8894',
-      mint: '#B2F2D6',
-      yellow: '#FFD60A',
-      facebook: '#1877F2',
-      new:'#264A6B'
+        cobalt: '#003566',
+        midnight: '#002A51',
+        midnightTopGradient: '#003a85',
+        electric: '#005FB7',
+        cyan: '#08A4BD',
+        slate: '#6E8894',
+        slateLight: '#B0C4D4', // NEW: Lighter version of slate for description text in dark mode
+        mint: '#B2F2D6',
+        yellow: '#FFD60A',
+        facebook: '#1877F2',
+        new: '#264A6B',
+        midnightLight: '#395983', // NEW: Lighter version of midnight for text and borders in dark mode
+        electricLight: '#6CA0E0', // NEW: Lighter version of electric for text in dark mode
+        successDark: '#395B4A', // NEW: Darker version of success for dark mode backgrounds
+        errorDark: '#5A2A2A', // NEW: Darker version of error for dark mode backgrounds
     },
-    chart:{
-      cyan: '#52BCD1',
-      electric:'#4D8FCD'
+    chart: {
+        cyan: '#52BCD1',
+        electric: '#4D8FCD',
     },
     company: {
-      paypal: '#FCBB32',
-      paypal_blue:'#012169'
+        paypal: '#FCBB32',
+        paypal_blue: '#012169',
     },
     shades: {
-      white: '#FFFFFF',
-      shade100: '#F2F5F7',
-      shade200: '#F8F8F8',
-      shade300: '#EEEEEE',
-      shade400: '#DAE1E4',
-      shade500: '#4A4A4A',
-      shade600: '#DBE9F5',
-      black: '#111111',
-      black_faded: 'rgba(0,0,0,0.25)',
-      black_faded_heavy: 'rgba(0,0,0,0.5)',
-      black_faded_super_heavy: 'rgba(0,0,0,0.9)',
-
+        white: '#FFFFFF',
+        shade100: '#F2F5F7',
+        shade200: '#F8F8F8',
+        shade300: '#EEEEEE',
+        shade400: '#DAE1E4',
+        shade500: '#4A4A4A',
+        shade600: '#DBE9F5',
+        black: '#111111',
+        black_faded: 'rgba(0,0,0,0.25)',
+        black_faded_heavy: 'rgba(0,0,0,0.5)',
+        black_faded_super_heavy: 'rgba(0,0,0,0.9)',
+        blackFadedHeavy: '#222831', // NEW: Slightly lighter black for headers/footers in dark mode
     },
     accents: {
-      accent100: '#ADD7FF',
-      accent200: '#7F9AB2'
+        accent100: '#ADD7FF',
+        accent200: '#7F9AB2',
     },
     highlights: {
-      highlight100: '#620AFF',
-      highlight100Faded: `rgba(98,10,255,0.4)`,
-      highlight200: '#FCA311',
-      highlight200Faded: 'rgba(252,163,17,0.4)',
-      highlight300: '#FF4747',
-      highlight300Faded: 'rgba(255,71,71,0.4)',
-      highlight400: '#4DBA58',
-      highlight400Faded: 'rgba(125,205,133,0.4)',
-      highlight500: '#05A4BD',
-      highlight500Faded: 'rgba(5,164,189,0.25)'
+        highlight100: '#620AFF',
+        highlight100Faded: `rgba(98,10,255,0.4)`,
+        highlight200: '#FCA311',
+        highlight200Faded: 'rgba(252,163,17,0.4)',
+        highlight300: '#FF4747',
+        highlight300Faded: 'rgba(255,71,71,0.4)',
+        highlight400: '#4DBA58',
+        highlight400Faded: 'rgba(125,205,133,0.4)',
+        highlight500: '#05A4BD',
+        highlight500Faded: 'rgba(5,164,189,0.25)',
     },
     utility: {
-      success: '#7DCD85',
-      error: '#D5573B',
-      warning: '#FCA311'
+        success: '#7DCD85',
+        error: '#D5573B',
+        warning: '#FCA311',
     },
     incentive: {
       gold: '#AB9F5E',
       gold_faded: 'rgba(171,159,94, 0.1)',
       silver: '#C0C0C0',
-      bronze: '#997840'
-    }
-  }
-  export default Colors
+      bronze: '#997840',
+      goldDark: '#8A7A4B', // NEW: Darker gold for dark mode
+      silverDark: '#9A9A9A', // NEW: Muted silver for dark mode
+      bronzeDark: '#7A5F30', // NEW: Deeper bronze for dark mode
+  },
+};
+
+export default Colors

package/src/constants/styles.ts

@@ -17,7 +17,7 @@ export const view_styles = StyleSheet.create({
     float: {
         shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1
     },
-    section: { margin:10, backgroundColor:Colors.shades.white, borderRadius:8,  shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1, elevation: 4 },
+    section: { margin:10, borderRadius:8,  shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1, elevation: 4 },
     section_header: { padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 },
     section_body: { padding:20 },
     section_footer: { padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center', borderTopWidth:1, borderTopColor:Colors.shades.shade600, backgroundColor:Colors.shades.shade100 },
@@ -67,4 +67,40 @@ export const text_styles = StyleSheet.create({
     error_body: { color:Colors.utility.error, fontSize: 14, fontFamily: 'BarlowRegular', textAlign:'left' },
     body_2: { color:Colors.brand.midnight, fontSize: 12, fontFamily: 'BarlowRegular', textAlign:'left' },
     error_body_2: { color:Colors.utility.error, fontSize: 12, fontFamily: 'BarlowRegular', textAlign:'left' }
+});
+
+
+
+export const MyViewStyles = StyleSheet.create({
+    container: { flex:1 },
+    floatLight: {
+        backgroundColor: '#FFFFFF', // White background for light mode
+        shadowColor: 'rgba(0, 0, 0, 0.06)', // Light shadow
+        shadowOffset: { width: 0, height: 10 }, // Vertical shadow offset
+        shadowRadius: 10, // Rounded shadow edges
+        shadowOpacity: 1, // Full opacity for shadow
+        borderColor: '#EEEEEE', // Light gray border
+        borderWidth: 1, // Subtle border width
+        borderRadius: 8, // Rounded corners
+        elevation: 5, // Shadow for Android
+    },
+    floatDark: {
+        backgroundColor: '#1C1C1E', // Slightly lighter dark gray for contrast
+        shadowColor: 'rgba(0, 0, 0, 0.8)', // Stronger shadow for depth
+        shadowOffset: { width: 0, height: 10 }, // Vertical shadow offset
+        shadowRadius: 14, // Larger shadow radius to enhance floating effect
+        shadowOpacity: 1, // Full shadow opacity
+        borderColor: '#4A4A4A', // Subtle border to define edges
+        borderWidth: 1, // Consistent border width
+        borderRadius: 8, // Rounded corners for consistency
+        elevation: 10, // Higher elevation for Android shadows
+    },
+    section_header: { flexDirection:'row', alignItems:'center' }
+});
+
+export const MyTextStyles = StyleSheet.create({
+    h1: { fontSize: 16, fontFamily: 'BarlowBold' },
+    h2: { fontSize: 14, fontFamily: 'BarlowSemiBold' },
+    description: { fontSize: 12, fontFamily: 'BarlowRegular' },
+    descriptionLight: { fontSize:12, fontFamily: 'BarlowLight' },
 })