be-components 3.5.2 → 3.5.3

package/src/SocialComponents/SocialOrderCard.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { View, Image } from 'react-native';
+import { Image } from 'react-native';
 import type { AthleteProps, LeagueProps, OrderProps, PublicPlayerProps, TeamProps } from '../types';
-import { view_styles } from '../constants/styles';
-import { Button, Icons, Text } from '../Components';
+import { Icons } from '../Components';
 import { SocialComponentApi, SocialOrderHelpers } from './api';
-import Colors from '../constants/colors';
 import moment from 'moment-mini';
 import { AthleteImage } from '../Components/Jerseys';
+import { View, Button, Text } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
 
 type SocialOrderCardProps = {
     player?:PublicPlayerProps,
@@ -22,6 +22,7 @@ type SocialOrderCardProps = {
     onFadeOrder?:(order:OrderProps) => void
 }
 const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete, order, contest_title, contest_time, onCopyOrder, onFadeOrder }:SocialOrderCardProps) => {
+    const Colors = useColors();
     const [ fade_loading, setFadeLoading ] = useState(false);
     const { result_label, color } = SocialOrderHelpers.getResultDetails(order)
     
@@ -50,26 +51,26 @@ const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete,
     }
     
     return (
-        <View style={{ ...view_styles.section, minWidth:175, maxWidth, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+        <View float style={{ minWidth:275, maxWidth }}>
             {show_player && player ?
-            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                 <Image
                     source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
                     style={{ height:35, width:35, borderRadius:100 }}
                     resizeMode='cover'
                 />
-                <View style={{ flex:1, marginLeft:10, marginRight:10 }}>
-                    <Text theme='header'>{player.first_name} {player.last_name}</Text>
-                    <Text theme='body_2' style={{ marginTop:3 }}>@{player.username}</Text>
+                <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                    <Text theme='h1'>{player.first_name} {player.last_name}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>@{player.username}</Text>
                 </View>
                 <Text size={14} color={color} weight='bold'>{result_label}</Text>
             </View>
             :<></>}
-            <View style={{ ...view_styles.section_header }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                 
-                <View style={{ flex:1, marginRight:10 }}>
-                    <Text theme='body_2'>{contest_title}</Text>
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{contest_time}</Text>
+                <View transparent style={{ flex:1, marginRight:10 }}>
+                    <Text theme='description'>{contest_title}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='light' weight='regular'>{contest_time}</Text>
                 </View>
                 {league ?
                 <Image
@@ -78,13 +79,13 @@ const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete,
                     resizeMode='cover'
                 />
                 :
-                <View style={{ height:30, width:30, borderRadius:4, justifyContent:'center', alignItems:'center', backgroundColor:SocialOrderHelpers.getIconColor(order) }}>
-                    <Icons.ActivityIcon size={14} color={Colors.shades.white}/>
+                <View transparent style={{ height:30, width:30, borderRadius:4, justifyContent:'center', alignItems:'center', backgroundColor:SocialOrderHelpers.getIconColor(order) }}>
+                    <Icons.ActivityIcon size={14} color={Colors.text.white}/>
                 </View>
                 }
             </View>
-            <View style={{ ...view_styles.section_body, padding:10 }}>
-                <View style={{ ...view_styles.body_row }}>
+            <View type='body' style={{ padding:10 }}>
+                <View transparent type='row' style={{ padding:5 }}>
                     {team ?
                     <Image
                         source={{ uri: team.image?.url }}
@@ -97,26 +98,26 @@ const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete,
                         size={16}
                     />
                     :<></>}
-                    <View style={{ flex:1, marginLeft:10, marginRight:10 }}>
-                        <Text theme='header_2'>{order.title}</Text>
-                        <Text style={{ marginTop:3 }} theme='body_2'>Created on {moment(order.create_datetime).format('MM/DD hh:mm a')}</Text>
+                    <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                        <Text theme='h2'>{order.title}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Created on {moment(order.create_datetime).format('MM/DD hh:mm a')}</Text>
                     </View>
-                    <View>
-                        <Text theme='header'>{SocialOrderHelpers.getOddsLabel(order.odds)}</Text>
+                    <View transparent>
+                        <Text theme='h1'>{SocialOrderHelpers.getOddsLabel(order.odds)}</Text>
                         {!show_player ?
-                        <Text style={{ marginTop:3 }} size={14} color={color} weight='bold'>{result_label}</Text>
+                        <Text style={{ marginTop:3 }} size={14} color={color} theme='h1'>{result_label}</Text>
                         :<></>}
                     </View>
                 </View>
             </View>
             {order.resolution_status == 'inprogress' ?
-            <View style={{ ...view_styles.body_row, padding:0 }}>
+            <View type='row' style={{ padding:0, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
                 {onCopyOrder ? 
                 <Button
                     style={{ flex:1, borderRadius:0, borderBottomLeftRadius:8 }}
                     title='Copy'
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.midnight}
+                    title_color={Colors.text.white}
+                    backgroundColor={Colors.absolutes.brand.midnight}
                     onPress={() => onCopyOrder({ 
                         ...order, 
                         buy_sell_ind:'buy',
@@ -139,8 +140,8 @@ const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete,
                     style={{ flex:1, borderRadius:0, borderBottomRightRadius:8, opacity:fade_loading?0.5:1 }}
                     title='Fade'
                     loading={fade_loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.cyan}
+                    title_color={Colors.text.white}
+                    backgroundColor={Colors.absolutes.brand.cyan}
                     onPress={() => handleFadeOrder()}
                 />
                 :<></>}

package/src/SocialComponents/SocialOrdersList.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { View, FlatList } from 'react-native';
+import { FlatList } from 'react-native';
 import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
 import SocialOrderCard from './SocialOrderCard';
 import { SocialComponentApi, SocialOrderHelpers } from './api';
+import { View } from '../Components/Themed';
 
 type SocialOrdersListProps = {
     players:PublicPlayerProps[],

package/src/SocialComponents/index.tsx

@@ -5,6 +5,7 @@ import CompanyProfile from './CompanyProfile';
 import PodcastModule from './PodcastModule';
 import AudioPlayer from "./AudioPlayer";
 import { useContacts } from "./Contacts/useContacts";
+import PostCard from './PostCard';
 export {
     PlayerCard,
     PlayerList,
@@ -12,5 +13,6 @@ export {
     CompanyProfile,
     PodcastModule,
     AudioPlayer,
-    useContacts
+    useContacts,
+    PostCard
 }