be-components 3.3.6 → 3.3.8

package/lib/module/MarketComponents/components/TeamEventMarket/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { View, Image, FlatList, TouchableOpacity, ActivityIndicator, ScrollView, StyleSheet } from 'react-native';
+import { Image, FlatList, ActivityIndicator, ScrollView } from 'react-native';
 import { view_styles } from '../../../constants/styles';
-import { Button, Icons, LinearDiagnal, Text } from '../../../Components';
+import { Icons, LinearDiagnal } from '../../../Components';
 import { TeamEventMarketHelpers } from './api';
 import MarketButton from '../../components/MarketButton';
 import Colors from '../../../constants/colors';
@@ -13,9 +13,12 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { useIsInViewport } from '../../../Components/ViewportObserver';
 import ContestStatsCard from '../ContestStats';
 import PodcastCard from '../PodcastCard';
+import { Button, Text, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 const TeamEventMarket = ({
   event,
   league,
+  float,
   style,
   init_expanded,
   hot_markets_direction,
@@ -44,12 +47,7 @@ const TeamEventMarket = ({
   onShare,
   onPodcastSelect
 }) => {
-  let set_style = {
-    ...styles.container_style
-  };
-  if (style) {
-    set_style = style;
-  }
+  const C = useColors();
   const [market_width, setMarketWidth] = useState(180);
   const [expanded_data, setExpandedData] = useState({
     loaded: false,
@@ -171,12 +169,13 @@ const TeamEventMarket = ({
     return setSquaresExpanded(true);
   };
   const renderCompetitions = data => {
-    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    return /*#__PURE__*/React.createElement(Button, {
+      type: "text",
       style: {
-        ...view_styles.body_row,
-        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
         borderBottomWidth: 1,
-        borderColor: Colors.shades.shade600
+        borderColor: C.borders.light
       },
       onPress: () => {
         setCompetitionsExpanded(false);
@@ -192,28 +191,30 @@ const TeamEventMarket = ({
       },
       resizeMode: "cover"
     }), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
       style: {
         flex: 1,
         marginLeft: 10
       }
     }, /*#__PURE__*/React.createElement(Text, {
-      theme: "header_2"
+      theme: "description"
     }, data.item.competition_name)), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
       direction: "right",
       size: 10,
-      color: Colors.brand.midnight
+      color: C.text.h1
     }));
   };
   const renderSquaresCompetitions = data => {
-    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    return /*#__PURE__*/React.createElement(Button, {
+      type: "text",
       style: {
-        ...view_styles.body_row,
-        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
         borderBottomWidth: 1,
-        borderColor: Colors.shades.shade600
+        borderColor: C.borders.light
       },
       onPress: () => {
-        setSquaresExpanded(false);
+        setCompetitionsExpanded(false);
         onSquaresSelect(data.item.sq_comp_id);
       }
     }, /*#__PURE__*/React.createElement(Image, {
@@ -226,16 +227,17 @@ const TeamEventMarket = ({
       },
       resizeMode: "cover"
     }), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
       style: {
         flex: 1,
         marginLeft: 10
       }
     }, /*#__PURE__*/React.createElement(Text, {
-      theme: "header_2"
+      theme: "description"
     }, data.item.sq_comp_name)), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
       direction: "right",
       size: 10,
-      color: Colors.brand.midnight
+      color: C.text.h1
     }));
   };
   const renderSides = useCallback(data => {
@@ -252,6 +254,7 @@ const TeamEventMarket = ({
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
     return /*#__PURE__*/React.createElement(View, {
+      transparent: true,
       key: `${event.event_id}_${data.item.side}`,
       style: {
         margin: 2,
@@ -280,6 +283,7 @@ const TeamEventMarket = ({
   }, [JSON.stringify(best_available_orders), JSON.stringify(latest_trades), primary_width]);
   const renderMarketHeaders = useCallback(data => {
     return /*#__PURE__*/React.createElement(View, {
+      transparent: true,
       style: {
         width: primary_width,
         marginLeft: 2,
@@ -287,7 +291,7 @@ const TeamEventMarket = ({
       }
     }, /*#__PURE__*/React.createElement(Text, {
       size: 12,
-      color: Colors.brand.midnight,
+      color: C.text.h1,
       textAlign: "center"
     }, data.item.type.toUpperCase()));
   }, [primary_markets.length, primary_width]);
@@ -320,6 +324,7 @@ const TeamEventMarket = ({
         const athlete_trades = latest_trades.filter(t => t.market_type == 'FOR_MONEY' && t.market_id == data.item.market_id && t.side_type == 'athlete' && t.side_id == data.item.side_id);
         const athlete_orders = best_available_orders.filter(t => t.market_id == data.item.market_id && t.side_type == 'athlete' && t.side_id == data.item.side_id);
         return /*#__PURE__*/React.createElement(View, {
+          transparent: true,
           style: {
             flexGrow: 1
           }
@@ -327,6 +332,7 @@ const TeamEventMarket = ({
           event: event,
           event_type: "team",
           athlete: athlete,
+          float: true,
           direction: hot_markets_direction == 'vertical' ? 'horizontal' : 'vertical',
           show_grades: show_grades,
           market: market,
@@ -342,9 +348,15 @@ const TeamEventMarket = ({
       case 'event':
         const event_trades = latest_trades.filter(t => t.market_type == 'FOR_MONEY' && t.market_id == data.item.market_id);
         const event_orders = best_available_orders.filter(t => t.market_id == data.item.market_id);
-        return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(EventMarket, {
+        return /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flexGrow: 1
+          }
+        }, /*#__PURE__*/React.createElement(EventMarket, {
           event: event,
           market: market,
+          float: true,
           direction: hot_markets_direction == 'vertical' ? 'horizontal' : 'vertical',
           hide_liquidity: hide_liquidity,
           onTradeLongPress: onTradeLongPress,
@@ -362,7 +374,9 @@ const TeamEventMarket = ({
   }, [athletes.length, JSON.stringify(best_available_orders), JSON.stringify(latest_trades)]);
   const renderPrimaryMarkets = useCallback(data => {
     const is_locked = MarketComponentHelpers.isEventMarketLocked(event, data.item.market_id);
-    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(FlatList, {
+    return /*#__PURE__*/React.createElement(View, {
+      transparent: true
+    }, /*#__PURE__*/React.createElement(FlatList, {
       key: `${event.event_id}_side_options`,
       scrollEnabled: false,
       data: data.item.side_options.sort((a, b) => {
@@ -394,8 +408,8 @@ const TeamEventMarket = ({
     available
   } = useMemo(() => TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades), []);
   return /*#__PURE__*/React.createElement(View, {
-    ref: ref,
-    style: set_style
+    float: float,
+    style: [style]
   }, sponsor ? /*#__PURE__*/React.createElement(LinearGradient, {
     style: {
       marginTop: -1,
@@ -415,7 +429,7 @@ const TeamEventMarket = ({
       x: 1,
       y: 0
     },
-    colors: [sponsor.brand_primary ?? Colors.brand.midnight, sponsor.brand_secondary ?? Colors.brand.cyan]
+    colors: [sponsor.brand_primary ?? C.text.h1, sponsor.brand_secondary ?? C.text.h1]
   }, /*#__PURE__*/React.createElement(View, {
     style: {
       height: 30,
@@ -487,15 +501,17 @@ const TeamEventMarket = ({
     title_color: Colors.shades.white,
     backgroundColor: Colors.utility.success,
     onPress: () => onActivate(event.event_id, 'team')
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null), onShare ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null), onShare ? /*#__PURE__*/React.createElement(Button, {
+    type: "text",
     style: {
       marginLeft: 10
     },
     onPress: () => onShare(event)
   }, /*#__PURE__*/React.createElement(Icons.ShareIcon, {
     size: 14,
-    color: Colors.brand.electric
+    color: C.text.action
   })) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     nativeID: "event_header_data",
     style: {
       flexDirection: 'row',
@@ -503,9 +519,10 @@ const TeamEventMarket = ({
       flexWrap: 'wrap',
       padding: 10,
       borderBottomWidth: 1,
-      borderBottomColor: Colors.shades.shade600
+      borderBottomColor: C.borders.light
     }
   }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1,
       flexDirection: 'row',
@@ -527,96 +544,94 @@ const TeamEventMarket = ({
       marginLeft: 2,
       marginRight: 3
     },
-    size: 12,
-    color: Colors.brand.midnight,
-    weight: "semibold",
+    theme: "description",
     selectable: true
   }, event.event_id, " ") : /*#__PURE__*/React.createElement(React.Fragment, null), event.event_sub_title ? /*#__PURE__*/React.createElement(Text, {
     size: 12,
-    color: Colors.brand.midnight,
-    weight: "semibold"
+    theme: "description"
   }, event.event_sub_title) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(View, {
     style: {
       flexDirection: 'row',
       alignItems: 'center'
     }
   }, /*#__PURE__*/React.createElement(Icons.TVIcon, {
-    size: 10,
-    color: Colors.brand.midnight
+    size: 16,
+    color: C.text.h1
   }), /*#__PURE__*/React.createElement(Text, {
     style: {
       marginLeft: 8
     },
-    size: 12,
-    color: Colors.brand.midnight,
-    weight: "semibold"
+    theme: "description"
   }, event.info?.broadcast?.network)), onActivate && event_status != 'closed' ? /*#__PURE__*/React.createElement(Button, {
     title: event_status == 'active' ? 'Refresh' : 'Activate',
     style: {
       opacity: activate_loading ? 0.5 : 1,
-      marginLeft: 5
+      marginLeft: 5,
+      padding: 10
     },
     disabled: activate_loading,
     loading: activate_loading,
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.success,
+    type: "success",
     onPress: () => onActivate(event.event_id, 'team')
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null), onShare ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null), onShare ? /*#__PURE__*/React.createElement(Button, {
+    type: "text",
     style: {
       marginLeft: 10
     },
     onPress: () => onShare(event)
   }, /*#__PURE__*/React.createElement(Icons.ShareIcon, {
     size: 14,
-    color: Colors.brand.electric
+    color: C.text.action
   })) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     nativeID: "primary_markets",
     style: {
       flexDirection: 'row'
     }
   }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     nativeID: "team_details",
     style: {
       flex: 1,
       padding: 5,
       paddingRight: 0
     }
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       alignItems: 'center',
       marginTop: 5,
       marginBottom: 5,
       marginLeft: 10
-    },
-    onPress: () => setShowStats(!show_stats)
+    }
   }, show_stats ? /*#__PURE__*/React.createElement(Button, {
     title: "X",
-    title_size: 10,
-    padding: 0,
     style: {
-      marginRight: 5
+      marginRight: 5,
+      padding: 10
     },
-    disabled: true,
+    type: "error",
     title_color: Colors.utility.error,
-    onPress: () => console.log('')
+    onPress: () => setShowStats(!show_stats)
   }) : /*#__PURE__*/React.createElement(React.Fragment, null), !show_stats ? /*#__PURE__*/React.createElement(View, {
     style: {
       marginRight: 5,
       height: 10,
       width: 10,
       borderRadius: 100,
-      backgroundColor: event_status == 'active' ? Colors.utility.success : event_status == 'inactive' ? Colors.brand.electric : Colors.utility.error
+      backgroundColor: event_status == 'active' ? C.text.success : event_status == 'inactive' ? C.text.action : C.text.error
     }
   }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
     size: 12,
-    color: show_stats ? Colors.utility.error : Colors.brand.electric
-  }, show_stats ? 'Hide Boxscore' : `${TeamEventMarketHelpers.getTimeDetail(event)}`)), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    color: show_stats ? C.text.error : C.text.action
+  }, show_stats ? 'Hide Boxscore' : `${TeamEventMarketHelpers.getTimeDetail(event)}`)), /*#__PURE__*/React.createElement(Button, {
     disabled: !onTeamSelect,
     style: {
       ...view_styles.body_row,
       minHeight: 48
     },
+    type: "text",
     onPress: () => onTeamSelect ? onTeamSelect(event.away_team_id) : console.log('')
   }, /*#__PURE__*/React.createElement(Image, {
     source: {
@@ -628,6 +643,7 @@ const TeamEventMarket = ({
     },
     resizeMode: "cover"
   }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1,
       flexDirection: 'row',
@@ -639,28 +655,30 @@ const TeamEventMarket = ({
       marginRight: 3
     },
     size: 12,
-    color: Colors.brand.cyan,
+    color: C.text.highlight,
     weight: "semibold"
   }, event.away.rank) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1,
       marginRight: 5
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
+    theme: "h2"
   }, event.away.market_name, " ", event.away.name), event.away_sub_title ? /*#__PURE__*/React.createElement(Text, {
     style: {
       marginTop: 3
     },
-    theme: "body_2"
+    theme: "description"
   }, event.away_sub_title) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(Text, {
-    theme: "body"
-  }, event.away_team_score))), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    theme: "description"
+  }, event.away_team_score))), /*#__PURE__*/React.createElement(Button, {
     disabled: !onTeamSelect,
     style: {
       ...view_styles.body_row,
       minHeight: 48
     },
+    type: "text",
     onPress: () => onTeamSelect ? onTeamSelect(event.home_team_id) : console.log('')
   }, /*#__PURE__*/React.createElement(Image, {
     source: {
@@ -672,6 +690,7 @@ const TeamEventMarket = ({
     },
     resizeMode: "cover"
   }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1,
       flexDirection: 'row',
@@ -683,23 +702,25 @@ const TeamEventMarket = ({
       marginRight: 3
     },
     size: 12,
-    color: Colors.brand.cyan,
+    color: C.text.highlight,
     weight: "semibold"
   }, event.home.rank) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1,
       marginRight: 5
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
+    theme: "h2"
   }, event.home.market_name, " ", event.home.name), event.home_sub_title ? /*#__PURE__*/React.createElement(Text, {
     style: {
       marginTop: 3
     },
-    theme: "body_2"
+    theme: "description"
   }, event.home_sub_title) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(Text, {
-    theme: "body"
+    theme: "description"
   }, event.home_team_score)))), event_status == 'active' ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     nativeID: "primary_market_details",
     style: {
       padding: 5,
@@ -712,6 +733,7 @@ const TeamEventMarket = ({
       setMarketWidth(width);
     }
   }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       marginTop: 5,
       marginBottom: 5
@@ -730,21 +752,22 @@ const TeamEventMarket = ({
     scrollEnabled: false,
     renderItem: renderPrimaryMarkets,
     keyExtractor: item => item.market_id.toString()
-  })) : /*#__PURE__*/React.createElement(TouchableOpacity, {
+  })) : /*#__PURE__*/React.createElement(Button, {
     disabled: !onActivate ? true : false,
     style: {
       flex: 0.5,
-      padding: 10,
       justifyContent: 'center',
       alignItems: 'center'
     },
+    type: "text",
+    transparent: true,
     onPress: () => onActivate ? onActivate(event.event_id, 'team') : console.log('')
   }, /*#__PURE__*/React.createElement(Icons.MarketClosedIcon, {
     size: 60,
-    color: Colors.brand.midnight
+    color: C.text.h1
   }))), event_status == 'active' ? /*#__PURE__*/React.createElement(View, {
+    type: "footer",
     style: {
-      backgroundColor: Colors.shades.shade100,
       padding: 10,
       flexDirection: 'row',
       alignItems: 'center',
@@ -752,12 +775,14 @@ const TeamEventMarket = ({
       borderBottomLeftRadius: 8,
       borderBottomRightRadius: 8
     }
-  }, !hide_liquidity ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, !hide_liquidity ? /*#__PURE__*/React.createElement(Button, {
     style: {
       flex: 1,
       flexDirection: 'row',
-      minWidth: 115
+      minWidth: 115,
+      padding: 0
     },
+    type: "text",
     onPress: () => {
       if (!primary_markets[0]) {
         return;
@@ -769,126 +794,126 @@ const TeamEventMarket = ({
       });
     }
   }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    float: true,
     style: {
-      backgroundColor: Colors.shades.white,
       height: 30,
       width: 30,
       borderRadius: 100,
       justifyContent: 'center',
-      alignItems: 'center',
-      ...view_styles.float
+      alignItems: 'center'
     }
   }, /*#__PURE__*/React.createElement(Icons.LiquidityIcon, {
-    color: Colors.brand.midnight,
+    color: C.text.h1,
     size: 30
   })), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       marginLeft: 5
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "body_2"
+    theme: "description"
   }, "Liquidity"), /*#__PURE__*/React.createElement(Text, {
     size: 12,
-    color: Colors.brand.electric,
+    style: {
+      marginTop: 3
+    },
+    color: C.text.highlight,
     weight: "semibold"
-  }, "$", liquidity.toFixed(), " ", open_order_count, " Orders"))) : /*#__PURE__*/React.createElement(React.Fragment, null), squares_competitions && squares_competitions.length > 0 ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, "$", liquidity.toFixed(), " ", open_order_count, " Orders"))) : /*#__PURE__*/React.createElement(React.Fragment, null), squares_competitions && squares_competitions.length > 0 ? /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    type: "squares",
     style: {
       marginRight: 5,
       flexDirection: 'row',
       alignItems: 'center',
       padding: 10,
-      borderRadius: 22,
-      backgroundColor: Colors.highlights.highlight100,
-      ...view_styles.float
+      borderRadius: 22
     },
     onPress: () => handleSelectSquares()
   }, /*#__PURE__*/React.createElement(Icons.SquaresIcon, {
     size: 18,
-    color: Colors.shades.white
+    color: C.text.white
   }), /*#__PURE__*/React.createElement(Text, {
     style: {
       marginLeft: 5
     },
     size: 14,
-    color: Colors.shades.white,
+    color: C.text.white,
     weight: "semibold"
-  }, "Squares")) : /*#__PURE__*/React.createElement(React.Fragment, null), competitions && competitions.length > 0 ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, "Squares")) : /*#__PURE__*/React.createElement(React.Fragment, null), competitions && competitions.length > 0 ? /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    type: "competition",
     style: {
       marginRight: 5,
       flexDirection: 'row',
       alignItems: 'center',
       padding: 10,
-      borderRadius: 22,
-      backgroundColor: Colors.highlights.highlight500,
-      ...view_styles.float
+      borderRadius: 22
     },
     onPress: () => handleSelectCompetition()
   }, /*#__PURE__*/React.createElement(Icons.PickEmIcon, {
     size: 14,
-    color: Colors.shades.white
+    color: C.text.white
   }), /*#__PURE__*/React.createElement(Text, {
     style: {
       marginLeft: 5
     },
     size: 14,
-    color: Colors.shades.white,
+    color: C.text.white,
     weight: "semibold"
-  }, "MultiPick")) : /*#__PURE__*/React.createElement(React.Fragment, null), non_primary_markets.length > 0 ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, "MultiPick")) : /*#__PURE__*/React.createElement(React.Fragment, null), non_primary_markets.length > 0 ? /*#__PURE__*/React.createElement(Button, {
+    float: true,
     style: {
       height: 35,
       width: 35,
       justifyContent: 'center',
       borderRadius: 100,
-      alignItems: 'center',
-      backgroundColor: Colors.shades.white,
-      ...view_styles.float
+      alignItems: 'center'
     },
     onPress: () => expandedEvent()
   }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
     direction: expanded ? 'up' : 'down',
     size: 8,
-    color: Colors.brand.midnight
+    color: C.text.h1
   })) : available ? /*#__PURE__*/React.createElement(Button, {
     title: "MORE",
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.brand.electric,
+    type: "info",
     onPress: () => onViewAdditionalMarkets(event.event_id, 'team')
   }) : /*#__PURE__*/React.createElement(React.Fragment, null), competitions && competitions_expanded ? /*#__PURE__*/React.createElement(View, {
+    float: true,
     style: {
       position: 'absolute',
       bottom: 0,
       right: 0,
-      ...view_styles.section,
-      minWidth: 300,
-      maxHeight: 220
+      justifyContent: 'flex-end',
+      maxHeight: 230,
+      minWidth: 300
     }
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
     style: {
-      ...view_styles.section_header,
-      padding: 15,
-      paddingRight: 10,
-      backgroundColor: Colors.highlights.highlight500
-    },
-    onPress: () => setCompetitionsExpanded(false)
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 5
+    }
   }, /*#__PURE__*/React.createElement(Icons.PickEmIcon, {
     size: 16,
-    color: Colors.shades.white
+    color: C.text.h1
   }), /*#__PURE__*/React.createElement(Text, {
     style: {
       flex: 1,
       marginLeft: 10
     },
-    size: 16,
-    weight: "bold",
-    color: Colors.shades.white
+    theme: "h2"
   }, "Select Competition"), /*#__PURE__*/React.createElement(Button, {
     title: "X",
-    backgroundColor: "transparent",
-    title_color: Colors.utility.error,
-    disabled: true,
-    title_size: 16,
-    padding: 0,
-    onPress: () => console.log('')
+    style: {
+      padding: 10,
+      borderRadius: 100
+    },
+    type: "error",
+    onPress: () => setCompetitionsExpanded(false)
   })), /*#__PURE__*/React.createElement(ScrollView, {
     style: {
       flex: 1
@@ -898,41 +923,39 @@ const TeamEventMarket = ({
     renderItem: renderCompetitions,
     keyExtractor: item => item.competition_id.toString()
   }))) : /*#__PURE__*/React.createElement(React.Fragment, null), squares_competitions && squares_expanded ? /*#__PURE__*/React.createElement(View, {
+    float: true,
     style: {
       position: 'absolute',
       bottom: 0,
       right: 0,
-      ...view_styles.section,
-      minWidth: 300,
-      maxHeight: 220
+      justifyContent: 'flex-end',
+      maxHeight: 230,
+      minWidth: 300
     }
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
     style: {
-      ...view_styles.section_header,
-      padding: 15,
-      paddingRight: 10,
-      backgroundColor: Colors.highlights.highlight100
-    },
-    onPress: () => setSquaresExpanded(false)
-  }, /*#__PURE__*/React.createElement(Icons.SquaresIcon, {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 5
+    }
+  }, /*#__PURE__*/React.createElement(Icons.PickEmIcon, {
     size: 16,
-    color: Colors.shades.white
+    color: C.text.h1
   }), /*#__PURE__*/React.createElement(Text, {
     style: {
       flex: 1,
       marginLeft: 10
     },
-    size: 16,
-    weight: "bold",
-    color: Colors.shades.white
-  }, "Select Squares Competition"), /*#__PURE__*/React.createElement(Button, {
+    theme: "h2"
+  }, "Select Squares"), /*#__PURE__*/React.createElement(Button, {
     title: "X",
-    backgroundColor: "transparent",
-    title_color: Colors.utility.error,
-    disabled: true,
-    title_size: 16,
-    padding: 0,
-    onPress: () => console.log('')
+    style: {
+      padding: 10,
+      borderRadius: 100
+    },
+    type: "error",
+    onPress: () => setSquaresExpanded(false)
   })), /*#__PURE__*/React.createElement(ScrollView, {
     style: {
       flex: 1
@@ -941,12 +964,16 @@ const TeamEventMarket = ({
     data: squares_competitions,
     renderItem: renderSquaresCompetitions,
     keyExtractor: item => item.sq_comp_id.toString()
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null), expanded ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null), expanded ? /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       alignItems: 'center'
     }
   }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flexGrow: 1
     }
@@ -963,37 +990,38 @@ const TeamEventMarket = ({
     color: Colors.brand.midnight
   }) : /*#__PURE__*/React.createElement(Button, {
     title: "SEE ALL",
-    padding: 15,
-    backgroundColor: "transparent",
-    title_color: Colors.brand.electric,
+    type: "text",
     onPress: () => onViewAdditionalMarkets(event.event_id, 'team')
-  })), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(FlatList, {
+  })), /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(FlatList, {
     data: non_primary_markets,
     renderItem: renderNonPrimaryMarkets,
     showsHorizontalScrollIndicator: false,
     keyExtractor: item => `${item.market_id}:${item.side_type}:${item.side_id}`,
     horizontal: hot_markets_direction && hot_markets_direction == 'vertical' ? false : true
   })), podcasts.length > 0 ? /*#__PURE__*/React.createElement(View, {
+    type: "footer",
     style: {
       flexDirection: 'row',
       marginTop: 10,
       borderBottomRightRadius: 8,
-      borderBottomLeftRadius: 8,
-      backgroundColor: Colors.shades.shade100
+      borderBottomLeftRadius: 8
     }
   }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       padding: 5,
       paddingRight: 20,
       paddingLeft: 20,
       justifyContent: 'center',
-      backgroundColor: Colors.brand.midnight,
       borderBottomLeftRadius: 8
     }
   }, /*#__PURE__*/React.createElement(Icons.HeadphoneIcon, {
     size: 36,
-    color: Colors.shades.white
+    color: C.text.h1
   })), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1,
       padding: 5
@@ -1002,9 +1030,7 @@ const TeamEventMarket = ({
     style: {
       marginBottom: 3
     },
-    size: 14,
-    weight: "semibold",
-    color: Colors.brand.midnight
+    theme: "h2"
   }, "Need Help? Checkout these podcasts!"), /*#__PURE__*/React.createElement(FlatList, {
     key: `${event.event_id}:pods`,
     data: podcasts,
@@ -1021,13 +1047,6 @@ const TeamEventMarket = ({
     event: event
   })) : /*#__PURE__*/React.createElement(React.Fragment, null));
 };
-const styles = StyleSheet.create({
-  container_style: {
-    ...view_styles.section,
-    borderWidth: 1,
-    borderColor: Colors.shades.shade600
-  }
-});
 export default /*#__PURE__*/React.memo(TeamEventMarket, (left, right) => {
   if (JSON.stringify(left) != JSON.stringify(right)) {
     return false;