be-components 3.3.6 → 3.3.7

package/lib/commonjs/MarketComponents/components/TournamentMarket/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _styles = require("../../../constants/styles");
 var _colors = _interopRequireDefault(require("../../../constants/colors"));
 var _Components = require("../../../Components");
 var _api = require("../../api");
@@ -16,13 +15,17 @@ var _MatchMarket = _interopRequireDefault(require("../MatchMarket"));
 var _momentMini = _interopRequireDefault(require("moment-mini"));
 var _api2 = require("./api");
 var _ViewportObserver = require("../../../Components/ViewportObserver");
+var _Themed = require("../../../Components/Themed");
+var _useColors = require("../../../constants/useColors");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const TournamentMarket = ({
   tournament,
+  float,
   wrap_markets,
   width,
+  style,
   market_selector_location,
   hide_match_liquidity,
   show_grades,
@@ -44,6 +47,7 @@ const TournamentMarket = ({
   onActivate,
   onShare
 }) => {
+  const C = (0, _useColors.useColors)();
   const [search_value, setSearchValue] = (0, _react.useState)(undefined);
   const [tournament_data, setTournamentData] = (0, _react.useState)({
     loading: false,
@@ -65,6 +69,7 @@ const TournamentMarket = ({
     match_trades
   } = tournament_data;
   const [show_markets, setShowMarkets] = (0, _react.useState)(false);
+  console.log(loaded, loading);
   const ref = (0, _react.useRef)(null);
   const is_in_viewport = (0, _ViewportObserver.useIsInViewport)(ref);
   let supported_markets = markets.filter(m => tournament.supported_markets.find(sm => sm.market_id == m.market_id));
@@ -92,7 +97,7 @@ const TournamentMarket = ({
   }
   const market_width = _api2.TournamentMarketHelpers.getMarketWrapWidth(50, width, wrap_markets);
   (0, _react.useEffect)(() => {
-    if (!is_in_viewport || loaded || loading) {
+    if (loaded || loading) {
       return;
     }
     _api.MarketComponentApi.setEnvironment();
@@ -145,12 +150,13 @@ const TournamentMarket = ({
     });
   };
   const renderMarkets = data => {
-    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    return /*#__PURE__*/_react.default.createElement(_Themed.Button, {
       style: {
-        ..._styles.view_styles.body_row,
+        flexDirection: 'row',
+        alignItems: 'center',
         padding: 10,
         borderBottomWidth: 1,
-        borderColor: _colors.default.shades.shade600
+        borderColor: C.borders.light
       },
       onPress: () => {
         setTournamentData({
@@ -159,10 +165,9 @@ const TournamentMarket = ({
         });
         setShowMarkets(false);
       }
-    }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
+    }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
       size: 12,
-      color: _colors.default.brand.midnight,
-      weight: "semibold"
+      theme: "h2"
     }, data.item.type == 'Stat' ? data.item.stat_label : data.item.type));
   };
   const renderMatches = data => {
@@ -179,11 +184,18 @@ const TournamentMarket = ({
       m_trades = match_trades.filter(t => t.event_id == data.item.match_id && t.event_type == 'match');
     }
     let m_order_stats = match_order_stats.filter(os => os.event_id == data.item.match_id && os.event_type == 'match');
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      key: `${tournament.tournament_id}_${data.item.match_id}`
+    return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+      key: `${tournament.tournament_id}_${data.item.match_id}`,
+      style: {
+        margin: 4
+      }
     }, /*#__PURE__*/_react.default.createElement(_MatchMarket.default, {
       match: data.item,
       league: league,
+      float: true,
+      style: {
+        flexGrow: 1
+      },
       away_athlete: away_athlete,
       home_athlete: home_athlete,
       away_team: away_team,
@@ -208,8 +220,11 @@ const TournamentMarket = ({
     let team_available_orders = best_available_orders.filter(ba => ba.side_type == 'team' && ba.side_id == data.item.team_id);
     let team_trades = latest_trades.filter(t => t.side_type == 'team' && t.side_id == data.item.team_id);
     let team_order_stats = event_order_stats.filter(os => os.side_type == 'team' && os.side_id == data.item.team_id);
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      key: `${tournament.tournament_id}_${data.item.team_id.toString()}`
+    return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+      key: `${tournament.tournament_id}_${data.item.team_id.toString()}`,
+      style: {
+        margin: 4
+      }
     }, /*#__PURE__*/_react.default.createElement(_TeamTournamentMarket.default, {
       team: data.item,
       event_type: "tournament",
@@ -217,6 +232,7 @@ const TournamentMarket = ({
       onView: onView,
       width: wrap_markets ? market_width : undefined,
       show_grades: show_grades,
+      float: true,
       hide_liquidity: hide_participant_liquidity ? true : false,
       tournament: tournament,
       event_order_stats: team_order_stats,
@@ -234,13 +250,20 @@ const TournamentMarket = ({
     let team_available_orders = best_available_orders.filter(ba => ba.side_type == 'athlete' && ba.side_id == data.item.athlete_id);
     let team_trades = latest_trades.filter(t => t.side_type == 'athlete' && t.side_id == data.item.athlete_id);
     let team_order_stats = event_order_stats.filter(os => os.side_type == 'athlete' && os.side_id == data.item.athlete_id);
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      key: `${tournament.tournament_id}_${data.item.athlete_id.toString()}`
+    return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+      key: `${tournament.tournament_id}_${data.item.athlete_id.toString()}`,
+      style: {
+        margin: 4
+      }
     }, /*#__PURE__*/_react.default.createElement(_AthleteTournamentMarket.default, {
       athlete: data.item,
       event_type: "tournament",
       onTradeLongPress: onTradeLongPress,
       onView: onView,
+      float: true,
+      style: {
+        flexGrow: 1
+      },
       show_grades: show_grades,
       hide_liquidity: hide_participant_liquidity ? true : false,
       tournament: tournament,
@@ -253,16 +276,22 @@ const TournamentMarket = ({
       onOrder: onOrder
     }));
   };
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    ref: ref,
-    style: {
-      ..._styles.view_styles.section,
-      borderWidth: 1,
-      borderColor: _colors.default.shades.shade600
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    float: float,
+    style: [{
+      borderRadius: 8
+    }, style]
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "header",
+    transparent: true,
+    nativeID: "event_header_data",
     style: {
-      ..._styles.view_styles.section_header
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      padding: 10,
+      borderBottomWidth: 1,
+      borderBottomColor: C.borders.light
     }
   }, league ? /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
     source: {
@@ -274,18 +303,19 @@ const TournamentMarket = ({
       marginRight: 10
     },
     resizeMode: "cover"
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    theme: "header_2"
-  }, tournament.tournament_name), /*#__PURE__*/_react.default.createElement(_Components.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+    theme: "h2"
+  }, tournament.tournament_name), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginTop: 3
     },
-    theme: "body"
-  }, (0, _momentMini.default)(tournament.scheduled_datetime).format('MMM DD YYYY'))), onActivate && tournament.status != 'closed' ? /*#__PURE__*/_react.default.createElement(_Components.Button, {
+    theme: "description"
+  }, (0, _momentMini.default)(tournament.scheduled_datetime).format('MMM DD YYYY'))), onActivate && tournament.status != 'closed' ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     title: 'Refresh',
     style: {
       opacity: activate_loading ? 0.5 : 1,
@@ -296,127 +326,139 @@ const TournamentMarket = ({
     title_color: _colors.default.shades.white,
     backgroundColor: _colors.default.utility.success,
     onPress: () => onActivate(tournament.tournament_id, 'tournament')
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), onShare ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), onShare ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     style: {
       marginLeft: 10
     },
     onPress: () => onShare(tournament)
   }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ShareIcon, {
     size: 14,
-    color: _colors.default.brand.electric
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), loading || !loaded ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    color: C.text.action
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), loading || !loaded ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       padding: 20
     }
   }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
     size: 'large',
-    color: _colors.default.brand.midnight
-  })) : /*#__PURE__*/_react.default.createElement(_reactNative.View, null, market_selector_location == 'top_right' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    color: C.text.h1
+  })) : /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "body",
+    transparent: true,
     style: {
-      ..._styles.view_styles.body_row,
-      paddingLeft: 10,
-      paddingRight: 10,
-      zIndex: 1,
-      backgroundColor: _colors.default.shades.shade100
+      flexGrow: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, market_selector_location == 'top_right' ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       alignItems: 'center',
+      padding: 10,
+      zIndex: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "input",
+    style: {
       flex: 1,
-      marginRight: 10,
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
+    style: {
+      padding: 5,
       paddingLeft: 10,
-      backgroundColor: _colors.default.shades.white,
-      borderRadius: 22
+      paddingRight: 10
     }
   }, /*#__PURE__*/_react.default.createElement(_Components.Icons.SearchIcon, {
-    color: _colors.default.brand.electric,
+    color: C.text.action,
     size: 18
-  }), /*#__PURE__*/_react.default.createElement(_Components.TextInput, {
+  })), /*#__PURE__*/_react.default.createElement(_Themed.TextInput, {
     style: {
-      flex: 1,
-      marginLeft: 10,
-      borderRadius: 0,
-      borderTopRightRadius: 22,
-      borderBottomRightRadius: 22
+      flex: 1
     },
+    transparent: true,
     placeholder: "Search athletes, teams, matches ...",
-    placeholderTextColor: _colors.default.accents.accent200,
     onChangeText: text => setSearchValue(text)
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  })), /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+    float: true,
     style: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: _colors.default.shades.white,
-      borderWidth: 1,
-      borderColor: _colors.default.shades.shade600,
-      borderRadius: 4,
-      padding: 10,
-      ..._styles.view_styles.float
+      marginLeft: 5
     },
     onPress: () => setShowMarkets(!show_markets)
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginRight: 10
     },
     size: 14,
