be-components 4.2.0 → 4.2.2

package/src/MarketMaker/index.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View } from 'react-native';
 import { MarketMakerApi, MarketMaketHelpers } from './api';
 import type { AthleteProps, BestAvailableResponseProps, EventProps, ExternalPriceProps, FundingRequestProps, FundOrderProps, FundOwnershipProps, FundProps, LeagueProps, MarketProps, MatchProps, OrderProps, PublicPlayerProps, TournamentProps, TradeProps } from '../types';
-//import { view_styles } from '../constants/styles';
-import Colors from '../constants/colors';
 import ContestSelector from './components/ContestSelector';
 import Dashboard from './components/Dashboard';
 import MarketSelector from './components/MarketSelector';
@@ -15,6 +12,8 @@ import FundingRequestList from './components/FundingRequestList';
 import FundOwnershipList from './components/FundOwnershipList';
 import SocketManager from '../Socket';
 import OrderForm from './components/OrderForm';
+import { Text, View } from '../Components/Themed';
+import { FlatList, Modal } from 'react-native';
 
 type MarketMakerProps = {
     player_id:string,
@@ -22,6 +21,9 @@ type MarketMakerProps = {
     distinct_id:string
 }
 
+const contest_sections = ['header', 'toggle', 'funds', 'fund_owners', 'fund_requests', 'contests', 'markets']
+const dashboard_sections = ['dashboard']
+
 const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps) => {
     const [ ba_socket_data, setBASocketData ] = useState<BestAvailableResponseProps | undefined>(undefined);
     const [ socket_fund, setSocketFund ] = useState<{ fund:FundProps, orders:OrderProps[] } | undefined>(undefined);
@@ -44,7 +46,7 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
         tournaments:[],
         matches:[]
     });
-    const { loaded, leagues, events, markets, funds } = module_data;
+    const { leagues, events, markets, funds } = module_data;
 
     const [ editing_fund, setEditingFund ] = useState<FundProps | undefined>(undefined);
     const [ draft_order, setDraftOrder ] = useState<{
@@ -119,11 +121,6 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
         getLocation()
     },[player_id]);
 
