be-components 3.4.2 → 3.4.3

package/src/Engage/index.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, FlatList, ScrollView } from 'react-native';
+import { ActivityIndicator, FlatList, KeyboardAvoidingView, Modal, Platform } from 'react-native';
 import type { BEEventProps, BracketCompetitionProps, BracketProps, CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, EventProps, LeagueProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
-import Colors from '../constants/colors';
 import { EngageApi, EngageHelpers } from './api';
 import CompetitionCard from './components/CompetitionCard';
-import { view_styles } from '../constants/styles';
-import { Button, Icons, Text } from '../Components';
+import { Icons, Toggle } from '../Components';
 import SquaresCompetitionCard from './components/SquaresCompetitionCard';
 import BracketCompetitionCard from './components/BracketCompetitionCard';
 import moment from 'moment-mini';
@@ -13,10 +11,13 @@ import SocketManager from '../Socket';
 import SeasonCard from './components/SeasonCard';
 import EngageHeader from './components/EngageHeader';
 import PrivateCodePrompt from './components/PrivateCodePrompt';
+import { Button, Text, View } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
 
 
 type EngageModuleProps = {
     player_id?:string,
+    insets?: { top:number, bottom:number },
     onEvent?:(be_event:BEEventProps) => void,
     onManage:() => void,
     onCreateSeason?:() => void,
@@ -30,7 +31,9 @@ type EngageModuleProps = {
     onSelectCompetitionSeason:(cs:CompetitionSeasonProps) => void
 }
 
-const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelectSquaresCompetition, onSelectCompetitionSeason,
+const engage_sections = ['header','toggle', 'private','engagements']
+
+const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition, onSelectSquaresCompetition, onSelectCompetitionSeason,
     onCreateSeason, onCreateCompetition, onCreateBracketCompetition, onCreateSquares, onManage, onEvent, onSelectCompany
  }:EngageModuleProps) => {
     const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
@@ -73,6 +76,8 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
     });
     const { loading, competitions, competition_seasons, competition_result_types, squares_competitions, brackets, leagues, bracket_competitions, events, competition_types, companies, players } = module_data;
 