-    color: _colors.default.brand.midnight
+    color: C.text.h1
   }, active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type), /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
-    color: _colors.default.brand.midnight,
+    color: C.text.h1,
     size: 14
-  })), show_markets ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })), show_markets ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
+    float: true,
     style: {
-      ..._styles.view_styles.section,
       position: 'absolute',
       top: 5,
       right: 5,
       minWidth: 175
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "header",
     style: {
-      ..._styles.view_styles.section_header,
-      backgroundColor: _colors.default.shades.shade100
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 5,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    theme: "header_2"
-  }, "Select Market")), /*#__PURE__*/_react.default.createElement(_Components.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+    theme: "h2"
+  }, "Select Market")), /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     title: "X",
-    title_weight: "regular",
-    borderRadius: 100,
-    backgroundColor: _colors.default.shades.white,
-    padding: 5,
+    title_color: C.text.action,
+    style: {
+      borderRadius: 100,
+      padding: 5,
+      paddingLeft: 10,
+      paddingRight: 10
+    },
+    type: "close",
     onPress: () => setShowMarkets(false)
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
-      ..._styles.view_styles.section_body,
       padding: 10
     }
   }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
     data: supported_markets,
     renderItem: renderMarkets,
     keyExtractor: item => item.market_id.toString()
-  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flexDirection: 'row',
       alignItems: 'center'
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1
     }
   }, /*#__PURE__*/_react.default.createElement(_Components.LinearDiagnal, {
     label_size: 14,
     label: active_type == 'futures' ? 'FUTURES' : 'MATCHES',
-    left_color: _colors.default.utility.warning,
-    right_color: _colors.default.utility.error
-  })), active_type == 'matches' && show_futures || active_type == 'futures' && show_matches ? /*#__PURE__*/_react.default.createElement(_Components.Button, {
+    left_color: C.text.warning,
+    right_color: C.text.error
+  })), active_type == 'matches' && show_futures || active_type == 'futures' && show_matches ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     title: `SEE ${active_type == 'futures' ? 'MATCHES' : 'FUTURES'}`,
-    padding: 15,
-    title_color: _colors.default.brand.electric,
+    type: "close",
     onPress: () => {
       let new_active_market = active_market;
       if (active_type == 'futures') {
@@ -431,7 +473,13 @@ const TournamentMarket = ({
         active_market: new_active_market
       });
     }
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), active_type == 'futures' && show_teams && teams.length > 0 ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, wrap_markets ? /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), active_type == 'futures' && show_teams && teams.length > 0 ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
+    style: {
+      padding: 10
+    }
+  }, wrap_markets ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       flexWrap: 'wrap',
@@ -442,12 +490,18 @@ const TournamentMarket = ({
       item: t,
       index: i
     });
