be-components 3.5.7 → 3.5.9

package/src/CompetitionManager/components/CompetitionSettingsForm.tsx

@@ -1,12 +1,12 @@
-import { FlatList, TextInput, TouchableOpacity, View, Image } from "react-native"
+import { Image } from "react-native"
 import React, { useEffect, useState } from "react";
 import type { CompetitionProps, CompetitionResultTypeProps, MyPlayerProps, PublicPlayerProps } from "../../types";
 import { ManageCompetitionApi } from "../api";
-import Colors from "../../constants/colors";
-import { Button, Icons, Text } from "../../Components";
-import { view_styles } from "../../constants/styles";
+import { Icons, Toggle } from "../../Components";
 import DropDown from "../../Components/Dropdown";
 import moment from "moment-mini";
+import { Button, Text, TextInput, View } from "../../Components/Themed";
+import { useColors } from "../../constants/useColors";
 
 type CompetitionSettingsFormProps = {
     player?: MyPlayerProps,
@@ -20,12 +20,12 @@ type CompetitionSettingsFormProps = {
 
 const market_types = ['FOR_MONEY', 'FREE']
 
-const CompetitionSettingsForm = ({ is_valid, player, width, competition, competition_result_types, onCompetitionUpdate, onShowPacers }: CompetitionSettingsFormProps) => {
+const CompetitionSettingsForm = ({ is_valid, player, competition, competition_result_types, onCompetitionUpdate, onShowPacers }: CompetitionSettingsFormProps) => {
     const [ expanded, setExpanded ] = useState(false);
     const [ draft_competition, setDraftCompetition ] = useState<CompetitionProps | undefined>(undefined);
     //const [ player_selector_visible, setPlayerSelectorVisible ] = useState(false);
     const [ pacer, setPacer ] = useState<PublicPlayerProps | MyPlayerProps>();
-
+    const Colors = useColors();
     const competition_result_type = competition_result_types.find(crt => crt.competition_result_type_id == competition?.competition_result_type_id);
 
     useEffect(() => {
@@ -51,71 +51,58 @@ const CompetitionSettingsForm = ({ is_valid, player, width, competition, competi
         setPacer(ps[0])
     }
 
-    const renderMarketTypes = (data:{ item:string, index:number }) => {
-        if(!draft_competition){ return <></> }
-        const selected = data.item == competition.market_type ? true : false
-        return (
-            <TouchableOpacity 
-            disabled={competition.competition_season_id ? true : false}
-            style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...draft_competition, market_type: data.item })}>
-                <Text textAlign="center"  color={selected?Colors.shades.white:Colors.brand.midnight} weight={selected?'bold':'regular'} size={14}>{data.item == 'FOR_MONEY'?'USD':'EDGE COINS'}</Text>
-            </TouchableOpacity>
-        )
-    }
-
 
     if(!competition || !draft_competition){ return <></> }
     const is_changed = JSON.stringify(competition) != JSON.stringify(draft_competition) ? true : false
 
     return (
-        <View style={{ ...view_styles.section, flexGrow:1 }}>
-            <TouchableOpacity style={{ ...view_styles.section_header, maxWidth: width }} onPress={() => setExpanded(!expanded)}>
+        <View float style={{ flexGrow:1, borderRadius:0 }}>
+            <Button float style={{ flexDirection:'row', alignItems:'center', borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
                 {is_valid ?
-                <Icons.CheckCirlceIcon size={16} color={Colors.utility.success} />
+                <Icons.CheckCirlceIcon size={16} color={Colors.text.success} />
                 :
-                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                <Icons.AlertIcon size={16} color={Colors.text.warning} />
                 }
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='header'>Competition Settings</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>Manage the high level information of this competition</Text>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>Competition Settings</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Manage the high level information of this competition</Text>
                 </View>
                 {is_changed ?
                 <Button
                     title='SAVE'
-                    padding={10}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={() => onCompetitionUpdate(draft_competition)}
                 />
                 :
-                <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={Colors.brand.midnight} size={8} />
+                <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={Colors.text.h1} size={8} />
                 }
-            </TouchableOpacity>
+            </Button>
             {expanded ?
-            <View nativeID="competition_settings" style={{ ...view_styles.section_body, maxWidth:width, backgroundColor:Colors.shades.shade100 }}>
+            <View type='body' nativeID="competition_settings" style={{ flexGrow:1 }}>
                 
-                    
-                <View nativeID="competition_currency" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
-                    <View style={{ flex:1, margin:5, minWidth:200 }}>
-                        <Text theme="header_2">Competition Currency</Text>
-                        <Text style={{ marginTop:3 }} theme="body">Is the ticket price in real-money or edge coins?</Text>
+                <View nativeID="competition_currency" style={{ padding:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
+                    <View style={{  margin:5, minWidth:200 }}>
+                        <Text theme="h1">Competition Currency</Text>
+                        <Text style={{ marginTop:3 }} theme="description">Is the ticket price in real-money or edge coins?</Text>
                     </View>
-                    <View style={{ justifyContent:'flex-end', margin: 5, borderRadius:8, backgroundColor:Colors.shades.white }}>
-                        <FlatList
-                            data={market_types}
-                            renderItem={renderMarketTypes}
-                            keyExtractor={(item) => item}
-                            horizontal
+                    <View style={{ justifyContent:'flex-end', margin: 5, borderRadius:8 }}>
+                        <Toggle
+                            options={market_types.map(t => {
+                                return { key: t, label: t }
+                            })}
+                            onSelectOption={(key) => onCompetitionUpdate({ ...draft_competition, market_type: key})}
+                            selected_option={competition.market_type}
                         />
+                       
                     </View>
                 </View>
-
-                <View nativeID="competition_payout" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
-                    <View style={{ flex:1, margin:5, minWidth:200 }}>
-                        <Text theme="header_2">Competition Payout Type</Text>
-                        <Text style={{ marginTop:3 }} theme="body">{competition_result_type?competition_result_type.description:'Choose the type of payout for this competition'}</Text>
+                <View style={{borderBottomWidth:1, borderBottomColor:Colors.borders.light, padding:10}}>
+                <View type='row' nativeID="competition_payout" style={{ flexWrap:'wrap' }}>
+                    <View transparent style={{ flex:1, minWidth:200 }}>
+                        <Text theme="h1">Competition Payout Type</Text>
+                        <Text style={{ marginTop:3 }} theme="description">{competition_result_type?competition_result_type.description:'Choose the type of payout for this competition'}</Text>
                     </View>
-                    <View style={{ justifyContent:'flex-end', margin:5, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                    <View transparent style={{ flex:1, justifyContent:'flex-end', margin:5, borderRadius:8 }}>
                         <DropDown
                             read_only={competition.competition_season_id ? true : false}
                             dropdown_options={[
@@ -131,82 +118,87 @@ const CompetitionSettingsForm = ({ is_valid, player, width, competition, competi
                     </View>
                 </View>
                 {competition_result_type?.type == 'outpace' ?
-                <TouchableOpacity 
-                disabled={competition.competition_season_id ? true : false}
-                style={{ backgroundColor:Colors.shades.white, borderRadius:8, padding:10 }} onPress={() => onShowPacers()}>
-                    {pacer ?
-                    <View style={{ ...view_styles.body_row }}>
-                        <Icons.PacerCarIcon size={24} color={Colors.brand.midnight} />
-                        <Image
-                            source={{ uri: pacer.profile_pic && pacer.profile_pic != '' ? pacer.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
-                            style={{ height:40, width:40, borderRadius:4, marginLeft:10 }}
-                            resizeMode="cover"
-                        />
-                        <View style={{ flex:1, marginLeft:10 }}>
-                            <Text theme="header_2">@{pacer.username}</Text>
-                            <Text style={{ marginTop:3 }} theme="body">Joined {moment(pacer.create_datetime).format('MMM YYYY')}</Text>
+                <View transparent style={{ marginTop:10 }}>
+                    <Text style={{ marginBottom:10 }} theme="h1">Select a Pacer</Text>
+                    <Button 
+                        float
+                        disabled={competition.competition_season_id ? true : false}
+                        style={{ borderRadius:8, padding:10 }} onPress={() => onShowPacers()}>
+                        {pacer ?
+                        <View transparent type='row'>
+                            <Icons.PacerCarIcon size={24} color={Colors.text.h1} />
+                            <Image
+                                source={{ uri: pacer.profile_pic && pacer.profile_pic != '' ? pacer.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                                style={{ height:40, width:40, borderRadius:4, marginLeft:10 }}
+                                resizeMode="cover"
+                            />
+                            <View transparent style={{ flex:1, marginLeft:10 }}>
+                                <Text theme="h2">@{pacer.username}</Text>
+                                <Text style={{ marginTop:3 }} theme="description">Joined {moment(pacer.create_datetime).format('MMM YYYY')}</Text>
+                            </View>
+                            <Icons.ChevronIcon direction="right" color={Colors.text.h1} size={8} />
                         </View>
-                        <Icons.ChevronIcon direction="right" color={Colors.brand.midnight} size={8} />
-                    </View>
-                    :
-                    <View style={{ ...view_styles.body_row }}>
-                        <Icons.AlertIcon size={20} color={Colors.utility.warning} />
-                        <Image
-                            source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
-                            style={{ height:40, width:40, borderRadius:4, marginLeft:10 }}
-                            resizeMode="cover"
-                        />
-                        <View style={{ flex:1, marginLeft:10 }}>
-                            <Text theme="header_2">Select A Pacer!</Text>
+                        :
+                        <View type='row'>
+                            <Icons.AlertIcon size={20} color={Colors.text.warning} />
+                            <Image
+                                source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                                style={{ height:40, width:40, borderRadius:4, marginLeft:10 }}
+                                resizeMode="cover"
+                            />
+                            <View style={{ flex:1, marginLeft:10 }}>
+                                <Text theme="h2">Select A Pacer!</Text>
+                            </View>
+                            <Icons.ChevronIcon direction="right" color={Colors.text.h1} size={8} />
                         </View>
-                        <Icons.ChevronIcon direction="right" color={Colors.brand.midnight} size={8} />
-                    </View>
-                    }
-                </TouchableOpacity>
+                        }
+                    </Button>
+                </View>
                 :<></>}
-                <View nativeID="buy_in" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
-                    <View style={{ flex:1, margin:5, minWidth:200 }}>
-                        <Text theme="header_2">Ticket Price</Text>
-                        <Text style={{ marginTop:3 }} theme="body">Set the amount required to purchase a ticket to participate</Text>
+                </View>
+                <View type='row' nativeID="buy_in" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ flex:1, minWidth:200 }}>
+                        <Text theme="h1">Ticket Price</Text>
+                        <Text style={{ marginTop:3 }} theme="description">Set the amount required to purchase a ticket to participate</Text>
                     </View>
                     <TextInput
-                        style={{ ...view_styles.input, textAlign:'center', margin:5, width:100, backgroundColor:Colors.shades.white }}
+                        style={{ flex:1, textAlign:'center', width:100  }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, buy_in: text })}
                         placeholder="0"
+                        keyboardType="decimal-pad"
                         editable={competition.competition_season_id ? false : true}
                         value={draft_competition.buy_in as string}
-                        placeholderTextColor={Colors.brand.slate}
                     />
                 </View>
                 {player?.role == 'admin' ?
-                <View nativeID="buy_in" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
-                    <View style={{ flex:1, margin:5, minWidth:200 }}>
-                        <Text theme="header_2">Guaranteed Payout</Text>
-                        <Text style={{ marginTop:3 }} theme="body">ADMIN ONLY - How much is guaranteed to be paid out?</Text>
+                <View type='row' nativeID="buy_in" style={{ flexWrap:'wrap', padding:10,  borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ flex:1, minWidth:200 }}>
+                        <Text theme="h1">Guaranteed Payout</Text>
+                        <Text style={{ marginTop:3 }} theme="description">ADMIN ONLY - How much is guaranteed to be paid out?</Text>
                     </View>
                     <TextInput
-                        style={{ ...view_styles.input, textAlign:'center', margin:5, width:100, backgroundColor:Colors.shades.white }}
+                        style={{ flex:1, textAlign:'center', width:100 }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, guaranteed_payout: text })}
                         placeholder="0"
+                        keyboardType="decimal-pad"
                         editable={competition.competition_season_id ? false : true}
                         value={draft_competition.guaranteed_payout as string}
-                        placeholderTextColor={Colors.brand.slate}
                     />
                 </View>
                 :<></>}
                     
-                    <View nativeID="Max Tickets" style={{ flexDirection:'row', flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.white }}>
-                        <View style={{ flex:1, marginRight:5 }}>
-                            <Text theme="header_2">Max Tickets</Text>
-                            <Text style={{ marginTop:3 }} theme="body">Maximum number of tickets that can be sold</Text>
+                    <View type='row' nativeID="Max Tickets" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
+                        <View style={{ flex:1, marginRight:5, minWidth:200 }}>
+                            <Text theme="h1">Max Tickets</Text>
+                            <Text style={{ marginTop:3 }} theme="description">Maximum number of tickets that can be sold</Text>
                         </View>
                         <TextInput
-                            style={{ ...view_styles.input, textAlign:'center', width:100, backgroundColor:Colors.shades.white }}
+                            style={{ flex:1, textAlign:'center', width:100 }}
                             onChangeText={(text) => setDraftCompetition({ ...draft_competition, available_tickets: text })}
                             placeholder="100"
+                            keyboardType="decimal-pad"
                             editable={competition.competition_season_id ? false : true}
                             value={draft_competition.available_tickets as string}
-                            placeholderTextColor={Colors.brand.slate}
                         />
                     </View>
                 </View>

package/src/CompetitionManager/components/ContestSelector.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { View, FlatList, TouchableOpacity, ScrollView, Image, ActivityIndicator } from "react-native"
-import Colors from '../../constants/colors';
-import { view_styles } from '../../constants/styles';
-import { Button, Switch, Text } from '../../Components';
+import { FlatList, ScrollView, Image, ActivityIndicator } from "react-native"
+import { Switch } from '../../Components';
 import DropDown from '../../Components/Dropdown';
 import type { EventProps, LeagueProps } from '../../types';
 import { ManageCompetitionMatchApi } from '../api';
 import moment from 'moment-mini';
 import SearchBox from '../../Components/SearchBox';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type ContestSelectorProps = {
     width: number,
@@ -22,6 +22,7 @@ type ContestSelectorProps = {
 }
 
 const ContestSelector = ({ action_loading, width, height, leagues, selected_team_events, onClose, onSelectTeamEvent, onDeselectTeamEvent, onSelectTeamEvents }:ContestSelectorProps) => {
+    const Colors = useColors();
     const [ search_value, setSearchValue ] = useState('');
     const [ filters, setFilters ] = useState<{
         ranked?:boolean,
@@ -96,17 +97,17 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
     const renderDivisions = (data: { item:string, index:number }) => {
         const selected = filters.division == data.item ? true : false
         return (
-            <TouchableOpacity style={{ padding:10 }} onPress={() => selected ? setFilters({ ...filters, division: undefined }) : setFilters({ ...filters, division:data.item })}>
-                <Text color={selected ? Colors.brand.midnight : Colors.brand.slate} weight={selected ? 'bold': 'regular'}>{data.item}</Text>
-            </TouchableOpacity>
+            <Button style={{ padding:10 }} onPress={() => selected ? setFilters({ ...filters, division: undefined }) : setFilters({ ...filters, division:data.item })}>
+                <Text theme={selected?'h1':'description'}>{data.item}</Text>
+            </Button>
         )
     }
     const renderSubDivisions = (data: { item:string, index:number }) => {
         const selected = filters.sub_division == data.item ? true : false
         return (
-            <TouchableOpacity style={{ padding:10 }} onPress={() => selected ? setFilters({ ...filters, sub_division: undefined }) : setFilters({ ...filters, sub_division:data.item })}>
-                <Text color={selected ? Colors.brand.midnight : Colors.brand.slate} weight={selected ? 'bold': 'regular'}>{data.item}</Text>
-            </TouchableOpacity>
+            <Button style={{ padding:10 }} onPress={() => selected ? setFilters({ ...filters, sub_division: undefined }) : setFilters({ ...filters, sub_division:data.item })}>
+                <Text theme={selected?'h1':'description'}>{data.item}</Text>
+            </Button>
         )
     }
 
@@ -114,10 +115,10 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
         const formatted_date = moment(data.item, 'YYYY/MM/DD')
         const active = active_date == data.item ? true : false
         return (
-            <TouchableOpacity style={{ padding:10, justifyContent:'center', alignItems:'center' }} onPress={() => setData({ ...selector_data, active_date: data.item })}>
-                <Text size={12} color={Colors.brand.midnight} textAlign='center' weight={active ? 'bold' : 'regular'}>{formatted_date.format('ddd')}</Text>
-                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} textAlign='center' weight={active ? 'bold' : 'regular'}>{formatted_date.format('MMM DD')}</Text>
-            </TouchableOpacity>
+            <Button style={{ padding:10, justifyContent:'center', alignItems:'center' }} onPress={() => setData({ ...selector_data, active_date: data.item })}>
+                <Text size={12} theme={active?'h1':'description'} textAlign='center' >{formatted_date.format('ddd')}</Text>
+                <Text style={{ marginTop:3 }} size={12} color={Colors.text.h1} textAlign='center' theme={active?'h1':'description'}>{formatted_date.format('MMM DD')}</Text>
+            </Button>
         )
     }
 
@@ -125,14 +126,14 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
         const selected = selected_team_events.map(e => e.event_id.toString()).includes(data.item.event_id.toString()) ? true : false
         const is_live = moment(data.item.scheduled_datetime).isBefore(moment()) ? true : false
         return (
-            <View style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                <View style={{ flexDirection:'row', alignItems:'center', paddingRight:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+            <View type='row' style={{  padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View style={{ flexDirection:'row', alignItems:'center', paddingRight:10, borderRightWidth:1, borderColor:Colors.borders.light }}>
                     <Image
                         source={{ uri: data.item.away?.image?.url }}
                         style={{ height:34, width:34, borderRadius:4 }}
                         resizeMode='cover'
                     />
-                    <Text style={{ padding:5 }} theme='body'>VS</Text>
+                    <Text style={{ padding:5 }} theme='description'>VS</Text>
                     <Image
                         source={{ uri: data.item.home?.image?.url }}
                         style={{ height:34, width:34, borderRadius:4 }}
@@ -140,8 +141,8 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
                     />
                 </View>
                 <View style={{ flex:1, marginLeft: 10 }}>
-                    <Text theme='header_2'>{data.item.event_title}</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>{data.item.time_detail == 'scheduled' ? moment(data.item.scheduled_datetime).format('MMM DD hh:mm a'): data.item.time_detail}</Text>
+                    <Text theme='h2'>{data.item.event_title}</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>{data.item.time_detail == 'scheduled' ? moment(data.item.scheduled_datetime).format('MMM DD hh:mm a'): data.item.time_detail}</Text>
                 </View>
                 {!is_live ?
                 <Switch
@@ -159,8 +160,8 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
     }
 
     return (
-        <View style={{ ...view_styles.section, margin:0, width, height }}>
-            <View style={{ ...view_styles.section_header, zIndex: 1}}>
+        <View style={{ margin:0, width, height }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                 {active_league ?
                 <Image
                     source={{ uri: active_league.league_image }}
@@ -168,11 +169,11 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
                     resizeMode='cover'
                 />
                 :<></>}
-                <View style={{ flex:1, marginRight:50 }}>
-                    <Text theme='header'>MANAGE CONTESTS</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>Add / Remove contests from the competition</Text>
+                <View transparent style={{ flex:1, marginRight:50 }}>
+                    <Text theme='h1'>MANAGE CONTESTS</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Add / Remove contests from the competition</Text>
                 </View>
-                <View style={{ position: 'absolute', top:10, right:10, justifyContent:'center', alignItems:'center' }}>
+                <View style={{ position: 'absolute', zIndex:1, top:10, right:10, justifyContent:'center', alignItems:'center' }}>
                     <DropDown
                         dropdown_options={[
                             {value:'league_id', eligible_options: leagues.sort((a,b) => a.priority - b.priority).map(l => l.league_name)}
@@ -203,9 +204,9 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
                 {divisions.length > 1 ?
                 <View nativeID='filters' style={{ flexDirection:'row' }}>
                     {show_ranked ?
-                    <TouchableOpacity style={{ padding:10 }} onPress={() => filters.ranked ? setFilters({ ...filters, ranked: false }) : setFilters({ ...filters, ranked: true })}>
-                        <Text color={filters.ranked ? Colors.brand.midnight : Colors.brand.slate} weight={filters.ranked ? 'bold': 'regular'}>Top 25</Text>
-                    </TouchableOpacity>
+                    <Button style={{ padding:10 }} onPress={() => filters.ranked ? setFilters({ ...filters, ranked: false }) : setFilters({ ...filters, ranked: true })}>
+                        <Text theme={filters.ranked ? 'h1':'description'}>Top 25</Text>
+                    </Button>
                     :<></>}
                     <FlatList
                         data={divisions}
@@ -227,7 +228,7 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
                 :<></>}
                 <View style={{ padding:10 }}>
                     {loading ?
-                    <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+                    <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.text.h1} />
                     :<></>}
                     <FlatList
                         data={filtered_events}
@@ -236,16 +237,14 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
                     />
                 </View>
             </ScrollView>
-            <View style={{ ...view_styles.section_footer, flexDirection:'row' }}>
+            <View type='footer' style={{ flexDirection:'row' }}>
                 {filtered_events.length > 0 ?
                 <Button
                     title='ADD ALL'
                     style={{ flex:2, marginRight:10, opacity:!show_add_all || action_loading?0.5:1 }}
                     loading={action_loading}
                     disabled={!show_add_all || action_loading}
-                    padding={15}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
+                    type='success'
                     onPress={() => {
                         ///First remove any event that is already selected
                         let add_events = filtered_events.filter(e => !selected_team_events.map(e => e.event_id.toString()).includes(e.event_id))
@@ -256,9 +255,7 @@ const ContestSelector = ({ action_loading, width, height, leagues, selected_team
                 <Button
                     title='CLOSE'
                     style={{ flex:1 }}
-                    padding={15}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
+                    type='error'
                     onPress={() => onClose()}
                 />
             </View>