be-components 3.3.6 → 3.3.7

package/src/Competition/components/CompetitionInfoCard.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, View, Image, FlatList } from "react-native"
+import { Image, FlatList } from "react-native"
 import type { CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, MyPlayerProps } from "../../types"
-import { Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
-import { view_styles } from '../../constants/styles';
+import { Icons } from '../../Components';
 import { CompetitionHelpers } from '../api';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type CompetitionInfoCardProps = {
     competition:CompetitionProps,
@@ -14,6 +14,7 @@ type CompetitionInfoCardProps = {
     player?:MyPlayerProps,
 }
 const CompetitionInfoCard = ({ competition, competition_type, competition_result_type, competition_payouts }:CompetitionInfoCardProps) => {
+    const C = useColors();
     const [ expanded, setExpanded ] = useState(false);
     
     const cl = competition.market_type == 'FOR_MONEY' ? '$' : 'E'
@@ -28,71 +29,74 @@ const CompetitionInfoCard = ({ competition, competition_type, competition_result
 
     const renderPayouts = (data: { item:CompetitionPayoutTypeProps, index:number }) => {
         return (
-            <View style={{ ...view_styles.body_row, padding:8, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                <Text style={{ flex:1 }} theme='header_2'>{CompetitionHelpers.formatPlace(data.item.tier)}{data.item.tier!= 1 ? ' Or Better': ''}</Text>
-                <Text theme='header_2'>Split {data.item.payout}%</Text>
+            <View type='row' transparent style={{ padding:8, borderBottomWidth:1, borderColor:C.borders.light }}>
+                <Text style={{ flex:1 }} theme='h2'>{CompetitionHelpers.formatPlace(data.item.tier)}{data.item.tier!= 1 ? ' Or Better': ''}</Text>
+                <Text theme='h2'>Split {data.item.payout}%</Text>
             </View>
         )
     }
 
     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">
+            <Button 
+            style={{ flexDirection:'row', alignItems:'center', borderBottomWidth:expanded?1:0, borderColor:C.borders.light }}
+            transparent
+            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>
-                <View style={{ margin:10 }}>
-                    <Text color={Colors.utility.success} weight='bold'>{cl}{potential_winnings.toFixed(2)}</Text>
+                <View transparent style={{ margin:10 }}>
+                    <Text size={16} color={C.text.success} weight='bold'>{cl}{potential_winnings.toFixed(2)}</Text>
                 </View>
-                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={C.text.h1} size={8} />
+            </Button>
             {expanded ?
-            <View style={{ ...view_styles.section_body }}>
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Competition Type</Text>
-                    <Text theme="header_2">{competition_type.type.toUpperCase()}</Text>
+            <View transparent style={{ padding:20 }}>
+                <View transparent type='row' style={{ padding:5 }}>
+                    <Text style={{flex:1}} theme="description">Competition Type</Text>
+                    <Text theme="h2">{competition_type.type.toUpperCase()}</Text>
                 </View>
                 {competition_type.type == 'pick' ?
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Max Pick Count</Text>
-                    <Text theme="header_2">{competition.max_pick_count} Picks</Text>
+                <View transparent type='row' style={{ padding:5 }}>
+                    <Text style={{flex:1}} theme="description">Max Pick Count</Text>
+                    <Text theme="h2">{competition.max_pick_count} Picks</Text>
                 </View>
                 :
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Initial Balance</Text>
-                    <Text theme="header_2">E{competition.initial_balance}</Text>
+                <View transparent type='row' style={{ padding:5 }}>
+                    <Text style={{flex:1}} theme="description">Initial Balance</Text>
+                    <Text theme="h2">E{competition.initial_balance}</Text>
                 </View>
                 }
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Current Payout</Text>
-                    <Text theme="header_2">{cl}{potential_winnings.toFixed(2)}</Text>
+                <View transparent type='row' style={{ padding:5 }}>
+                <Text style={{flex:1}} theme="description">Current Payout</Text>
+                    <Text theme="h2">{cl}{potential_winnings.toFixed(2)}</Text>
                 </View>
                 {competition.prize_override ?
-                <View style={{ padding:10, borderRadius:8, backgroundColor:Colors.incentive.gold_faded }}>
-                    <Text size={14} color={Colors.incentive.gold} weight='bold'>Additional Prize</Text>
-                    <View style={view_styles.body_row}>
+                <View transparent style={{ padding:10, borderRadius:8, backgroundColor:C.text.gold }}>
+                    <Text size={14} color={C.text.h1} weight='bold'>Additional Prize</Text>
+                    <View type='row'>
                         <Image
                             source={{ uri: competition.prize_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
                             style={{ height:50, width:50, borderRadius:4 }}
                             resizeMode='cover'
                         />
-                        <Text style={{ marginLeft:10 }} size={14} weight='bold' color={Colors.brand.midnight}>{competition.prize_override}</Text>
+                        <Text style={{ marginLeft:10 }} size={14} weight='bold' color={C.text.h1}>{competition.prize_override}</Text>
                     </View>
                 </View>
                 :<></>}
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Entries</Text>
-                    <Text theme="header_2">{competition.tickets_sold} / {competition.available_tickets}</Text>
+                <View transparent type='row' style={{ padding:5 }}>
+                    <Text style={{flex:1}} theme="description">Entries</Text>
+                    <Text theme="h2">{competition.tickets_sold} / {competition.available_tickets}</Text>
                 </View>
-                <View style={view_styles.body_row}>
-                    <Text style={{flex:1}} theme="body">Payout Type</Text>
-                    <Text theme="header_2">{competition_result_type.label.toUpperCase()}</Text>
+                <View transparent type='row' style={{ padding:5 }}>
+                    <Text style={{flex:1}} theme="description">Payout Type</Text>
+                    <Text theme="h1">{competition_result_type.label.toUpperCase()}</Text>
                 </View>
-                <View style={{ padding:10, borderRadius:8, backgroundColor:Colors.shades.shade100 }}>
-                    <Text style={{ padding:5 }} theme="header_2">{competition_result_type.description}</Text>
-                    <View style={{ padding:10 }}>
+                <View transparent style={{ marginTop:10, padding:10, borderRadius:8, backgroundColor:C.views.illiquidMarket }}>
+                    <Text style={{ padding:5 }} theme="h2">{competition_result_type.description}</Text>
+                    <View transparent style={{ padding:10 }}>
                         <FlatList
                             data={competition_payouts.sort((a,b) => b.tier - a.tier)}
                             renderItem={renderPayouts}
@@ -105,101 +109,7 @@ const CompetitionInfoCard = ({ competition, competition_type, competition_result
         </View>
     )
 
-    /*
-    return (
-        <View>
-            <View nativeID="competition_info">
-                <View style={{ padding:10 }}>
-                    <Text size={16} color={Colors.shades.white} weight='bold' textAlign="center">{competition.competition_name}</Text>
-                    {competition_type ?
-                    <View style={{ flexDirection:'row', justifyContent:'center', padding:10}}>
-                        
-                        <View style={{ padding:10, marginRight:4, justifyContent:'center', backgroundColor: CompetitionHelpers.getCompTypeColor(competition_type), borderRadius:4 }}>
-                            <Text size={12} color={Colors.shades.white} weight='semibold'>{competition_type.type_label}</Text>
-                        </View>
-                        <View style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:4, backgroundColor: Colors.shades.white, borderRadius:4 }}>
-                            <Text style={{ marginRight:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{competition.invite_only?'Private':'Public'}</Text>
-                            {competition.invite_only ?
-                            <Icons.EyeOffIcon color={Colors.brand.midnight} size={14}/>
-                            :
-                            <Icons.EyeOnIcon color={Colors.brand.midnight} size={14}/>
-                            }
-                        </View>
-                        <TouchableOpacity 
-                            style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:8, backgroundColor: Colors.incentive.gold, borderRadius:4 }}
-                            onPress={() => onViewRules ? onViewRules(): console.log('')}>
-                            {competition.prize_image ? 
-                            <Image
-                                source={{ uri: competition.prize_image.url }}
-                                style={{ height:20, width:20, marginRight:10 }}
-                                resizeMode="center"
-                            />
-                            :<></>}
-                            <Text size={12} color={Colors.shades.white} weight='semibold'>VIEW RULES</Text>
-                        </TouchableOpacity>
-                    </View>
-                    :<></>}
-                    <View style={{ flexDirection:'row', padding:10, justifyContent:'center' }}>
-                        <View style={{ padding:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
-                            <Text color={Colors.shades.white} size={16} weight='bold' textAlign="center">{cl}{potential_winnings.toFixed(2)}</Text>
-                            <Text style={{ marginTop:3 }} color={Colors.shades.white} size={12} textAlign="center">POT</Text>
-                        </View>
-                        <View style={{ padding:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
-                            <Text color={Colors.shades.white} size={16} weight='bold' textAlign="center">{competition.tickets_sold} / {competition.available_tickets}</Text>
-                            <Text style={{ marginTop:3 }} color={Colors.shades.white} size={12} textAlign="center">ENTRIES</Text>
-                        </View>
-                        {competition_type?.type == 'pick' ?
-                        <View style={{ padding:10 }}>
-                            <Text color={Colors.shades.white} size={16} weight='bold' textAlign="center">{competition.max_pick_count}</Text>
-                            <Text style={{ marginTop:3 }} color={Colors.shades.white} size={12} textAlign="center">PICKS</Text>
-                        </View>
-                        :competition_type?.type == 'wager' ?
-                        <View style={{ padding:10 }}>
-                            <Text color={Colors.shades.white} size={16} weight='bold' textAlign="center">{competition.initial_balance}</Text>
-                            <Text style={{ marginTop:3 }} color={Colors.shades.white} size={12} textAlign="center">INIT. BALANCE</Text>
-                        </View>
-                    :<></>}
-                    </View>
-                </View>
-            </View>
-            <View nativeID="competition_actions" style={{ flexDirection:'row', padding:10 }}>
-                <TouchableOpacity 
-                    style={{ padding:10, borderRadius:22, borderWidth:1, borderColor:Colors.shades.white, marginRight:10, justifyContent:'center', alignItems:'center' }}
-                    onPress={() => handleShare()}>
-                    <Icons.ShareIcon size={14} color={Colors.shades.white}/>
-                </TouchableOpacity>
-                <Button
-                    title={competition.entered?can_leave?'Leave':'My Picks':'Preview Events'}
-                    padding={10}
-                    style={{ flex:1, marginRight:3 }}
-                    title_color={can_leave?Colors.utility.error:Colors.shades.white}
-                    onPress={() => {
-                        if(can_leave && onLeave){ return onLeave() }
-                        return onViewEvents()
-                    }}
-                    borderRadius={22}
-                    borderWidth={1}
-                    backgroundColor="transparent"
-                    borderColor={can_leave?Colors.utility.error:Colors.shades.white}
-                />
-                <Button
-                    title={competition.entered || !can_enter ? 'In Progress' : 'Enter Competition'}
-                    padding={10}
-                    disabled={competition.entered || !can_enter}
-                    style={{ flex:1, marginLeft:3 }}
-                    title_color={Colors.shades.white}
-                    onPress={() => {
-                        if(competition.entered){ return }
-                        return onEnter(competition.competition_id)
-                    }}
-                    borderRadius={22}
-                    backgroundColor={ competition.entered ? Colors.accents.accent100 : Colors.utility.success}
-                    borderWidth={1}
-                />
-            </View>
-        </View>
-    )
-        */
+    
 }
 
 export default CompetitionInfoCard

package/src/Competition/components/CompetitionLeaderboard.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from "react"
-import { FlatList, Image, ScrollView, TouchableOpacity, View, ActivityIndicator } from "react-native"
+import { FlatList, Image, ActivityIndicator } from "react-native"
 import type { CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionTypeProps, PublicPlayerProps } from "../../types"
 import { CompetitionApi, CompetitionHelpers, CompetitionResultApi } from "../api"
-import { Button, Icons, Text } from "../../Components"
+import { Icons } from "../../Components"
 import Colors from "../../constants/colors"
 import { view_styles } from "../../constants/styles"
+import { Button, Text, View } from "../../Components/Themed"
+import { useColors } from "../../constants/useColors"
 
 type CompetitionLeaderboardProps = {
     competition:CompetitionProps,
@@ -18,7 +20,8 @@ type CompetitionLeaderboardProps = {
     onLeaderSelect:(player:PublicPlayerProps) => void
 }
 
-const CompetitionLeaderboard = ({ competition, competition_type, width, height, viewer_id, view_mode, onSeeFull, onClose, onLeaderSelect }:CompetitionLeaderboardProps) => {
+const CompetitionLeaderboard = ({ competition, competition_type, viewer_id, view_mode, onSeeFull, onClose, onLeaderSelect }:CompetitionLeaderboardProps) => {
+    const C = useColors();
     const [ expanded, setExpanded ] = useState(false);
     const [ data, setData ] = useState<{
         loading:boolean,
@@ -73,101 +76,106 @@ const CompetitionLeaderboard = ({ competition, competition_type, width, height,
 
         const is_pacer = competition.pacer_id == data.item.player_id ? true : false
         return (
-            <TouchableOpacity 
+            <Button 
+                float
                 onPress={() => onLeaderSelect(player)}
-                style={{ flexDirection:'row', margin:5, alignItems:'center', borderRadius:22, backgroundColor:is_pacer?Colors.highlights.highlight400Faded:Colors.shades.white, padding:8, paddingLeft:15, paddingRight:15}}>
+                style={{ flexDirection:'row', alignItems:'center', margin:3, borderRadius:22, padding:12, paddingLeft:15, paddingRight:15 }}>
                 {is_pacer ?
-                <View nativeID="pacer" style={{}}>
-                    <Icons.PacerCarIcon size={28}/>
+                <View transparent nativeID="pacer">
+                    <Icons.PacerCarIcon size={28} color={C.text.h1}/>
                 </View>
                 :
-                <View nativeID="place" style={{ padding:5 }}>
-                    <Text size={12} color={Colors.brand.midnight} weight="bold">{CompetitionHelpers.formatPlace(data.item.place)}</Text>
+                <View transparent nativeID="place" style={{ padding:5 }}>
+                    <Text theme="description">{CompetitionHelpers.formatPlace(data.item.place)}</Text>
                 </View>
                 }
-                <View nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
+                <View transparent nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
                     <Image
                         source={{ uri: player.profile_pic }}
                         style={{ height:30, width:30, borderRadius:100 }}
                         resizeMode="cover"
                     />
                 </View>
-                <View nativeID="details" style={{ flex:1 }}>
-                    <Text size={12} color={Colors.brand.midnight} weight='semibold'>{player.username}</Text>
+                <View transparent nativeID="details" style={{ flex:1 }}>
+                    <Text size={12} theme="h2">{player.username}</Text>
                     {competition_type?.type == 'wager' ?
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{record.earnings.toFixed(2)} Earned ({record.remaining_stakes.toFixed(2)} at risk)</Text>
+                    <Text style={{ marginTop:3 }} theme="description">{record.earnings.toFixed(2)} Earned ({record.remaining_stakes.toFixed(2)} at risk)</Text>
                     :
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{record.wins} - {record.losses} - {record.draws} ({record.remaining_picks} Remaining)</Text>
+                    <Text style={{ marginTop:3 }} theme="description">{record.wins} - {record.losses} - {record.draws} ({record.remaining_picks} Remaining)</Text>
                     }
                 </View>
-                <View nativeID="winnings">
+                <View transparent nativeID="winnings">
                     <Text size={12} color={Colors.brand.slate} weight='regular'>{cl}{data.item.winnings.toFixed(2)}</Text>
                 </View>
-            </TouchableOpacity>
+            </Button>
         )
     }
 
     return (
-        <View style={{ ...view_styles.section, margin:view_mode == 'full'?0:10, minWidth:350, height:view_mode == 'full'?height:undefined, width: view_mode == 'full' ? width: undefined }}>
+        <View float nativeID="leaderboard">
             {view_mode == 'short' ?
-            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
-                <Icons.PodiumIcon size={18} color={Colors.brand.midnight} />
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme="header">COMPETITION LEADERBOARD</Text>
-                    <Text style={{ marginTop: 4 }} theme="body_2">Leaderboard showing current standings</Text>
+            <Button 
+            style={{ flexDirection:'row', alignItems:'center', borderBottomWidth:expanded?1:0, borderColor:C.borders.light }}
+            transparent
+            onPress={() => setExpanded(!expanded)}>
+                <Icons.SettingsIcon size={18} color={C.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="h1">COMPETITION LEADERBOARD</Text>
+                    <Text style={{ marginTop: 4 }} theme="description">Leaderboard showing current standings</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_mode == 'full' ?
-            <View style={{ ...view_styles.section_body }}>
+            <View transparent type='body'>
             {viewer_record && viewer_result && viewer ?
-            <View>
-                 <View style={{ backgroundColor:Colors.brand.midnight, padding:10, marginBottom:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
-                    <Text size={14} color={Colors.shades.white} weight='regular'>MY RESULTS</Text>
-                    <TouchableOpacity style={{ flexDirection:'row', marginTop:10, marginBottom:10, alignItems:'center', borderRadius:22, backgroundColor:Colors.shades.white, padding:8, paddingLeft:15, paddingRight:15}}>
-                        <View nativeID="place" style={{ padding:5 }}>
-                            <Text size={12} color={Colors.brand.midnight} weight="bold">{CompetitionHelpers.formatPlace(viewer_result.place)}</Text>
-                        </View>
-                        <View nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
-                            <Image
-                                source={{ uri: viewer.profile_pic }}
-                                style={{ height:30, width:30, borderRadius:100 }}
-                                resizeMode="cover"
-                            />
-                        </View>
-                        <View nativeID="details" style={{ flex:1 }}>
-                            <Text size={12} color={Colors.brand.midnight} weight='semibold'>{viewer.username}</Text>
-                            {competition_type?.type == 'wager' ?
-                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{viewer_record.earnings.toFixed(2)} Earned ({viewer_record.remaining_stakes.toFixed(2)} at risk)</Text>
-                                :
-                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{viewer_record.wins} - {viewer_record.losses} - {viewer_record.draws} ({viewer_record.remaining_picks} Remaining)</Text>
-                            }
-                        </View>
-                        <View nativeID="winnings">
-                            <Text size={12} color={Colors.brand.slate} weight='regular'>{cl}{viewer_result.winnings.toFixed(2)}</Text>
-                        </View>
-                    </TouchableOpacity>
-                </View>
+            <View transparent style={{ padding:10, marginBottom:10, borderTopRightRadius:8, borderTopLeftRadius:8, borderBottomWidth:1, borderColor:C.borders.light }}>
+                <Text size={14} theme="h1">MY RESULTS</Text>
+                <Button 
+                    float
+                    style={{ flexDirection:'row', marginTop:10, marginBottom:10, alignItems:'center', borderRadius:22, padding:12, paddingLeft:15, paddingRight:15 }}>
+                    <View transparent nativeID="place" style={{ padding:5 }}>
+                        <Text size={12} theme='h2'>{CompetitionHelpers.formatPlace(viewer_result.place)}</Text>
+                    </View>
+                    <View transparent nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
+                        <Image
+                            source={{ uri: viewer.profile_pic }}
+                            style={{ height:30, width:30, borderRadius:100 }}
+                            resizeMode="cover"
+                        />
+                    </View>
+                    <View transparent nativeID="details" style={{ flex:1 }}>
+                        <Text size={12} theme="h2">{viewer.username}</Text>
+                        {competition_type?.type == 'wager' ?
+                            <Text style={{ marginTop:3 }} theme='description'>{viewer_record.earnings.toFixed(2)} Earned ({viewer_record.remaining_stakes.toFixed(2)} at risk)</Text>
+                            :
+                            <Text style={{ marginTop:3 }} theme='description'>{viewer_record.wins} - {viewer_record.losses} - {viewer_record.draws} ({viewer_record.remaining_picks} Remaining)</Text>
+                        }
+                    </View>
+                    <View nativeID="winnings">
+                        <Text size={12} theme="light" weight='bold'>{cl}{viewer_result.winnings.toFixed(2)}</Text>
+                    </View>
+                </Button>
             </View>
             :<></>}
-            <ScrollView style={{ backgroundColor:Colors.shades.shade100, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+            <View transparent style={{ padding:10 }}>
                 {loading ?
-                <ActivityIndicator style={{ alignSelf:'center', padding:10 }} size='large' color={Colors.brand.midnight} /> 
+                <ActivityIndicator style={{ alignSelf:'center', padding:10 }} size='large' color={C.text.h1} /> 
                 :<></>}
+                <Text size={14} theme="h1" style={{ marginBottom:10 }}>MY RESULTS</Text>
                 <FlatList
                     data={results}
                     renderItem={renderResults}
                     keyExtractor={(item, index) => item.competition_result_id ? item.competition_result_id.toString() : index.toString()}
                 />
                 
-            </ScrollView>
+            </View>
             {view_mode == 'short' ?
                 <Button
                     style={{ backgroundColor:undefined }}
                     title='View Full Leaderboard'
-                    title_color={Colors.brand.electric}
-                    title_size={14}
+                    type='text'
                     onPress={() => onSeeFull()}
                 />
             :<></>}