-  }))) : /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+  })) : /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
     data: sorted_teams,
     renderItem: renderTeams,
     horizontal: true,
     keyExtractor: item => item.team_id.toString()
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), active_type == 'futures' && show_athletes && athletes.length > 0 ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, wrap_markets ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), active_type == 'futures' && show_athletes && athletes.length > 0 ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
+    style: {
+      padding: 10
+    }
+  }, wrap_markets ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       flexWrap: 'wrap',
@@ -463,7 +517,13 @@ const TournamentMarket = ({
     renderItem: renderAthletes,
     horizontal: true,
     keyExtractor: item => item.athlete_id.toString()
-  })) : active_type == 'matches' && show_matches && matches.length > 0 ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, wrap_markets ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })) : active_type == 'matches' && show_matches && matches.length > 0 ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
+    style: {
+      padding: 10
+    }
+  }, wrap_markets ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       flexWrap: 'wrap',
@@ -479,21 +539,21 @@ const TournamentMarket = ({
     renderItem: renderMatches,
     keyExtractor: item => item.match_id.toString(),
     horizontal: true
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "footer",
     style: {
-      backgroundColor: _colors.default.shades.shade100,
-      padding: 10,
       flexDirection: 'row',
       alignItems: 'center',
-      flexWrap: 'wrap',
+      padding: 10,
       borderBottomLeftRadius: 8,
       borderBottomRightRadius: 8
     }
-  }, !hide_liquidity ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }, !hide_liquidity ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+    transparent: true,
     style: {
-      flex: 1,
+      flexGrow: 1,
       flexDirection: 'row',
-      minWidth: 115
+      padding: 10
     },
     onPress: () => {
       if (!active_market) {
@@ -501,83 +561,95 @@ const TournamentMarket = ({
       }
       onViewAdditionalMarkets(tournament.tournament_id, 'tournament');
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    float: true,
     style: {
-      backgroundColor: _colors.default.shades.white,
       height: 30,
       width: 30,
       borderRadius: 100,
       justifyContent: 'center',
-      alignItems: 'center',
-      ..._styles.view_styles.float
+      alignItems: 'center'
     }
   }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LiquidityIcon, {
-    color: _colors.default.brand.midnight,
+    color: C.text.h1,
     size: 30
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
-      marginLeft: 5
+      marginLeft: 10
     }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    theme: "body_2"
-  }, "Tournament Liquidity"), /*#__PURE__*/_react.default.createElement(_Components.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+    theme: "description"
+  }, "Liquidity"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     size: 12,
-    color: _colors.default.brand.electric,
+    style: {
+      marginTop: 3
+    },
+    color: C.text.highlight,
     weight: "semibold"