+    const Colors = useColors();
+
     useEffect(() => {
         EngageApi.setEnvironment();
         getDataFromServer()
@@ -129,7 +134,7 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
         const company = companies.find(c => c.company_id == data.item.company_id);
         const event = events.find(e => e.event_id == data.item.event_id)
         return (
-            <View>
+            <View transparent style={{ margin:10 }}>
                 <SquaresCompetitionCard
                     squares_competition={data.item}
                     company={company}
@@ -150,7 +155,7 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
         const league = leagues.find(e => e.league_id == bracket?.league_id)
         if(!competition_result_type){ return <></> }
         return (
-            <View>
+            <View transparent style={{ margin:10 }}>
                 <BracketCompetitionCard
                     bracket_competition={data.item}
                     company={company}
@@ -183,7 +188,7 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
         const competition_result_type = competition_result_types.find(t => t.competition_result_type_id == data.item.competition_result_type_id);
         if(!competition_type || !competition_result_type){ return <></> }
         return (
-            <View>
+            <View transparent style={{ margin:10 }}>
                 <CompetitionCard 
                     competition={data.item}
                     company={company}
@@ -197,210 +202,209 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
         )
     }
 
-    if(loading){
-        return (
-            <View style={{flex:1, backgroundColor:Colors.shades.white}}>
-                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
-            </View>
-        )
-    }
-
-    return (
-        <View style={{ flex:1, backgroundColor:Colors.shades.white }} >
-            <ScrollView style={{ flex:1 }} onLayout={(ev) => {
-                const { height, width } = ev.nativeEvent.layout;
-                setModuleSize({ width, height })
-            }}>
-                <EngageHeader
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <EngageHeader
                     companies={companies}
                     width={module_size.width}
                     onManage={onManage}
                     onEvent={onEvent}
                     onSelectCompany={onSelectCompany}
                 />
-                <View style={{ ...view_styles.body_row, margin:10, backgroundColor:Colors.shades.white, borderRadius:22, borderWidth:4, borderColor:Colors.shades.shade100}}>
-                    <Button
-                        title='COMPETITIONS'
-                        title_color={active_tab == 'competitions' ? Colors.shades.white : Colors.brand.midnight}
-                        title_weight={active_tab == 'competitions' ? 'bold' : 'regular'}
-                        padding={15}
-                        title_size={12}
-                        style={{flex:1}}
-                        borderRadiusOverride={{
-                            borderTopLeftRadius: 22,
-                            borderBottomLeftRadius:22,
-                            borderTopRightRadius:0,
-                            borderBottomRightRadius:0
-                        }}
-                        backgroundColor={active_tab == 'competitions' ? Colors.brand.midnight : Colors.shades.white}
-                        onPress={() => setActiveTab('competitions')}
-                    />
-                    <Button
-                        title='SQUARES'
-                        title_size={12}
-                        title_color={active_tab == 'squares' ? Colors.shades.white : Colors.brand.midnight}
-                        title_weight={active_tab == 'squares' ? 'bold' : 'regular'}
-                        padding={15}
-                        style={{flex:1}}
-                        borderRadius={0}
-                        backgroundColor={active_tab == 'squares' ? Colors.brand.midnight : Colors.shades.white}
-                        onPress={() => setActiveTab('squares')}
-                    />
-                    <Button
-                        title='BRACKETS'
-                        style={{flex:1}}
-                        title_size={12}
-                        title_color={active_tab == 'brackets' ? Colors.shades.white : Colors.brand.midnight}
-                        title_weight={active_tab == 'brackets' ? 'bold' : 'regular'}
-                        padding={15}
-                        borderRadiusOverride={{
-                            borderTopLeftRadius: 0,
-                            borderBottomLeftRadius:0,
-                            borderTopRightRadius:22,
-                            borderBottomRightRadius:22
-                        }}
-                        backgroundColor={active_tab == 'brackets' ? Colors.brand.midnight : Colors.shades.white}
-                        onPress={() => setActiveTab('brackets')}
-                    />
-                </View>
-                <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade600, borderRadius:0, marginBottom:10 }}>
-                    <Icons.EyeOffIcon size={18} color={Colors.brand.midnight} />
-                    <View style={{ flex:1, marginLeft:10 }}>
-                        <Text theme='header'>Find Private</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>Did you receive a private code? Enter it here.</Text>
+                )
+            case 'toggle':
+                return (
+                    <View float style={{ margin:10 }}>
+                        <Toggle
+                            background_color={Colors.views.header}
+                            inactive_title_color={Colors.text.h1}
+                            options={[
+                                {key:'competitions', label: 'Competitions'},
+                                {key:'brackets', label: 'Brackets'},
+                                {key:'squares', label: 'Squares'},
+                            ]}
+                            selected_option={active_tab}
+                            onSelectOption={(option) => setActiveTab(option)}
+                        />
                     </View>
-                    <Button
-                        title='ENTER PRIVATE CODE'
-                        padding={15}
-                        title_color={Colors.shades.white}
-                        backgroundColor={Colors.utility.success}
-                        onPress={() => setShowCodePrompt(true)}
-                    />
-                </View>
-                {active_tab == 'competitions' ?
-                <View style={{ ...view_styles.section_body, justifyContent:'flex-start', padding:0 }}>
-                    {competition_seasons.length > 0 ?
-                    <View style={{ marginTop:10 }}>
-                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0, marginBottom:10 }}>
-                            <View style={{ flex:1 }}>
-                                <Text theme='header'>Public Seasons</Text>
-                                <Text style={{ marginTop:3 }} theme='body'>Seasons are multi-competition contests. Payouts are split between each competition and the season long winners.</Text>
-                            </View>
-                            {onCreateSeason ?
-                            <Button
-                                title='NEW'
-                                title_color={Colors.shades.white}
-                                backgroundColor={Colors.utility.success}
-                                onPress={() => onCreateSeason()}
-                            />
-                            :<></>}
+                )
+            case 'private':
+                return (
+                    <View type='header' style={{ padding:10, marginBottom:10, flexDirection:'row', alignItems:'center' }}>
+                        <Icons.EyeOffIcon size={18} color={Colors.text.h1} />
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='h1'>Find Private</Text>
+                            <Text style={{ marginTop:3 }} theme='description'>Did you receive a private code? Enter it here.</Text>
                         </View>
-                        <FlatList
-                            data={competition_seasons.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
-                            horizontal
-                            keyExtractor={(item) => item.competition_season_id.toString()}
-                            renderItem={renderSeasons}
+                        <Button
+                            title='ENTER PRIVATE CODE'
+                            type='text'
+                            onPress={() => setShowCodePrompt(true)}
                         />
                     </View>
-                    :<></>}
-                    <View style={{ marginBottom:15, marginTop:10 }}>
-                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0 }}>
-                            <View style={{ flex:1 }}>
-                                <Text theme='header'>Public Competitions</Text>
-                                <Text style={{ marginTop:3 }} theme='body'>Below are available pick-em and wager based competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!</Text>
+                )
+            case 'engagements':
+                return (
+                    <View transparent>
+                        {active_tab == 'competitions' ?
+                        <View transparent>
+                            {competition_seasons.length > 0 ?
+                            <View transparent style={{ marginTop:10 }}>
+                                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                                    <View style={{ flex:1 }}>
+                                        <Text theme='h1'>Public Seasons</Text>
+                                        <Text style={{ marginTop:3 }} theme='description'>Seasons are multi-competition contests. Payouts are split between each competition and the season long winners.</Text>
+                                    </View>
+                                    {onCreateSeason ?
+                                    <Button
+                                        title='NEW'
+                                        type='success'
+                                        onPress={() => onCreateSeason()}
+                                    />
+                                    :<></>}
+                                </View>
+                                <FlatList
+                                    data={competition_seasons.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                                    horizontal
+                                    keyExtractor={(item) => item.competition_season_id.toString()}
+                                    renderItem={renderSeasons}
+                                />
                             </View>
-                            {onCreateCompetition ?
-                            <Button
-                                title='NEW'
-                                title_color={Colors.shades.white}
-                                backgroundColor={Colors.utility.success}
-                                onPress={() => onCreateCompetition()}
-                            />
                             :<></>}
+                            <View transparent style={{ marginBottom:15, marginTop:10 }}>
+                                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme='h1'>Public Competitions</Text>
+                                        <Text style={{ marginTop:3 }} theme='description'>Below are available pick-em and wager based competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!</Text>
+                                    </View>
+                                    {onCreateCompetition ?
+                                    <Button
+                                        title='NEW'
+                                        type='success'
+                                        onPress={() => onCreateCompetition()}
+                                    />
+                                    :<></>}
+                                    
+                                </View>
+                                <FlatList
+                                    data={competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                                    renderItem={renderCompetitions}
+                                    keyExtractor={(item) => item.competition_id.toString()}
+                                />
+                            </View>
                         </View>
-                    </View>
-                    <FlatList
-                        data={competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
-                        renderItem={renderCompetitions}
-                        keyExtractor={(item) => item.competition_id.toString()}
-                    />
-                </View>
-                :active_tab == 'squares' ?
-                <View style={{ ...view_styles.section_body, padding:0 }}>
-                    <View style={{ marginBottom:15, marginTop:10 }}>
-                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0 }}>
-                            <View style={{ flex:1 }}>
-                                <Text theme='header'>Public Auction Squares</Text>
-                                <Text style={{ marginTop:3 }} theme='body'>Below are available squares competitions.  Bid on squares until the auction period ends.  Win $ and prizes when your square hits at the end of each quarter!</Text>
+                        :active_tab == 'squares' ?
+                        <View transparent>
+                            <View transparent style={{ marginBottom:15, marginTop:10 }}>
+                                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme='h1'>Public Auction Squares</Text>
+                                        <Text style={{ marginTop:3 }} theme='description'>Below are available squares competitions.  Bid on squares until the auction period ends.  Win $ and prizes when your square hits at the end of each quarter!</Text>
+                                    </View>
+                                    {onCreateSquares ?
+                                    <Button
+                                        title='NEW'
+                                        type='success'
+                                        onPress={() => onCreateSquares()}
+                                    />
+                                    :<></>}
+                                </View>
                             </View>
-                            {onCreateSquares ?
-                            <Button
-                                title='NEW'
-                                title_color={Colors.shades.white}
-                                backgroundColor={Colors.utility.success}
-                                onPress={() => onCreateSquares()}
+                            <FlatList
+                                data={squares_competitions.sort((a,b) => moment(a.begin_datetime).unix() - moment(b.begin_datetime).unix())}
+                                renderItem={renderSquaresCompetitions}
+                                keyExtractor={(item) => item.sq_comp_id.toString()}
                             />
-                            :<></>}
                         </View>
-                    </View>
-                    <FlatList
-                        data={squares_competitions.sort((a,b) => moment(a.begin_datetime).unix() - moment(b.begin_datetime).unix())}
-                        renderItem={renderSquaresCompetitions}
-                        keyExtractor={(item) => item.sq_comp_id.toString()}
-                    />
-                </View>
-                :active_tab == 'brackets' ?
-                <View style={{ ...view_styles.section_body, padding:0 }}>
-                    <View style={{ marginBottom:15, marginTop:10 }}>
-                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0 }}>
-                            <View style={{ flex:1 }}>
-                                <Text theme='header'>Public Bracket Competitions</Text>
-                                <Text style={{ marginTop:3 }} theme='body'>Below are available bracket competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!</Text>
+                        :active_tab == 'brackets' ?
+                        <View transparent>
+                            <View transparent style={{ marginBottom:15, marginTop:10 }}>
+                                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme='h1'>Public Bracket Competitions</Text>
+                                        <Text style={{ marginTop:3 }} theme='description'>Below are available bracket competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!</Text>
+                                    </View>
+                                    {onCreateBracketCompetition ?
+                                    <Button
+                                        title='NEW'
+                                        type='success'
+                                        onPress={() => onCreateBracketCompetition()}
+                                    />
+                                    :<></>}
+                                </View>
                             </View>
-                            {onCreateBracketCompetition ?
-                            <Button
-                                title='NEW'
-                                title_color={Colors.shades.white}
-                                backgroundColor={Colors.utility.success}
-                                onPress={() => onCreateBracketCompetition()}
+                            <FlatList
+                                data={bracket_competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                                renderItem={renderBracketCompetitions}
+                                keyExtractor={(item) => item.bracket_competition_id.toString()}
                             />
-                            :<></>}
                         </View>
+                        :<></>}
                     </View>
-                    <FlatList
-                        data={bracket_competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
-                        renderItem={renderBracketCompetitions}
-                        keyExtractor={(item) => item.bracket_competition_id.toString()}
-                    />
-                </View>
-                :<></>}
-            </ScrollView>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flexGrow:1 }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout;
+            setModuleSize({ width, height })
+        }}>
+            <FlatList
+                data={engage_sections}
+                key={`engage_sections`}
+                keyExtractor={(item) => item}
+                renderItem={renderSections}
+                refreshing={loading}
+                onRefresh={() => getDataFromServer()}
+            />
+            
             {show_code_prompt ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded_heavy }}>
