refactor pokemon info into component

dist/app.css

@@ -264,45 +264,25 @@
   display: flex;
   flex-flow: column nowrap; }
 
-.PokemonExplorer__pokemonName__2Jl9u {
+.PokemonExplorer__container__3LR-_ {
-  margin-bottom: 0; }
-
-.PokemonExplorer__pokemonInfoWrapper__1oqey {
-  margin-bottom: 1rem; }
-
-.PokemonExplorer__pokemonInfoWrapper__1oqey,
-.PokemonExplorer__leaguePokemonRank__2Oq1D {
   display: flex;
   justify-content: space-evenly; }
-  .PokemonExplorer__pokemonInfoWrapper__1oqey .PokemonExplorer__pokemonInfoLeftColumn__2k9b7,
+  .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1,
-  .PokemonExplorer__pokemonInfoWrapper__1oqey .PokemonExplorer__pokemonInfoRightColumn__t82k7,
+  .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
-  .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoLeftColumn__2k9b7,
-  .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoRightColumn__t82k7 {
     display: flex;
     flex-flow: column nowrap;
     flex-basis: 45%;
     align-items: center; }
-  .PokemonExplorer__pokemonInfoWrapper__1oqey .PokemonExplorer__pokemonInfoLeftColumn__2k9b7,
+  .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1 {
-  .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoLeftColumn__2k9b7 {
     text-align: center; }
-  .PokemonExplorer__pokemonInfoWrapper__1oqey .PokemonExplorer__pokemonInfoRightColumn__t82k7,
+  .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
-  .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoRightColumn__t82k7 {
     flex-grow: 1;
     align-items: start; }
 
-.PokemonExplorer__highlight__2x1kW {
-  color: #fff;
-  pointer-events: none; }
-
-.PokemonExplorer__pokemonTypeWrapper__ssJiJ {
-  display: flex;
-  justify-content: center;
-  align-self: stretch; }
-
 .PokemonExplorer__leaguePokemonRank__2Oq1D {
   justify-content: flex-start;
   flex-wrap: wrap; }
-  .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoWraper__1NNut {
+  .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoWrapper__1oqey {
     flex: 1 0 100%;
     display: flex; }
   .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoLeftColumn__2k9b7 {
@@ -310,19 +290,95 @@
   .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonRankValue__11Y0L {
     display: inline; }
 
-.PokemonExplorer__dexHeader__3OvHB {
+.PokemonExplorer__ivsContainer__Jh0Sr {
+  flex: 0 999 auto;
+  display: flex;
+  flex-flow: column nowrap;
+  /* for Firefox */ }
+  .PokemonExplorer__ivsContainer__Jh0Sr .title.PokemonExplorer__ivContainerTitle__3cq4P {
+    display: flex;
+    justify-content: flex-end;
+    background-color: transparent;
+    padding: 0; }
+    .PokemonExplorer__ivsContainer__Jh0Sr .title.PokemonExplorer__ivContainerTitle__3cq4P > * {
+      background-color: #fff; }
+      .PokemonExplorer__ivsContainer__Jh0Sr .title.PokemonExplorer__ivContainerTitle__3cq4P > *:first-child {
+        margin-right: auto;
+        padding: 0 0.5em; }
+      .PokemonExplorer__ivsContainer__Jh0Sr .title.PokemonExplorer__ivContainerTitle__3cq4P > *:last-child {
+        padding-right: 0.5em; }
+  .PokemonExplorer__ivsContainer__Jh0Sr.PokemonExplorer__diplayingIvList__3Ii7D {
+    padding: 1.5rem 0 0; }
+    .PokemonExplorer__ivsContainer__Jh0Sr.PokemonExplorer__diplayingIvList__3Ii7D .title.PokemonExplorer__ivContainerTitle__3cq4P {
+      margin-bottom: 0;
+      margin-right: -8px;
+      margin-left: -8px;
+      padding: 0 2.5rem; }
+
+.PokemonDisplay__highlight__h50BA {
+  color: #fff;
+  pointer-events: none; }
+
+.PokemonDisplay__pokemonInfoWrapper__3AW3e {
+  margin-bottom: 1rem; }
+
+.PokemonDisplay__pokemonInfoLeftColumn__1vugM { }
+
+.PokemonDisplay__pokemonInfoRightColumn__27Q49 { }
+
+.PokemonDisplay__pokemonName__WBKbk {
+  margin-bottom: 0; }
+
+.PokemonDisplay__dexHeader__2HVfr {
   margin-bottom: 0.25rem; }
 
-.PokemonExplorer__formHeader__1vejY {
+.PokemonDisplay__pokemonTypeWrapper__1rJIA {
+  display: flex;
+  justify-content: center;
+  align-self: stretch; }
+
+.PokemonDisplay__formHeader__1pr6M {
   text-transform: uppercase;
   margin-bottom: 0; }
 
-.PokemonExplorer__pokemonBaseStats__IOi6Q {
+.PokemonDisplay__pokemonBaseStats__3UJvn {
   display: flex;
   flex-flow: column nowrap;
   align-items: start;
   align-self: stretch; }
 
+.PokemonExplorer__wrapper__3U9Pu {
+  margin: 0 auto;
+  width: 30rem;
+  display: flex;
+  flex-flow: column nowrap; }
+
+.PokemonExplorer__container__3LR-_ {
+  display: flex;
+  justify-content: space-evenly; }
+  .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1,
+  .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
+    display: flex;
+    flex-flow: column nowrap;
+    flex-basis: 45%;
+    align-items: center; }
+  .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1 {
+    text-align: center; }
+  .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
+    flex-grow: 1;
+    align-items: start; }
+
+.PokemonExplorer__leaguePokemonRank__2Oq1D {
+  justify-content: flex-start;
+  flex-wrap: wrap; }
+  .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoWrapper__1oqey {
+    flex: 1 0 100%;
+    display: flex; }
+  .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoLeftColumn__2k9b7 {
+    align-items: flex-start; }
+  .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonRankValue__11Y0L {
+    display: inline; }
+
 .PokemonExplorer__ivsContainer__Jh0Sr {
   flex: 0 999 auto;
   display: flex;

dist/main-bundle.js

@@ -37880,10 +37880,10 @@ exports.LeagueStatsList = LeagueStatsList;
 
 /***/ }),
 
-/***/ "./src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx":
+/***/ "./src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx":
-/*!*******************************************************************!*\
+/*!******************************************************************!*\
-  !*** ./src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx ***!
+  !*** ./src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx ***!
-  \*******************************************************************/
+  \******************************************************************/
 /*! no static exports found */
 /*! ModuleConcatenation bailout: Module is not an ECMAScript module */
 /***/ (function(module, exports, __webpack_require__) {
@@ -37937,23 +37937,202 @@ var react_1 = __importDefault(__webpack_require__(/*! react */ "./node_modules/r
 
 var classnames_1 = __importDefault(__webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"));
 
+var formatter_1 = __webpack_require__(/*! app/utils/formatter */ "./src/ts/app/utils/formatter.ts");
+
+var StatDisplay_1 = __webpack_require__(/*! ./StatDisplay */ "./src/ts/app/components/PokemonExplorer/StatDisplay.tsx");
+
+var TypeIndicator_1 = __webpack_require__(/*! ./TypeIndicator */ "./src/ts/app/components/PokemonExplorer/TypeIndicator.tsx");
+
+var styles = __importStar(__webpack_require__(/*! ./styles/PokemonDisplay.scss */ "./src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss"));
+
+var PokemonDisplay =
+/*#__PURE__*/
+function (_react_1$default$Comp) {
+  _inherits(PokemonDisplay, _react_1$default$Comp);
+
+  function PokemonDisplay() {
+    _classCallCheck(this, PokemonDisplay);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(PokemonDisplay).apply(this, arguments));
+  }
+
+  _createClass(PokemonDisplay, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          leaguePokemon = _this$props.leaguePokemon,
+          temporaryNavigationIsActive = _this$props.temporaryNavigationIsActive;
+      var dex = formatter_1.formatDexNumber(leaguePokemon.dex);
+      var pokemonInfoLeftColumnCss = classnames_1.default(styles.pokemonInfoLeftColumn, _defineProperty({}, styles.highlight, temporaryNavigationIsActive));
+      var containerCss = classnames_1.default('nes-container', 'with-title');
+      var containerTitleCss = classnames_1.default('title');
+      var baseStatsCss = classnames_1.default(styles.pokemonBaseStats, containerCss);
+      var pokemonIconCss = classnames_1.default('icon', 'pixel', 'sprite', "pokemon-".concat(dex), {
+        normal: formatter_1.Forms.normal.indexOf(leaguePokemon.form) > -1,
+        alola: formatter_1.Forms.alola.indexOf(leaguePokemon.form) > -1,
+        plant: formatter_1.Forms.plant.indexOf(leaguePokemon.form) > -1,
+        sandy: formatter_1.Forms.sandy.indexOf(leaguePokemon.form) > -1,
+        trash: formatter_1.Forms.trash.indexOf(leaguePokemon.form) > -1,
+        'west-sea': formatter_1.Forms.westSea.indexOf(leaguePokemon.form) > -1,
+        'east-sea': formatter_1.Forms.eastSea.indexOf(leaguePokemon.form) > -1,
+        frost: formatter_1.Forms.frost.indexOf(leaguePokemon.form) > -1,
+        fan: formatter_1.Forms.fan.indexOf(leaguePokemon.form) > -1,
+        mow: formatter_1.Forms.mow.indexOf(leaguePokemon.form) > -1,
+        wash: formatter_1.Forms.wash.indexOf(leaguePokemon.form) > -1,
+        heat: formatter_1.Forms.heat.indexOf(leaguePokemon.form) > -1,
+        sky: formatter_1.Forms.sky.indexOf(leaguePokemon.form) > -1,
+        land: formatter_1.Forms.land.indexOf(leaguePokemon.form) > -1,
+        overcast: formatter_1.Forms.overcast.indexOf(leaguePokemon.form) > -1,
+        sunny: formatter_1.Forms.sunny.indexOf(leaguePokemon.form) > -1,
+        rainy: formatter_1.Forms.rainy.indexOf(leaguePokemon.form) > -1,
+        snowy: formatter_1.Forms.snowy.indexOf(leaguePokemon.form) > -1,
+        attack: formatter_1.Forms.attack.indexOf(leaguePokemon.form) > -1,
+        defense: formatter_1.Forms.defense.indexOf(leaguePokemon.form) > -1,
+        speed: formatter_1.Forms.speed.indexOf(leaguePokemon.form) > -1,
+        altered: formatter_1.Forms.altered.indexOf(leaguePokemon.form) > -1,
+        origin: formatter_1.Forms.origin.indexOf(leaguePokemon.form) > -1,
+        fighting: formatter_1.Forms.fighting.indexOf(leaguePokemon.form) > -1,
+        flying: formatter_1.Forms.flying.indexOf(leaguePokemon.form) > -1,
+        poison: formatter_1.Forms.poison.indexOf(leaguePokemon.form) > -1,
+        ground: formatter_1.Forms.ground.indexOf(leaguePokemon.form) > -1,
+        rock: formatter_1.Forms.rock.indexOf(leaguePokemon.form) > -1,
+        bug: formatter_1.Forms.bug.indexOf(leaguePokemon.form) > -1,
+        ghost: formatter_1.Forms.ghost.indexOf(leaguePokemon.form) > -1,
+        steel: formatter_1.Forms.steel.indexOf(leaguePokemon.form) > -1,
+        fire: formatter_1.Forms.fire.indexOf(leaguePokemon.form) > -1,
+        water: formatter_1.Forms.water.indexOf(leaguePokemon.form) > -1,
+        grass: formatter_1.Forms.grass.indexOf(leaguePokemon.form) > -1,
+        electric: formatter_1.Forms.electric.indexOf(leaguePokemon.form) > -1,
+        psychic: formatter_1.Forms.psychic.indexOf(leaguePokemon.form) > -1,
+        ice: formatter_1.Forms.ice.indexOf(leaguePokemon.form) > -1,
+        dragon: formatter_1.Forms.dragon.indexOf(leaguePokemon.form) > -1,
+        dark: formatter_1.Forms.dark.indexOf(leaguePokemon.form) > -1,
+        fairy: formatter_1.Forms.fairy.indexOf(leaguePokemon.form) > -1
+      });
+      var type1 = react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
+        type: leaguePokemon.types.type1
+      });
+      var type2 = null;
+
+      if (leaguePokemon.types.type2) {
+        type2 = react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
+          type: leaguePokemon.types.type2
+        });
+      }
+
+      return react_1.default.createElement("div", {
+        className: styles.pokemonInfoWrapper
+      }, react_1.default.createElement("div", {
+        className: pokemonInfoLeftColumnCss
+      }, react_1.default.createElement("i", {
+        className: pokemonIconCss
+      }), react_1.default.createElement("h4", {
+        className: styles.dexHeader
+      }, "No.", dex), react_1.default.createElement("div", {
+        className: styles.pokemonTypeWrapper
+      }, type1, type2), leaguePokemon.form !== pogo_protos_1.default.Enums.Form.FORM_UNSET && react_1.default.createElement("h6", {
+        className: styles.formHeader
+      }, formatter_1.formatForm(leaguePokemon.form), " Form")), react_1.default.createElement("div", {
+        className: styles.pokemonInfoRightColumn
+      }, react_1.default.createElement("h2", {
+        className: styles.pokemonName
+      }, leaguePokemon.name), react_1.default.createElement("h5", null, leaguePokemon.genus), react_1.default.createElement("section", {
+        className: baseStatsCss
+      }, react_1.default.createElement("h3", {
+        className: containerTitleCss
+      }, "Base Stats"), react_1.default.createElement(StatDisplay_1.StatDisplay, {
+        statLabel: "HP".concat(String.fromCharCode(160)),
+        statValue: leaguePokemon.stats.baseStamina,
+        statRank: leaguePokemon.statsRank.staminaRank
+      }), react_1.default.createElement(StatDisplay_1.StatDisplay, {
+        statLabel: "ATK",
+        statValue: leaguePokemon.stats.baseAttack,
+        statRank: leaguePokemon.statsRank.attackRank
+      }), react_1.default.createElement(StatDisplay_1.StatDisplay, {
+        statLabel: "DEF",
+        statValue: leaguePokemon.stats.baseDefense,
+        statRank: leaguePokemon.statsRank.defenseRank
+      }))));
+    }
+  }]);
+
+  return PokemonDisplay;
+}(react_1.default.Component);
+
+exports.PokemonDisplay = PokemonDisplay;
+
+/***/ }),
+
+/***/ "./src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx":
+/*!*******************************************************************!*\
+  !*** ./src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx ***!
+  \*******************************************************************/
+/*! no static exports found */
+/*! ModuleConcatenation bailout: Module is not an ECMAScript module */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) {
+    if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+  }
+  result["default"] = mod;
+  return result;
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __importDefault(__webpack_require__(/*! react */ "./node_modules/react/index.js"));
+
+var classnames_1 = __importDefault(__webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"));
+
 var League_1 = __webpack_require__(/*! app/models/League */ "./src/ts/app/models/League.ts");
 
 var Pokemon_1 = __webpack_require__(/*! app/models/Pokemon */ "./src/ts/app/models/Pokemon.ts");
 
 var calculator_1 = __webpack_require__(/*! app/utils/calculator */ "./src/ts/app/utils/calculator.ts");
 
-var formatter_1 = __webpack_require__(/*! app/utils/formatter */ "./src/ts/app/utils/formatter.ts");
-
 var IvForm_1 = __webpack_require__(/*! ./IvForm */ "./src/ts/app/components/PokemonExplorer/IvForm.tsx");
 
 var LeagueSelector_1 = __webpack_require__(/*! ./LeagueSelector */ "./src/ts/app/components/PokemonExplorer/LeagueSelector.tsx");
 
 var LeagueStatsList_1 = __webpack_require__(/*! ./LeagueStatsList */ "./src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx");
 
-var StatDisplay_1 = __webpack_require__(/*! ./StatDisplay */ "./src/ts/app/components/PokemonExplorer/StatDisplay.tsx");
+var PokemonDisplay_1 = __webpack_require__(/*! ./PokemonDisplay */ "./src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx");
 
-var TypeIndicator_1 = __webpack_require__(/*! ./TypeIndicator */ "./src/ts/app/components/PokemonExplorer/TypeIndicator.tsx");
+var StatDisplay_1 = __webpack_require__(/*! ./StatDisplay */ "./src/ts/app/components/PokemonExplorer/StatDisplay.tsx");
 
 var styles = __importStar(__webpack_require__(/*! ./styles/PokemonExplorer.scss */ "./src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss"));
 
@@ -38018,8 +38197,7 @@ function (_react_1$default$Comp) {
           handleChangeIndividualValue = _this$props.handleChangeIndividualValue,
           handleMaximizeLevel = _this$props.handleMaximizeLevel;
       var ivDisplayMode = this.state.ivDisplayMode;
-      var rankedPokemon = null;
+      var rankedPokemon = null; // default to first pokemon (should be S tier)
-      var dex = formatter_1.formatDexNumber(leaguePokemon.dex); // default to first pokemon (should be S tier)
 
       if (individualValues.level === null && individualValues.ivHp === null && individualValues.ivAtk === null && individualValues.ivDef === null) {
         rankedPokemon = leaguePokemon.pvp[activeLeague][0]; // a full spec'd pokemon has been entered
@@ -38063,103 +38241,22 @@ function (_react_1$default$Comp) {
           defenseStatRank = _PokemonExplorer$calc.defenseStatRank;
 
       var wrapperCss = classnames_1.default(styles.wrapper, className);
-      var pokemonInfoLeftColumnCss = classnames_1.default(styles.pokemonInfoLeftColumn, _defineProperty({}, styles.highlight, temporaryNavigationIsActive));
       var containerCss = classnames_1.default('nes-container', 'with-title');
       var containerTitleCss = classnames_1.default('title');
       var ivContainerTitleCss = classnames_1.default(containerTitleCss, styles.ivContainerTitle);
-      var baseStatsCss = classnames_1.default(styles.pokemonBaseStats, containerCss);
       var formContainerCss = classnames_1.default(containerCss, styles.ivsContainer, 'form', _defineProperty({}, styles.diplayingIvList, ivDisplayMode === IvDisplayMode.LIST));
-      var leaugeRankCss = classnames_1.default(styles.leaguePokemonRank, containerCss, {
+      var leaugeRankCss = classnames_1.default(styles.container, styles.leaguePokemonRank, containerCss, {
         'with-title': false
       });
-      var pokemonIconCss = classnames_1.default('icon', 'pixel', 'sprite', "pokemon-".concat(dex), {
+      var leagueLeftColumnCss = classnames_1.default(styles.leftColumn, styles.pokemonInfoLeftColumn);
-        normal: formatter_1.Forms.normal.indexOf(leaguePokemon.form) > -1,
+      var leagueRightColumnCss = classnames_1.default(styles.rightColumn);
-        alola: formatter_1.Forms.alola.indexOf(leaguePokemon.form) > -1,
+      var pokemonInfoWrapper = classnames_1.default(styles.container, styles.pokemonInfoWrapper);
-        plant: formatter_1.Forms.plant.indexOf(leaguePokemon.form) > -1,
-        sandy: formatter_1.Forms.sandy.indexOf(leaguePokemon.form) > -1,
-        trash: formatter_1.Forms.trash.indexOf(leaguePokemon.form) > -1,
-        'west-sea': formatter_1.Forms.westSea.indexOf(leaguePokemon.form) > -1,
-        'east-sea': formatter_1.Forms.eastSea.indexOf(leaguePokemon.form) > -1,
-        frost: formatter_1.Forms.frost.indexOf(leaguePokemon.form) > -1,
-        fan: formatter_1.Forms.fan.indexOf(leaguePokemon.form) > -1,
-        mow: formatter_1.Forms.mow.indexOf(leaguePokemon.form) > -1,
-        wash: formatter_1.Forms.wash.indexOf(leaguePokemon.form) > -1,
-        heat: formatter_1.Forms.heat.indexOf(leaguePokemon.form) > -1,
-        sky: formatter_1.Forms.sky.indexOf(leaguePokemon.form) > -1,
-        land: formatter_1.Forms.land.indexOf(leaguePokemon.form) > -1,
-        overcast: formatter_1.Forms.overcast.indexOf(leaguePokemon.form) > -1,
-        sunny: formatter_1.Forms.sunny.indexOf(leaguePokemon.form) > -1,
-        rainy: formatter_1.Forms.rainy.indexOf(leaguePokemon.form) > -1,
-        snowy: formatter_1.Forms.snowy.indexOf(leaguePokemon.form) > -1,
-        attack: formatter_1.Forms.attack.indexOf(leaguePokemon.form) > -1,
-        defense: formatter_1.Forms.defense.indexOf(leaguePokemon.form) > -1,
-        speed: formatter_1.Forms.speed.indexOf(leaguePokemon.form) > -1,
-        altered: formatter_1.Forms.altered.indexOf(leaguePokemon.form) > -1,
-        origin: formatter_1.Forms.origin.indexOf(leaguePokemon.form) > -1,
-        fighting: formatter_1.Forms.fighting.indexOf(leaguePokemon.form) > -1,
-        flying: formatter_1.Forms.flying.indexOf(leaguePokemon.form) > -1,
-        poison: formatter_1.Forms.poison.indexOf(leaguePokemon.form) > -1,
-        ground: formatter_1.Forms.ground.indexOf(leaguePokemon.form) > -1,
-        rock: formatter_1.Forms.rock.indexOf(leaguePokemon.form) > -1,
-        bug: formatter_1.Forms.bug.indexOf(leaguePokemon.form) > -1,
-        ghost: formatter_1.Forms.ghost.indexOf(leaguePokemon.form) > -1,
-        steel: formatter_1.Forms.steel.indexOf(leaguePokemon.form) > -1,
-        fire: formatter_1.Forms.fire.indexOf(leaguePokemon.form) > -1,
-        water: formatter_1.Forms.water.indexOf(leaguePokemon.form) > -1,
-        grass: formatter_1.Forms.grass.indexOf(leaguePokemon.form) > -1,
-        electric: formatter_1.Forms.electric.indexOf(leaguePokemon.form) > -1,
-        psychic: formatter_1.Forms.psychic.indexOf(leaguePokemon.form) > -1,
-        ice: formatter_1.Forms.ice.indexOf(leaguePokemon.form) > -1,
-        dragon: formatter_1.Forms.dragon.indexOf(leaguePokemon.form) > -1,
-        dark: formatter_1.Forms.dark.indexOf(leaguePokemon.form) > -1,
-        fairy: formatter_1.Forms.fairy.indexOf(leaguePokemon.form) > -1
-      });
-      var type1 = react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
-        type: leaguePokemon.types.type1
-      });
-      var type2 = null;
-
-      if (leaguePokemon.types.type2) {
-        type2 = react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
-          type: leaguePokemon.types.type2
-        });
-      }
-
       return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("div", {
         className: wrapperCss
-      }, react_1.default.createElement("div", {
+      }, react_1.default.createElement(PokemonDisplay_1.PokemonDisplay, {
-        className: styles.pokemonInfoWrapper
+        leaguePokemon: leaguePokemon,
-      }, react_1.default.createElement("div", {
+        temporaryNavigationIsActive: temporaryNavigationIsActive
-        className: pokemonInfoLeftColumnCss
+      }), react_1.default.createElement(LeagueSelector_1.LeagueSelector, {
-      }, react_1.default.createElement("i", {
-        className: pokemonIconCss
-      }), react_1.default.createElement("h4", {
-        className: styles.dexHeader
-      }, "No.", dex), react_1.default.createElement("div", {
-        className: styles.pokemonTypeWrapper
-      }, type1, type2), leaguePokemon.form !== pogo_protos_1.default.Enums.Form.FORM_UNSET && react_1.default.createElement("h6", {
-        className: styles.formHeader
-      }, formatter_1.formatForm(leaguePokemon.form), " Form")), react_1.default.createElement("div", {
-        className: styles.pokemonInfoRightColumn
-      }, react_1.default.createElement("h2", {
-        className: styles.pokemonName
-      }, leaguePokemon.name), react_1.default.createElement("h5", null, leaguePokemon.genus), react_1.default.createElement("section", {
-        className: baseStatsCss
-      }, react_1.default.createElement("h3", {
-        className: containerTitleCss
-      }, "Base Stats"), react_1.default.createElement(StatDisplay_1.StatDisplay, {
-        statLabel: "HP".concat(String.fromCharCode(160)),
-        statValue: leaguePokemon.stats.baseStamina,
-        statRank: leaguePokemon.statsRank.staminaRank
-      }), react_1.default.createElement(StatDisplay_1.StatDisplay, {
-        statLabel: "ATK",
-        statValue: leaguePokemon.stats.baseAttack,
-        statRank: leaguePokemon.statsRank.attackRank
-      }), react_1.default.createElement(StatDisplay_1.StatDisplay, {
-        statLabel: "DEF",
-        statValue: leaguePokemon.stats.baseDefense,
-        statRank: leaguePokemon.statsRank.defenseRank
-      })))), react_1.default.createElement(LeagueSelector_1.LeagueSelector, {
         activeLeague: activeLeague,
         handleLeagueSelect: this.handleLeagueSelect
       }), react_1.default.createElement("section", {
@@ -38194,9 +38291,9 @@ function (_react_1$default$Comp) {
       }, react_1.default.createElement("h5", {
         className: containerTitleCss
       }, "Rank"), react_1.default.createElement("div", {
-        className: styles.pokemonInfoWraper
+        className: pokemonInfoWrapper
       }, react_1.default.createElement("div", {
-        className: styles.pokemonInfoLeftColumn
+        className: leagueLeftColumnCss
       }, rankedPokemon === null || rankedPokemon.cp > League_1.MaxCpByLeague[activeLeague] && react_1.default.createElement("div", null, react_1.default.createElement("h1", {
         className: styles.pokemonRankValue
       }, "N/A")), rankedPokemon !== null && rankedPokemon.cp <= League_1.MaxCpByLeague[activeLeague] && react_1.default.createElement("div", null, react_1.default.createElement("h1", {
@@ -38204,7 +38301,7 @@ function (_react_1$default$Comp) {
       }, rankedGrade), " Rank"), react_1.default.createElement("div", null, "CP ", react_1.default.createElement("h1", {
         className: styles.pokemonRankValue
       }, rankedCp))), react_1.default.createElement("div", {
-        className: styles.pokemonInfoRightColumn
+        className: leagueRightColumnCss
       }, react_1.default.createElement(StatDisplay_1.StatDisplay, {
         statLabel: "HP".concat(String.fromCharCode(160)),
         statValue: rankedHp,
@@ -38961,6 +39058,19 @@ module.exports = {"selectList":"LeagueStatsList__selectList__1FBIL","listItem":"
 
 /***/ }),
 
+/***/ "./src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss":
+/*!**************************************************************************!*\
+  !*** ./src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss ***!
+  \**************************************************************************/
+/*! no static exports found */
+/*! ModuleConcatenation bailout: Module is not an ECMAScript module */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"highlight":"PokemonDisplay__highlight__h50BA PokemonApp__highlight__1zywH","pokemonInfoWrapper":"PokemonDisplay__pokemonInfoWrapper__3AW3e PokemonExplorer__container__3LR-_","pokemonInfoLeftColumn":"PokemonDisplay__pokemonInfoLeftColumn__1vugM PokemonExplorer__leftColumn__1qHS1","pokemonInfoRightColumn":"PokemonDisplay__pokemonInfoRightColumn__27Q49 PokemonExplorer__rightColumn__KvY23","pokemonName":"PokemonDisplay__pokemonName__WBKbk","dexHeader":"PokemonDisplay__dexHeader__2HVfr","pokemonTypeWrapper":"PokemonDisplay__pokemonTypeWrapper__1rJIA","formHeader":"PokemonDisplay__formHeader__1pr6M","pokemonBaseStats":"PokemonDisplay__pokemonBaseStats__3UJvn"};
+
+/***/ }),
+
 /***/ "./src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss":
 /*!***************************************************************************!*\
   !*** ./src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss ***!
@@ -38970,7 +39080,7 @@ module.exports = {"selectList":"LeagueStatsList__selectList__1FBIL","listItem":"
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"wrapper":"PokemonExplorer__wrapper__3U9Pu","pokemonName":"PokemonExplorer__pokemonName__2Jl9u","pokemonInfoWrapper":"PokemonExplorer__pokemonInfoWrapper__1oqey","leaguePokemonRank":"PokemonExplorer__leaguePokemonRank__2Oq1D","pokemonInfoLeftColumn":"PokemonExplorer__pokemonInfoLeftColumn__2k9b7","pokemonInfoRightColumn":"PokemonExplorer__pokemonInfoRightColumn__t82k7","highlight":"PokemonExplorer__highlight__2x1kW PokemonApp__highlight__1zywH","pokemonTypeWrapper":"PokemonExplorer__pokemonTypeWrapper__ssJiJ","pokemonInfoWraper":"PokemonExplorer__pokemonInfoWraper__1NNut","pokemonRankValue":"PokemonExplorer__pokemonRankValue__11Y0L","dexHeader":"PokemonExplorer__dexHeader__3OvHB","formHeader":"PokemonExplorer__formHeader__1vejY","pokemonBaseStats":"PokemonExplorer__pokemonBaseStats__IOi6Q","ivsContainer":"PokemonExplorer__ivsContainer__Jh0Sr","ivContainerTitle":"PokemonExplorer__ivContainerTitle__3cq4P","diplayingIvList":"PokemonExplorer__diplayingIvList__3Ii7D"};
+module.exports = {"wrapper":"PokemonExplorer__wrapper__3U9Pu","container":"PokemonExplorer__container__3LR-_","leftColumn":"PokemonExplorer__leftColumn__1qHS1","rightColumn":"PokemonExplorer__rightColumn__KvY23","leaguePokemonRank":"PokemonExplorer__leaguePokemonRank__2Oq1D","pokemonInfoWrapper":"PokemonExplorer__pokemonInfoWrapper__1oqey","pokemonInfoLeftColumn":"PokemonExplorer__pokemonInfoLeftColumn__2k9b7","pokemonRankValue":"PokemonExplorer__pokemonRankValue__11Y0L","ivsContainer":"PokemonExplorer__ivsContainer__Jh0Sr","ivContainerTitle":"PokemonExplorer__ivContainerTitle__3cq4P","diplayingIvList":"PokemonExplorer__diplayingIvList__3Ii7D"};
 
 /***/ }),
 

src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx

@@ -0,0 +1,142 @@
+import POGOProtos from 'pogo-protos';
+
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { IPokemon } from 'app/models/Pokemon';
+
+import { formatDexNumber, formatForm, Forms } from 'app/utils/formatter';
+
+import { StatDisplay } from './StatDisplay';
+import { TypeIndicator } from './TypeIndicator';
+
+import * as styles from './styles/PokemonDisplay.scss';
+
+export interface IPokemonDisplay {
+    leaguePokemon : IPokemon;
+    temporaryNavigationIsActive : boolean;
+}
+
+export class PokemonDisplay extends React.Component<IPokemonDisplay> {
+    public render() {
+        const {
+            leaguePokemon,
+            temporaryNavigationIsActive
+        } = this.props;
+
+        const dex = formatDexNumber(leaguePokemon.dex);
+
+        const pokemonInfoLeftColumnCss = classNames(
+            styles.pokemonInfoLeftColumn,
+            {
+                [styles.highlight]: temporaryNavigationIsActive
+            }
+        );
+
+        const containerCss = classNames(
+            'nes-container',
+            'with-title',
+        );
+        const containerTitleCss = classNames(
+            'title',
+        );
+        const baseStatsCss = classNames(
+            styles.pokemonBaseStats,
+            containerCss,
+        );
+
+        const pokemonIconCss = classNames(
+            'icon',
+            'pixel',
+            'sprite',
+            `pokemon-${dex}`,
+            {
+                normal: Forms.normal.indexOf(leaguePokemon.form) > -1,
+                alola: Forms.alola.indexOf(leaguePokemon.form) > -1,
+                plant: Forms.plant.indexOf(leaguePokemon.form) > -1,
+                sandy: Forms.sandy.indexOf(leaguePokemon.form) > -1,
+                trash: Forms.trash.indexOf(leaguePokemon.form) > -1,
+                'west-sea': Forms.westSea.indexOf(leaguePokemon.form) > -1,
+                'east-sea': Forms.eastSea.indexOf(leaguePokemon.form) > -1,
+                frost: Forms.frost.indexOf(leaguePokemon.form) > -1,
+                fan: Forms.fan.indexOf(leaguePokemon.form) > -1,
+                mow: Forms.mow.indexOf(leaguePokemon.form) > -1,
+                wash: Forms.wash.indexOf(leaguePokemon.form) > -1,
+                heat: Forms.heat.indexOf(leaguePokemon.form) > -1,
+                sky: Forms.sky.indexOf(leaguePokemon.form) > -1,
+                land: Forms.land.indexOf(leaguePokemon.form) > -1,
+                overcast: Forms.overcast.indexOf(leaguePokemon.form) > -1,
+                sunny: Forms.sunny.indexOf(leaguePokemon.form) > -1,
+                rainy: Forms.rainy.indexOf(leaguePokemon.form) > -1,
+                snowy: Forms.snowy.indexOf(leaguePokemon.form) > -1,
+                attack: Forms.attack.indexOf(leaguePokemon.form) > -1,
+                defense: Forms.defense.indexOf(leaguePokemon.form) > -1,
+                speed: Forms.speed.indexOf(leaguePokemon.form) > -1,
+                altered: Forms.altered.indexOf(leaguePokemon.form) > -1,
+                origin: Forms.origin.indexOf(leaguePokemon.form) > -1,
+                fighting: Forms.fighting.indexOf(leaguePokemon.form) > -1,
+                flying: Forms.flying.indexOf(leaguePokemon.form) > -1,
+                poison: Forms.poison.indexOf(leaguePokemon.form) > -1,
+                ground: Forms.ground.indexOf(leaguePokemon.form) > -1,
+                rock: Forms.rock.indexOf(leaguePokemon.form) > -1,
+                bug: Forms.bug.indexOf(leaguePokemon.form) > -1,
+                ghost: Forms.ghost.indexOf(leaguePokemon.form) > -1,
+                steel: Forms.steel.indexOf(leaguePokemon.form) > -1,
+                fire: Forms.fire.indexOf(leaguePokemon.form) > -1,
+                water: Forms.water.indexOf(leaguePokemon.form) > -1,
+                grass: Forms.grass.indexOf(leaguePokemon.form) > -1,
+                electric: Forms.electric.indexOf(leaguePokemon.form) > -1,
+                psychic: Forms.psychic.indexOf(leaguePokemon.form) > -1,
+                ice: Forms.ice.indexOf(leaguePokemon.form) > -1,
+                dragon: Forms.dragon.indexOf(leaguePokemon.form) > -1,
+                dark: Forms.dark.indexOf(leaguePokemon.form) > -1,
+                fairy: Forms.fairy.indexOf(leaguePokemon.form) > -1,
+            },
+        );
+
+        const type1 = <TypeIndicator type={ leaguePokemon.types.type1 } />;
+        let type2 : JSX.Element | null = null;
+        if (leaguePokemon.types.type2) {
+            type2 = <TypeIndicator type={ leaguePokemon.types.type2 } />;
+        }
+
+        return (
+            <div className={ styles.pokemonInfoWrapper }>
+                <div className={ pokemonInfoLeftColumnCss }>
+                    <i className={ pokemonIconCss } />
+                    <h4 className={ styles.dexHeader }>No.{ dex }</h4>
+                    <div className={ styles.pokemonTypeWrapper }>
+                        { type1 }
+                        { type2 }
+                    </div>
+                    { leaguePokemon.form !== POGOProtos.Enums.Form.FORM_UNSET &&
+                        <h6 className={ styles.formHeader }>{ formatForm(leaguePokemon.form) } Form</h6>
+                    }
+                </div>
+                <div className={ styles.pokemonInfoRightColumn }>
+                    <h2 className={ styles.pokemonName }>{ leaguePokemon.name }</h2>
+                    <h5>{ leaguePokemon.genus }</h5>
+                    <section className={ baseStatsCss }>
+                        <h3 className={ containerTitleCss }>Base Stats</h3>
+                        <StatDisplay
+                            statLabel={ `HP${ String.fromCharCode(160) }` }
+                            statValue={ leaguePokemon.stats.baseStamina }
+                            statRank={ leaguePokemon.statsRank.staminaRank }
+                        />
+                        <StatDisplay
+                            statLabel="ATK"
+                            statValue={ leaguePokemon.stats.baseAttack }
+                            statRank={ leaguePokemon.statsRank.attackRank }
+                        />
+                        <StatDisplay
+                            statLabel="DEF"
+                            statValue={ leaguePokemon.stats.baseDefense }
+                            statRank={ leaguePokemon.statsRank.defenseRank }
+                        />
+                    </section>
+                </div>
+            </div>
+        );
+    }
+}

src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx

@@ -1,21 +1,18 @@
-import POGOProtos from 'pogo-protos';
-
 import React from 'react';
 
 import classNames from 'classnames';
 
 import { IBestWorstStats, ILeaguePokemon, League, MaxCpByLeague } from 'app/models/League';
-import { Grade, IStats, } from 'app/models/Pokemon';
+import { Grade, IStats } from 'app/models/Pokemon';
 import { calculateCp, calculateStatAtLevel } from 'app/utils/calculator';
-import { formatDexNumber, formatForm, Forms } from 'app/utils/formatter';
 
 import { IIndividualValues, IndividualValueKey } from './types';
 
 import { IvForm } from './IvForm';
 import { LeagueSelector } from './LeagueSelector';
 import { LeagueStatsList } from './LeagueStatsList';
+import { PokemonDisplay } from './PokemonDisplay';
 import { StatDisplay } from './StatDisplay';
-import { TypeIndicator } from './TypeIndicator';
 
 import * as styles from './styles/PokemonExplorer.scss';
 
@@ -89,8 +86,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
 
         let rankedPokemon : IStats | null = null;
 
-        const dex = formatDexNumber(leaguePokemon.dex);
-
         // default to first pokemon (should be S tier)
         if (individualValues.level === null &&
             individualValues.ivHp === null &&
@@ -151,12 +146,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             styles.wrapper,
             className
         );
-        const pokemonInfoLeftColumnCss = classNames(
+
-            styles.pokemonInfoLeftColumn,
-            {
-                [styles.highlight]: temporaryNavigationIsActive
-            }
-        );
         const containerCss = classNames(
             'nes-container',
             'with-title',
@@ -168,10 +158,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             containerTitleCss,
             styles.ivContainerTitle
         );
-        const baseStatsCss = classNames(
+
-            styles.pokemonBaseStats,
-            containerCss,
-        );
         const formContainerCss = classNames(
             containerCss,
             styles.ivsContainer,
@@ -181,106 +168,32 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             }
         );
         const leaugeRankCss = classNames(
+            styles.container,
             styles.leaguePokemonRank,
             containerCss,
             {
                 'with-title': false
             },
         );
-
+        const leagueLeftColumnCss = classNames(
-        const pokemonIconCss = classNames(
+            styles.leftColumn,
-            'icon',
+            styles.pokemonInfoLeftColumn
-            'pixel',
+        );
-            'sprite',
+        const leagueRightColumnCss = classNames(
-            `pokemon-${dex}`,
+            styles.rightColumn,
-            {
+        );
-                normal: Forms.normal.indexOf(leaguePokemon.form) > -1,
+        const pokemonInfoWrapper = classNames(
-                alola: Forms.alola.indexOf(leaguePokemon.form) > -1,
+            styles.container,
-                plant: Forms.plant.indexOf(leaguePokemon.form) > -1,
+            styles.pokemonInfoWrapper
-                sandy: Forms.sandy.indexOf(leaguePokemon.form) > -1,
-                trash: Forms.trash.indexOf(leaguePokemon.form) > -1,
-                'west-sea': Forms.westSea.indexOf(leaguePokemon.form) > -1,
-                'east-sea': Forms.eastSea.indexOf(leaguePokemon.form) > -1,
-                frost: Forms.frost.indexOf(leaguePokemon.form) > -1,
-                fan: Forms.fan.indexOf(leaguePokemon.form) > -1,
-                mow: Forms.mow.indexOf(leaguePokemon.form) > -1,
-                wash: Forms.wash.indexOf(leaguePokemon.form) > -1,
-                heat: Forms.heat.indexOf(leaguePokemon.form) > -1,
-                sky: Forms.sky.indexOf(leaguePokemon.form) > -1,
-                land: Forms.land.indexOf(leaguePokemon.form) > -1,
-                overcast: Forms.overcast.indexOf(leaguePokemon.form) > -1,
-                sunny: Forms.sunny.indexOf(leaguePokemon.form) > -1,
-                rainy: Forms.rainy.indexOf(leaguePokemon.form) > -1,
-                snowy: Forms.snowy.indexOf(leaguePokemon.form) > -1,
-                attack: Forms.attack.indexOf(leaguePokemon.form) > -1,
-                defense: Forms.defense.indexOf(leaguePokemon.form) > -1,
-                speed: Forms.speed.indexOf(leaguePokemon.form) > -1,
-                altered: Forms.altered.indexOf(leaguePokemon.form) > -1,
-                origin: Forms.origin.indexOf(leaguePokemon.form) > -1,
-                fighting: Forms.fighting.indexOf(leaguePokemon.form) > -1,
-                flying: Forms.flying.indexOf(leaguePokemon.form) > -1,
-                poison: Forms.poison.indexOf(leaguePokemon.form) > -1,
-                ground: Forms.ground.indexOf(leaguePokemon.form) > -1,
-                rock: Forms.rock.indexOf(leaguePokemon.form) > -1,
-                bug: Forms.bug.indexOf(leaguePokemon.form) > -1,
-                ghost: Forms.ghost.indexOf(leaguePokemon.form) > -1,
-                steel: Forms.steel.indexOf(leaguePokemon.form) > -1,
-                fire: Forms.fire.indexOf(leaguePokemon.form) > -1,
-                water: Forms.water.indexOf(leaguePokemon.form) > -1,
-                grass: Forms.grass.indexOf(leaguePokemon.form) > -1,
-                electric: Forms.electric.indexOf(leaguePokemon.form) > -1,
-                psychic: Forms.psychic.indexOf(leaguePokemon.form) > -1,
-                ice: Forms.ice.indexOf(leaguePokemon.form) > -1,
-                dragon: Forms.dragon.indexOf(leaguePokemon.form) > -1,
-                dark: Forms.dark.indexOf(leaguePokemon.form) > -1,
-                fairy: Forms.fairy.indexOf(leaguePokemon.form) > -1,
-            },
         );
-
-        const type1 = <TypeIndicator type={ leaguePokemon.types.type1 } />;
-        let type2 : JSX.Element | null = null;
-        if (leaguePokemon.types.type2) {
-            type2 = <TypeIndicator type={ leaguePokemon.types.type2 } />;
-        }
 
         return (
             <React.Fragment>
                 <div className={ wrapperCss }>
-                    <div className={ styles.pokemonInfoWrapper }>
+                    <PokemonDisplay
-                        <div className={ pokemonInfoLeftColumnCss }>
+                        leaguePokemon={ leaguePokemon }
-                            <i className={ pokemonIconCss } />
+                        temporaryNavigationIsActive={ temporaryNavigationIsActive }
-                            <h4 className={ styles.dexHeader }>No.{ dex }</h4>
+                    />
-                            <div className={ styles.pokemonTypeWrapper }>
-                                { type1 }
-                                { type2 }
-                            </div>
-                            { leaguePokemon.form !== POGOProtos.Enums.Form.FORM_UNSET &&
-                                <h6 className={ styles.formHeader }>{ formatForm(leaguePokemon.form) } Form</h6>
-                            }
-                        </div>
-                        <div className={ styles.pokemonInfoRightColumn }>
-                            <h2 className={ styles.pokemonName }>{ leaguePokemon.name }</h2>
-                            <h5>{ leaguePokemon.genus }</h5>
-                            <section className={ baseStatsCss }>
-                                <h3 className={ containerTitleCss }>Base Stats</h3>
-                                <StatDisplay
-                                    statLabel={ `HP${ String.fromCharCode(160) }` }
-                                    statValue={ leaguePokemon.stats.baseStamina }
-                                    statRank={ leaguePokemon.statsRank.staminaRank }
-                                />
-                                <StatDisplay
-                                    statLabel="ATK"
-                                    statValue={ leaguePokemon.stats.baseAttack }
-                                    statRank={ leaguePokemon.statsRank.attackRank }
-                                />
-                                <StatDisplay
-                                    statLabel="DEF"
-                                    statValue={ leaguePokemon.stats.baseDefense }
-                                    statRank={ leaguePokemon.statsRank.defenseRank }
-                                />
-                            </section>
-                        </div>
-                    </div>
                     <LeagueSelector
                         activeLeague={ activeLeague }
                         handleLeagueSelect={ this.handleLeagueSelect }
@@ -327,8 +240,8 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                     </section>
                     <section className={ leaugeRankCss }>
                         <h5 className={ containerTitleCss }>Rank</h5>
-                        <div className={ styles.pokemonInfoWraper }>
+                        <div className={ pokemonInfoWrapper }>
-                            <div className={ styles.pokemonInfoLeftColumn }>
+                            <div className={ leagueLeftColumnCss }>
                                 { rankedPokemon === null || rankedPokemon.cp > MaxCpByLeague[activeLeague] &&
                                     <div><h1 className={ styles.pokemonRankValue }>N/A</h1></div>
                                 }
@@ -337,7 +250,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                                 }
                                 <div>CP <h1 className={ styles.pokemonRankValue }>{ rankedCp }</h1></div>
                             </div>
-                            <div className={ styles.pokemonInfoRightColumn }>
+                            <div className={ leagueRightColumnCss }>
                                 <StatDisplay
                                     statLabel={ `HP${ String.fromCharCode(160) }` }
                                     statValue={ rankedHp }

src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss

@@ -0,0 +1,46 @@
+@import '~styles/Variables.scss';
+
+.highlight {
+  composes: highlight from '../../../styles/PokemonApp.scss';
+  color: $main-active-font-color;
+  pointer-events: none;
+}
+
+.pokemonInfoWrapper {
+  composes: container from './PokemonExplorer.scss';
+  margin-bottom: 1rem;
+}
+
+.pokemonInfoLeftColumn {
+  composes: leftColumn from './PokemonExplorer.scss';
+}
+
+.pokemonInfoRightColumn {
+  composes: rightColumn from './PokemonExplorer.scss';
+}
+
+.pokemonName {
+  margin-bottom: 0;
+}
+
+.dexHeader {
+  margin-bottom: 0.25rem;
+}
+
+.pokemonTypeWrapper {
+  display: flex;
+  justify-content: center;
+  align-self: stretch;
+}
+
+.formHeader {
+  text-transform: uppercase;
+  margin-bottom: 0;
+}
+
+.pokemonBaseStats {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: start;
+  align-self: stretch;
+}

src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const dexHeader: string;
+export const formHeader: string;
+export const highlight: string;
+export const pokemonBaseStats: string;
+export const pokemonInfoLeftColumn: string;
+export const pokemonInfoRightColumn: string;
+export const pokemonInfoWrapper: string;
+export const pokemonName: string;
+export const pokemonTypeWrapper: string;

src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss

@@ -8,54 +8,33 @@
   flex-flow: column nowrap;
 }
 
-.pokemonName {
+.container {
-  margin-bottom: 0;
-}
-
-.pokemonInfoWrapper {
-  margin-bottom: 1rem;
-}
-
-.pokemonInfoWrapper,
-.leaguePokemonRank {
   display: flex;
   justify-content: space-evenly;
 
-  .pokemonInfoLeftColumn,
+  .leftColumn,
-  .pokemonInfoRightColumn {
+  .rightColumn {
     display: flex;
     flex-flow: column nowrap;
     flex-basis: 45%;
     align-items: center;
   }
 
-  .pokemonInfoLeftColumn {
+  .leftColumn {
     text-align: center;
   }
 
-  .pokemonInfoRightColumn {
+  .rightColumn {
     flex-grow: 1;
     align-items: start;
   }
 }
 
-.highlight {
-  composes: highlight from '../../../styles/PokemonApp.scss';
-  color: $main-active-font-color;
-  pointer-events: none;
-}
-
-.pokemonTypeWrapper {
-  display: flex;
-  justify-content: center;
-  align-self: stretch;
-}
-
 .leaguePokemonRank {
   justify-content: flex-start;
   flex-wrap: wrap;
 
-  .pokemonInfoWraper {
+  .pokemonInfoWrapper {
     flex: 1 0 100%;
     display: flex;
   }
@@ -69,22 +48,6 @@
   }
 }
 
-.dexHeader {
-  margin-bottom: 0.25rem;
-}
-
-.formHeader {
-  text-transform: uppercase;
-  margin-bottom: 0;
-}
-
-.pokemonBaseStats {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: start;
-  align-self: stretch;
-}
-
 .ivsContainer {
   flex: 0 999 auto;
   display: flex;

src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts

@@ -1,18 +1,13 @@
 // This file is automatically generated.
 // Please do not change this file!
-export const dexHeader: string;
+export const container: string;
 export const diplayingIvList: string;
-export const formHeader: string;
-export const highlight: string;
 export const ivContainerTitle: string;
 export const ivsContainer: string;
 export const leaguePokemonRank: string;
-export const pokemonBaseStats: string;
+export const leftColumn: string;
 export const pokemonInfoLeftColumn: string;
-export const pokemonInfoRightColumn: string;
-export const pokemonInfoWraper: string;
 export const pokemonInfoWrapper: string;
-export const pokemonName: string;
 export const pokemonRankValue: string;
-export const pokemonTypeWrapper: string;
+export const rightColumn: string;
 export const wrapper: string;