be-components 3.5.7 → 3.5.8

package/src/CompetitionManager/components/CompetitionHeader.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { View, Image } from 'react-native';
+import { Alert, Image } from 'react-native';
 import type { CompetitionProps, CompetitionSummaryProps } from '../../types';
-import { Button, Text } from '../../Components';
-import Colors from '../../constants/colors';
-import { view_styles } from '../../constants/styles';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type CompetitionHeaderProps = {
     width:number,
@@ -24,7 +23,7 @@ type CompetitionHeaderProps = {
 }
 
 const CompetitionHeader = ({ width, action_loading, competition_summaries, competition, competition_valid, onDelete, onActivate, onPause, onResume }:CompetitionHeaderProps) => {
-    
+    const Colors = useColors();
     const handleActivate = () => {
         if(!competition_valid.valid){
             return alert(`Please complete all the required sections before activating`)
@@ -40,8 +39,8 @@ const CompetitionHeader = ({ width, action_loading, competition_summaries, compe
     }
     
     return (
-        <View style={{ backgroundColor:Colors.shades.white, flexGrow:1, minWidth:330, maxWidth:width }}>
-            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+        <View style={{ flexGrow:1, minWidth:330, maxWidth:width }}>
+            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                 <View>
                     <Image
                         source={{ uri: competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
@@ -50,73 +49,83 @@ const CompetitionHeader = ({ width, action_loading, competition_summaries, compe
                     />
                 </View>
                 <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='header'>{competition.competition_name}</Text>
-                    <Text style={{ marginTop:4 }} theme='header_2>'>{competition.competition_description}</Text>
+                    <Text theme='h1'>{competition.competition_name}</Text>
+                    <Text style={{ marginTop:4 }} theme='h2'>{competition.competition_description}</Text>
                 </View>
                 {competition.status == 'pending'?
                 <Button
                     title={'ACTIVATE'}
                     style={{ opacity:competition_valid.valid ? 1: 0.5 }}
                     loading={action_loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={() => handleActivate()}
                 />
                 :<></>}
             </View>
             {competition.status == 'pending' ? 
-            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header'>COMPETITION IS PENDING</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>Complete each section and press 'ACTIVATE'.</Text>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>COMPETITION IS PENDING</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Complete each section and press 'ACTIVATE'.</Text>
                 </View>
                 <Button
                     title='DELETE'
                     style={{ opacity:!action_loading? 1: 0.5 }}
                     loading={action_loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
+                    type='error'
                     onPress={async() => {
-                        const confirmed = await confirm(`Are you sure you would like to delete this competition?  This cannot be undone.`)
-                        if(!confirmed){ return }
-                        onDelete();
+                        Alert.alert('Are you sure you would like to delete?', 'This cannot be undone', [
+                            {
+                                text:'Cancel',
+                                onPress:() => console.log('hey')
+                            },
+                            {
+                                text: `Yes I'm Sure`,
+                                onPress:() => onDelete()
+                            }
+                        ])
                     }}
                 />
             </View>
             :<></>}
             {competition.status == 'scheduled' ?
-            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header'>COMPETITION IS ACTIVE</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>In order to edit this competition, you must first pause it.</Text>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>COMPETITION IS ACTIVE</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>In order to edit this competition, you must first pause it.</Text>
                 </View>
                 <Button
                     title='PAUSE'
                     style={{ opacity:!action_loading && competition_valid.valid ? 1: 0.5 }}
                     loading={action_loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={() => onPause()}
                 />
             </View>
             :<></>}
             {competition.status == 'paused' ?
-            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header'>EDITING COMPETITION</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>Feel free to make changes. When done, simply press resume.</Text>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>EDITING COMPETITION</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Feel free to make changes. When done, simply press resume.</Text>
                 </View>
                 {competition_summaries.length == 0 ?
                 <Button
                     title='DELETE'
                     style={{ marginRight:5, opacity:!action_loading ? 1: 0.5 }}
                     loading={action_loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
+                    type='error'
                     onPress={async() => {
-                        const confirmed = await confirm(`Are you sure you would like to delete this competition?  This cannot be undone.`)
-                        if(!confirmed){ return }
-                        onDelete();
+                        Alert.alert('Are you sure you would like to delete?', 'This cannot be undone', [
+                            {
+                                text:'Cancel',
+                                onPress:() => console.log('hey')
+                            },
+                            {
+                                text: `Yes I'm Sure`,
+                                onPress:() => onDelete()
+                            }
+                        ])
                     }}
                 />
                 :<></>}
@@ -124,8 +133,7 @@ const CompetitionHeader = ({ width, action_loading, competition_summaries, compe
                     title='RESUME'
                     style={{ opacity:!action_loading && competition_valid.valid ? 1: 0.5 }}
                     loading={action_loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
+                    type='success'
                     onPress={() => handleResume()}
                 />
             </View>

package/src/CompetitionManager/components/CompetitionInfoForm.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { View, TouchableOpacity, Image } from "react-native"
-import { view_styles } from "../../constants/styles"
+import { Image } from "react-native"
 //import ImageUploader from '../../Components/ImageUploader';
 import type { CompetitionProps, MyPlayerProps } from '../../types';
-import { Button, Icons, Switch, Text, TextInput } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons, Switch } from '../../Components';
 import ImageUploader from '../../Components/ImageUploader';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type CompetitionInfoFormProps = {
     competition:CompetitionProps,
@@ -15,10 +15,10 @@ type CompetitionInfoFormProps = {
     onCompetitionUpdate:(competition:CompetitionProps) => void
 }
 
-const CompetitionInfoForm = ({ is_valid, player, competition, width, onCompetitionUpdate }:CompetitionInfoFormProps) => {
+const CompetitionInfoForm = ({ is_valid, player, competition, onCompetitionUpdate }:CompetitionInfoFormProps) => {
     const [ expanded, setExpanded ] = useState(false);
     const [ draft_competition, setDraftCompetition ] = useState<CompetitionProps | undefined>(undefined);
-
+    const Colors = useColors();
     useEffect(() => {
         setDraftCompetition(competition)
     },[competition])
@@ -26,36 +26,34 @@ const CompetitionInfoForm = ({ is_valid, player, competition, width, onCompetiti
     if(!draft_competition){ return <></> }
     const is_changed = JSON.stringify(draft_competition) != JSON.stringify(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 Information</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 Information</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_info" style={{ ...view_styles.section_body, padding:10, minWidth:300, maxWidth:width, backgroundColor:Colors.shades.shade100 }}>
+            <View type='body' nativeID="competition_info">
                 
-                <View nativeID="competition_image" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                    <View style={{ flex:1, margin:5, minWidth:200 }}>
-                        <Text theme='header_2'>Competition Image</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>Give this competition an image so it is recognizable to those trying to join.</Text>
+                <View type='row' nativeID="competition_image" style={{ alignItems:'flex-start', borderBottomWidth:1, borderColor:Colors.borders.light, padding:10 }}>
+                    <View style={{ flex:1, margin:5 }}>
+                        <Text theme='h1'>Competition Image</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Give this competition an image so it is recognizable to those trying to join.</Text>
                     </View>
                     <ImageUploader
                         public_id={`comp_image_${competition.competition_id}_${Math.random()}`}
@@ -66,41 +64,39 @@ const CompetitionInfoForm = ({ is_valid, player, competition, width, onCompetiti
                             style={{ height: 50, width:50, borderRadius:4 }}
                             resizeMode='cover'
                         />
-                        <Text size={12} color={Colors.brand.electric} textAlign='center'>CHANGE</Text>
+                        <Text style={{ marginTop:10 }} size={12} color={Colors.text.action} textAlign='center'>CHANGE</Text>
                     </ImageUploader>
                 </View>
 
-                <View nativeID="competition_name" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View type='row' nativeID="competition_name" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                     <View style={{ flex:1, margin:5, minWidth:200 }}>
-                        <Text theme='header_2'>Competition Name</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>Give the competition a memorable name that aligns with the type and payout.</Text>
+                        <Text theme='h1'>Competition Name</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Give the competition a memorable name that aligns with the type and payout.</Text>
                     </View>
                     <TextInput
-                        style={{ ...view_styles.input, flexGrow:1, margin:5 }}
+                        style={{ flex:1, minWidth:200, margin:5 }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, competition_name:text })}
                         value={draft_competition.competition_name}
                         placeholder="Competition Name"
-                        placeholderTextColor={Colors.brand.slate}
                     />
                 </View>
 
-                <View nativeID="competition_description" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View type='row' nativeID="competition_description" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                     <View style={{ flex:1, margin:5, minWidth:200  }}>
-                        <Text theme='header_2'>Competition Description</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>Give the competition a memorable description that would entice users to participate.</Text>
+                        <Text theme='h2'>Competition Description</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Give the competition a memorable description that would entice users to participate.</Text>
                     </View>
                     <TextInput
-                        style={{ ...view_styles.input, flexGrow:1, margin:5 }}
+                        style={{ flex:1, minWidth:200, margin:5 }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, competition_description:text })}
                         value={draft_competition.competition_description}
                         placeholder="Pick 5 games ATS from NFL Week 6 matchups"
-                        placeholderTextColor={Colors.brand.slate}
                     />
                 </View>
-                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap', marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600  }}>
+                <View type='row' nativeID="invite_only" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light  }}>
                     <View style={{ flex:1, margin:5, marginRight:15 }}>
-                        <Text theme='header_2'>Make Private</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>Only access this competition using an invite code.</Text>
+                        <Text theme='h1'>Make Private</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Only access this competition using an invite code.</Text>
                     </View>
                     <Switch
                         disabled={competition.competition_season_id ? true : false}
@@ -110,10 +106,10 @@ const CompetitionInfoForm = ({ is_valid, player, competition, width, onCompetiti
                     />
                 </View>
                 {player?.role == 'admin' ?
-                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap', marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600  }}>
+                <View type='row' nativeID="invite_only" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light  }}>
                     <View style={{ flex:1, margin:5, marginRight:15 }}>
-                        <Text theme='header_2'>Make Template</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>This will allow for other users to copy this competition and create it for themselves.</Text>
+                        <Text theme='h2'>Make Template</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>This will allow for other users to copy this competition and create it for themselves.</Text>
                     </View>
                     <Switch
                         value={competition.template ? true : false}

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>