be-components 3.4.2 → 3.4.3

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>
     )
 }