be-components 3.5.4 → 3.5.5

package/src/Bracket/components/BracketCompetitionSelector.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, TouchableOpacity, View, Image, ScrollView } from 'react-native';
+import { FlatList, Image, ScrollView } from 'react-native';
 import type { BracketCompetitionProps, BracketProps, LeagueProps } from '../../types';
-import { Button, Icons, Text, TextInput } from '../../Components';
+import { Icons  } from '../../Components';
 import { BracketComeptitionApi } from '../api';
-import Colors from '../../constants/colors';
 import moment from 'moment-mini';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
 
 type BracketCompetitionSelectorProps = {
     visible:boolean,
@@ -14,6 +15,8 @@ type BracketCompetitionSelectorProps = {
     onCompetitionSelect:(bracket_competition:BracketCompetitionProps) => void
 }
 const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCompetitionSelect }:BracketCompetitionSelectorProps) => {
+    const Colors = useColors();
+
     const [ search_value, setSearchValue ] = useState('');
     const [ search_error, setSearchError ] = useState<string|undefined>(undefined);
     const [ card_data, setData ] = useState<{
@@ -53,21 +56,21 @@ const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCom
 
     const renderCompetitions = (data: { item:BracketCompetitionProps, index:number } ) => {
         return (
-            <TouchableOpacity style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
+            <Button style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}
             onPress={() => onCompetitionSelect(data.item)}>
-                <View>
+                <View transparent>
                     <Image
                         source={{ uri: data.item.image?.url }}
                         style={{ height:40, width:40, borderRadius:4 }}
                         resizeMode='cover'
                     />
                 </View>
-                <View style={{ flex:1, marginLeft:5 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.competition_name}</Text>
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{data.item.competition_description}</Text>
+                <View transparent style={{ flex:1, marginLeft:5 }}>
+                    <Text size={14} theme='h1' weight='bold'>{data.item.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='light' weight='regular'>{data.item.competition_description}</Text>
                 </View>
-                <Icons.ChevronIcon size={10} color={Colors.brand.midnight} direction='right' />
-            </TouchableOpacity>
+                <Icons.ChevronIcon size={10} color={Colors.text.h1} direction='right' />
+            </Button>
         )
     }
 
@@ -80,27 +83,27 @@ const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCom
         const started = moment().isAfter(moment(bracket.scheduled_datetime)) ? true : false;
         return (
             <View>
-                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.shades.shade100 }}
+                <Button float style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0 }}
                 onPress={() => selected ? setData({ ...card_data, shown_brackets: shown_brackets.filter(b => b != data.item) }) : setData({ ...card_data, shown_brackets: shown_brackets.concat(data.item) })}>
-                    <View>
+                    <View transparent>
                         <Image
                             source={{ uri: league?.league_image }}
                             style={{ height:40, width:40, borderRadius:4 }}
                             resizeMode='cover'
                         />
                     </View>