-    useEffect(() => {
-        if(!fund?.fund_id || !loaded){ return }
-        getDashData(fund.fund_id);
-    },[fund]);
-
     useEffect(() => {
         if(!ba_socket_data){ return }
         //Reconcile and update ba_socket data!
@@ -163,6 +160,7 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
     }
 
     const getDashData = async(fund_id:string) => {
+        setDashData({ ...dash_data, loading:true })
         //Now load Dash data
         console.log('1')
         const ba = await MarketMakerApi.getBestAvailableOrders();
@@ -194,6 +192,7 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
             ...dash_data,
             loaded:true,
             loading:false,
+            fund: fund_response.fund,
             funding_requests:fr_requests,
             players:plays,
             fund_ownerships: fund_response.fund_ownerships,
@@ -207,6 +206,10 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
     }
 
 
+    const handleSelectFund = async(fund:FundProps) => {
+        await getDashData(fund.fund_id);
+    }
+
     const getDataForMyAction = async(orders:OrderProps[], markets:MarketProps[]) => {
         const ev_ids = orders.filter(o => o.event_type == 'team').map(o => o.event_id);
         const mks = markets.filter(m => orders.map(o => o.market_id.toString()).includes(m.market_id.toString()))
@@ -243,39 +246,81 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
         })
     }
 
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View>
+                        <Text>Fund Manager!</Text>
+                    </View>
+                )
+            case 'funds':
+                return (
+                    <View style={{ margin:5 }}>
+                        <FundSelector
+                            funds={funds}
+                            selected_fund_id={dash_data.fund?.fund_id}
+                            onEditFund={(f) => {
+                                setEditingFund(f)
+                            }}
+                            onCreateFund={(f) => {
+                                setDashData({
+                                    ...dash_data,
+                                    fund:f
+                                })
+                                setEditingFund(f);
+                            }}
+                            onSelectFund={(f) => handleSelectFund(f)}
+                        />
+                    </View>
+                   
+                )
+            case 'contests':
+                return (
+                    <View style={{ margin:5 }}>
+                        <ContestSelector 
+                            maxHeight={300}
+                            leagues={leagues.filter(l => l.status == 'active')}
+                            events={events}
+                            onSelectEvent={(e) => handleSelectEvent(e)}
+                            onDeselectEvent={(e) => handleDeselectEvent(e)}
+                            onSelectMatch={(m) => console.log(m)}
+                            onSelectTournament={(t) => console.log(t)}
+                            tournaments={[]}
+                            matches={[]}
+                            selected_events={selected_events.map(e => e.event_id)}
+                            selected_matches={[]}
+                            selected_tournaments={[]}
+                        />
+                    </View>
+                )
+            case 'markets':
+                return (
+                    <View style={{ margin:5 }}>
+                        <MarketSelector
+                            markets={selectable_markets.sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id))}
+                            onSelectMarket={(m) => setDashData({ ...dash_data, selected_markets: dash_data.selected_markets.concat(m) })}
+                            onDeselectMarket={(m) => setDashData({ ...dash_data, selected_markets: dash_data.selected_markets.filter(se => se.market_id != m.market_id) })}
+                            selected_markets={selected_markets.map(m => m.market_id)}
+                        />
+                    </View>
+                    
+                )
+            case 'fund_owners':
+                if(!fund){ return <></> }
+                return (
+                    <View style={{ margin:5 }}>
+                        <FundOwnershipList
+                            fund_ownerships={fund_ownerships}
+                            players={players}
+                        />
+                    </View>
 
-    return (
-        <View style={{ flex:1, backgroundColor:Colors.shades.white }}>
-            <View style={{ flexDirection:'row' }}>
-                <View>
-                    <FundSelector
-                        funds={funds}
-                        maxHeight={300}
-                        selected_fund_id={dash_data.fund?.fund_id}
-                        onEditFund={(f) => {
-                            setEditingFund(f)
-                        }}
-                        onCreateFund={(f) => {
-                            setDashData({
-                                ...dash_data,
-                                fund:f
-                            })
-                            setEditingFund(f);
-                        }}
-                        onSelectFund={(f) => {
-                            setDashData({
-                                ...dash_data,
-                                fund:f
-                            })
-                        }}
-                    />
-                    {fund ?
-                    <FundOwnershipList
-                        fund_ownerships={fund_ownerships}
-                        players={players}
-                    />
-                    :<></>}
-                    {fund?
+                )
+            case 'fund_requests':
+                if(!fund){ return <></> }
+                return (
+                    <View style={{ margin:5 }}>
                     <FundingRequestList
                         funding_requests={funding_requests}
                         players={players}
@@ -298,30 +343,11 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
                             })
                         }} 
                     />
-                    :<></>}
-                    <ContestSelector 
-                        maxHeight={300}
-                        leagues={leagues.filter(l => l.status == 'active')}
-                        events={events}
-                        onSelectEvent={(e) => handleSelectEvent(e)}
-                        onDeselectEvent={(e) => handleDeselectEvent(e)}
-                        onSelectMatch={(m) => console.log(m)}
-                        onSelectTournament={(t) => console.log(t)}
-                        tournaments={[]}
-                        matches={[]}
-                        selected_events={selected_events.map(e => e.event_id)}
-                        selected_matches={[]}
-                        selected_tournaments={[]}
-                    />
-                    <MarketSelector
-                        maxHeight={300}
-                        markets={selectable_markets.sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id))}
-                        onSelectMarket={(m) => setDashData({ ...dash_data, selected_markets: dash_data.selected_markets.concat(m) })}
-                        onDeselectMarket={(m) => setDashData({ ...dash_data, selected_markets: dash_data.selected_markets.filter(se => se.market_id != m.market_id) })}
-                        selected_markets={selected_markets.map(m => m.market_id)}
-                    />
-                </View>
-                <View style={{ flexGrow:1, flexShrink:1}}>
+                    </View>
+                )
+            case 'dashboard':
+                return (
+                    <View style={{ margin:5 }}>
                     <Dashboard
                         loaded={dash_data.loaded}
                         leagues={leagues}
@@ -392,30 +418,62 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
                             })
                         }}
                     />
