be-components 3.4.2 → 3.4.4

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}

package/src/Engage/components/PrivateCodePrompt.tsx

@@ -1,13 +1,11 @@
 import React, { useState } from 'react';
-import { View } from "react-native"
 import type { BracketCompetitionProps, CompetitionProps, CompetitionSeasonProps, SquaresCompetitionProps } from '../../types';
-import { view_styles } from '../../constants/styles';
-import { Button, Icons, Text, TextInput } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
 import { EngageApi } from '../api';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
 
 type PrivateCodePromptProps = {
-    width:number,
     onFoundCompetition:(c:CompetitionProps) => void,
     onFoundSquaresCompetition:(sc:SquaresCompetitionProps) => void,
     onFoundSeason:(cs:CompetitionSeasonProps) => void,
@@ -15,7 +13,7 @@ type PrivateCodePromptProps = {
     onClose:() => void
 }
 
-const PrivateCodePrompt = ({ width, onFoundCompetition, onFoundSquaresCompetition, onFoundSeason, onFoundBracket, onClose }:PrivateCodePromptProps) => {
+const PrivateCodePrompt = ({ onFoundCompetition, onFoundSquaresCompetition, onFoundSeason, onFoundBracket, onClose }:PrivateCodePromptProps) => {
     const [ search, setSearch ] = useState<{
         loading:boolean,
         value: string,
@@ -26,6 +24,8 @@ const PrivateCodePrompt = ({ width, onFoundCompetition, onFoundSquaresCompetitio
     const [ error, setError ] = useState<string|undefined>();
     const { loading, value } = search;
 
+    const Colors = useColors();
+
     const handleSearch = async() => {
         setSearch({ ...search, loading:true });
         const result = await EngageApi.getPrivateEngage(value);
@@ -39,50 +39,46 @@ const PrivateCodePrompt = ({ width, onFoundCompetition, onFoundSquaresCompetitio
 
     const search_valid = value ? true : false
     return (
-        <View style={{ ...view_styles.section, width }}>
-            <View style={{ ...view_styles.section_header, padding:15 }}>
-                <Icons.SearchIcon color={Colors.brand.midnight} size={20}/>
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='header'>Find Private Competition!</Text>
+        <View float style={{ margin:10 }}>
+            <View type='header' style={{ padding:15, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8}}>
+                <Icons.SearchIcon color={Colors.text.h1} size={20}/>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>Find Private Competition!</Text>
                 </View>
             </View>
-            <View style={{ ...view_styles.section_body }}>
-                <View style={{ borderRadius:8, backgroundColor:Colors.shades.shade100, padding:10 }}>
-                    <Text size={18} color={Colors.brand.midnight} textAlign='center' weight='bold'>Did you receive a private code?</Text>
-                    <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} textAlign='center' weight='regular'>Enter the code in the input section below and press FIND.  If we find the competition / squares / bracket, we will send you to it!</Text>
-
-                    <TextInput
-                        style={{ ...view_styles.input, marginTop:20, textAlign:'center', borderRadius:22, padding:15 }}
-                        placeholder='Enter Private Code'
-                        placeholderTextColor={Colors.brand.slate}
-                        onChangeText={(text) => {
-                            if(error){ setError(undefined) }
-                            setSearch({ ...search, value:text })
-                        }}
-                    />
+            <View style={{ padding:10 }}>
+                <View style={{ borderRadius:8, padding:10 }}>
+                    <Text size={18} color={Colors.text.h1} textAlign='center' theme='h1'>Did you receive a private code?</Text>
+                    <Text style={{ marginTop:10 }} size={14} color={Colors.text.h1} textAlign='center' weight='regular'>Enter the code in the input section below and press FIND.  If we find the competition / squares / bracket, we will send you to it!</Text>
+                    <View type='input' style={{ marginTop:10 }}>
+                        <TextInput
+                            placeholder='Enter Private Code'
+                            style={{ textAlign:'center' }}
+                            onChangeText={(text) => {
+                                if(error){ setError(undefined) }
+                                setSearch({ ...search, value:text })
+                            }}
+                        />
+                    </View>
                     {error?
                     <View style={{ marginTop:10, padding:10 }}>
-                        <Text size={14} color={Colors.utility.error} weight='bold' textAlign='center'>{error}</Text>
+                        <Text size={14} color={Colors.text.error} weight='bold' textAlign='center'>{error}</Text>
                     </View>
                     :<></>}
                 </View>
             </View>
-            <View style={{ ...view_styles.section_footer }}>
+            <View type='footer' style={{ flexDirection:'row', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 <Button
                     title='CANCEL'
-                    backgroundColor={Colors.utility.error}
-                    title_color={Colors.shades.white}
+                    type='close'
                     style={{ marginRight:5 }}
-                    padding={15}
                     onPress={() => onClose()}
                 />
                 <Button
                     style={{ flex:1, opacity:search_valid&&!loading?1:0.5 }}
-                    padding={15}
                     disabled={loading || !search_valid}
                     loading={loading}
-                    backgroundColor={Colors.utility.success}
-                    title_color={Colors.shades.white}
+                    type='success'
                     title='FIND'
                     onPress={async() => handleSearch()}
                 />

package/src/Engage/components/SquaresCompetitionCard.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Image, View, TouchableOpacity } from 'react-native';
-import { view_styles } from '../../constants/styles';
-import { Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Image } from 'react-native';
+import { Icons } from '../../Components';
 import type { CompanyProps, EventProps, PublicPlayerProps, SquaresCompetitionProps } from '../../types';
 import moment from 'moment-mini';
+import { useColors } from '../../constants/useColors';
+import { Button, View, Text } from '../../Components/Themed';
 
 type SquaresCompetitionCardProps = {
     squares_competition:SquaresCompetitionProps,
@@ -13,55 +13,57 @@ type SquaresCompetitionCardProps = {
     company?:CompanyProps,
     onSelectCompetition:(sq:SquaresCompetitionProps) => void
 }
-
+ 
 const SquaresCompetitionCard = ({ squares_competition, admin, event, company, onSelectCompetition }:SquaresCompetitionCardProps) => {
+    const Colors = useColors()
     let current_payout = squares_competition.potential_winnings
     if(squares_competition.guaranteed_payout && squares_competition.guaranteed_payout > current_payout){ current_payout = squares_competition.guaranteed_payout }
     const is_live = moment().isAfter(moment(squares_competition.begin_datetime)) ? true : false
+    const is_closed = squares_competition.complete_ind ? true : false
     return (
-        <TouchableOpacity style={{ ...view_styles.section, padding:0, borderWidth:1, borderColor:Colors.shades.shade600  }} onPress={() => onSelectCompetition(squares_competition)}>
-            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+        <Button float style={{ padding:0 }} onPress={() => onSelectCompetition(squares_competition)}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                 <Image
                     source={{ uri: squares_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'>{squares_competition.sq_comp_name}</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>{squares_competition.sq_comp_description}</Text>
+                <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                    <Text theme='h2'>{squares_competition.sq_comp_name}</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>{squares_competition.sq_comp_description}</Text>
                 </View>
-                <Text size={20} color={Colors.brand.electric} weight='bold'>${squares_competition.minimum_square_price}</Text>
+                <Text size={20} color={Colors.text.action} weight='bold'>${squares_competition.minimum_square_price}</Text>
             </View>
-            <View style={{ ...view_styles.section_body, padding:10, paddingTop:20, paddingBottom:20 }}>
-                <View style={{ ...view_styles.body_row, padding:0 }}>
+            <View type='body' style={{ padding:10 }}>
+                <View type='row'>
                     {event ?
-                    <View style={{ flex:1, flexDirection:'row', marginRight:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View transparent style={{ flex:1, flexDirection:'row', marginRight:10, borderRightWidth:1, borderColor:Colors.borders.light }}>
                         <View style={{ flexDirection:'row', alignItems:'center' }}>
                             <Image
                                 source={{ uri: event.away?.image?.url }}
                                 style={{ height:30, width:30 }}
                                 resizeMode='cover'
                             />
-                            <Text style={{ padding:5 }} theme='header_2'>VS</Text>
+                            <Text style={{ padding:5 }} theme='h2'>VS</Text>
                             <Image
                                 source={{ uri: event.home?.image?.url }}
                                 style={{ height:30, width:30 }}
                                 resizeMode='cover'
                             />
                         </View>
-                        <View style={{ flex:1, marginLeft:10 }}>
-                            <Text theme='header_2'>{event.event_title}</Text>
-                            <Text style={{ marginTop:3 }} theme='body'>{event.time_detail == 'scheduled' ? moment(event.scheduled_datetime).format('MMM DD hh:mm a') : event.time_detail}</Text>
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='h2'>{event.event_title}</Text>
+                            <Text style={{ marginTop:3 }} theme='description'>{event.time_detail == 'scheduled' ? moment(event.scheduled_datetime).format('MMM DD hh:mm a') : event.time_detail}</Text>
                         </View>
                     </View>
                     :<></>}
-                    <View style={{ justifyContent:'center', alignItems:'center' }}>
-                        <Icons.SquaresIcon size={24} color={Colors.brand.midnight} />
-                        <Text style={{ marginTop:3 }} theme='header_2'>AUCTION</Text>
+                    <View transparent style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Icons.SquaresIcon size={24} color={Colors.text.h1} />
+                        <Text style={{ marginTop:3 }} theme='h2'>AUCTION</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' }}
@@ -75,17 +77,19 @@ const SquaresCompetitionCard = ({ squares_competition, admin, event, company, on
                     resizeMode='cover'
                 />
                 :<></>}
-                <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}>AUCTION COMPLETE</Text>
+                <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>
+                    :is_live ? 
+                    <Text style={{ marginTop:3 }} color={Colors.text.error} weight='bold' size={12}>AUCTION COMPLETE</Text>
                     :
-                    <Text style={{ marginTop:3 }} theme='body_2'>Auction Ends {moment(squares_competition.begin_datetime).fromNow()}</Text>
+                    <Text style={{ marginTop:3 }} theme='light'>Auction Ends {moment(squares_competition.begin_datetime).fromNow()}</Text>
                     }
                 </View>
-                <Text color={Colors.utility.success} size={20} weight='bold'>${current_payout.toFixed(2)}</Text>
+                <Text color={Colors.text.success} size={20} weight='bold'>${current_payout.toFixed(2)}</Text>
             </View>
-        </TouchableOpacity>
+        </Button>
     )
 }