-                    <View style={{ flex:1, marginLeft:5 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{bracket.bracket_name}</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>{started? 'In Progress' : `Starts at ${moment(bracket.scheduled_datetime).format('MMM DD YYYY hh:mm a')}`}</Text>
+                    <View transparent style={{ flex:1, marginLeft:5 }}>
+                        <Text size={14} theme='h1' weight='bold'>{bracket.bracket_name}</Text>
+                        <Text style={{ marginTop:3 }} size={12} theme='light'>{started? 'In Progress' : `Starts at ${moment(bracket.scheduled_datetime).format('MMM DD YYYY hh:mm a')}`}</Text>
                     </View>
-                    <View style={{ justifyContent:'center', alignItems:'center', padding:5, paddingRight:15 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{comps.length}</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>COMPETITIONS</Text>
+                    <View transparent style={{ justifyContent:'center', alignItems:'center', padding:5, paddingRight:15 }}>
+                        <Text size={14} theme='h1' weight='bold'>{comps.length}</Text>
+                        <Text style={{ marginTop:3 }} size={12} theme='light' weight='regular'>COMPETITIONS</Text>
                     </View>
-                    <Icons.ChevronIcon direction={selected?'up':'down'} size={10} color={Colors.brand.midnight} />
-                </TouchableOpacity>
+                    <Icons.ChevronIcon direction={selected?'up':'down'} size={10} color={Colors.text.h1} />
+                </Button>
                 {selected ?
-                <View style={{ padding:10 }}>
+                <View transparent style={{ padding:10 }}>
                     <FlatList
                         data={comps}
                         renderItem={renderCompetitions}
@@ -115,21 +118,21 @@ const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCom
     if(!visible || loading){ return <></> }
     return (
         <View style={{ flex:1 }}>
-            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }} onPress={() => onClose()}>
-                <Icons.ChevronIcon direction='left' size={12} color={Colors.brand.midnight} />
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onClose()}>
+                <Icons.ChevronIcon direction='left' size={12} color={Colors.text.h1} />
                 <View style={{ flex:1, marginLeft:20 }}>
-                    <Text size={18} color={Colors.brand.midnight} weight='bold'>Bracket Competitions</Text>
-                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Select a competition below to see more details</Text>
+                    <Text size={18} theme='h1' weight='bold'>Bracket Competitions</Text>
+                    <Text style={{ marginTop:4 }} size={14} theme='light' weight='regular'>Select a competition below to see more details</Text>
                 </View>
-            </TouchableOpacity>
+            </Button>
             
             <ScrollView style={{ flex:1 }}>
-                <View style={{ padding:20 }}>
-                    <View style={{ marginBottom:10 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='semibold'>Have a private code?</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>Enter it below and select search.  If found, we will send you to the competition.</Text>
+                <View transparent style={{ padding:20 }}>
+                    <View transparent style={{ marginBottom:10 }}>
+                        <Text size={14} theme='h1' weight='semibold'>Have a private code?</Text>
+                        <Text style={{ marginTop:3 }} size={12} theme='light'>Enter it below and select search.  If found, we will send you to the competition.</Text>
                     </View>
-                    <View style={{ flexDirection:'row', alignItems:'center' }}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
                         <TextInput
                             style={{ flex:1 }}
                             value={search_value}
@@ -138,21 +141,19 @@ const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCom
                                 setSearchValue(text)
                             }}
                             placeholder='Search or Enter Private Code'
-                            placeholderTextColor={Colors.brand.slate}
+                            placeholderTextColor={Colors.text.descriptionLight}
                         />
                         {search_value ?
                         <Button
                             title='Find Private'
                             style={{ marginLeft:5 }}
-                            padding={15}
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.brand.electric}
+                            type='close'
                             onPress={() => handleFindPrivate()}
                         />
                         :<></>}
                     </View>
                     {search_error ?
-                    <Text style={{ padding:10 }} size={14} color={Colors.utility.warning} weight='regular' textAlign='center'>{search_error}</Text>
+                    <Text style={{ padding:10 }} size={14} color={Colors.text.warning} weight='regular' textAlign='center'>{search_error}</Text>
                     :<></>}
                 </View>
                 <FlatList

package/src/Bracket/components/BracketPlay/BracketRound.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { View } from "react-native"
-import Colors from "../../../constants/colors"
 import type { AthleteProps, BracketRoundProps, PlayerBracketPickProps, RoundEventProps, TeamProps } from '../../../types';
 import RoundEventCard from './RoundEvent';
 import { view_styles } from '../../../constants/styles';
-import { Text } from '../../../Components';
+import { Text, View } from '../../../Components/Themed';
 
 type BracketRoundSectionProps = {
     player_bracket_id?:string,
@@ -25,7 +23,6 @@ type BracketRoundSectionProps = {
 }
 
 const BracketRoundSection = ({ bracket_round, round_event_loading, teams, round_events, width, hide_titles, player_bracket_picks, active_bracket_group_id, onPick }:BracketRoundSectionProps) => {
-
     if(active_bracket_group_id){
         round_events = round_events.filter(re => re.bracket_group_id == active_bracket_group_id)
     }
@@ -71,10 +68,10 @@ const BracketRoundSection = ({ bracket_round, round_event_loading, teams, round_
         <View style={{ }}>
             {!hide_titles ?
             <View style={{ padding:10 }}>
-                <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign="center">{bracket_round.round_name}</Text>
+                <Text size={14} theme='h1' textAlign="center">{bracket_round.round_name}</Text>
             </View>
             :<></>}
-            <View nativeID="round_events" style={{ flex:1 }}>
+            <View transparent nativeID="round_events" style={{ flex:1 }}>
                 {round_events.filter(re => re.bracket_round_id == bracket_round.bracket_round_id).sort((a,b) => a.event_number - b.event_number).map((re, i) => {
                     return renderRoundEvents({ item: re, index:i })
                 })}

package/src/Bracket/components/BracketPlay/RoundEvent.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Image, TouchableOpacity, View, ActivityIndicator } from "react-native"
-import Colors from "../../../constants/colors"
+import { Image, ActivityIndicator } from "react-native"
 import type { AthleteProps, EventProps, PlayerBracketPickProps, RoundEventProps, TeamProps } from "../../../types"
-import { Text } from '../../../Components';
 import { BracketCompetitionHelpers } from '../../api';
+import { useColors } from '../../../constants/useColors';
+import { Button, Text, View } from '../../../Components/Themed';
 
 
 type RoundEventCardProps = {
@@ -28,7 +28,7 @@ type RoundEventCardProps = {
 const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home_placeholder_team, home_team, width, no_pick, round_event, player_bracket_pick, away_placeholder_pick, home_placeholder_pick, onPick }:RoundEventCardProps) => {
     //AWAY PLACEHOLDER
     const round_width = width//width > 600 ? undefined : width / 2
-
+    const Colors = useColors();
     const handleSelectAway = () => {
         if(loading){ return }
         //Okay! Lets get the side_id
@@ -74,11 +74,12 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
     }
 
     const getPickColor = (side:'away'|'home', pbb?:PlayerBracketPickProps) => {
-        if(!pbb || pbb.pick_side != side){ return Colors.brand.midnight }
+        if(!pbb){ return Colors.text.h1 }
+        if(pbb.pick_side && pbb.pick_side != side){ return Colors.text.h1 }
         switch(pbb.result_ind){
-            case 'win': return Colors.utility.success
-            case 'lose': return Colors.utility.error
-            default: return Colors.brand.electric 
+            case 'win': return Colors.text.success
+            case 'lose': return Colors.text.error
+            default: return Colors.text.action 
         }
     }
 
@@ -99,26 +100,26 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
     const renderButton = (side:'away'|'home') => {
         if(no_pick){
             return (
-                <View style={{ height:15, width:15, borderRadius:100, backgroundColor:Colors.shades.shade400 }} />
+                <View style={{ height:15, width:15, borderRadius:100 }} />
             )
         }
         if(!player_bracket_pick || player_bracket_pick.pick_side != side){
             return (
-                <View style={{ height:15, width:15, borderRadius:100, borderWidth:1, borderColor:Colors.brand.electric }} />
+                <View style={{ height:15, width:15, borderRadius:100, borderWidth:1, borderColor:Colors.text.action }} />
             )
         }
         switch(player_bracket_pick.result_ind){
             case 'win':
                 return (
-                    <View style={{ height:15, width:15, borderRadius:100, borderWidth:1, borderColor:Colors.brand.electric, backgroundColor:Colors.utility.success }} />
+                    <View style={{ height:15, width:15, borderRadius:100, borderWidth:1, borderColor:Colors.text.action, backgroundColor:Colors.text.success }} />
                 )
             case 'lose':
                 return (
-                    <View style={{ height:15, width:15, borderRadius:100, borderWidth:1, borderColor:Colors.brand.electric, backgroundColor:Colors.utility.error }} />
+                    <View style={{ height:15, width:15, borderRadius:100, borderWidth:1, borderColor:Colors.text.action, backgroundColor:Colors.text.error }} />
                 )
             default: 
                 return (
-                    <View style={{ height:15, width:15, borderRadius:100, borderWidth:1, borderColor:Colors.brand.electric, backgroundColor:Colors.brand.electric }} />
+                    <View style={{ height:15, width:15, borderRadius:100, borderWidth:1, borderColor:Colors.text.action, backgroundColor:Colors.text.action }} />
                 )
         }
     }
@@ -143,34 +144,33 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                 return (
                     <View style={{  }}>
                         {round_event?.away_side_id && away_placeholder_pick && away_placeholder_team ?
-                        <View style={{ padding:4, borderTopRightRadius:4, borderTopLeftRadius:4, backgroundColor:Colors.shades.shade600 }}>
-                            <Text size={10} weight='semibold' color={away_placeholder_pick.result_ind=='win'?Colors.utility.success:Colors.utility.error}>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
+                        <View style={{ padding:4, borderTopRightRadius:4, borderTopLeftRadius:4 }}>
+                            <Text size={10} weight='semibold' color={away_placeholder_pick.result_ind=='win'?Colors.text.success:Colors.text.error}>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
                         </View>
                         :<></>}
                         <View style={{ flexDirection:'row', alignItems:'center', padding:8 }}>
                             <View style={{ flex:1, marginRight:10, marginLeft:0 }}>
                                 {round_event.away_side_id && away_team ?
-                                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                                <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
                                     <Image
                                         source={{ uri: away_team.image?.url }}
                                         style={{ height:20, width:20, marginRight:2 }}
                                         resizeMode="cover"
                                     />
-
-                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.shades.shade100 }} size={10} color={Colors.brand.midnight} weight='regular'>{round_event.away_seed}</Text>
-                                    <Text style={{ flex:1 }} size={10} color={getPickColor('home', player_bracket_pick)} weight={'semibold'}>{away_team.market_name} {away_team.name}</Text>                                
+                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{round_event.away_seed}</Text>
+                                    <Text style={{ flex:1 }} size={10} color={getPickColor('away', player_bracket_pick)} weight={'semibold'}>{away_team.market_name} {away_team.name}</Text>                                
                                 </View>
                                 :
                                 <View>
                                     {away_placeholder_pick && away_placeholder_team ?
-                                    <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                                    <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
                                         <Image
                                             source={{ uri: away_placeholder_team.image?.url }}
                                             style={{ height:20, width:20, marginRight:2 }}
                                             resizeMode="cover"
                                         />
-                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.shades.shade100 }} size={10} color={Colors.brand.electric} weight='regular'>{away_placeholder_pick.pick_seed}</Text>
-                                        <Text style={{ flex:1 }} size={10} color={Colors.brand.electric} weight='semibold'>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
+                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{away_placeholder_pick.pick_seed}</Text>
+                                        <Text style={{ flex:1 }} size={10} theme='h1'>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
                                     </View>
                                     :
                                     <Text color='transparent'>select</Text>
@@ -178,9 +178,9 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                 </View>
                                 }
                             </View>
-                            <View style={{ flexDirection:'row', alignItems:'center', borderLeftWidth:1, borderLeftColor:Colors.shades.shade600 }}>
+                            <View style={{ flexDirection:'row', alignItems:'center', borderLeftWidth:1, borderLeftColor:Colors.borders.light }}>
                                 {round_event.event_id ?
-                                    <Text style={{ margin:5}} size={10} color={Colors.brand.midnight} weight={'semibold'}>{getScore(away_team?.team_id)}</Text>
+                                    <Text style={{ margin:5}} size={10} theme='h2'>{getScore(away_team?.team_id)}</Text>
                                 :<></>}
                                 {renderButton('away')}
                             </View>
@@ -194,26 +194,26 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
 
                             <View style={{ flex:1, marginRight:10 }}>
                                 {round_event.home_side_id && home_team ?
-                                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                                <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
                                     <Image
                                         source={{ uri: home_team.image?.url }}
                                         style={{ height:20, width:20, marginRight:2 }}
                                         resizeMode="cover"
                                     />
-                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.shades.shade100 }} size={10} color={Colors.brand.midnight} weight='regular'>{round_event.home_seed}</Text>
+                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{round_event.home_seed}</Text>
                                     <Text style={{ flex:1 }} size={10} color={getPickColor('home', player_bracket_pick)} weight={'semibold'}>{home_team.market_name} {home_team.name}</Text>
                                 </View>
                                 :
                                 <View>
                                     {home_placeholder_pick && home_placeholder_team ?
-                                    <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                                    <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
                                         <Image
                                             source={{ uri: home_placeholder_team.image?.url }}
                                             style={{ height:20, width:20, marginRight:2 }}
                                             resizeMode="cover"
                                         />
-                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.shades.shade100 }} size={10} color={Colors.brand.electric} weight='regular'>{home_placeholder_pick.pick_seed}</Text>
-                                        <Text style={{ flex:1 }} size={10} color={Colors.brand.electric} weight={'semibold'}>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
+                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='action'>{home_placeholder_pick.pick_seed}</Text>
+                                        <Text style={{ flex:1 }} size={10} theme='h2'>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
                                     </View>
                                     :
                                     <Text color='transparent'>select</Text>
@@ -221,16 +221,16 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                 </View>
                                 }
                             </View>
-                            <View style={{ flexDirection:'row', alignItems:'center', borderLeftWidth:1, borderLeftColor:Colors.shades.shade600 }}>
+                            <View style={{ flexDirection:'row', alignItems:'center', borderLeftWidth:1, borderLeftColor:Colors.borders.light }}>
                                 {round_event.event_id ?
-                                    <Text style={{ margin:5}} size={10} color={Colors.brand.midnight} weight={'semibold'}>{getScore(home_team?.team_id)}</Text>
+                                    <Text style={{ margin:5}} size={10} theme='h2'>{getScore(home_team?.team_id)}</Text>
                                 :<></>}
                                 {renderButton('home')}
                             </View>
                         </View>
                         {round_event?.home_side_id && home_placeholder_pick && home_placeholder_team?
-                        <View style={{ padding:4, borderBottomRightRadius:4, borderBottomLeftRadius:4, backgroundColor:Colors.shades.shade600 }}>
-                            <Text size={10} weight='semibold' color={home_placeholder_pick.result_ind=='win'?Colors.utility.success:Colors.utility.error}>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
+                        <View style={{ padding:4, borderBottomRightRadius:4, borderBottomLeftRadius:4 }}>
+                            <Text size={10} weight='semibold' color={home_placeholder_pick.result_ind=='win'?Colors.text.success:Colors.text.error}>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
                         </View>
                         :<></>}
                     </View>
@@ -240,18 +240,18 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
 
 
     return (
-        <View style={{ minWidth:125, width:round_width, backgroundColor:no_pick?Colors.shades.shade100:Colors.shades.white, borderRadius:4 }}>
-            <TouchableOpacity style={{ borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => handleSelectAway()}>
+        <View float style={{ minWidth:125, width:round_width, backgroundColor:no_pick?'blue':'black', borderRadius:4 }}>
+            <Button style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:5 }} onPress={() => handleSelectAway()}>
                 {renderSide('away')}
-            </TouchableOpacity>
-            <TouchableOpacity onPress={() => handleSelectHome()}>
+            </Button>
+            <Button style={{ padding:5 }} onPress={() => handleSelectHome()}>
                 {renderSide('home')}
-            </TouchableOpacity>
+            </Button>
             {loading ?
             <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
                 <ActivityIndicator
                     size='large'
-                    color={Colors.brand.midnight}
+                    color={Colors.text.h1}
                 />
             </View>
             :<></>}

package/src/Bracket/components/BracketPlay/index.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, TouchableOpacity, ScrollView, Image } from "react-native";
+import { ActivityIndicator, ScrollView, Image } from "react-native";
 import type { AthleteProps, BracketGroupProps, BracketProps, BracketRoundProps, CompetitionPlayerBracketProps, EventProps, MyPlayerProps, PlayerBracketPickProps, PlayerBracketProps, RoundEventProps, TeamProps } from '../../../types';
 import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from '../../api';
-import { Button, Icons, Text } from '../../../Components';
-import Colors from '../../../constants/colors';
+import { Icons } from '../../../Components';
 import BracketRoundSection from './BracketRound';
 import BracketNavigator from './BracketNavigator';
-import { view_styles } from '../../../constants/styles';
+import { Button, Text, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 
 type BracketPlayProps = {
     visible: boolean,
@@ -22,6 +22,7 @@ type BracketPlayProps = {
 const MIN_ROUND_WIDTH = 175
 const MAX_ROUND_WIDTH = 200;
 const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id, onClose, onPlayerBracketUpdate, onChangePlayerBracket, onRequestAuthenticate }:BracketPlayProps) => {
+    const Colors = useColors();
     const [ round_event_loading, setRoundEventLoading ] = useState<string|undefined>(undefined);
     const [ show_filter, setShowFilter ] = useState(false);
     const [ play_data, setPlayData ] = useState<{
@@ -168,29 +169,28 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
 
     if(!bracket || loading || play_loading){
         return (
-            <View>
-                <ActivityIndicator size='large' style={{ padding:20, alignSelf:'center' }} color={Colors.brand.midnight} />
+            <View type='blur'>
+                <ActivityIndicator size='large' style={{ padding:20, alignSelf:'center' }} color={Colors.text.h1} />
             </View>
         )
     }
     return (
-        <View style={{ flex:1 }}>
-            <View style={{ zIndex:10, flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
-                <TouchableOpacity style={{ flex:1, flexDirection:'row', alignItems: 'center' }} onPress={() => onClose()}>
-                    <Icons.ChevronIcon direction='left' size={12} color={Colors.brand.midnight} />
+        <View style={{ flexGrow:1 }}>
+            <View style={{ zIndex:10, flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <Button style={{ flex:1, flexDirection:'row', alignItems: 'center' }} onPress={() => onClose()}>
+                    <Icons.ChevronIcon direction='left' size={12} color={Colors.text.h1} />
                     <View style={{ flex:1, marginLeft:20, marginRight:10 }}>
-                        <Text size={18} color={Colors.brand.midnight} weight='bold'>{bracket.bracket_name}</Text>
+                        <Text size={18} theme='h1'>{bracket.bracket_name}</Text>
                     </View>
-                </TouchableOpacity>
+                </Button>
                 <View style={{ zIndex:10 }}>
                     <Button
                         title='Filter'
-                        backgroundColor={Colors.brand.electric}
-                        title_color={Colors.shades.white}
+                        type='info'
                         onPress={() => setShowFilter(true)}
                     />
                     {show_filter ?
-                    <View style={{ position:'absolute', top:5, right:5, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
+                    <View style={{ position:'absolute', top:5, right:5, borderRadius:8 }}>
                         <BracketNavigator
                             bracket_groups={bracket_groups}
                             bracket_rounds={bracket_rounds}
@@ -205,44 +205,44 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
                 </View>
             </View>
             {player_bracket ?
-            <View style={{ padding:20, flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.shade100 }}>
+            <View float style={{ padding:10, borderRadius:0, flexDirection:'row', alignItems:'center' }}>
                 {champion_team ?
-                <View style={{ justifyContent:'center', alignItems:'center', marginRight:10 }}>
+                <View transparent style={{ justifyContent:'center', alignItems:'center', marginRight:10 }}>
                     <Image
                         source={{ uri: champion_team.image?.url }}
                         style={{ height:20, width:20, borderRadius:4 }}
                         resizeMode='cover'
                     />
-                    <Text style={{ marginTop:2 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign='center'>{champion_team.abbr}</Text>
+                    <Text style={{ marginTop:2 }} size={12} theme='h1' textAlign='center'>{champion_team.abbr}</Text>
                 </View>
                 :champion_athlete ?
-                <View style={{ justifyContent:'center', alignItems:'center', marginRight:10 }}>
+                <View transparent style={{ justifyContent:'center', alignItems:'center', marginRight:10 }}>
                     <Image
                         source={{ uri: champion_athlete.image?.url }}
                         style={{ height:20, width:20, borderRadius:4 }}
                         resizeMode='cover'
                     />
-                    <Text style={{ marginTop:2 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign='center'>{champion_athlete.abbr_name}</Text>
+                    <Text style={{ marginTop:2 }} size={12} theme='h1' textAlign='center'>{champion_athlete.abbr_name}</Text>
                 </View>
                 :<></>}
-                <View style={{ flex:1 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{player_bracket.bracket_name}</Text>
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
+                <View transparent style={{ flex:1 }}>
+                    <Text size={14} theme='h1'>{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='description'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
                 </View>
                 <Button
                     title='Change'
-                    backgroundColor={Colors.brand.electric}
-                    title_color={Colors.shades.white}
+                    type='info'
                     onPress={() => onChangePlayerBracket(bracket.bracket_id)}
                 />
             </View>
             :<></>}
-            <ScrollView style={{ flex:1, backgroundColor:Colors.shades.shade100 }}>
-                <View style={{ flex:1, flexDirection:'row', padding:10, overflow:'scroll' }}>
+            
+            <ScrollView>
+                <ScrollView horizontal style={{ flexDirection:'row', padding:10 }}>
                     {visible_rounds.sort((a,b) => a.round_number - b.round_number).map((br,i) => {
                         return renderBracketRounds({ item:br, index:i })
                     })}
-                </View>
+                </ScrollView>
             </ScrollView>
         </View>
     )

package/src/Bracket/components/BracketSelector.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { TouchableOpacity, FlatList, View, Image, ScrollView } from "react-native"
+import { FlatList, Image, ScrollView } from "react-native"
 import type { BracketProps, LeagueProps } from '../../types';
-import Colors from '../../constants/colors';
-import { Button, Icons, Text } from '../../Components';
+import { Icons } from '../../Components';
 import moment from 'moment-mini';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type BracketSelectorProps = {
     visible: boolean,
@@ -14,26 +15,25 @@ type BracketSelectorProps = {
 }
 
 const BracketSelector = ({ visible, leagues, brackets, onSelectBracket, onClose }:BracketSelectorProps) => {
-
+    const Colors = useColors();
     const unique_league_ids = [ ...new Set(brackets.map(b => b.league_id)) ]
 
 
     const renderBrackets = (data: { item:BracketProps, index:number }) => {
         const started = moment().isAfter(moment(data.item.scheduled_datetime)) ? true : false;
         return (
-            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomColor:Colors.shades.shade600, borderBottomWidth:1 }} onPress={() => onSelectBracket(data.item)}>
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomColor:Colors.borders.light, borderBottomWidth:1 }} onPress={() => onSelectBracket(data.item)}>
                 <View style={{ flex:1 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.bracket_name}</Text>
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{started?'In Progress':`Starts at ${moment(data.item.scheduled_datetime).format('MMM DD YYYY hh:mm a')}`}</Text>
+                    <Text size={14} theme='h1' weight='bold'>{data.item.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='light' weight='regular'>{started?'In Progress':`Starts at ${moment(data.item.scheduled_datetime).format('MMM DD YYYY hh:mm a')}`}</Text>
                 </View>
                 <Button
                     title='VIEW'
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
+                    type='info'
                     disabled
                     onPress={() => console.log('')}
                 />
-            </TouchableOpacity>
+            </Button>
         )
     }
 
@@ -42,18 +42,18 @@ const BracketSelector = ({ visible, leagues, brackets, onSelectBracket, onClose
         const league_brackets = brackets.filter(b => b.league_id == data.item);
         if(!league){ return <></> }
         return (
-            <View>
-                <View style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.shades.shade100 }}>
-                    <View>
+            <View transparent>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    <View transparent>
                         <Image
                             source={{ uri: league.league_image }}
                             style={{ height:30, width:30, borderRadius:4 }}
                             resizeMode='cover'
                         />
                     </View>
-                    <View style={{ flex:1, marginLeft:10 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{league.league_name}</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>{league_brackets.length} Brackets</Text>
+                    <View transparent style={{ flex:1, marginLeft:10 }}>
+                        <Text size={14} theme='h1' weight='bold'>{league.league_name}</Text>
+                        <Text style={{ marginTop:3 }} size={12} theme='light'>{league_brackets.length} Brackets</Text>
                     </View>
                 </View>
                 <FlatList
@@ -68,13 +68,13 @@ const BracketSelector = ({ visible, leagues, brackets, onSelectBracket, onClose
     if(!visible){ return <></> }
     return (
         <View style={{ flex:1 }}>
-             <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }} onPress={() => onClose()}>
-                <Icons.ChevronIcon direction='left' size={12} color={Colors.brand.midnight} />
+             <Button style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onClose()}>
+                <Icons.ChevronIcon direction='left' size={12} color={Colors.text.h1} />
                 <View style={{ flex:1, marginLeft:20 }}>
-                    <Text size={18} color={Colors.brand.midnight} weight='bold'>Active Brackets</Text>
-                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Select a bracket below to make or edit picks</Text>
+                    <Text size={18} theme='h1' weight='bold'>Active Brackets</Text>
+                    <Text style={{ marginTop:4 }} size={14} theme='light' weight='regular'>Select a bracket below to make or edit picks</Text>
                 </View>
-            </TouchableOpacity>
+            </Button>
             <ScrollView style={{ flex:1 }}>
                 <FlatList
                     data={unique_league_ids}