-                <PrivateCodePrompt
-                    width={module_size.width - 20}
-                    onFoundBracket={(b) => {
-                        onSelectBracketCompetition(b)
-                        setShowCodePrompt(false);
-                    }}
-                    onFoundCompetition={(c) => {
-                        onSelectCompetition(c)
-                        setShowCodePrompt(false);
+            <Modal
+                transparent
+                animationType='slide'
+                style={{ flex:1 }}
+            >
+                <KeyboardAvoidingView
+                    style={{ flex:1 }}
+                    behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+                >
+                <View type='blur' style={{ flex:1, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
+                    <PrivateCodePrompt
+                        onFoundBracket={(b) => {
+                            onSelectBracketCompetition(b)
+                            setShowCodePrompt(false);
+                        }}
+                        onFoundCompetition={(c) => {
+                            onSelectCompetition(c)
+                            setShowCodePrompt(false);
 
-                    }}
-                    onFoundSeason={(s) => {
-                        onSelectCompetitionSeason(s)
-                        setShowCodePrompt(false);
-                    }} 
-                    onFoundSquaresCompetition={(sc) => {
-                        onSelectSquaresCompetition(sc)
-                        setShowCodePrompt(false);
-                    }}
-                    onClose={() => setShowCodePrompt(false)}
+                        }}
+                        onFoundSeason={(s) => {
+                            onSelectCompetitionSeason(s)
+                            setShowCodePrompt(false);
+                        }} 
+                        onFoundSquaresCompetition={(sc) => {
+                            onSelectSquaresCompetition(sc)
+                            setShowCodePrompt(false);
+                        }}
+                        onClose={() => setShowCodePrompt(false)}
+                    />
+                </View>
+                </KeyboardAvoidingView>
+            </Modal>
+            :<></>}
+            {loading ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, alignItems:'center', padding:20 }}>
+                <ActivityIndicator
+                    size='large'
+                    color={Colors.text.h1}
                 />
             </View>
             :<></>}