-                    {fund && draft_order.order && draft_order.visible ?
-                    <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
-                        <OrderForm
-                            fund={fund}
-                            order={draft_order.order}
-                            available={draft_order.available}
-                            onClose={() => setDraftOrder({ visible:false })}
-                            onSubmit={async(order) => {
-                                if(!fund){ return alert('Unable to process') }
-                                if(!location.region || !location.coordinates){ return alert('Location could not be verified to process orders') }
-                                const new_orders = await MarketMakerApi.addOrdersToFund(fund.fund_id, [{ ...order, location: location.coordinates, region: location.region }]);
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flexDirection:'row' }}>
+                <View style={{ flex:1 }}>
+                    <FlatList
+                        data={contest_sections}
+                        key={'contest_sections'}
+                        keyExtractor={item => item}
+                        renderItem={renderSections}
+                    />
+                </View>
+                <View style={{ flex:3 }}>
+                    <FlatList
+                        data={dashboard_sections}
+                        key={'dashboard_sections'}
+                        keyExtractor={item => item}
+                        renderItem={renderSections}
+                    />
+                </View>
+            </View>
+            <Modal
+                visible={editing_fund ? true : false}
+                transparent
+                style={{ flex:1 }}
+            >
+                <View type='blur' style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ width:500 }}>
+                        <ManageFundForm
+                            fund={editing_fund}
+                            onClose={() => setEditingFund(undefined)}
+                            onFundUpdate={(f) => {
+                                setEditingFund(undefined);
                                 setDashData({
                                     ...dash_data,
-                                    fund_orders: fund_orders.concat(new_orders.fund_orders),
-                                    orders:orders.concat(new_orders.orders)
+                                    fund: f
                                 })
-                                setDraftOrder({ visible:false });
                             }}
-
                         />
                     </View>
-                    :<></>}
-                    {fund && set_market_form_visible && set_market_market ?
-                    <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+                </View>
+            </Modal>
+            
+            <Modal
+                visible={fund && set_market_form_visible && set_market_market ? true : false}
+                style={{ flex:1 }}
+                transparent
+            >
+                <View type='blur' style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ width:500 }}>
+                        {fund && set_market_market ?
                         <SetMarketForm
                             fund={fund}
                             form_key={set_market_form_key}
@@ -436,25 +494,39 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
                             }}
                             onClose={() => setMarketFormData({ set_market_form_visible: false, set_market_orders:[], set_market_form_key:'', set_market_prices:[] })}
                         />
+                        :<></>}
                     </View>
-                    :<></>}
-                    {editing_fund ?
-                    <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
-                        <ManageFundForm
-                            fund={editing_fund}
-                            onClose={() => setEditingFund(undefined)}
-                            onFundUpdate={(f) => {
-                                setEditingFund(undefined);
+                </View>
+            </Modal>
+            <Modal
+                visible={draft_order.order ? true : false}
+                style={{ flex:1 }}
+                transparent
+            >
+                <View type='blur' style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ width:500 }}>
+                        {fund ?
+                        <OrderForm
+                            fund={fund}
+                            order={draft_order.order}
+                            available={draft_order.available}
+                            onClose={() => setDraftOrder({ visible:false })}
+                            onSubmit={async(order) => {
+                                if(!fund){ return alert('Unable to process') }
+                                if(!location.region || !location.coordinates){ return alert('Location could not be verified to process orders') }
+                                const new_orders = await MarketMakerApi.addOrdersToFund(fund.fund_id, [{ ...order, location: location.coordinates, region: location.region }]);
                                 setDashData({
                                     ...dash_data,
-                                    fund: f
+                                    fund_orders: fund_orders.concat(new_orders.fund_orders),
+                                    orders:orders.concat(new_orders.orders)
                                 })
+                                setDraftOrder({ visible:false });
                             }}
                         />
+                        :<></>}
                     </View>
-                    :<></>}
                 </View>
-            </View>
+            </Modal>
             <SocketManager
                 subscribed_events={['V1_LOAD_BEST_AVAILABLE', 'V1_UPDATE_FUND']}
                 access_token={access_token}

package/src/Poll/components/CampaignHeader.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Image, TouchableOpacity, View } from 'react-native';
+import { Image} from 'react-native';
 import type { PollCampaignProps } from '../../types';
