be-components 3.5.1 → 3.5.3

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,gBAAgB,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,QAAQ,MAAM,UAAU,CAAC;AAChC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,YAAY,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,iBAAiB,MAAM,eAAe,CAAC;AAC9C,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,WAAW,MAAM,WAAW,CAAC;AACpC,OAAO,aAAa,MAAM,UAAU,CAAC;AACrC,OAAO,aAAa,MAAM,WAAW,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,qBAAqB,MAAM,uDAAuD,CAAC;AAC1F,OAAO,oBAAoB,MAAM,sDAAsD,CAAC;AACxF,OAAO,YAAY,MAAM,UAAU,CAAC;AACpC,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,gBAAgB,MAAM,wDAAwD,CAAC;AACtF,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,sBAAsB,MAAM,4CAA4C,CAAC;AAChF,OAAO,sBAAsB,MAAM,4CAA4C,CAAC;AAChF,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EACL,aAAa,EACb,QAAQ,EACR,UAAU,EACV,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,eAAe,EACf,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,WAAW,EACX,aAAa,EACb,aAAa,EACb,aAAa,EACb,YAAY,EACZ,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,UAAU,EACX,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,gBAAgB,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,QAAQ,MAAM,UAAU,CAAC;AAChC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,YAAY,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,iBAAiB,MAAM,eAAe,CAAC;AAC9C,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,WAAW,MAAM,WAAW,CAAC;AACpC,OAAO,aAAa,MAAM,UAAU,CAAC;AACrC,OAAO,aAAa,MAAM,WAAW,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,qBAAqB,MAAM,uDAAuD,CAAC;AAC1F,OAAO,oBAAoB,MAAM,sDAAsD,CAAC;AACxF,OAAO,YAAY,MAAM,UAAU,CAAC;AACpC,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,gBAAgB,MAAM,wDAAwD,CAAC;AACtF,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,sBAAsB,MAAM,4CAA4C,CAAC;AAChF,OAAO,sBAAsB,MAAM,4CAA4C,CAAC;AAChF,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EACL,aAAa,EACb,QAAQ,EACR,UAAU,EACV,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,eAAe,EACf,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,WAAW,EACX,aAAa,EACb,aAAa,EACb,aAAa,EACb,YAAY,EACZ,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,UAAU,EACX,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "3.5.1",
+  "version": "3.5.3",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Competition/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { CompetitionApi, CompetitionHelpers, CompetitionMatchApi, CompetitionPlayerApi, PlayerPicksApi } from './api';
-import { Image, ActivityIndicator, Modal, FlatList } from 'react-native';
+import { Image, ActivityIndicator, Modal, FlatList, KeyboardAvoidingView, Platform } from 'react-native';
 import { view_styles } from '../constants/styles';
 import { ConfirmationModal, Icons } from '../Components';
 import Colors from '../constants/colors';