-  }, "$", liquidity.toFixed(), " ", open_order_count, " Orders"))) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, "$", liquidity.toFixed(), " ", open_order_count, " Orders"))) : /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       flex: 1
     }
-  }), !market_selector_location ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }), !market_selector_location ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+    float: true,
     style: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: _colors.default.shades.white,
-      borderWidth: 1,
-      borderColor: _colors.default.shades.shade600,
-      borderRadius: 4,
-      padding: 10,
-      ..._styles.view_styles.float
+      marginLeft: 5
     },
     onPress: () => setShowMarkets(!show_markets)
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginRight: 10
     },
     size: 14,
-    color: _colors.default.brand.midnight
+    color: C.text.h1
   }, active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type), /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
-    color: _colors.default.brand.midnight,
+    color: C.text.h1,
     size: 14
-  })), show_markets ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })), show_markets ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
+    float: true,
     style: {
-      ..._styles.view_styles.section,
       position: 'absolute',
       bottom: 5,
       right: 5,
       minWidth: 175
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "header",
     style: {
-      ..._styles.view_styles.section_header,
-      backgroundColor: _colors.default.shades.shade100
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 5,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    theme: "header_2"
-  }, "Select Market")), /*#__PURE__*/_react.default.createElement(_Components.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+    theme: "h2"
+  }, "Select Market")), /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     title: "X",
-    title_weight: "regular",
-    borderRadius: 100,
-    backgroundColor: _colors.default.shades.white,
-    padding: 5,
+    title_color: C.text.action,
+    style: {
+      borderRadius: 100,
+      padding: 5,
+      paddingLeft: 10,
+      paddingRight: 10
+    },
+    type: "close",
     onPress: () => setShowMarkets(false)
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
-      ..._styles.view_styles.section_body,
       padding: 10
     }
   }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {