be-components 3.5.4 → 3.5.5

package/src/Bracket/components/CompetitionLeaderboard.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, View, TouchableOpacity, Image, ScrollView, ActivityIndicator } from 'react-native';
+import { FlatList, Image, ScrollView, ActivityIndicator } from 'react-native';
 import type { AthleteProps, CompetitionPlayerBracketProps, PlayerBracketProps, PublicPlayerProps, TeamProps } from '../../types';
 import { BracketApi, BracketComeptitionApi } from '../api';
-import Colors from '../../constants/colors';
-import { Button, Text } from '../../Components';
 import { CompetitionHelpers } from '../../Competition/api';
-import { view_styles } from '../../constants/styles';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type CompetitionLeaderboardProps = {
     bracket_competition_id:string,
@@ -18,6 +17,7 @@ type CompetitionLeaderboardProps = {
 }
 
 const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_brackets, my_player_brackets, view_mode, show_champions, onViewFull, onClose }:CompetitionLeaderboardProps) => {
+    const Colors = useColors();
     const [ leaders_data, setData ] = useState<{
         loading:boolean,
         offset:number,
@@ -74,23 +74,23 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
         if(show_champions && player_bracket.champion_id_type == 'team'){ champ_team = teams.find(t => t.team_id == player_bracket.champion_id) }
         if(show_champions && player_bracket.champion_id_type == 'athlete'){ champ_athlete = athletes.find(t => t.athlete_id == player_bracket.champion_id) }
         return (
-            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', borderRadius:22, margin:6, backgroundColor:Colors.shades.white, padding:4 }}>
-                 <View style={{ padding:5 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{CompetitionHelpers.formatPlace(data.item.place)}</Text>
+            <Button float style={{ flexDirection:'row', alignItems:'center', borderRadius:22, margin:6, padding:4 }}>
+                 <View transparent style={{ padding:5 }}>
+                    <Text size={14} theme='h1'>{CompetitionHelpers.formatPlace(data.item.place)}</Text>
                 </View>
-                <View>
+                <View transparent>
                     <Image
                         source={{ uri: player.profile_pic }}
                         style={{ height:40, width:40, borderRadius:100 }}
                         resizeMode='cover'
                     />
                 </View>
-                <View style={{ flex:1, marginLeft:5, marginRight:5 }}>
-                    <Text size={14} weight='bold' color={Colors.brand.midnight}>{player_bracket.bracket_name}</Text>
-                    <Text style={{ marginTop:3 }} size={12} weight='regular' color={Colors.brand.slate}>{data.item.points_scored} Points ({data.item.possible_points} Possible)</Text>
+                <View transparent style={{ flex:1, marginLeft:5, marginRight:5 }}>
+                    <Text size={14} theme='h1'>{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='light'>{data.item.points_scored} Points ({data.item.possible_points} Possible)</Text>
                 </View>
                 {champ_team ?
-                <View style={{ padding:5 }}>
+                <View transparent style={{ padding:5 }}>
                     <Image
                         source={{ uri: champ_team.image?.url }}
                         style={{ height:25, width:25, borderRadius:4 }}
@@ -98,7 +98,7 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
                     />
                 </View>
                 :champ_athlete ?
-                <View style={{ padding:5 }}>
+                <View transparent style={{ padding:5 }}>
                     <Image
                         source={{ uri: champ_athlete.image?.url }}
                         style={{ height:25, width:25, borderRadius:4 }}
@@ -106,10 +106,10 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
                     />
                 </View>
                 :<></>}
-                <View style={{ padding:5 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>${data.item.winnings.toFixed(2)}</Text>
+                <View transparent style={{ padding:5 }}>
+                    <Text size={14} theme='h2'>${data.item.winnings.toFixed(2)}</Text>
                 </View>
-            </TouchableOpacity>
+            </Button>
         )
     }
 
@@ -117,9 +117,9 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
         <View style={{ flex:1 }}>
             <ScrollView style={{ flex:1 }}>
             {my_competition_player_brackets.length > 0 ?
-            <View style={{ backgroundColor:Colors.brand.midnight, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
-                <View style={{ marginBottom:5 }}>
-                    <Text size={14} color={Colors.shades.white}>MY RESULTS</Text>
+            <View style={{ padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <View transparent style={{ marginBottom:5 }}>
+                    <Text size={14} color={Colors.text.h1}>MY RESULTS</Text>
                 </View>
                 <FlatList
                     data={my_competition_player_brackets}
@@ -128,12 +128,12 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
                 />
             </View>
             :<></>}
-            <View style={{ padding:10, backgroundColor:Colors.shades.shade100, borderRadius:8 }}>
+            <View style={{ padding:10, borderRadius:8 }}>
                 <View style={{ marginBottom:5 }}>
-                    <Text size={14} color={Colors.brand.midnight}>RESULTS</Text>
+                    <Text size={14} theme='h2'>RESULTS</Text>
                 </View>
                 {loading ?
-                <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:25, alignSelf:'center' }} />
+                <ActivityIndicator size='large' color={Colors.text.h1} style={{ padding:25, alignSelf:'center' }} />
                 :
                 <FlatList
                     data={visible_leaders}
@@ -145,38 +145,37 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
             <View style={{ padding:10 }}>
                 <Button
                     title='View Full Leaderboard'
-                    title_color={Colors.brand.electric}
-                    backgroundColor='transparent'
+                    type='text'
                     onPress={() => onViewFull()}
                 />
             </View>
             :<></>}
             </ScrollView>
             {onClose ?
-            <View style={{ padding:10, ...view_styles.float }}>
+            <View>
                 <View style={{ padding:10, flexDirection:'row', alignItems:'center', justifyContent:'space-between' }}>
                     {offset > 0 ?
                     <Button
                         title='PREV'
-                        title_color={Colors.brand.electric}
-                        backgroundColor='transparent'
+                        type='text'
                         onPress={() => getLeaders(bracket_competition_id, offset - 1)}
                     />
                     :<View/>}
                     <Button
                         title='NEXT'
-                        title_color={Colors.brand.electric}
-                        backgroundColor='transparent'
+                        type='text'
                         onPress={() => getLeaders(bracket_competition_id, offset + 1)}
                     />
                 </View>
-                <Button
-                    title='Close'
-                    style={{ padding:15 }}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
-                    onPress={() => onClose()}
-                />
+                <View type='footer' style={{ padding:10 }}>
+                
+                    <Button
+                        title='Close'
+                        style={{ padding:15 }}
+                        type='error'
+                        onPress={() => onClose()}
+                    />
+                </View>
             </View>
             :<></>}
         </View>

package/src/Bracket/components/PlayerBracketManager.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { View, TouchableOpacity, FlatList, Image, ScrollView } from "react-native";
+import { FlatList, Image, ScrollView } from "react-native";
 import type { AthleteProps, BracketCompetitionProps, CompetitionPlayerBracketProps, PlayerBracketProps, TeamProps } from '../../types';
-import Colors from '../../constants/colors';
-import { Button, Icons, Text, TextInput } from '../../Components';
+import { Icons } from '../../Components';
 import { BracketComeptitionApi, BracketCompetitionHelpers } from '../api';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type PlayerBracketManagerProps = {
     visible:boolean,
@@ -20,6 +21,7 @@ type PlayerBracketManagerProps = {
 }
 
 const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracket_competitions, competition_player_brackets, onEditPicks, onSelectCompetition, onUpdateBracket, onClose }:PlayerBracketManagerProps) => {
+    const Colors = useColors();
     const [ search_value, setSearchValue ] = useState('');
     const [ search_error, setSearchError ] = useState<string|undefined>(undefined)
     const [ info_expanded, setInfoExpanded ] = useState(true);
@@ -53,7 +55,7 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
     const renderCompetitions = (data: { item:BracketCompetitionProps, index:number }) => {
         const payout = BracketCompetitionHelpers.getPayout(data.item)
         return (
-            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
             onPress={() => onSelectCompetition(data.item)}>
                 <View>
                     <Image
@@ -63,15 +65,15 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                     />
                 </View>
                 <View style={{ flex:1, marginLeft:5 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.competition_name}</Text>
-                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>Current Payout: ${payout.toFixed(2)}</Text>
+                    <Text size={14} theme='h1'>{data.item.competition_name}</Text>
+                    <Text style={{ marginTop:5 }} size={14} theme='description'>Current Payout: ${payout.toFixed(2)}</Text>
                 </View>
                 <View style={{ padding:10 }}>
-                    <Text size={16} weight='bold' color={Colors.brand.midnight} textAlign='center'>${data.item.buy_in}</Text>
-                    <Text style={{ marginTop:5 }} size={12} weight='bold' color={Colors.brand.slate} textAlign='center'>{data.item.tickets_sold} / {data.item.max_brackets}</Text>
+                    <Text size={16} theme='h1' textAlign='center'>${data.item.buy_in}</Text>
+                    <Text style={{ marginTop:5 }} size={12} weight='bold' theme='light' textAlign='center'>{data.item.tickets_sold} / {data.item.max_brackets}</Text>
                 </View>
-                <Icons.ChevronIcon direction='right' color={Colors.brand.midnight} size={12} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' color={Colors.text.h1} size={12} />
+            </Button>
         )
     }
 
@@ -79,7 +81,7 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
         const bracket_competition = bracket_competitions.find(c => c.bracket_competition_id == data.item.bracket_competition_id);
         if(!bracket_competition){ return <></> }
         return (
-            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
             onPress={() => onSelectCompetition(bracket_competition)}>
                 <View>
                     <Image
@@ -89,15 +91,15 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                     />
                 </View>
                 <View style={{ flex:1, marginLeft:5 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{bracket_competition.competition_name}</Text>
-                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.points_scored} Points ({data.item.possible_points} possible)</Text>
+                    <Text size={14} theme='h1'>{bracket_competition.competition_name}</Text>
+                    <Text style={{ marginTop:5 }} size={14} theme='description'>{data.item.points_scored} Points ({data.item.possible_points} possible)</Text>
                 </View>
                 <View style={{ padding:10 }}>
-                    <Text size={16} weight='bold' color={Colors.brand.midnight} textAlign='center'>{BracketCompetitionHelpers.formatPlace(data.item.place)}</Text>
-                    <Text style={{ marginTop:5 }} size={12} weight='bold' color={Colors.brand.slate} textAlign='center'>${data.item.winnings.toFixed(2)}</Text>
+                    <Text size={16} weight='bold' theme='h1'>{BracketCompetitionHelpers.formatPlace(data.item.place)}</Text>
+                    <Text style={{ marginTop:5 }} size={12} weight='bold' theme='light' textAlign='center'>${data.item.winnings.toFixed(2)}</Text>
                 </View>
-                <Icons.ChevronIcon direction='right' color={Colors.brand.midnight} size={12} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' color={Colors.text.h1} size={12} />
+            </Button>
         )
     }
 
@@ -110,24 +112,24 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
 
     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'>{player_bracket.bracket_name}</Text>
-                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Manage your bracket and enter competitions</Text>
+                    <Text size={18} theme='h1'>{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:4 }} size={14} theme='light'>Manage your bracket and enter competitions</Text>
                 </View>
-            </TouchableOpacity>
+            </Button>
             <ScrollView style={{ flex:1}}>
 
             <View nativeID='bracket_info'>
-                <TouchableOpacity style={{ padding:20, flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.shade100 }} onPress={() => setInfoExpanded(!info_expanded)}>
-                    <Text style={{flex:1}} size={16} color={Colors.brand.midnight} weight='bold'>Bracket Details</Text>
-                    <Icons.ChevronIcon direction={info_expanded?'up':'down'} color={Colors.brand.midnight} size={10} />
-                </TouchableOpacity>
+                <Button style={{ padding:20, flexDirection:'row', alignItems:'center'}} onPress={() => setInfoExpanded(!info_expanded)}>
+                    <Text style={{flex:1}} size={16} theme='h1'>Bracket Details</Text>
+                    <Icons.ChevronIcon direction={info_expanded?'up':'down'} color={Colors.text.h1} size={10} />
+                </Button>
                 {info_expanded ?
-                <View style={{ padding:10, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                <View style={{ padding:10, borderRadius:8  }}>
                     <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-                        <Text style={{ flex:1 }} size={14} weight='bold' color={Colors.brand.midnight}>Name</Text>
+                        <Text style={{ flex:1 }} size={14} weight='bold' color={Colors.text.h1}>Name</Text>
                         <TextInput
                             editable={player_bracket.status == 'active' ? true : false}
                             value={draft_bracket.bracket_name}
@@ -136,11 +138,11 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                         />
                     </View>
                     <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-                        <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>% Complete</Text>
-                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{(player_bracket.completion_pct * 100).toFixed(2)}%</Text>
+                        <Text style={{ flex:1 }} size={14} theme='h1'>% Complete</Text>
+                        <Text size={14} theme='h1'>{(player_bracket.completion_pct * 100).toFixed(2)}%</Text>
                     </View>
                     <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-                        <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>Champion</Text>
+                        <Text style={{ flex:1 }} size={14} theme='h1'>Champion</Text>
                         {player_bracket.champion_id_type == 'team' && champion_team ?
                         <View style={{ flexDirection:'row', alignItems:'center' }}>
                             <Image
@@ -148,7 +150,7 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                                 style={{ height:25, width:25, marginRight:10 }}
                                 resizeMode='cover'
                             />
-                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{champion_team.market_name} {champion_team.name}</Text>
+                            <Text size={14} theme='h1'>{champion_team.market_name} {champion_team.name}</Text>
                         </View>
                         :player_bracket.champion_id_type == 'athlete' && champion_athlete ?
                         <View style={{ flexDirection:'row', alignItems:'center' }}>
@@ -157,7 +159,7 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                                 style={{ height:25, width:25, marginRight:10 }}
                                 resizeMode='cover'
                             />
-                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{champion_athlete.first_name} {champion_athlete.last_name}</Text>
+                            <Text size={14} theme='h1'>{champion_athlete.first_name} {champion_athlete.last_name}</Text>
                         </View>
                         :<></>}
                     </View>
@@ -168,8 +170,7 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                         <Button
                             title='DELETE'
                             style={{ marginRight:4 }}
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.utility.error}
+                            type='error'
                             onPress={async() => {
                                 const new_b = await BracketComeptitionApi.deletePlayerBracket(draft_bracket.player_bracket_id);
                                 onUpdateBracket(new_b)
@@ -179,8 +180,7 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                         {is_changed ?
                         <Button
                             title='SAVE'
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.utility.success}
+                            type='success'
                             onPress={async() => {
                                 const new_b = await BracketComeptitionApi.updatePlayerBracket(draft_bracket);
                                 onUpdateBracket(new_b)
@@ -189,8 +189,7 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                         : player_bracket.status == 'active' ?
                         <Button
                             title='UPDATE PICKS'
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.brand.electric}
+                            type='info'
                             onPress={() => onEditPicks(player_bracket)}
                         />
                         :<></>}
@@ -198,9 +197,9 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                 </View>
                 :<></>}
                 {player_bracket.status == 'deleted' ?
-                <View style={{ position:'absolute', top:0, bottom:0, left:0, right:0, backgroundColor:Colors.shades.black_faded_heavy, justifyContent:'center', alignItems:'center' }}>
-                    <View style={{ borderRadius:8, backgroundColor:Colors.shades.white, height:120, width:200, padding:10, justifyContent:'center', alignItems:'center' }}>
-                        <Text size={18} weight='bold' color={Colors.utility.error}>DELETED!</Text>
+                <View type='blur' style={{ position:'absolute', top:0, bottom:0, left:0, right:0, justifyContent:'center', alignItems:'center' }}>
+                    <View float style={{ borderRadius:8, height:120, width:200, padding:10, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={18} weight='bold' color={Colors.text.error}>DELETED!</Text>
                     </View>
                 </View>
                 :<></>}
@@ -208,15 +207,15 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
             {player_bracket.status != 'deleted' ?
             <View>
                 <View nativeID='competitions'>
-                    <View style={{ padding:10, paddingLeft:20, flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.shade100 }}>
-                        <Text style={{flex:1}} size={16} color={Colors.brand.midnight} weight='bold'>Competitions</Text>
-                        <View style={{ flexDirection:'row', alignItems:'center', borderRadius:22, backgroundColor:Colors.shades.white }}>
-                            <TouchableOpacity style={{ padding:10, borderTopLeftRadius:22, borderBottomLeftRadius:22, backgroundColor:active_comp_toggle=='entered' ? Colors.brand.midnight: 'transparent' }} onPress={() => setData({ ...manage_data, active_comp_toggle: 'entered' })}>
-                                <Text size={14}  textAlign='center' color={active_comp_toggle=='entered'?Colors.shades.white:Colors.brand.midnight} weight={active_comp_toggle=='entered'?'bold':'regular'}>ENTERED</Text>
-                            </TouchableOpacity>
-                            <TouchableOpacity style={{ padding:10, borderTopRightRadius:22, borderBottomRightRadius:22, backgroundColor:active_comp_toggle=='eligible' ? Colors.brand.midnight: 'transparent' }} onPress={() => setData({ ...manage_data, active_comp_toggle: 'eligible' })}>
-                                <Text size={14} textAlign='center' color={active_comp_toggle=='eligible'?Colors.shades.white:Colors.brand.midnight} weight={active_comp_toggle=='eligible'?'bold':'regular'}>ELIGIBLE</Text>
-                            </TouchableOpacity>
+                    <View style={{ padding:10, paddingLeft:20, flexDirection:'row', alignItems:'center', backgroundColor:Colors.borders.light }}>
+                        <Text style={{flex:1}} size={16} theme='h1'>Competitions</Text>
+                        <View style={{ flexDirection:'row', alignItems:'center', borderRadius:22, backgroundColor:Colors.text.white }}>
+                            <Button style={{ padding:10, borderTopLeftRadius:22, borderBottomLeftRadius:22, backgroundColor:active_comp_toggle=='entered' ? Colors.absolutes.brand.midnight: 'transparent' }} onPress={() => setData({ ...manage_data, active_comp_toggle: 'entered' })}>
+                                <Text size={14}  textAlign='center' color={active_comp_toggle=='entered'?Colors.text.white:Colors.absolutes.brand.midnight} weight={active_comp_toggle=='entered'?'bold':'regular'}>ENTERED</Text>
+                            </Button>
+                            <Button style={{ padding:10, borderTopRightRadius:22, borderBottomRightRadius:22, backgroundColor:active_comp_toggle=='eligible' ? Colors.absolutes.brand.midnight: 'transparent' }} onPress={() => setData({ ...manage_data, active_comp_toggle: 'eligible' })}>
+                                <Text size={14} textAlign='center' color={active_comp_toggle=='eligible'?Colors.text.white:Colors.absolutes.brand.midnight} weight={active_comp_toggle=='eligible'?'bold':'regular'}>ELIGIBLE</Text>
+                            </Button>
                         </View>
                     </View>
                 </View>
@@ -229,10 +228,10 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                     />
                     : active_comp_toggle == 'eligible' ?
                     <View>
-                    <View style={{ padding:20, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                    <View style={{ padding:20, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
                     <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>
+                        <Text size={14} theme='h2'>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' }}>
                         <TextInput
@@ -243,21 +242,18 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                                 setSearchValue(text)
                             }}
                             placeholder='Search or Enter Private Code'
-                            placeholderTextColor={Colors.brand.slate}
                         />
                         {search_value ?
                         <Button
                             title='Find Private'
                             style={{ marginLeft:5 }}
-                            padding={15}
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.brand.electric}
+                            type='info'
                             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/PlayerBrackets.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { View, FlatList, TouchableOpacity, Image, ScrollView } from "react-native"
+import { FlatList, Image, ScrollView } from "react-native"
 import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, LeagueProps, PlayerBracketProps, TeamProps } from '../../types';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
 import moment from 'moment-mini';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type PlayerBracketSelectorProps = {
     visible:boolean,
@@ -19,6 +20,7 @@ type PlayerBracketSelectorProps = {
 }
 
 const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, player_brackets, onSelect, onClose }:PlayerBracketSelectorProps) => {
+    const Colors = useColors();
 
     const active_brackets = player_brackets.filter(pb => pb.status == 'active');
 
@@ -29,9 +31,9 @@ const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, pl
         const champion_team = data.item.champion_id_type == 'team' ? teams.find(t => t.team_id == data.item.champion_id) : undefined
         const champion_athlete = data.item.champion_id_type == 'athlete' ? athletes.find(t => t.team_id == data.item.champion_id) : undefined
         return (
-            <TouchableOpacity style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onSelect(data.item)}>
+            <Button style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onSelect(data.item)}>
                 {champion_team ?
-                <View style={{ marginRight:5 }}>
+                <View transparent style={{ marginRight:5 }}>
                     <Image
                         source={{ uri: champion_team.image?.url }}
                         style={{ height:35, width:35, borderRadius:4 }}
@@ -39,7 +41,7 @@ const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, pl
                     />
                 </View>
                 :champion_athlete ?
-                <View style={{ marginRight:5 }}>
+                <View transparent style={{ marginRight:5 }}>
                     <Image
                         source={{ uri: champion_athlete.image?.url }}
                         style={{ height:35, width:35, borderRadius:4 }}
@@ -47,18 +49,17 @@ const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, pl
                     />
                 </View>
                 :<></>}
-                <View style={{ flex:1 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.bracket_name}</Text>
-                    <Text style={{ marginTop:4 }} size={12} color={Colors.brand.slate} weight='regular'>{(data.item.completion_pct*100).toFixed()}% Complete</Text>
+                <View transparent style={{ flex:1 }}>
+                    <Text size={14} theme='h1' weight='bold'>{data.item.bracket_name}</Text>
+                    <Text style={{ marginTop:4 }} size={12} theme='light' weight='regular'>{(data.item.completion_pct*100).toFixed()}% Complete</Text>
                 </View>
                 <Button
                     title='VIEW'
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
+                    type='info'
                     disabled
                     onPress={() => console.log('')}
                 />
-            </TouchableOpacity>
+            </Button>
         )
     }
 
@@ -70,20 +71,20 @@ const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, pl
         const b_pbs = player_brackets.filter(pb => pb.bracket_id == data.item);
         const started = moment().isAfter(moment(bracket.scheduled_datetime)) ? true : false
         return (
-            <View>
-                <TouchableOpacity style={{ padding:10, backgroundColor:Colors.shades.shade100, flexDirection:'row', alignItems:'center' }}>
-                    <View>
+            <View transparent>
+                <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                    <View transparent>
                         <Image
                             source={{ uri: league.league_image }}
                             style={{ height:35, width:35, borderRadius:4 }}
                         />
                     </View>
-                    <View style={{ flex:1 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{bracket.bracket_name}</Text>
-                        <Text style={{ marginTop:4 }} size={12} color={Colors.brand.slate} weight='bold'>{started?'In Progress':`Starts at ${moment(bracket.scheduled_datetime).format('MMM DD YYYY hh:mm a')}`}</Text>
+                    <View transparent style={{ flex:1 }}>
+                        <Text size={14} theme='h1' weight='bold'>{bracket.bracket_name}</Text>
+                        <Text style={{ marginTop:4 }} size={12} theme='light' weight='bold'>{started?'In Progress':`Starts at ${moment(bracket.scheduled_datetime).format('MMM DD YYYY hh:mm a')}`}</Text>
                     </View>
-                </TouchableOpacity>
-                <View style={{ padding:10 }}>
+                </View>
+                <View transparent style={{ padding:10 }}>
                     <FlatList
                         data={b_pbs}
                         renderItem={renderPlayerBrackets}
@@ -98,13 +99,13 @@ const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, pl
 
     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'>My Brackets</Text>
-                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Select a filled bracket below to manage it</Text>
+                    <Text size={18} theme='h1' weight='bold'>My Brackets</Text>
+                    <Text style={{ marginTop:4 }} size={14} theme='light' weight='regular'>Select a filled bracket below to manage it</Text>
                 </View>
-            </TouchableOpacity>
+            </Button>
             <ScrollView style={{flex:1}}>
                 <FlatList
                     data={unique_bracket_ids}

package/src/Bracket/components/RoomMenu.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { FlatList, TouchableOpacity, View, Image } from 'react-native';
-import { Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { FlatList, Image } from 'react-native';
+import { Icons } from '../../Components';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type OptionType = { key:string, label:string, description: string }
 const options:OptionType[] = [
@@ -17,43 +18,43 @@ type RoomMenuProps = {
 }
 
 const RoomMenu = ({ visible, onOptionSelect, onClose }: RoomMenuProps ) => {
-
+    const Colors = useColors();
     const renderOptions = (data: { item:OptionType, index:number }) => {
         return (
-            <TouchableOpacity style={{ flexDirection:'row', padding:20, alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
+            <Button style={{ flexDirection:'row', padding:20, alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}
             onPress={() => onOptionSelect(data.item)}>
                 <View style={{ flex:1 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='bold'>{data.item.label}</Text>
-                    <Text style={{ marginTop:3 }} size={14} color={Colors.brand.slate} weight='regular'>{data.item.description}</Text>
+                    <Text size={16} theme='h1' weight='bold'>{data.item.label}</Text>
+                    <Text style={{ marginTop:3 }} size={14} theme='light' weight='regular'>{data.item.description}</Text>
                 </View>
-                <Icons.ChevronIcon direction='right' color={Colors.brand.midnight} size={12} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' color={Colors.text.h1} size={12} />
+            </Button>
         )
     }
 
     if(!visible){ return <></> }
     return (
         <View>
-            <TouchableOpacity
+            <Button
                 disabled={!onClose}
-                style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}
+                style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}
                 onPress={() => onClose ? onClose() : console.log('')}
                 >
                 {onClose ?
                 <View style={{ marginRight:20 }}>
-                    <Icons.ChevronIcon direction='left' color={Colors.brand.midnight} size={12} />
+                    <Icons.ChevronIcon direction='left' color={Colors.text.h1} size={12} />
                 </View>
                 :<></>}
                 <View style={{ flex:1 }}>
-                    <Text size={18} color={Colors.brand.midnight} weight='bold'>Bracket Room</Text>
-                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Select an option below to continue</Text>
+                    <Text size={18} theme='h1' weight='bold'>Bracket Room</Text>
+                    <Text style={{ marginTop:4 }} size={14} theme='light' weight='regular'>Select an option below to continue</Text>
                 </View>
                 <Image
                     source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1677259366/Bracket_image_h0fkku.webp' }}
                     style={{ width:70, height:45, borderRadius:4 }}
                     resizeMode='cover'
                 />
-            </TouchableOpacity>
+            </Button>
             <View style={{ padding:10 }}>
                 <FlatList
                     data={options}