@@ -518,18 +518,24 @@ const CompetitionModule = ({ competition_id, player_id, confirm_padding, onManag
                 onRequestClose={() => setShowEnterPrompt(false)}
                 animationType='slide'
             >
-            <View type='blur' style={{ flex:1, justifyContent:'flex-end' }}>
-                <WagerPickForm
-                    event_start={draft_player_pick.event_start ?? ''}
-                    event_title={draft_player_pick.event_title ?? ''}
-                    width={module_size.width}
-                    balance={authenticated_competition_player?.wager_based_balance ?? 0}
-                    loading={pick_loading}
-                    player_pick={draft_player_pick.draft_pick}
-                    onCancel={() => setDraftPlayerPick({})}
-                    onSubmit={(pp) => handleWagerSubmit(pp)}
-                />
-                </View>
+                <KeyboardAvoidingView
+                    style={{ flex:1 }}
+                    keyboardVerticalOffset={-150}
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                >
+                    <View type='blur' style={{ flex:1, justifyContent:'flex-end' }}>
+                        <WagerPickForm
+                            event_start={draft_player_pick.event_start ?? ''}
+                            event_title={draft_player_pick.event_title ?? ''}
+                            width={module_size.width}
+                            balance={authenticated_competition_player?.wager_based_balance ?? 0}
+                            loading={pick_loading}
+                            player_pick={draft_player_pick.draft_pick}
+                            onCancel={() => setDraftPlayerPick({})}
+                            onSubmit={(pp) => handleWagerSubmit(pp)}
+                        />
+                    </View>
+                </KeyboardAvoidingView>
             </Modal>
             :<></>}
             <Modal

package/src/SocialComponents/PostCard/components/DraftTextViewer.tsx

@@ -14,6 +14,7 @@ type DraftTextViewerProps = {
 }
 
 function DraftTextViewer({ post_id, formatted_body, text_fallback }:DraftTextViewerProps) {
+    
     const [ failed, setFailed ] = useState(false)
     const [editorState, setEditorState] = useState(
     () => EditorState.createEmpty(),
@@ -48,10 +49,10 @@ function DraftTextViewer({ post_id, formatted_body, text_fallback }:DraftTextVie
   if(failed){ return (<></>) }
   return (
       <View>
-            <Editor
-                readOnly 
-                editorState={editorState} 
-                onChange={setEditorState} /> 
+        <Editor
+            readOnly 
+            editorState={editorState} 
+            onChange={setEditorState} /> 
       </View>
     
   )

package/src/SocialComponents/PostCard/components/PostHeader.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Image, View } from 'react-native';
-import { view_styles } from '../../../constants/styles';
+import { Image } from 'react-native';
 import type { PostProps, PublicPlayerProps } from '../../../types';
-import { Text } from '../../../Components';
 import moment from 'moment-mini';
+import { Text, View } from '../../../Components/Themed';
 
 type PostHeaderProps = {
     player: PublicPlayerProps,
@@ -12,15 +11,15 @@ type PostHeaderProps = {
 
 const PostHeader = ({ player, post }:PostHeaderProps) => {
     return (
-        <View style={{ ...view_styles.section_header, paddingLeft:10, padding:10 }}>
+        <View type='header' style={{ flexDirection:'row', alignItems:'center', paddingLeft:10, padding:10 }}>
             <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:32, width:32, borderRadius:100 }}
                 resizeMode='cover'
             />
-            <View style={{ flex:1, marginLeft:10 }}>
-                <Text theme='header_2'>{player.first_name} {player.last_name}</Text>
-                <Text style={{ marginTop:3 }} theme='body_2'>@{player.username} • {moment(post.create_datetime).fromNow()}</Text>
+            <View transparent style={{ flex:1, marginLeft:10 }}>
+                <Text theme='h2'>{player.first_name} {player.last_name}</Text>
+                <Text style={{ marginTop:3 }} theme='description'>@{player.username} • {moment(post.create_datetime).fromNow()}</Text>
             </View>
         </View>
     )

package/src/SocialComponents/PostCard/components/PostReactionBar.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { FlatList, View, TouchableOpacity, ActivityIndicator } from "react-native"
+import { FlatList, ActivityIndicator } from "react-native"
 import type { PostReactionProps, PostReactionStatsProps } from '../../../types';
-import { Button, Text } from '../../../Components';
-import Colors from '../../../constants/colors';
 import { view_styles } from '../../../constants/styles';
+import { Button, Text, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 
 type PostReactionBarProps = {
     post_id:string,
@@ -26,6 +26,7 @@ const available_reactions = [
 ]
 
 const PostReactionBar = ({ post_id, loading, post_reaction_stats, my_post_reactions, onReactionSelect }:PostReactionBarProps) => {
+    const Colors = useColors();
     const [ more_selected, setMoreSelected ] = useState(false);
 
     const handleReaction = async(reaction:string) => {
@@ -50,17 +51,17 @@ const PostReactionBar = ({ post_id, loading, post_reaction_stats, my_post_reacti
         const my_reaction = my_post_reactions.find(pr => pr.reaction === data.item.reaction)
         const selected = my_reaction?.status === 'visible' ? true : false
         return (
-            <TouchableOpacity style={ 
+            <Button style={ 
                 reacted ? 
-                {  ...view_styles.float, marginBottom:5, marginLeft:data.index===0?0:-5, paddingRight:10, paddingLeft:5, flexDirection:'row', alignItems:'center', padding:2, borderRadius:100, backgroundColor:selected?Colors.highlights.highlight200:Colors.shades.white }
+                {  ...view_styles.float, marginBottom:5, marginLeft:data.index===0?0:-5, paddingRight:10, paddingLeft:5, flexDirection:'row', alignItems:'center', padding:2, borderRadius:100, backgroundColor:selected?Colors.text.success:Colors.text.white }
                 :
-                {}} onPress={() => handleReaction(data.item.reaction)}>
+                { padding:3 }} onPress={() => handleReaction(data.item.reaction)}>
                 
                 <Text style={{fontSize:12, padding:6}}>{data.item.label}</Text>
                 {reaction_stat && !more_selected && post_reaction_stats.length < 5 ?
-                <Text size={12} color={selected ? Colors.shades.white : Colors.brand.midnight} weight='regular' style={{ padding:3 }}>{reaction_stat.reaction_count}</Text>
+                <Text size={12} color={selected ? Colors.text.h1 : Colors.text.h1} weight='regular' style={{ padding:3 }}>{reaction_stat.reaction_count}</Text>
                 :<></>}
-            </TouchableOpacity>
+            </Button>
         )
     }
 
@@ -74,16 +75,14 @@ const PostReactionBar = ({ post_id, loading, post_reaction_stats, my_post_reacti
             {post_reaction_stats.length > 0 && !more_selected ?
             <Button
                 title='MORE'
-                title_color={Colors.brand.electric}
-                title_size={10}
-                style={{ marginLeft:4 }}
-                padding={0}
+                type='text'
+                style={{ padding:5 }}
                 onPress={() => setMoreSelected(true)}
             />
             :<></>}
             {loading ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', backgroundColor:Colors.shades.black_faded, borderRadius:22 }}>
-                <ActivityIndicator size='small' color={Colors.brand.midnight} />
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', borderRadius:22 }}>
+                <ActivityIndicator size='small' color={Colors.text.h1} />
             </View>
             :<></>}
         </View>

package/src/SocialComponents/PostCard/index.tsx

@@ -1,30 +1,31 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import DraftTextViewer from './components/DraftTextViewer';
-import type { OrderProps, PostCommentStatProps, PostProps, PostReactionProps, PostReactionStatsProps, PublicPlayerProps } from '../../types';
+import type { ArticleProps, OrderProps, PostCommentStatProps, PostProps, PostReactionProps, PostReactionStatsProps, PublicPlayerProps } from '../../types';
 import PostHeader from './components/PostHeader';
-import { view_styles } from '../../constants/styles';
 import { useIsInViewport } from '../../Components/ViewportObserver';
 import { SocialProfileApi } from '../PlayerProfile/api';
 
 import PostReactionBar from './components/PostReactionBar';
-import Colors from '../../constants/colors';
-import { Icons, Text } from '../../Components';
+import { Icons } from '../../Components';
 import SocialOrdersList from '../SocialOrdersList';
 import ImageList from './components/ImageList';
 import { SocialComponentApi } from '../api';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+
 
 type PostCardProps = {
     post: PostProps,
-    player:PublicPlayerProps,
+    player?:PublicPlayerProps,
+    articles:ArticleProps[],
     orders:OrderProps[],
     player_id?:string,
     onRequestAuthenticate:() => void,
     onCopyOrder?:(order:OrderProps) => void,
     onFadeOrder?:(order:OrderProps) => void,
-    onViewComments:(post_id:string) => void
+    onViewComments?:(post_id:string) => void
 }
 const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCopyOrder, onFadeOrder, onViewComments }:PostCardProps) => {
+    const Colors = useColors();
     const [ post_data, setPostData ] = useState<{
         loading:boolean,
         reactions_loaded:boolean,
@@ -36,6 +37,7 @@ const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCo
         post_comment_stat: { activity_post_id:post.memo_post_id, comment_count: 0 },
         post_reaction_stats: []
     })
+
     const { reactions_loaded, post_reaction_stats, post_comment_stat } = post_data;
     
     const [ my_data, setMyData ] = useState<{
@@ -117,28 +119,31 @@ const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCo
         }
     }
 
+
     return (
-        <View ref={post_ref as any} style={{ ...view_styles.section, padding:0, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+        <View float ref={post_ref as any}>
+            {player ?
             <PostHeader 
                 player={player}
                 post={post}
             />
-            <View style={{  padding:10 }}>
-                <Text theme='header_2'>{post.title}</Text>
+            :<></>}
+            <View transparent style={{  padding:10 }}>
+                <Text theme='h2'>{post.title}</Text>
+            </View>
+            <View transparent style={{ padding:10, paddingTop:0, paddingBottom:0 }}>
+                <Text theme='description'>{post.body}</Text>
             </View>
-            <View style={{ padding:10, paddingTop:0, paddingBottom:0 }}>
-                <DraftTextViewer 
-                    post_id={post.memo_post_id}
-                    formatted_body={post.formatted_body}
-                    view_type='memo'
-                    text_fallback={post.body}
-                />
+            {post.memo_articles && post.memo_articles.length > 0 ?
+            <View transparent>
+                
             </View>
-            {post.memo_orders && post.memo_orders.length > 0 ?
+            :<></>}
+            {player && post.memo_orders && post.memo_orders.length > 0 ?
             <SocialOrdersList
                 players={[player]}
                 orders={orders}
-                maxWidth={275}
+                maxWidth={300}
                 direction='horizontal'
                 onCopyOrder={onCopyOrder}
                 onFadeOrder={onFadeOrder}
@@ -151,8 +156,8 @@ const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCo
                 width={300}
             />
             :<></>}
-            <View style={{ ...view_styles.section_footer, padding:5, backgroundColor:Colors.shades.white }}>
-                <View style={{}}>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                <View float transparent style={{ padding:5 }}>
                     <PostReactionBar
                         loading={my_data_loading}
                         post_id={post.memo_post_id}
@@ -161,13 +166,15 @@ const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCo
                         onReactionSelect={(r) => handleReaction(r)}
                     />
                 </View>
-                <TouchableOpacity
+                {onViewComments ?
+                <Button
                     style={{ flex:1, flexDirection:'row', alignItems:'center', justifyContent:'flex-end' }}
                     onPress={() => onViewComments(post.memo_post_id)}
                 >
-                    <Text style={{ marginRight:4 }} theme='header_2'>{post_comment_stat.comment_count}</Text>
-                    <Icons.ChatIcon size={18} color={Colors.brand.midnight}/>
-                </TouchableOpacity>
+                    <Text style={{ marginRight:4 }} theme='h2'>{post_comment_stat.comment_count}</Text>
+                    <Icons.ChatIcon size={18} color={Colors.text.h1}/>
+                </Button>
+                :<></>}
             </View>
         </View>
     )

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
 }

package/src/index.tsx

@@ -37,6 +37,7 @@ import SquaresCompetitionCard from './Engage/components/SquaresCompetitionCard';
 import BracketCompetitionCard from './Engage/components/BracketCompetitionCard';
 import SeasonCard from './Engage/components/SeasonCard';
 import NotificationModule from './Notifications';
+import { useNotifications } from './Notifications/useNotifications';
 
 export {
   Authenticator,
@@ -45,6 +46,7 @@ export {
   BELinkApi,
   LocationTracker,
   NotificationModule,
+  useNotifications,
   ProfileManager,
   CompetitionManager,
   Components,