-
             <SocketManager
                 onConnect={() => setSocketState({ ...socket_state, connected: true })}
                 subscribed_events={[]}

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

@@ -333,39 +333,45 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
         <View float={float} style={[style]}>
             {sponsor ?
             <LinearGradient style={{ marginTop:-1, marginLeft:-1, marginRight:-1, padding:10, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8 }} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[sponsor.brand_primary ?? C.text.h1, sponsor.brand_secondary ?? C.text.h1]}>
-                <View transparent style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.shades.white }}>
+                {onActivate && event_status != 'closed' ?
+                    <Button
+                        float
+                        style={{ opacity: activate_loading ? 0.5 : 1, backgroundColor:C.text.success, padding:0, height:34, width:34, justifyContent:'center', alignItems:'center', borderRadius:100 }}
+                        disabled={activate_loading}
+                        loading={activate_loading} 
+                        
+                        onPress={() => onActivate(event.event_id, 'team')}
+                    >
+                        <Icons.RefreshIcon size={20} color={C.text.white} />
+                        </Button>
+                    :
+                    <View transparent style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.shades.white }}>
+
                     <Image
-                        source={{ uri: sponsor.company_image?.url }}
-                        style={{ height:30, width:30, borderRadius:4 }}
-                        resizeMode='cover'
+                    source={{ uri: sponsor.company_image?.url }}
+                    style={{ height:30, width:30, borderRadius:4 }}
+                    resizeMode='cover'
                     />
