be-components 3.4.2 → 3.4.3

package/src/Components/Icons.tsx

@@ -25,6 +25,21 @@ const AlertIcon = ({ color, size }:IconProps) => {
     )
 }
 
+const RefreshIcon = ({ color, size }:IconProps) => {
+    const ratio = .8214
+    const height = size??24
+    const width = height * ratio
+    return (
+        <Svg width={`${width}px`} height={`${height}px`} viewBox="0 0 23 28">
+            <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+                <G id="refresh-cw-alt-2-svgrepo-com" transform="translate(2.000000, 2.000000)" stroke={color??Colors.brand.midnight} stroke-width="3">
+                    <Path d="M8.399958,0 L10.799946,2.39452803 L10.7289064,2.46567567 M10.799946,19.200024 L8.399958,21.4928525 L8.43559782,21.5299324 M10.7289064,2.46567567 L8.399958,4.799976 M10.7289064,2.46567567 C10.3587082,2.42229589 9.98191009,2.399988 9.599952,2.399988 C4.29804251,2.399988 0,6.69803051 0,11.99994 C0,15.0316048 1.40527697,17.7350713 3.599982,19.4943825 M15.599922,4.50553347 C17.794591,6.26486868 19.199904,8.96829916 19.199904,11.99994 C19.199904,17.3018735 14.9018855,21.599892 9.599952,21.599892 C9.20587397,21.599892 8.81719591,21.5761321 8.43559782,21.5299324 M10.799946,24 L8.43559782,21.5299324" id="Shape"></Path>
+                </G>
+            </G>
+        </Svg>
+    )
+}
+
  const SearchIcon = ({ color, size }: IconProps) => {
     const icon_size = size ?? 19
     return (
@@ -1429,6 +1444,7 @@ export default {
     PlusCircleIcon,
     PausedIcon,
     TwitterXIcon,
+    RefreshIcon,
     ChangeIcon,
     USDIcon,
     EyeOffIcon,

package/src/Components/SearchBox.tsx

@@ -1,8 +1,7 @@
-import { TextInput, View } from "react-native"
-import Button from "./Button";
 import React, { useState } from "react";
 import Icons from "./Icons";
-import Colors from "../constants/colors";
+import { TextInput, View, Button } from "./Themed";
+import { useColors } from "../constants/useColors";
 
 type SearchBoxProps = {
     onSearch?: (text:string) => void,
@@ -14,7 +13,7 @@ type SearchBoxProps = {
 
 const SearchBox = ({ placeholder, onSearch, onChange, hide_search_button, style }:SearchBoxProps) => {
     const [ search_value, setSearchValue ] = useState('');
-
+    const Colors = useColors();
     const handleSearch = () => {
         if(!onSearch){ return }
         if(search_value == ''){ return alert('Please provide search value') }
@@ -23,16 +22,17 @@ const SearchBox = ({ placeholder, onSearch, onChange, hide_search_button, style
     }
 
     return (
-        <View style={{ flex:1, flexDirection:'row', alignItems:'center', padding:5 }}>
-            <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginRight:10, borderWidth:1, borderRadius:8, borderColor:Colors.shades.shade400 }}>
-                <View style={{ padding:10 }}>
-                    <Icons.SearchIcon size={12} color={Colors.brand.midnight} />
+        <View transparent style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+            <View type='input' style={{ flex:1, flexDirection:'row', alignItems:'center', marginRight:10 }}>
+                <View transparent style={{ padding:10 }}>
+                    <Icons.SearchIcon size={12} color={Colors.text.h1} />
                 </View>
                 <TextInput
                     placeholder={placeholder ?? 'Search'}
                     value={search_value}
-                    placeholderTextColor={Colors.shades.shade400}
-                    style={{ flex:1, padding:10, color:Colors.brand.midnight, fontFamily: 'barlow-semibold', fontSize:14, ...style }}
+                    transparent
+                    placeholderTextColor={Colors.text.descriptionLight}
+                    style={{ flex:1, ...style }}
                     onChangeText={(text) => {
                         setSearchValue(text)
                         if(onChange){ onChange(text) }
@@ -42,9 +42,7 @@ const SearchBox = ({ placeholder, onSearch, onChange, hide_search_button, style
             {!hide_search_button ?
             <Button
                 title="Search"
-                title_color={Colors.shades.white}
-                backgroundColor={Colors.brand.midnight}
-                borderRadius={8}
+                type='info'
                 onPress={() => handleSearch()}
             />
             :<></>}

package/src/Components/Themed.tsx

@@ -78,9 +78,9 @@ export type ViewProps = BEViewProps & DefaultView['props'];
 
 export function View(props: ViewProps) {
   const { style, float, transparent, type, ...otherProps } = props;
-  const C = useColors();
   const color_mode = useColorScheme() ?? 'light'
-
+  const C = useColors();
+  
   const getColor = () => {
     if(transparent){ return 'transparent' }
     switch(type){
@@ -119,8 +119,8 @@ export type ButtonProps = BEButtonProps & TouchableOpacityProps;
 
 export const Button = (props:ButtonProps) => {
   const { style, type, children, transparent, loading, title, float, backgroundColor, title_color, borderColor, ...otherProps } = props;
-  const C = useColors();
   const color_mode = useColorScheme() ?? 'light'
+  const C = useColors();
 
   const getTheme = () => {
     let b_colors = {

package/src/Engage/components/BracketCompetitionCard.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { View, Image, TouchableOpacity } from 'react-native';
+import { Image } from 'react-native';
 import type { BracketCompetitionProps, BracketProps, CompanyProps, CompetitionResultTypeProps, LeagueProps, PublicPlayerProps } from '../../types';
-import { view_styles } from '../../constants/styles';
-import Colors from '../../constants/colors';
-import { 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 BracketCompetitionCardProps = {
     bracket_competition:BracketCompetitionProps,
@@ -17,6 +17,7 @@ type BracketCompetitionCardProps = {
     onCompetitionSelect:(c:BracketCompetitionProps) => void
 }
 const BracketCompetitionCard = ({ bracket_competition, bracket, league, company, admin, onCompetitionSelect }:BracketCompetitionCardProps) => {
+    const Colors = useColors();
     const cl = bracket_competition.market_type == 'FOR_MONEY' ? '$' : 'E'
     let current_payout = bracket_competition.ticket_revenue
     if(bracket_competition.promo_payout){ current_payout += bracket_competition.promo_payout }
@@ -24,23 +25,23 @@ const BracketCompetitionCard = ({ bracket_competition, bracket, league, company,
 
     const tickets_available = bracket_competition.max_brackets - bracket_competition.tickets_sold
     const is_live = moment().isAfter(moment(bracket_competition.scheduled_datetime)) ? true : false
-    
+    const is_closed = bracket_competition.status == 'closed' ? true : false
     return (
-        <TouchableOpacity style={{ ...view_styles.section, padding:0, borderWidth:1, borderColor:Colors.shades.shade600  }} onPress={() => onCompetitionSelect(bracket_competition)}>
-            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+        <Button float style={{ padding:0 }} onPress={() => onCompetitionSelect(bracket_competition)}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                 <Image
                     source={{ uri: bracket_competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
                     style={{ height:45, width:45, borderRadius:4}}
                     resizeMode='cover'
                 />
-                <View style={{ flex:1, marginLeft:10, marginRight:10, borderRightWidth:1, borderRightColor:Colors.shades.shade600 }}>
-                    <Text theme='header_2'>{bracket_competition.competition_name}</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>{bracket_competition.competition_description}</Text>
+                <View transparent style={{ flex:1, marginLeft:10, marginRight:10  }}>
+                    <Text theme='h2'>{bracket_competition.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>{bracket_competition.competition_description}</Text>
                 </View>
-                <Text size={20} color={Colors.brand.electric} weight='bold'>{cl}{bracket_competition.buy_in}</Text>
+                <Text size={20} color={Colors.text.action} weight='bold'>{cl}{bracket_competition.buy_in}</Text>
             </View>
-            <View style={{ ...view_styles.section_body }}>
-                <View style={{ ...view_styles.body_row }}>
+            <View type='body' style={{ padding:10 }}>
+                <View type='row'>
                     {bracket && league ?
                     <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginRight:10 }}>
                         <Image
@@ -49,24 +50,24 @@ const BracketCompetitionCard = ({ bracket_competition, bracket, league, company,
                             resizeMode='cover'
                         />
                         <View style={{ flex:1, marginLeft:10 }}>
-                            <Text theme='header_2'>{bracket.bracket_name}</Text>
+                            <Text theme='h2'>{bracket.bracket_name}</Text>
                         </View>
                     </View>
                     :<></>}
                     {tickets_available > 0 ? 
                     <View style={{ justifyContent:'center', alignItems:'center' }}>
-                        <Text size={18} color={Colors.brand.midnight} weight='bold'>{tickets_available}</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>TICKETS</Text>
+                        <Text size={18} color={Colors.text.h1} weight='bold'>{tickets_available}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>TICKETS</Text>
                     </View>
                     :
                     <View style={{ justifyContent:'center', alignItems:'center' }}>
-                        <Text size={18} color={Colors.utility.error} weight='bold'>FULL</Text>
+                        <Text size={18} color={Colors.text.error} weight='bold'>FULL</Text>
                     </View>
                     }
                 </View>
             </View>
 
-            <View style={{ ...view_styles.section_footer, backgroundColor:company?Colors.incentive.gold_faded:Colors.shades.shade100 }}>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 {company ?
                 <Image
                     source={{ uri: company.company_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
@@ -81,10 +82,10 @@ const BracketCompetitionCard = ({ bracket_competition, bracket, league, company,
                 />
                 :<></>}
                 {bracket_competition.prize_override ?
-                <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:10 }}>
-                    <View style={{ flex:1, marginRight:10}}>
-                        <Text size={12} weight='bold' color={Colors.brand.midnight}>ADDITIONAL PRIZE</Text>
-                        <Text style={{ marginTop:3 }} size={10} color={Colors.incentive.gold} weight='bold'>{bracket_competition.prize_override}</Text>
+                <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:10 }}>
+                    <View transparent style={{ flex:1, marginRight:10}}>
+                        <Text size={12} weight='bold' color={Colors.text.h1}>ADDITIONAL PRIZE</Text>
+                        <Text style={{ marginTop:3 }} size={10} color={Colors.text.gold} weight='bold'>{bracket_competition.prize_override}</Text>
                     </View>
                     {bracket_competition.prize_image?.url ?
                     <Image
@@ -93,24 +94,26 @@ const BracketCompetitionCard = ({ bracket_competition, bracket, league, company,
                         resizeMode='cover'
                     />
                     :
-                    <Icons.AwardRibbonIcon size={24} color={Colors.incentive.gold} />
+                    <Icons.AwardRibbonIcon size={24} color={Colors.text.gold} />
                     }
                 </View>
                 :
-                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
-                    <View style={{ flex:1, marginLeft:20, marginRight:20 }}>
-                        <Text theme='header_2'>CURRENT PAYOUT</Text>
-                        {is_live ? 
-                        <Text style={{ marginTop:3 }} color={Colors.utility.error} weight='bold' size={12}>IN PROGRESS</Text>
+                <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View transparent style={{ flex:1, marginLeft:20, marginRight:20 }}>
+                        <Text theme='h2'>CURRENT PAYOUT</Text>
+                        {is_closed ?
+                        <Text style={{ marginTop:3 }} color={Colors.text.gold} weight='bold' size={12}>COMPLETED</Text>
+                        :is_live ? 
+                        <Text style={{ marginTop:3 }} color={Colors.text.error} weight='bold' size={12}>IN PROGRESS</Text>
                         :
-                        <Text style={{ marginTop:3 }} theme='body_2'>Join Until {moment(bracket_competition.scheduled_datetime).format('ddd hh:mm a')}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Join Until {moment(bracket_competition.scheduled_datetime).format('ddd hh:mm a')}</Text>
                         }
                     </View>
-                    <Text color={Colors.utility.success} size={20} weight='bold'>{cl}{current_payout.toFixed(2)}</Text>
+                    <Text color={Colors.text.success} size={20} weight='bold'>{cl}{current_payout.toFixed(2)}</Text>
                 </View>
                 }
             </View>
-        </TouchableOpacity>
+        </Button>
     )
 }
 

package/src/Engage/components/CompanyCard.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useRef } from 'react';
-import { View, Image, Linking, TouchableOpacity } from 'react-native';
+import React, { useEffect } from 'react';
+import { Image, Linking } from 'react-native';
 import type { BEEventProps, CompanyProps } from '../../types';
-import { view_styles } from '../../constants/styles';
-import { Text } from '../../Components';
-import Colors from '../../constants/colors';
-import { useIsInViewport } from '../../Components/ViewportObserver';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type CompanyCardProps = {
     company:CompanyProps,
@@ -15,9 +13,9 @@ type CompanyCardProps = {
 const MAX_IMAGE_WIDTH = 175
 
 const CompanyCard = ({company, width, onEvent, onSelectCompany}:CompanyCardProps) => {
-    
-    const company_ref = useRef(null)
-    const isInViewport = useIsInViewport(company_ref);
+    const Colors = useColors();
+    //const company_ref = useRef(null)
+    const isInViewport = false//useIsInViewport(company_ref);
     useEffect(() => {
         if(isInViewport && onEvent){
             let be_event:BEEventProps = {
@@ -41,28 +39,28 @@ const CompanyCard = ({company, width, onEvent, onSelectCompany}:CompanyCardProps
     }
 
     return (
-        <TouchableOpacity ref={company_ref} style={{ ...view_styles.section, width:image_width, backgroundColor:company.brand_primary ?? Colors.shades.shade100, borderRadius:8  }}
+        <Button float style={{ flexGrow:1, width:image_width, borderRadius:8, padding:0, backgroundColor:company.brand_primary ?? Colors.absolutes.shades.shade100, borderColor:Colors.absolutes.shades.shade100}}
         onPress={() => {
             if(onSelectCompany){ return onSelectCompany(company) }
             if(company.company_url){ Linking.openURL(company.company_url) }
             return
         }}>
-            <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
-                <View style={{ flex:1 }}>
-                    <Text size={14} color={Colors.shades.white} weight='bold'>{company.company_name}</Text>
+            <View transparent style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                <View transparent style={{ flexShrink:1  }}>
+                    <Text size={14} theme='h2' color={Colors.text.white} weight='bold'>{company.company_name}</Text>
                 </View>
             </View>
-            <View style={{ backgroundColor:Colors.shades.shade100, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+            <View style={{ flexGrow:1, borderBottomRightRadius:8, borderBottomLeftRadius:8, backgroundColor:Colors.absolutes.shades.shade100 }}>
                 <Image
                     source={{ uri: company.company_image?.url }}
-                    style={{ height: image_width, width:image_width, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}
-                    resizeMode='cover'
+                    style={{ height: image_width, width:image_width - 2, borderBottomRightRadius:8, borderBottomLeftRadius:8}}
+                    resizeMode='contain'
                 />
-                 <View style={{ position:'absolute', backgroundColor:Colors.shades.white, bottom:0, left:0, right:0, padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
-                    <Text theme='header_2'>{description}</Text>
+                 <View style={{ position:'absolute', backgroundColor:Colors.text.white, bottom:0, left:0, right:0, padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                    <Text theme='h2' color={Colors.absolutes.brand.midnight}>{description}</Text>
                 </View>
             </View>
-        </TouchableOpacity>
+        </Button>
     )
 }
 

package/src/Engage/components/CompetitionCard.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { View, Image, TouchableOpacity } from 'react-native';
+import { Image } from 'react-native';
 import type { CompanyProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, PublicPlayerProps } from '../../types';
-import { view_styles } from '../../constants/styles';
-import Colors from '../../constants/colors';
-import { Icons, Text } from '../../Components';
+import { Icons } from '../../Components';
 import moment from 'moment-mini';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type CompetitionCardProps = {
     competition:CompetitionProps,
@@ -16,6 +16,7 @@ type CompetitionCardProps = {
     onCompetitionSelect:(c:CompetitionProps) => void
 }
 const CompetitionCard = ({ competition, competition_type, company, admin, onCompetitionSelect }:CompetitionCardProps) => {
+    const Colors = useColors();
     const cl = competition.market_type == 'FOR_MONEY' ? '$' : 'E'
     let current_payout = competition.ticket_revenue
     if(competition.promo_payout){ current_payout += competition.promo_payout }
@@ -23,59 +24,60 @@ const CompetitionCard = ({ competition, competition_type, company, admin, onComp
 
     const tickets_available = parseFloat(competition.available_tickets as string) - competition.tickets_sold
     const is_live = moment().isAfter(moment(competition.scheduled_datetime)) ? true : false
+    const is_closed = competition.status == 'closed' ? true : false
     const getTypeIcon = () => {
         switch(competition_type.type){
             case 'pick':
-                return <Icons.SelectorIcon size={20} color={Colors.brand.midnight} />
+                return <Icons.SelectorIcon size={20} color={Colors.text.h1} />
             default: return <></>
         }
     }
     
     return (
-        <TouchableOpacity style={{ ...view_styles.section, padding:0, borderWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onCompetitionSelect(competition)}>
-            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+        <Button float style={{ padding:0 }} onPress={() => onCompetitionSelect(competition)}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                 <Image
                     source={{ uri: competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
                     style={{ height:45, width:45, borderRadius:4}}
                     resizeMode='cover'
                 />
-                <View style={{ flex:1, marginLeft:10, marginRight:10, borderRightWidth:1, borderRightColor:Colors.shades.shade600 }}>
-                    <Text theme='header_2'>{competition.competition_name}</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>{competition.competition_description}</Text>
+                <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                    <Text theme='h2'>{competition.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>{competition.competition_description}</Text>
                 </View>
-                <Text size={20} color={Colors.brand.electric} weight='bold'>{cl}{competition.buy_in}</Text>
+                <Text size={20} color={Colors.text.action} weight='bold'>{cl}{competition.buy_in}</Text>
             </View>
-            <View style={{ ...view_styles.section_body }}>
-                <View style={{ ...view_styles.body_row }}>
+            <View type='body' style={{ padding:10 }}>
+                <View type='row'>
                     
                     {tickets_available > 0 ? 
                     <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
-                        <Text size={18} color={Colors.brand.midnight} weight='bold'>{tickets_available}</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>TICKETS</Text>
+                        <Text size={18} color={Colors.text.h1} weight='bold'>{tickets_available}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>TICKETS</Text>
                     </View>
                     :
                     <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
-                        <Text size={18} color={Colors.utility.error} weight='bold'>FULL</Text>
+                        <Text size={18} color={Colors.text.error} weight='bold'>FULL</Text>
                     </View>
                     }
                     {competition_type.type == 'pick' ?
                     <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
-                        <Text size={18} color={Colors.brand.midnight} weight='bold'>{competition.max_pick_count}</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>PICKS</Text>
+                        <Text size={18} color={Colors.text.h1} weight='bold'>{competition.max_pick_count}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>PICKS</Text>
                     </View>
                     :
                     <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
-                        <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='center'>E{competition.initial_balance}</Text>
-                        <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} textAlign='center'>STARTING BALANCE</Text>
+                        <Text size={18} color={Colors.text.h1} weight='bold' textAlign='center'>E{competition.initial_balance}</Text>
+                        <Text style={{ marginTop:3 }} size={14} color={Colors.text.h1} textAlign='center'>STARTING BALANCE</Text>
                     </View>
                     }
                     <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
                         {getTypeIcon()}
-                        <Text style={{ marginTop:3 }} theme='body'>{competition_type.type_label.toUpperCase()}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>{competition_type.type_label.toUpperCase()}</Text>
                     </View>
                 </View>
             </View>
-            <View style={{ ...view_styles.section_footer, backgroundColor:company?Colors.incentive.gold_faded:Colors.shades.shade100 }}>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 {company ?
                 <Image
                     source={{ uri: company.company_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
@@ -90,10 +92,10 @@ const CompetitionCard = ({ competition, competition_type, company, admin, onComp
                 />
                 :<></>}
                 {competition.prize_override ?
-                <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:10 }}>
-                    <View style={{ flex:1, marginRight:10}}>
-                        <Text size={12} weight='bold' color={Colors.brand.midnight}>ADDITIONAL PRIZE</Text>
-                        <Text style={{ marginTop:3 }} size={10} color={Colors.incentive.gold} weight='bold'>{competition.prize_override}</Text>
+                <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:10 }}>
+                    <View transparent style={{ flex:1, marginRight:10}}>
+                        <Text size={12} weight='bold' color={Colors.text.h1}>ADDITIONAL PRIZE</Text>
+                        <Text style={{ marginTop:3 }} size={10} color={Colors.text.gold} weight='bold'>{competition.prize_override}</Text>
                     </View>
                     {competition.prize_image?.url ?
                     <Image
@@ -102,24 +104,27 @@ const CompetitionCard = ({ competition, competition_type, company, admin, onComp
                         resizeMode='cover'
                     />
                     :
-                    <Icons.AwardRibbonIcon size={24} color={Colors.incentive.gold} />
+                    <Icons.AwardRibbonIcon size={24} color={Colors.text.gold} />
                     }
                 </View>
                 :
-                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
-                    <View style={{ flex:1, marginLeft:20, marginRight:20 }}>
-                        <Text theme='header_2'>CURRENT PAYOUT</Text>
-                        {is_live ? 
-                        <Text style={{ marginTop:3 }} color={Colors.utility.error} weight='bold' size={12}>IN PROGRESS</Text>
+                <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View transparent style={{ flex:1, marginLeft:20, marginRight:20 }}>
+                        <Text theme='h2'>{is_closed ? 'TOTAL PAID OUT': 'CURRENT PAYOUT'}</Text>
+                        {is_closed ?
+                        <Text style={{ marginTop:3 }} color={Colors.text.gold} weight='bold' size={12}>COMPLETED</Text>
                         :
-                        <Text style={{ marginTop:3 }} theme='body_2'>Join Until {moment(competition.scheduled_datetime).format('ddd hh:mm a')}</Text>
+                        is_live ? 
+                        <Text style={{ marginTop:3 }} color={Colors.text.error} weight='bold' size={12}>IN PROGRESS</Text>
+                        :
+                        <Text style={{ marginTop:3 }} theme='light'>Join Until {moment(competition.scheduled_datetime).format('ddd hh:mm a')}</Text>
                         }
                     </View>
-                    <Text color={Colors.utility.success} size={20} weight='bold'>{cl}{current_payout.toFixed(2)}</Text>
+                    <Text color={Colors.text.success} size={20} weight='bold'>{cl}{current_payout.toFixed(2)}</Text>
                 </View>
                 }
             </View>
-        </TouchableOpacity>
+        </Button> 
     )
 }
 

package/src/Engage/components/EngageHeader.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { View, Image, FlatList, TouchableOpacity, ActivityIndicator } from "react-native";
+import { Image, FlatList, ActivityIndicator } from "react-native";
 import type { BEEventProps, CompanyProps } from '../../types';
 import {LinearGradient} from 'expo-linear-gradient';
-import Colors from '../../constants/colors';
-import { Button, Icons, Text } from '../../Components';
+import { Icons } from '../../Components';
 import { view_styles } from '../../constants/styles';
 import CompanyCard from './CompanyCard';
 import SearchBox from '../../Components/SearchBox';
 import { EngageApi } from '../api';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type EngageHeaderProps = {
     companies:CompanyProps[],
@@ -32,7 +33,7 @@ const EngageHeader = ({ companies, width, onManage, onEvent, onSelectCompany }:E
     });
     const [ found_companies, setFoundCompanies ] = useState<CompanyProps[]>([]);
     const { active, loading, value } = search;
-
+    const Colors = useColors();
     let filtered_companies = [ ...found_companies ]
     filtered_companies = filtered_companies.filter(c => c.company_name.toLowerCase().includes(value.toLowerCase()))
 
@@ -63,7 +64,7 @@ const EngageHeader = ({ companies, width, onManage, onEvent, onSelectCompany }:E
 
     const renderCompanies = (data:{ item:CompanyProps, index:number }) => {
         return (
-            <View>
+            <View transparent style={{ margin:4, marginRight:12 }}>
                 <CompanyCard
                     company={data.item}
                     width={width / 2.5}
@@ -77,9 +78,9 @@ const EngageHeader = ({ companies, width, onManage, onEvent, onSelectCompany }:E
     const company = companies[active_company]
 
     return (
-        <View>
-            <LinearGradient colors={[Colors.brand.midnightTopGradient, Colors.brand.midnight ]} style={{ padding:20, flexDirection:'row', alignItems:'center' }}>
-                <View style={{ borderRadius:100, height:75, width:75, backgroundColor:Colors.shades.white, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
+        <View type = 'header'>
+            <LinearGradient colors={[Colors.views.background, Colors.views.header ]} style={{ padding:20, flexDirection:'row', alignItems:'center' }}>
+                <View float style={{ borderRadius:100, height:75, width:75, backgroundColor:Colors.text.white, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
                     {company ?
                     <Image
                         source={{ uri: company.company_image?.url }}
@@ -88,41 +89,41 @@ const EngageHeader = ({ companies, width, onManage, onEvent, onSelectCompany }:E
                     />
                     :<></>}
                 </View>
-                <View style={{ flex:1, marginLeft:20 }}>
-                    <Text size={20} weight='bold' color={Colors.shades.white}>Engage with our partners</Text>
-                    <Text style={{ marginTop:10 }} size={14} weight='regular' color={Colors.shades.white}>Competitions, squares, brackets are all brought to you without fees thanks to our amazing partners.</Text>
+                <View transparent style={{ flex:1, marginLeft:20 }}>
+                    <Text size={20} weight='bold' color={Colors.text.h1}>Engage with our partners</Text>
+                    <Text style={{ marginTop:10 }} size={14} weight='regular' color={Colors.text.h1}>Competitions, squares, brackets are all brought to you without fees thanks to our amazing partners.</Text>
                 </View>
                 {onManage ?
                 <View style={{ position:'absolute', bottom:5, right:10 }}>
                     <Button
                         title='MANAGE'
-                        title_color={Colors.shades.white}
-                        padding={10}
-                        backgroundColor={Colors.utility.success}
+                        type='success'
                         onPress={() => onManage()}
                     />
                 </View>
-                    :<></>}
+                :<></>}
             </LinearGradient>
-            <View nativeID='brands'>
-                <TouchableOpacity style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0, marginBottom:10 }} onPress={() => setSearch({ ...search, active: !active })}>
+            <View transparent style={{ padding:10 }}>
+                <Button float style={{ flexDirection:'row', alignItems:'center', marginBottom:10 }} onPress={() => setSearch({ ...search, active: !active })}>
                     <View style={{ flex:1, marginRight:10 }}>
-                        <Text theme='header'>{active?'Search':'Support'} Our Partners!</Text>
+                        <Text theme='h1'>{active?'Search':'Support'} Our Partners!</Text>
+                        {active ?
+                        <Text style={{ marginTop:3 }} theme='description'>Use the search box below to find a brand that you're interested in!</Text>
+                        :
+                        <Text style={{ marginTop:3 }} theme='description'>Below are brands that currently have availble competitions!</Text>
+                        }
+                    </View>
+                    <View float style={{ height:30, width:30, backgroundColor:Colors.views.header, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
                         {active ?
-                        <Text style={{ marginTop:3 }} theme='body'>Use the search box below to find a brand that you're interested in!</Text>
+                        <Icons.CloseIcon color={Colors.text.error} size={12} />
                         :
-                        <Text style={{ marginTop:3 }} theme='body'>Below are brands that currently have availble competitions!</Text>
+                        <Icons.SearchIcon color={Colors.text.h1} size={16} />
                         }
                     </View>
-                    {active ?
-                    <Icons.CloseIcon color={Colors.utility.error} size={18} />
-                    :
-                    <Icons.SearchIcon color={Colors.brand.midnight} size={18} />
-                    }
-                </TouchableOpacity>
+                </Button>
                 {active ?
-                <View>
-                    <View style={{ marginBottom:10 }}>
+                <View transparent>
+                    <View transparent style={{ marginBottom:10 }}>
                         <SearchBox
                             placeholder='Search our brands'
                             onChange={(text) => setSearch({ ...search, value: text })}
@@ -130,7 +131,7 @@ const EngageHeader = ({ companies, width, onManage, onEvent, onSelectCompany }:E
                         />
                     </View>
                     {loading ?
-                    <ActivityIndicator size='large' color={Colors.brand.midnight} />
+                    <ActivityIndicator size='large' color={Colors.text.h1} />
                     :<></>}
                     <FlatList
                         data={filtered_companies}