-import { Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type CampaignHeaderProps = {
     poll_campaign:PollCampaignProps,
@@ -10,23 +11,23 @@ type CampaignHeaderProps = {
 }
 
 const CampaignHeader = ({ poll_campaign, onSharePollCampaign }:CampaignHeaderProps) => {
-
+    const Colors = useColors();
     return (
         <View>
-            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
-                <View>
+            <View type='header' nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1 }}>
+                <View transparent>
                     <Image
                         source={{ uri: poll_campaign.campaign_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
-                        style={{ height:50, width:50, borderRadius:4 }}
+                        style={{ height:50, width:50, borderRadius:4, backgroundColor:Colors.text.white, padding:5 }}
                         resizeMode="cover"
                     />
                 </View>
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='header'>{poll_campaign.name}</Text>
+                <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                    <Text theme='h1'>{poll_campaign.name}</Text>
                 </View>
-                <TouchableOpacity style={{ paddingLeft:10 }} onPress={() => onSharePollCampaign(poll_campaign)}>
-                    <Icons.ShareIcon color={Colors.brand.midnight} size={14} />
-                </TouchableOpacity>
+                <Button onPress={() => onSharePollCampaign(poll_campaign)}>
+                    <Icons.ShareIcon color={Colors.text.h1} size={14} />
+                </Button>
             </View>
         </View>
     )

package/src/Poll/components/CampaignLeaderboard.tsx

@@ -1,20 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { View, ScrollView, Image, FlatList, ActivityIndicator } from "react-native"
+import { Image, FlatList, ActivityIndicator } from "react-native"
 import type { PollCampaignLeaderProps, PollCampaignProps, PublicPlayerProps } from '../../types';
 import { PollCampaignApi } from '../api';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
-import { view_styles } from '../../constants/styles';
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
+import Pagination from '../../Components/Pagination';
 
 type CampaignLeaderboardProps = {
     poll_campaign:PollCampaignProps,
     view_mode: "short"|"full",
-    height?:number,
     onShowFullLeaderboard?: () => void,
     onClose?:() => void
 }
 
-const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeaderboard, onClose }:CampaignLeaderboardProps) => {
+const CampaignLeaderboard = ({ poll_campaign, view_mode, onShowFullLeaderboard, onClose }:CampaignLeaderboardProps) => {
+    const Colors = useColors();
     const [ leaderboard_data, setLeaderData ] = useState<{
         loading:boolean,
         offset:number,
@@ -60,9 +61,9 @@ const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeade
 
     const renderTrophy = (place:number) => {
         switch(place){
-            case 1: return <Icons.TrophyIcon color={Colors.incentive.gold} size={16}/>
-            case 2: return <Icons.TrophyIcon color={Colors.incentive.silver} size={16}/>
-            case 3: return <Icons.TrophyIcon color={Colors.incentive.bronze} size={16}/>
+            case 1: return <Icons.TrophyIcon color={Colors.text.gold} size={16}/>
+            case 2: return <Icons.TrophyIcon color={Colors.text.silver} size={16}/>
+            case 3: return <Icons.TrophyIcon color={Colors.text.bronze} size={16}/>
             default: return <></>
         }
     }
@@ -72,11 +73,11 @@ const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeade
         const player = players.find(p => p.player_id == data.item.player_id);
         if(!player){ return <></> }
         return (
-            <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:5, borderRadius:22, backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600 }}>
-                <View nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate }}>
-                    <Text size={10} color={Colors.brand.midnight} weight='bold' textAlign="center">{offset > 0 ? offset:''}{data.index+1}</Text>
+            <View float style={{ flexDirection:'row', alignItems:'center', margin:4, padding:5, borderRadius:22 }}>
+                <View transparent nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1 }}>
+                    <Text size={10} color={Colors.text.h1} weight='bold' textAlign="center">{offset > 0 ? offset:''}{data.index+1}</Text>
                 </View>
-                <View nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                <View transparent nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
                     <View nativeID="profile_pic" style={{ marginRight:10 }}>
                         <Image
                             source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
@@ -84,11 +85,11 @@ const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeade
                             resizeMode='cover'
                         />
                     </View>
-                    <View style={{ flex:1 }} nativeID="name">
-                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{player.username}</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{data.item.winnings.toFixed(2)} Points</Text>
+                    <View transparent style={{ flex:1 }} nativeID="name">
+                        <Text size={14} color={Colors.text.h1} weight='bold'>{player.username}</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.text.h1} weight='regular'>{data.item.winnings.toFixed(2)} Points</Text>
                     </View>
-                    <View>
+                    <View float style={{ padding:5, borderRadius:100 }}>
                         {renderTrophy(data.index+1)}
                     </View>
                 </View>
@@ -97,77 +98,65 @@ const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeade
     }
 
     return (
-        <View style={{ flex:1, height:height, backgroundColor:Colors.shades.shade100 }}>
+        <View style={{ flex:1}}>
             {my_leader && me ?
-            <View nativeID="my_results" style={{ backgroundColor:Colors.brand.midnight, padding:10 }}>
-                <Text style={{ padding:10 }} size={14} color={Colors.shades.white} weight='bold'>My Results</Text>
-                <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:5, borderRadius:22, backgroundColor:Colors.shades.white }}>
-                    <View nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
-                        <View nativeID="profile_pic" style={{ marginRight:10 }}>
+            <View type='header' nativeID="my_results" style={{ padding:10 }}>
+                <Text style={{ padding:10 }} size={14} theme='h1' weight='bold'>My Results</Text>
+                <View float style={{ flexDirection:'row', alignItems:'center', margin:4, padding:5, borderRadius:22 }}>
+                    <View transparent nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                        <View transparent nativeID="profile_pic" style={{ marginRight:10 }}>
                             <Image
                                 source={{ uri: me.profile_pic && me.profile_pic != '' ? me.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
                                 style={{ height:35, width:35, borderRadius:100 }}
                                 resizeMode='cover'
                             />
                         </View>
-                        <View style={{ flex:1 }} nativeID="name">
-                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{me.username}</Text>
-                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{my_leader.winnings.toFixed(2)} Points</Text>
+                        <View transparent style={{ flex:1 }} nativeID="name">
+                            <Text size={14} theme='h1' weight='bold'>{me.username}</Text>
+                            <Text style={{ marginTop:3 }} size={12} theme='description' weight='regular'>{my_leader.winnings.toFixed(2)} Points</Text>
                         </View>
-                        <View>
+                        <View float style={{ padding:5, borderRadius:100 }}>
                             {renderTrophy(my_leader.place)}
                         </View>
                     </View>
                 </View>
             </View>
             :<></>}
-            <ScrollView style={{flex:1, padding:10}}>
+            <View style={{flex:1, padding:15 }}>
                 {loading ?
-                    <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:10, alignSelf:'center' }} />
+                <ActivityIndicator size='large' color={Colors.text.h1} style={{ padding:20, alignSelf:'center' }} />
                 :<></>}
                 <FlatList
                     data={filtered_leaders}
                     renderItem={renderLeaders}
                     keyExtractor={((item) => item.player_id.toString())}
                 />