-                </View>
+                    </View>
+                    }
                 <View transparent style={{ flex:1, marginLeft:10 }}>
                     <Text size={12} color={Colors.shades.white} weight='bold'>Brought to you by {sponsor.company_name}</Text>
-                    <View transparent style={{ marginTop:3, flexDirection:'row', alignItems:'center' }}>
-                        {show_id ?
-                        <Text style={{ marginLeft:2, marginRight:3 }} size={12} color={Colors.shades.white} weight='semibold' selectable>{event.event_id} </Text>
-                        :<></>}
-                        {event.event_sub_title ?
-                        <Text size={12} color={Colors.shades.white} weight='semibold'>{event.event_sub_title}</Text>
-                        :<></>}
+                    <View transparent style={{ marginTop:3, flexDirection:'row', alignItems:'center' }}> 
+                        <View style={{ marginLeft:5 }} transparent>
+                            {event.event_sub_title ?
+                            <Text size={12} style={{ maxWidth:150 }} theme='description'>{event.event_sub_title}</Text>
+                            :<></>}
+                            {show_id ?
+                            <Text theme='light' selectable>{event.event_id} </Text>
+                            :<></>}
+                        </View>
                     </View>
                 </View>
                 <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
                     <Icons.TVIcon size={10} color={Colors.shades.white} />
                     <Text style={{ marginLeft:8 }} size={12} color={Colors.shades.white} weight='semibold'>{event.info?.broadcast?.network}</Text>
                 </View>
