be-components 3.3.6 → 3.3.8

package/src/Authenticator/index.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import StrategyForm from './Components/StrategyForm';
 import { AuthenticateApi } from './api';
-import { View, Image } from 'react-native';
+import { Image, KeyboardAvoidingView } from 'react-native';
 import LoginForm from './Components/LoginForm';
-import { Button, Text } from '../Components';
-import Colors from '../constants/colors';
+import { Text, View, Button } from '../Components/Themed';
 import type { AuthStrategyIdentifierProps, AuthStrategyProps, AuthenticatedProps } from './api/types';
 import { APIOverrides } from '../ApiOverrides';
 import type { CompanyProps } from '../types';
+import { useColors } from '../constants/useColors';
 
 
 type AuthenticateWizardProps = {
     auth_strategy_id:string,
-    width:number,
+    maxWidth?:number,
     company_id?:string,
     default_view?:'login'|'register'
     show_referral?:boolean,
@@ -26,7 +26,8 @@ type AuthenticateWizardProps = {
     onClose: () => void
 }
 
-const Authenticator = ({ visible, theme, show_referral, auth_strategy_id, default_view, company_id, source, referral_code, width, opt_in_url, onTryAuthenticate, onAuthenticated, onClose }:AuthenticateWizardProps) => {
+const Authenticator = ({ visible, theme, show_referral, auth_strategy_id, default_view, company_id, source, referral_code, maxWidth, opt_in_url, onTryAuthenticate, onAuthenticated, onClose }:AuthenticateWizardProps) => {
+    const C = useColors();
     const [ loaded, setLoaded ] = useState(false);
     const [ company, setCompany ] = useState<CompanyProps>();
     const [ distinct_id, setDistinctID ] = useState<string>();
@@ -82,17 +83,17 @@ const Authenticator = ({ visible, theme, show_referral, auth_strategy_id, defaul
     if(!loaded || !distinct_id){ return <></> }
     if(!visible){ return <></> }
     return (
-        <View style={{ flex:1, width, minHeight:theme!='mini'?600:undefined }}>
+        <KeyboardAvoidingView style={{ maxWidth }}>
             {company && theme != 'mini' ?
-            <View style={{ padding:20, flexDirection:'row', alignItems:'center', borderTopRightRadius:22, borderTopLeftRadius:22, borderBottomWidth:1, borderColor:Colors.accents.accent200 }}>
+            <View style={{ padding:20, flexDirection:'row', alignItems:'center', borderTopRightRadius:22, borderTopLeftRadius:22, borderBottomWidth:1, borderColor:C.borders.light }}>
                 <View style={{ flex:1, marginRight:10 }}>
-                    <Text size={28} weight='bold' color={Colors.brand.midnight}>{active_view == 'login' ? 'Log In!': 'Welcome!'}</Text>
-                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} weight='semibold' textAlign='left'>{active_view == 'login' ? 'Continue to login with':'Complete the form below to participate with'} {company?.company_name ?? 'Bettoredge'}</Text>
+                    <Text size={28} weight='bold' color={C.text.h1}>{active_view == 'login' ? 'Log In!': 'Welcome!'}</Text>
+                    <Text theme='h2'>{active_view == 'login' ? 'Continue to login with':'Complete the form below to participate with'} {company?.company_name ?? 'Bettoredge'}</Text>
                 </View>
                 <View>
                     <Image
                         source={{ uri: company?.company_image?.url }}
-                        style={{ width: width * 0.15, height: width * 0.15, borderRadius:8 }}
+                        style={{ width: 50, height: 50, borderRadius:8 }}
                         resizeMode='cover'
                     />
                 </View>         
@@ -100,10 +101,9 @@ const Authenticator = ({ visible, theme, show_referral, auth_strategy_id, defaul
             :<></>}
             <StrategyForm
                 visible={active_view == 'register' ? true : false}
-                width={width}
+                maxWidth={maxWidth}
                 company={company}
                 strategy={strategy}
-                theme={theme}
                 onLogin={() => setActiveView('login')}
                 auth_strategy_id={auth_strategy_id}
                 company_id={company_id}
@@ -115,7 +115,7 @@ const Authenticator = ({ visible, theme, show_referral, auth_strategy_id, defaul
                 onAuthenticated={handleAuthenticated}
             />
             <LoginForm
-                width={width}
+                maxWidth={maxWidth}
                 visible={ active_view == 'login' ? true : false }
                 onAuthenticated={handleAuthenticated}
                 onTryAuthenticate={(attribute, result) => onTryAuthenticate ? onTryAuthenticate(attribute, result) : console.log()}
@@ -125,15 +125,13 @@ const Authenticator = ({ visible, theme, show_referral, auth_strategy_id, defaul
             <View style={{ padding:10 }}>
                 <Button
                     title='CLOSE'
-                    title_color={Colors.utility.error}
-                    padding={15}
-                    borderWidth={0}
-                    backgroundColor='transparent'
+                    title_color={C.text.error}
+                    type='close'
                     onPress={() => onClose()}
                 />
             </View>
             :<></>}
-        </View>
+        </KeyboardAvoidingView>
     )
 }
 

package/src/Competition/components/AthleteMarketCard.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import { ActivityIndicator, FlatList, View } from "react-native"
+import { ActivityIndicator, FlatList } from "react-native"
 import MarketsCard from "./MarketsCard"
 import type { AthleteProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionProps, CompetitionTypeProps, EventProps, MarketProps, PlayerPickProps } from '../../types';
 import moment from 'moment-mini';
 import { CompetitionHelpers, FINALIZED_STATUSES } from '../api';
-import { Text } from '../../Components';
 import Colors from '../../constants/colors';
 import LinearDiagnal from '../../Components/LinearDiagnal';
 import { AthleteImage } from '../../Components/Jerseys';
+import { Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type AthleteMarketCardProps = {
     competition:CompetitionProps,
@@ -25,7 +26,7 @@ type AthleteMarketCardProps = {
 }
 
 const AthleteMarketCard = ({  markets, competition_type, event, athlete, mode, loading, player_picks, orientation, competition_match, competition_match_markets, onPick }:AthleteMarketCardProps) => {
-    
+    const C = useColors();
     const market = markets.find(m => m.market_id == competition_match.market_id_override)
     const wager_picks = player_picks.filter(pp => pp.stake > 0)
 
@@ -47,36 +48,37 @@ const AthleteMarketCard = ({  markets, competition_type, event, athlete, mode, l
         const locked = mode == 'view' && moment().isBefore(moment(event.scheduled_datetime)) ? true : false
         return (
             <View style={{ flexDirection:'row', marginTop:5 }}>
-                <Text style={{ flex:1 }} size={12} color={Colors.highlights.highlight200}>{locked?'WAGER LOCKED':data.item.pick_title}</Text>
-                <Text style={{ flex:1 }} size={12} color={Colors.highlights.highlight200} textAlign="right">{locked?'':`${data.item.stake.toFixed(2)} to win ${data.item.potential_winnings.toFixed(2)}`}</Text>
+                <Text style={{ flex:1 }} size={12} color={C.text.highlight}>{locked?'WAGER LOCKED':data.item.pick_title}</Text>
+                <Text style={{ flex:1 }} size={12} color={C.text.highlight} textAlign="right">{locked?'':`${data.item.stake.toFixed(2)} to win ${data.item.potential_winnings.toFixed(2)}`}</Text>
             </View>
         )
     }
 
     if(!athlete){ return <></> }
     return (
-        <View style={{}}>
+        <View transparent>
             {market ?
                 <LinearDiagnal 
                 label={market.stat_label ?? market.type}
                 label_size={10}
                 style={{ borderTopLeftRadius:8, padding:5  }}
-                left_color={Colors.incentive.gold}
+                left_color={C.text.gold}
                 right_color={'#ebd197'}
             />
             :<></>}
-            <View style={{ padding:10, flex:1, flexDirection:orientation=='horizontal'?'row':'column', alignItems:orientation=='horizontal'?'center':undefined }}>
+            <View transparent style={{ padding:10, flex:1, flexDirection:orientation=='horizontal'?'row':'column', alignItems:orientation=='horizontal'?'center':undefined }}>
                 
-                <View nativeID="event_details" style={{ flex:1, flexGrow:1, flexDirection:orientation=='horizontal'?'row':'column', alignItems:'center' }}>
-                    <View nativeID="athlete_image">
+                <View transparent nativeID="event_details" style={{ flexGrow:1, flexDirection:orientation=='horizontal'?'row':'column', alignItems:'center' }}>
+                    <View transparent nativeID="athlete_image" style={{ flexGrow:1 }}>
                         <AthleteImage athlete={athlete} size={38} number_size={10}/>
                     </View>
-                    <View>
-                        <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign="center">{athlete.first_name} {athlete.last_name}</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular' textAlign="center">{athlete.team ? `${athlete.team.abbr} (${athlete.position})`:`${athlete.position}`}</Text>
+                    <View transparent>
+                        <Text size={16} theme='h1' textAlign="center">{athlete.first_name} {athlete.last_name}</Text>
+                        <Text style={{ marginTop:3 }} theme='description' textAlign="center">{athlete.team ? `${athlete.team.abbr} (${athlete.position})`:`${athlete.position}`}</Text>
                     </View>
                 </View>
-                <View nativeID="market_details" style={{flex:orientation=='horizontal'?1:undefined, margin:5 }}>
+                <View style={{ flex:1 }} />
+                <View transparent nativeID="market_details" style={{flex:orientation=='horizontal'?1:undefined, margin:5 }}>
                     {orientation == 'horizontal' && market ?
                     <Text style={{ margin:2 }} size={14} color={Colors.shades.black} textAlign="center">{market.description}</Text>
                     :<></>}
@@ -91,17 +93,17 @@ const AthleteMarketCard = ({  markets, competition_type, event, athlete, mode, l
                         onMarketSelect={(mm, player_pick) => handleMarketSelect(mm, player_pick)}
                     />
                     {loading ?
-                    <View style={{ position:'absolute', top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                    <View transparent style={{ position:'absolute', top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
                         <ActivityIndicator
                             size='large'
-                            color={Colors.brand.midnight}
+                            color={C.text.h1}
                         />
                     </View>
                     :<></>}
                 </View>
             </View>
             {wager_picks.length > 0 ?
-            <View nativeID="wager_picks">
+            <View transparent nativeID="wager_picks">
                 <FlatList
                     data={wager_picks}
                     renderItem={renderWagerPicks}

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()}
                 />
             :<></>}