-            </ScrollView>
+            </View>
             {view_mode == 'full' ?
-            <View style={{ flexDirection:'row', alignItems:'center' }}>
-                {offset > 0 ?
-                <Button
-                    title='PREV'
-                    title_color={Colors.brand.electric}
-                    backgroundColor='transparent'
-                    onPress={() => getDataFromServer(offset - 1)}
-                />
-                :<></>}
-                <View style={{flex:1}} />
-                <Button
-                    title='NEXT'
-                    title_color={Colors.brand.electric}
-                    backgroundColor='transparent'
-                    onPress={() => getDataFromServer(offset + 1)}
+            <View>
+                <Pagination
+                    offset={offset}
+                    onNext={() => getDataFromServer(offset + 1)}
+                    onPrevious={() => getDataFromServer(offset - 1)}
                 />
             </View>
             :<></>}
             {view_mode == 'short' && onShowFullLeaderboard ?
-            <View style={{ ...view_styles.section_footer }}>
+            <View type='footer' style={{ flexDirection:'row', padding:10 }}>
                 <Button
                     title='See Full Leaderboard'
-                    style={{ flex:1, alignSelf:'center' }}
-                    title_color={Colors.brand.electric}
-                    backgroundColor='transparent'
+                    style={{ flex:1, alignSelf:'center', padding:0 }}
+                    type='text'
                     onPress={() => onShowFullLeaderboard()}
                 />
             </View>
             :<></>}
             {onClose ?
-            <View style={{ ...view_styles.section_footer }}>
+            <View type='footer' style={{ flexDirection:'row', padding:10 }}>
                 <Button
                     title='CLOSE'
                     style={{ flex:1 }}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
+                    type='close'
                     onPress={() => onClose()}
                 />
             </View>

package/src/Poll/components/CampaignProgressBar.tsx

@@ -1,8 +1,9 @@
-import { FlatList, TouchableOpacity, View } from "react-native"
+import { FlatList } from "react-native"
 import React, { useState } from "react"
 import type { PollCampaignProps, PollProps, PollResponseProps } from '../../types';
-import Colors from '../../constants/colors';
-import { Icons, Text } from '../../Components';
+import { Icons } from '../../Components';
+import { useColors } from "../../constants/useColors";
+import { Button, Text, View } from "../../Components/Themed";
 
 type CampaignProgressBarProps = {
     poll_campaign:PollCampaignProps,
@@ -13,25 +14,26 @@ type CampaignProgressBarProps = {
 }
 
 const CampaignProgressBar = ({ poll_responses, active_poll, polls, onPollSelect}:CampaignProgressBarProps) => {
+    const Colors = useColors();
     const [ progress_width, setProgressWidth ] = useState(0)
     const getBarColor = (pr:PollResponseProps) => {
         switch(pr.result_ind){
-            case 'win': return Colors.utility.success
-            case 'lose': return Colors.utility.error
-            default: return Colors.utility.warning
+            case 'win': return Colors.text.success
+            case 'lose': return Colors.text.error
+            default: return Colors.text.warning
         }
     }
     
     const renderProgress = (data: {item: PollProps, index:number }) => {
         let width = progress_width / polls.length
-        let color = Colors.shades.white
+        let color = Colors.text.white
         let response = poll_responses.find(pr => pr.poll_id == data.item.poll_id)
         if(response){ color = getBarColor(response) }
         const active = active_poll == data.item.poll_id ? true : false
         return (
-            <TouchableOpacity
+            <Button
                 onPress={() => onPollSelect(data.item)} 
-                style={{ margin:2, borderWidth:active?2:0, borderColor:Colors.brand.midnight, borderRadius:4, height:20, width: width - 4, backgroundColor:color }} 
+                style={{ margin:2, borderWidth:active?2:0, padding:0, borderColor:Colors.absolutes.brand.midnight, borderRadius:4, height:20, width: width - 4, backgroundColor:color }} 
             />
         )
     }
@@ -41,9 +43,9 @@ const CampaignProgressBar = ({ poll_responses, active_poll, polls, onPollSelect}
 
     return (
         <View style={{ flexDirection:'row', alignItems:'center' }}>
-            <View nativeID="questions_answered" style={{ flexDirection:'row', alignItems:'center', margin:5, borderRadius:4, backgroundColor:Colors.highlights.highlight400, padding:5 }}>
-                <Icons.UserIcon color={Colors.shades.white} size={12} />
-                <Text style={{ marginLeft:5 }} size={12} color={Colors.shades.white} weight='semibold'>{questions_answered}</Text>
+            <View nativeID="questions_answered" style={{ flexDirection:'row', alignItems:'center', margin:5, borderRadius:4, padding:5 }}>
+                <Icons.UserIcon color={Colors.text.h1} size={12} />
+                <Text style={{ marginLeft:5 }} size={12} color={Colors.text.h1} weight='semibold'>{questions_answered}</Text>
             </View>
             <View nativeID="progress_bar" style={{ flex:1 }} onLayout={(ev) => {
                 const { width } = ev.nativeEvent.layout;
@@ -56,9 +58,9 @@ const CampaignProgressBar = ({ poll_responses, active_poll, polls, onPollSelect}
                     renderItem={renderProgress}
                 />
             </View>
-            <View nativeID="questions_answered" style={{ flexDirection:'row', alignItems:'center', margin:5, borderRadius:4, backgroundColor:Colors.utility.warning, padding:5 }}>
-                <Icons.ListIcon color={Colors.shades.white} size={12} />
-                <Text style={{ marginLeft:5 }} size={12} color={Colors.shades.white} weight='semibold'>{questions_unanswered}</Text>
+            <View nativeID="questions_answered" style={{ flexDirection:'row', alignItems:'center', margin:5, borderRadius:4, backgroundColor:Colors.text.warning, padding:5 }}>
+                <Icons.ListIcon color={Colors.text.white} size={12} />
+                <Text style={{ marginLeft:5 }} size={12} color={Colors.text.white} weight='semibold'>{questions_unanswered}</Text>
             </View>
         </View>
     )