-                {onActivate && event_status != 'closed' ?
-                <Button
-                    title={event_status == 'active' ? 'Refresh' : 'Activate'}
-                    style={{ opacity: activate_loading ? 0.5 : 1, marginLeft:5 }}
-                    disabled={activate_loading}
-                    loading={activate_loading} 
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
-                    onPress={() => onActivate(event.event_id, 'team')}
-                />
-                :<></>}
+                
                 {onShare ?
                 <Button type='text' style={{ marginLeft:10 }} onPress={() => onShare(event)}>
                     <Icons.ShareIcon size={14} color={C.text.action} />
@@ -373,36 +379,41 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
                 :<></>}
             </LinearGradient>
             :
-            <View transparent nativeID='event_header_data' style={{ flexDirection:'row', alignItems:'center', flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:C.borders.light }}>
+            <View type='header' nativeID='event_header_data' style={{ flexDirection:'row', alignItems:'center', flexWrap:'wrap', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8, borderBottomWidth:1, borderBottomColor:C.borders.light }}>
                 <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
-                    {league ?
+                    {onActivate && event_status != 'closed' ?
+                    <Button
+                        float
+                        style={{ opacity: activate_loading ? 0.5 : 1, backgroundColor:C.text.success, padding:0, height:34, width:34, justifyContent:'center', alignItems:'center', borderRadius:100 }}
+                        disabled={activate_loading}
+                        loading={activate_loading} 
+                        
+                        onPress={() => onActivate(event.event_id, 'team')}
+                    >
+                        <Icons.RefreshIcon size={20} color={C.text.white} />
+                        </Button>
+                    : league ?
                     <Image
                         source={{ uri: league.league_image }}
                         style={{ height:30, width:30, borderRadius:2, marginRight:4 }}
                         resizeMode='cover'
                     />
                     :<></>}
-                    {show_id ?
-                    <Text style={{ marginLeft:2, marginRight:3 }} theme='description' selectable>{event.event_id} </Text>
-                    :<></>}
-                    {event.event_sub_title ?
-                    <Text size={12} theme='description'>{event.event_sub_title}</Text>
-                    :<></>}
+                    <View style={{ marginLeft:5 }} transparent>
+                        {event.event_sub_title ?
+                        <Text size={12} style={{ maxWidth:150 }} theme='description'>{event.event_sub_title}</Text>
+                        :<></>}
+                        {show_id ?
+                        <Text theme='light' selectable>{event.event_id}</Text>
+                        :<></>}
+                    </View>
+                    
                 </View>
-                <View style={{ flexDirection:'row', alignItems:'center' }}>
+                <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
                     <Icons.TVIcon size={16} color={C.text.h1} />
-                    <Text style={{ marginLeft:8 }} theme='description'>{event.info?.broadcast?.network}</Text>
+                    <Text style={{ marginLeft:8, maxWidth:75 }} theme='description'>{event.info?.broadcast?.network}</Text>
                 </View>
-                {onActivate && event_status != 'closed' ?
-                <Button
-                    title={event_status == 'active' ? 'Refresh' : 'Activate'}
-                    style={{ opacity: activate_loading ? 0.5 : 1, marginLeft:5, padding:10 }}
-                    disabled={activate_loading}
-                    loading={activate_loading}
-                    type='success'
-                    onPress={() => onActivate(event.event_id, 'team')}
-                />
-                :<></>}
+                
                 {onShare ?
                 <Button type='text' style={{ marginLeft:10 }} onPress={() => onShare(event)}>
                     <Icons.ShareIcon size={14} color={C.text.action} />
@@ -561,7 +572,7 @@ const TeamEventMarket = ({ event, league, float, style, init_expanded, hot_marke
                 >
                    <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={C.text.h1} />
                 </Button>
-                :available ?
+                :available && !expanded ?
                 <Button
                     title='MORE'
                     type='info'

package/src/constants/styles.ts

@@ -90,7 +90,7 @@ export const MyViewStyles = StyleSheet.create({
         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
+        borderColor: Colors.shades.shade500, // Subtle border to define edges
         borderWidth: 1, // Consistent border width
         borderRadius: 8, // Rounded corners for consistency
         elevation: 10, // Higher elevation for Android shadows