refactor pokemon explorer for nav

dist/app.css

@@ -50,57 +50,78 @@
   background-color: #000;
   opacity: 0.7; }
 
-.nes-field.is-inline .IvForm__ivInput__xR5IU {
+.PokemonApp__displayWrapper__2PiN5 {
+  margin: 0 auto;
+  width: 30rem;
+  display: flex;
+  flex-flow: column nowrap; }
+
+.PokemonApp__container__MsUHy {
+  display: flex;
+  justify-content: space-evenly; }
+  .PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,
+  .PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
+    display: flex;
+    flex-flow: column nowrap;
+    flex-basis: 45%;
+    align-items: center; }
+  .PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L {
+    text-align: center; }
+  .PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
+    flex-grow: 1;
+    align-items: start; }
+
+.nes-field.is-inline .IvForm__ivInput__1KM34 {
   width: 4.25em;
   padding-left: 0.45em;
   padding-right: 0.25em; }
-  .nes-field.is-inline .IvForm__ivInput__xR5IU.IvForm__levelInput__1n6We {
+  .nes-field.is-inline .IvForm__ivInput__1KM34.IvForm__levelInput__1cOcl {
     width: 6.5em; }
 
-.nes-field.is-inline.IvForm__fieldRow__3HcBN {
+.nes-field.is-inline.IvForm__fieldRow__2b-ft {
   justify-content: space-between; }
-  .nes-field.is-inline.IvForm__fieldRow__3HcBN label {
+  .nes-field.is-inline.IvForm__fieldRow__2b-ft label {
     flex-grow: 0;
     margin-left: 1em; }
-    .nes-field.is-inline.IvForm__fieldRow__3HcBN label:first-child {
+    .nes-field.is-inline.IvForm__fieldRow__2b-ft label:first-child {
       margin-left: 0; }
 
-.LeagueSelector__wrapper__fxmRz {
+.LeagueSelector__wrapper__3k27A {
   font-size: 0.8em;
   display: flex;
   justify-content: space-between;
   margin: -0.5rem 0 0.5rem 0; }
 
-.LeagueSelector__leagueRadioLabel__3aPV9 {
+.LeagueSelector__leagueRadioLabel__23hqE {
   display: flex;
   align-items: center; }
 
-.LeagueSelector__leagueRadio__3hY7B {
+.LeagueSelector__leagueRadio__26fWw {
   display: none; }
 
-.LeagueStatsList__selectList__1FBIL {
+.LeagueStatsList__selectList__S5RTA {
   flex-grow: 1;
   /* for Firefox */
   display: flex;
   overflow: hidden; }
-  .LeagueStatsList__selectList__1FBIL > * {
+  .LeagueStatsList__selectList__S5RTA > * {
     flex: 1;
     overflow: auto; }
 
-.LeagueStatsList__listItem__oCOvr {
+.LeagueStatsList__listItem__1pPhh {
   position: relative;
   display: flex;
   justify-content: space-evenly; }
-  .LeagueStatsList__listItem__oCOvr.list-item.active::before, .LeagueStatsList__listItem__oCOvr.list-item:hover::before {
+  .LeagueStatsList__listItem__1pPhh.list-item.active::before, .LeagueStatsList__listItem__1pPhh.list-item:hover::before {
     top: 8px;
     left: 10px; }
 
-.StatDisplay__baseStatRow__1B60A {
+.StatDisplay__baseStatRow__3_Kiv {
   display: flex;
   align-items: center; }
-  .StatDisplay__baseStatRow__1B60A > * {
+  .StatDisplay__baseStatRow__3_Kiv > * {
     flex-shrink: 0; }
-  .StatDisplay__baseStatRow__1B60A > progress {
+  .StatDisplay__baseStatRow__3_Kiv > progress {
     flex-shrink: 1;
     margin: 0 0 0 1em;
     width: 5em;
@@ -108,170 +129,6 @@
     border-image-outset: 1;
     padding: 2px; }
 
-.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; }
-
-.LeagueIvExplorer__container__3GKct {
-  margin-bottom: 1rem; }
-
-.LeagueIvExplorer__leftColumn__3au0L { }
-
-.LeagueIvExplorer__rightColumn__1eyvh { }
-
-.LeagueIvExplorer__leaguePokemonRank__3bjyU {
-  justify-content: flex-start;
-  flex-wrap: wrap; }
-  .LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonInfoWrapper__3WVsh {
-    flex: 1 0 100%;
-    display: flex; }
-  .LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__leftColumn__3au0L {
-    align-items: flex-start; }
-  .LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonRankValue__3k3ih {
-    display: inline; }
-
-.LeagueIvExplorer__ivsContainer__31sfb {
-  flex: 0 999 auto;
-  display: flex;
-  flex-flow: column nowrap;
-  /* for Firefox */ }
-  .LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX {
-    display: flex;
-    justify-content: flex-end;
-    background-color: transparent;
-    padding: 0; }
-    .LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX > * {
-      background-color: #fff; }
-      .LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX > *:first-child {
-        margin-right: auto;
-        padding: 0 0.5em; }
-      .LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX > *:last-child {
-        padding-right: 0.5em; }
-  .LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8 {
-    padding: 1.5rem 0 0; }
-    .LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8 .title.LeagueIvExplorer__ivContainerTitle__3Z3eX {
-      margin-bottom: 0;
-      margin-right: -8px;
-      margin-left: -8px;
-      padding: 0 2.5rem; }
-
-.TypeIndicator__pokemonType__3MOQI {
-  text-transform: uppercase; }
-  .TypeIndicator__pokemonType__3MOQI.nes-container {
-    text-align: center;
-    padding: 0;
-    font-size: 0.7em;
-    line-height: 0.9;
-    flex-basis: 50%;
-    margin: 0.5rem 7px 11px; }
-  .TypeIndicator__pokemonType__3MOQI.normal {
-    color: #fff;
-    background-color: #a8a878; }
-    .TypeIndicator__pokemonType__3MOQI.normal::after {
-      box-shadow: 0 -4px #a8a878, 0 -8px, 4px 0 #a8a878, 4px -4px, 8px 0, 0 4px #a8a878, 0 8px, -4px 0 #a8a878, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.fighting {
-    color: #fff;
-    background-color: #c03028; }
-    .TypeIndicator__pokemonType__3MOQI.fighting::after {
-      box-shadow: 0 -4px #c03028, 0 -8px, 4px 0 #c03028, 4px -4px, 8px 0, 0 4px #c03028, 0 8px, -4px 0 #c03028, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.flying {
-    color: #fff;
-    background-color: #a890f0; }
-    .TypeIndicator__pokemonType__3MOQI.flying::after {
-      box-shadow: 0 -4px #a890f0, 0 -8px, 4px 0 #a890f0, 4px -4px, 8px 0, 0 4px #a890f0, 0 8px, -4px 0 #a890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.poison {
-    color: #fff;
-    background-color: #a040a0; }
-    .TypeIndicator__pokemonType__3MOQI.poison::after {
-      box-shadow: 0 -4px #a040a0, 0 -8px, 4px 0 #a040a0, 4px -4px, 8px 0, 0 4px #a040a0, 0 8px, -4px 0 #a040a0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.ground {
-    color: #fff;
-    background-color: #e0c068; }
-    .TypeIndicator__pokemonType__3MOQI.ground::after {
-      box-shadow: 0 -4px #e0c068, 0 -8px, 4px 0 #e0c068, 4px -4px, 8px 0, 0 4px #e0c068, 0 8px, -4px 0 #e0c068, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.rock {
-    color: #fff;
-    background-color: #b8a038; }
-    .TypeIndicator__pokemonType__3MOQI.rock::after {
-      box-shadow: 0 -4px #b8a038, 0 -8px, 4px 0 #b8a038, 4px -4px, 8px 0, 0 4px #b8a038, 0 8px, -4px 0 #b8a038, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.bug {
-    color: #fff;
-    background-color: #a8b820; }
-    .TypeIndicator__pokemonType__3MOQI.bug::after {
-      box-shadow: 0 -4px #a8b820, 0 -8px, 4px 0 #a8b820, 4px -4px, 8px 0, 0 4px #a8b820, 0 8px, -4px 0 #a8b820, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.ghost {
-    color: #fff;
-    background-color: #705898; }
-    .TypeIndicator__pokemonType__3MOQI.ghost::after {
-      box-shadow: 0 -4px #705898, 0 -8px, 4px 0 #705898, 4px -4px, 8px 0, 0 4px #705898, 0 8px, -4px 0 #705898, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.steel {
-    color: #fff;
-    background-color: #b8b8d0; }
-    .TypeIndicator__pokemonType__3MOQI.steel::after {
-      box-shadow: 0 -4px #b8b8d0, 0 -8px, 4px 0 #b8b8d0, 4px -4px, 8px 0, 0 4px #b8b8d0, 0 8px, -4px 0 #b8b8d0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.fire {
-    color: #fff;
-    background-color: #f08030; }
-    .TypeIndicator__pokemonType__3MOQI.fire::after {
-      box-shadow: 0 -4px #f08030, 0 -8px, 4px 0 #f08030, 4px -4px, 8px 0, 0 4px #f08030, 0 8px, -4px 0 #f08030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.water {
-    color: #fff;
-    background-color: #6890f0; }
-    .TypeIndicator__pokemonType__3MOQI.water::after {
-      box-shadow: 0 -4px #6890f0, 0 -8px, 4px 0 #6890f0, 4px -4px, 8px 0, 0 4px #6890f0, 0 8px, -4px 0 #6890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.grass {
-    color: #fff;
-    background-color: #78c850; }
-    .TypeIndicator__pokemonType__3MOQI.grass::after {
-      box-shadow: 0 -4px #78c850, 0 -8px, 4px 0 #78c850, 4px -4px, 8px 0, 0 4px #78c850, 0 8px, -4px 0 #78c850, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.electric {
-    color: #fff;
-    background-color: #f8d030; }
-    .TypeIndicator__pokemonType__3MOQI.electric::after {
-      box-shadow: 0 -4px #f8d030, 0 -8px, 4px 0 #f8d030, 4px -4px, 8px 0, 0 4px #f8d030, 0 8px, -4px 0 #f8d030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.psychic {
-    color: #fff;
-    background-color: #f85888; }
-    .TypeIndicator__pokemonType__3MOQI.psychic::after {
-      box-shadow: 0 -4px #f85888, 0 -8px, 4px 0 #f85888, 4px -4px, 8px 0, 0 4px #f85888, 0 8px, -4px 0 #f85888, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.ice {
-    color: #fff;
-    background-color: #98d8d8; }
-    .TypeIndicator__pokemonType__3MOQI.ice::after {
-      box-shadow: 0 -4px #98d8d8, 0 -8px, 4px 0 #98d8d8, 4px -4px, 8px 0, 0 4px #98d8d8, 0 8px, -4px 0 #98d8d8, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.dragon {
-    color: #fff;
-    background-color: #6f35fc; }
-    .TypeIndicator__pokemonType__3MOQI.dragon::after {
-      box-shadow: 0 -4px #6f35fc, 0 -8px, 4px 0 #6f35fc, 4px -4px, 8px 0, 0 4px #6f35fc, 0 8px, -4px 0 #6f35fc, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.dark {
-    color: #fff;
-    background-color: #705848; }
-    .TypeIndicator__pokemonType__3MOQI.dark::after {
-      box-shadow: 0 -4px #705848, 0 -8px, 4px 0 #705848, 4px -4px, 8px 0, 0 4px #705848, 0 8px, -4px 0 #705848, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-  .TypeIndicator__pokemonType__3MOQI.fairy {
-    color: #fff;
-    background-color: #ee99ac; }
-    .TypeIndicator__pokemonType__3MOQI.fairy::after {
-      box-shadow: 0 -4px #ee99ac, 0 -8px, 4px 0 #ee99ac, 4px -4px, 8px 0, 0 4px #ee99ac, 0 8px, -4px 0 #ee99ac, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
-
 .PokemonApp__wrapper__3ZEoC {
   display: flex;
   flex-flow: column nowrap;
@@ -322,121 +179,201 @@
   background-color: #000;
   opacity: 0.7; }
 
-.PokemonDisplay__highlight__h50BA {
+.PokemonApp__displayWrapper__2PiN5 {
-  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; }
-
-.PokemonDisplay__pokemonTypeWrapper__1rJIA {
-  display: flex;
-  justify-content: center;
-  align-self: stretch; }
-
-.PokemonDisplay__formHeader__1pr6M {
-  text-transform: uppercase;
-  margin-bottom: 0; }
-
-.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-_ {
+.PokemonApp__container__MsUHy {
   display: flex;
   justify-content: space-evenly; }
-  .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1,
+  .PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,
-  .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
+  .PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
     display: flex;
     flex-flow: column nowrap;
     flex-basis: 45%;
     align-items: center; }
-  .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1 {
+  .PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L {
     text-align: center; }
-  .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
+  .PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
     flex-grow: 1;
     align-items: start; }
 
-.TypeEffectiveDisplay__multiplierWrapper__14os7 {
+.LeagueIvExplorer__container__23wLQ {
-  position: relative;
+  margin-bottom: 1rem; }
-  padding-top: 6px;
-  padding-right: 6px; }
-  .TypeEffectiveDisplay__multiplierWrapper__14os7 > * {
-    position: absolute; }
-  .TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(1) {
-    position: inherit;
-    z-index: 3; }
-  .TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(2) {
-    top: 0;
-    left: 6px;
-    z-index: 2; }
-  .TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(3) {
-    left: 12px;
-    z-index: 1; }
-  .TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(4) {
-    left: 18px;
-    z-index: 0; }
-  .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 {
-    padding-top: 12px;
-    padding-right: 12px; }
-    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 :nth-child(3) {
-      top: 0; }
-    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 :nth-child(2) {
-      top: 6px; }
-  .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa {
-    padding-top: 18px;
-    padding-right: 18px; }
-    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(4) {
-      top: 0; }
-    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(3) {
-      top: 6px; }
-    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(2) {
-      top: 12px; }
 
-.TypeEffectiveDisplay__wrapper__1FFIj {
+.LeagueIvExplorer__leftColumn__1HzQ- { }
-  margin: 0 1em; }
+
-  .TypeEffectiveDisplay__wrapper__1FFIj * + h4 {
+.LeagueIvExplorer__rightColumn__rwhPb { }
-    margin-top: 1em; }
+
-  .TypeEffectiveDisplay__wrapper__1FFIj h4 p {
+.LeagueIvExplorer__leaguePokemonRank__25epF {
-    font-size: 0.7em;
+  justify-content: flex-start;
-    color: #b6b6b6;
+  flex-wrap: wrap; }
-    margin: 0; }
+  .LeagueIvExplorer__leaguePokemonRank__25epF .LeagueIvExplorer__pokemonInfoWrapper__3Zqjc {
-  .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY {
+    flex: 1 0 100%;
+    display: flex; }
+  .LeagueIvExplorer__leaguePokemonRank__25epF .LeagueIvExplorer__leftColumn__1HzQ- {
+    align-items: flex-start; }
+  .LeagueIvExplorer__leaguePokemonRank__25epF .LeagueIvExplorer__pokemonRankValue__2bxg3 {
+    display: inline; }
+
+.LeagueIvExplorer__ivsContainer__7fSaL {
+  flex: 0 999 auto;
   display: flex;
-    flex-flow: row wrap;
+  flex-flow: column nowrap;
-    align-items: end; }
+  /* for Firefox */ }
-    .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > * {
+  .LeagueIvExplorer__ivsContainer__7fSaL .title.LeagueIvExplorer__ivContainerTitle__3P9q4 {
-      margin-right: 14px;
+    display: flex;
-      height: 0%; }
+    justify-content: flex-end;
-    .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7 {
+    background-color: transparent;
-      width: auto;
+    padding: 0; }
-      margin-right: 2px; }
+    .LeagueIvExplorer__ivsContainer__7fSaL .title.LeagueIvExplorer__ivContainerTitle__3P9q4 > * {
-      .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 {
+      background-color: #fff; }
-        margin-right: -4px; }
+      .LeagueIvExplorer__ivsContainer__7fSaL .title.LeagueIvExplorer__ivContainerTitle__3P9q4 > *:first-child {
-      .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa {
+        margin-right: auto;
-        margin-right: -10px; }
+        padding: 0 0.5em; }
-    .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > *,
+      .LeagueIvExplorer__ivsContainer__7fSaL .title.LeagueIvExplorer__ivContainerTitle__3P9q4 > *:last-child {
-    .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7 > * {
+        padding-right: 0.5em; }
-      flex-basis: unset;
+  .LeagueIvExplorer__ivsContainer__7fSaL.LeagueIvExplorer__diplayingIvList__3vrin {
-      width: 6.75rem; }
+    padding: 1.5rem 0 0; }
+    .LeagueIvExplorer__ivsContainer__7fSaL.LeagueIvExplorer__diplayingIvList__3vrin .title.LeagueIvExplorer__ivContainerTitle__3P9q4 {
+      margin-bottom: 0;
+      margin-right: -8px;
+      margin-left: -8px;
+      padding: 0 2.5rem; }
+
+.TypeIndicator__pokemonType__1rrg9 {
+  text-transform: uppercase; }
+  .TypeIndicator__pokemonType__1rrg9.nes-container {
+    text-align: center;
+    padding: 0;
+    font-size: 0.7em;
+    line-height: 0.9;
+    flex-basis: 50%;
+    margin: 0.5rem 7px 11px; }
+  .TypeIndicator__pokemonType__1rrg9.normal {
+    color: #fff;
+    background-color: #a8a878; }
+    .TypeIndicator__pokemonType__1rrg9.normal::after {
+      box-shadow: 0 -4px #a8a878, 0 -8px, 4px 0 #a8a878, 4px -4px, 8px 0, 0 4px #a8a878, 0 8px, -4px 0 #a8a878, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.fighting {
+    color: #fff;
+    background-color: #c03028; }
+    .TypeIndicator__pokemonType__1rrg9.fighting::after {
+      box-shadow: 0 -4px #c03028, 0 -8px, 4px 0 #c03028, 4px -4px, 8px 0, 0 4px #c03028, 0 8px, -4px 0 #c03028, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.flying {
+    color: #fff;
+    background-color: #a890f0; }
+    .TypeIndicator__pokemonType__1rrg9.flying::after {
+      box-shadow: 0 -4px #a890f0, 0 -8px, 4px 0 #a890f0, 4px -4px, 8px 0, 0 4px #a890f0, 0 8px, -4px 0 #a890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.poison {
+    color: #fff;
+    background-color: #a040a0; }
+    .TypeIndicator__pokemonType__1rrg9.poison::after {
+      box-shadow: 0 -4px #a040a0, 0 -8px, 4px 0 #a040a0, 4px -4px, 8px 0, 0 4px #a040a0, 0 8px, -4px 0 #a040a0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.ground {
+    color: #fff;
+    background-color: #e0c068; }
+    .TypeIndicator__pokemonType__1rrg9.ground::after {
+      box-shadow: 0 -4px #e0c068, 0 -8px, 4px 0 #e0c068, 4px -4px, 8px 0, 0 4px #e0c068, 0 8px, -4px 0 #e0c068, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.rock {
+    color: #fff;
+    background-color: #b8a038; }
+    .TypeIndicator__pokemonType__1rrg9.rock::after {
+      box-shadow: 0 -4px #b8a038, 0 -8px, 4px 0 #b8a038, 4px -4px, 8px 0, 0 4px #b8a038, 0 8px, -4px 0 #b8a038, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.bug {
+    color: #fff;
+    background-color: #a8b820; }
+    .TypeIndicator__pokemonType__1rrg9.bug::after {
+      box-shadow: 0 -4px #a8b820, 0 -8px, 4px 0 #a8b820, 4px -4px, 8px 0, 0 4px #a8b820, 0 8px, -4px 0 #a8b820, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.ghost {
+    color: #fff;
+    background-color: #705898; }
+    .TypeIndicator__pokemonType__1rrg9.ghost::after {
+      box-shadow: 0 -4px #705898, 0 -8px, 4px 0 #705898, 4px -4px, 8px 0, 0 4px #705898, 0 8px, -4px 0 #705898, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.steel {
+    color: #fff;
+    background-color: #b8b8d0; }
+    .TypeIndicator__pokemonType__1rrg9.steel::after {
+      box-shadow: 0 -4px #b8b8d0, 0 -8px, 4px 0 #b8b8d0, 4px -4px, 8px 0, 0 4px #b8b8d0, 0 8px, -4px 0 #b8b8d0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.fire {
+    color: #fff;
+    background-color: #f08030; }
+    .TypeIndicator__pokemonType__1rrg9.fire::after {
+      box-shadow: 0 -4px #f08030, 0 -8px, 4px 0 #f08030, 4px -4px, 8px 0, 0 4px #f08030, 0 8px, -4px 0 #f08030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.water {
+    color: #fff;
+    background-color: #6890f0; }
+    .TypeIndicator__pokemonType__1rrg9.water::after {
+      box-shadow: 0 -4px #6890f0, 0 -8px, 4px 0 #6890f0, 4px -4px, 8px 0, 0 4px #6890f0, 0 8px, -4px 0 #6890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.grass {
+    color: #fff;
+    background-color: #78c850; }
+    .TypeIndicator__pokemonType__1rrg9.grass::after {
+      box-shadow: 0 -4px #78c850, 0 -8px, 4px 0 #78c850, 4px -4px, 8px 0, 0 4px #78c850, 0 8px, -4px 0 #78c850, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.electric {
+    color: #fff;
+    background-color: #f8d030; }
+    .TypeIndicator__pokemonType__1rrg9.electric::after {
+      box-shadow: 0 -4px #f8d030, 0 -8px, 4px 0 #f8d030, 4px -4px, 8px 0, 0 4px #f8d030, 0 8px, -4px 0 #f8d030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.psychic {
+    color: #fff;
+    background-color: #f85888; }
+    .TypeIndicator__pokemonType__1rrg9.psychic::after {
+      box-shadow: 0 -4px #f85888, 0 -8px, 4px 0 #f85888, 4px -4px, 8px 0, 0 4px #f85888, 0 8px, -4px 0 #f85888, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.ice {
+    color: #fff;
+    background-color: #98d8d8; }
+    .TypeIndicator__pokemonType__1rrg9.ice::after {
+      box-shadow: 0 -4px #98d8d8, 0 -8px, 4px 0 #98d8d8, 4px -4px, 8px 0, 0 4px #98d8d8, 0 8px, -4px 0 #98d8d8, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.dragon {
+    color: #fff;
+    background-color: #6f35fc; }
+    .TypeIndicator__pokemonType__1rrg9.dragon::after {
+      box-shadow: 0 -4px #6f35fc, 0 -8px, 4px 0 #6f35fc, 4px -4px, 8px 0, 0 4px #6f35fc, 0 8px, -4px 0 #6f35fc, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.dark {
+    color: #fff;
+    background-color: #705848; }
+    .TypeIndicator__pokemonType__1rrg9.dark::after {
+      box-shadow: 0 -4px #705848, 0 -8px, 4px 0 #705848, 4px -4px, 8px 0, 0 4px #705848, 0 8px, -4px 0 #705848, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+  .TypeIndicator__pokemonType__1rrg9.fairy {
+    color: #fff;
+    background-color: #ee99ac; }
+    .TypeIndicator__pokemonType__1rrg9.fairy::after {
+      box-shadow: 0 -4px #ee99ac, 0 -8px, 4px 0 #ee99ac, 4px -4px, 8px 0, 0 4px #ee99ac, 0 8px, -4px 0 #ee99ac, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
+
+.PokemonDisplay__highlight__2zbxz {
+  color: #fff;
+  pointer-events: none; }
+
+.PokemonDisplay__pokemonInfoWrapper__1gaDq {
+  margin-bottom: 1rem; }
+
+.PokemonDisplay__pokemonInfoLeftColumn__22kLA { }
+
+.PokemonDisplay__pokemonInfoRightColumn__3TFUR { }
+
+.PokemonDisplay__pokemonName__2XDXE {
+  margin-bottom: 0; }
+
+.PokemonDisplay__dexHeader___Uki8 {
+  margin-bottom: 0.25rem; }
+
+.PokemonDisplay__pokemonTypeWrapper__2GdkI {
+  display: flex;
+  justify-content: center;
+  align-self: stretch; }
+
+.PokemonDisplay__formHeader__2EgEf {
+  text-transform: uppercase;
+  margin-bottom: 0; }
+
+.PokemonDisplay__pokemonBaseStats__e699B {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: start;
+  align-self: stretch; }
 
 .PokemonSelectList__leftPanel__2ktnA {
   font-size: 0.8rem;
@@ -498,5 +435,69 @@
 .PokemonSelectList__form__VIw8Q {
   flex: 0 1 100%; }
 
+.TypeEffectiveDisplay__multiplierWrapper__1E9zx {
+  position: relative;
+  z-index: 0;
+  padding-top: 6px;
+  padding-right: 6px; }
+  .TypeEffectiveDisplay__multiplierWrapper__1E9zx > * {
+    position: absolute; }
+  .TypeEffectiveDisplay__multiplierWrapper__1E9zx :nth-child(1) {
+    position: inherit;
+    z-index: 3; }
+  .TypeEffectiveDisplay__multiplierWrapper__1E9zx :nth-child(2) {
+    top: 0;
+    left: 6px;
+    z-index: 2; }
+  .TypeEffectiveDisplay__multiplierWrapper__1E9zx :nth-child(3) {
+    left: 12px;
+    z-index: 1; }
+  .TypeEffectiveDisplay__multiplierWrapper__1E9zx :nth-child(4) {
+    left: 18px;
+    z-index: 0; }
+  .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX3__3LBbd {
+    padding-top: 12px;
+    padding-right: 12px; }
+    .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX3__3LBbd :nth-child(3) {
+      top: 0; }
+    .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX3__3LBbd :nth-child(2) {
+      top: 6px; }
+  .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza {
+    padding-top: 18px;
+    padding-right: 18px; }
+    .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza :nth-child(4) {
+      top: 0; }
+    .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza :nth-child(3) {
+      top: 6px; }
+    .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza :nth-child(2) {
+      top: 12px; }
+
+.TypeEffectiveDisplay__wrapper__1DgN_ {
+  margin: 0 1em; }
+  .TypeEffectiveDisplay__wrapper__1DgN_ * + h4 {
+    margin-top: 1em; }
+  .TypeEffectiveDisplay__wrapper__1DgN_ h4 p {
+    font-size: 0.7em;
+    color: #b6b6b6;
+    margin: 0; }
+  .TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: end; }
+    .TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n > * {
+      margin-right: 14px;
+      height: 0%; }
+    .TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n .TypeEffectiveDisplay__multiplierWrapper__1E9zx {
+      width: auto;
+      margin-right: 2px; }
+      .TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX3__3LBbd {
+        margin-right: -4px; }
+      .TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza {
+        margin-right: -10px; }
+    .TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n > *,
+    .TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n .TypeEffectiveDisplay__multiplierWrapper__1E9zx > * {
+      flex-basis: unset;
+      width: 6.75rem; }
+
 
 /*# sourceMappingURL=main.tmp.css.map*/

src/ts/app/PokemonApp.tsx

@@ -8,23 +8,22 @@ import classNames from 'classnames';
 
 import { League } from 'app/models/League';
 
-import { appReducers } from './index';
+import { appReducers } from 'app/index';
 
-import * as ActionsPokemonExplorer from './components/PokemonExplorer/actions';
+import * as ActionsPokemonExplorer from 'app/actions';
-import * as ActionsPokemonSelectList from './components/PokemonSelectList/actions';
+import * as ActionsPokemonSelectList from 'app/components/PokemonSelectList/actions';
-import { IPokemonAppDispatch } from './types';
+import { IndividualValueKey, IPokemonAppDispatch } from 'app/types';
 
-import { IndividualValueKey } from './components/PokemonExplorer/types';
+import { Footer } from 'app/components/Footer';
-
+import { Header } from 'app/components/Header';
-import { Footer } from './components/Footer';
+import { LeagueIvExplorer } from 'app/components/LeagueIvExplorer';
-import { Header } from './components/Header';
+import { PokemonDisplay } from 'app/components/PokemonDisplay';
-import { PokemonExplorer } from './components/PokemonExplorer/PokemonExplorer';
+import { PokemonSelectList } from 'app/components/PokemonSelectList/PokemonSelectList';
-import { TypeEffectiveDisplay } from './components/PokemonExplorer/TypeEffectiveDisplay';
+import { TypeEffectiveDisplay } from 'app/components/TypeEffectiveDisplay';
-import { PokemonSelectList } from './components/PokemonSelectList/PokemonSelectList';
 
 import { appendQueryString, getCurrentQueryStringVlaues } from 'app/utils/navigation';
 
-import * as styles from './styles/PokemonApp.scss';
+import * as styles from 'app/styles/PokemonApp.scss';
 
 type PokemonAppProps = ReturnType<typeof appReducers>;
 
@@ -33,8 +32,11 @@ interface IConnectedPokemonAppProps extends PokemonAppProps, IPokemonAppDispatch
     location : RouteComponentProps['location'];
 }
 
+type Navigation = 'pokedex';
+type SubNavigation = 'pvp' | 'types' | 'moves';
 interface IState {
-    activeNavigation : 'pokedex' | 'pvp' | 'types' | 'moves' | null;
+    activeNavigation : Navigation | null;
+    widgets : { [ key in SubNavigation ] : boolean };
 }
 
 class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
@@ -44,6 +46,11 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
 
         this.state = {
             activeNavigation: null,
+            widgets: {
+                pvp: true,
+                types: false,
+                moves: false,
+            },
         };
     }
 
@@ -93,7 +100,8 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             leaguePokemon,
         } = this.props.pokemonExplorerState;
         const {
-            activeNavigation
+            activeNavigation,
+            widgets,
         } = this.state;
 
         const isOverlayShown = activeNavigation === 'pokedex';
@@ -109,6 +117,10 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             styles.leftNavigation,
         );
 
+        const displayWrapperCss = classNames(
+            styles.displayWrapper,
+        );
+
         const iconCss = classNames(
             'icon',
             'pixel',
@@ -132,36 +144,36 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             iconCss,
             'pvp',
             {
-                active: activeNavigation === 'pvp',
+                active: widgets.pvp,
             }
         );
         const pvpButtonCss = classNames(
             {
-                [styles.activeNavigationButton]: activeNavigation === 'pvp',
+                [styles.activeNavigationButton]: widgets.pvp,
             }
         );
         const badgeCss = classNames(
             iconCss,
             'badge',
             {
-                active: activeNavigation === 'types',
+                active: widgets.types,
             }
         );
         const badgeButtonCss = classNames(
             {
-                [styles.activeNavigationButton]: activeNavigation === 'types',
+                [styles.activeNavigationButton]: widgets.types,
             }
         );
         const tmCss = classNames(
             iconCss,
             'tm',
             {
-                active: activeNavigation === 'moves',
+                active: widgets.moves,
             }
         );
         const tmButtonCss = classNames(
             {
-                [styles.activeNavigationButton]: activeNavigation === 'moves',
+                [styles.activeNavigationButton]: widgets.moves,
             }
         );
 
@@ -169,19 +181,25 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             <div className={ wrapperCss }>
                 <Header />
                 <div className={ styles.body }>
+                    <div className={ displayWrapperCss }>
                         { leaguePokemon !== null &&
-                        <PokemonExplorer
+                            <PokemonDisplay
+                                leaguePokemon={ leaguePokemon }
                                 temporaryNavigationIsActive={ isOverlayShown }
-                            isLoading={ this.props.pokemonExplorerState.isLoading }
+                            />
+                        }
+                        { widgets.pvp && leaguePokemon !== null &&
+                            <LeagueIvExplorer
                                 activeLeague={ league }
                                 leaguePokemon={ leaguePokemon }
                                 individualValues={ individualValues }
                                 handleChangeIndividualValue={ this.handleChangeIndividualValue }
                                 handleMaximizeLevel={ this.handleMaximizeLevel }
-                            handleChangeLeague={ this.handleChangeLeagueNavigation }
+                                handleChangeLeague={ this.handleChangeLeague }
                             />
                         }
-                    { activeNavigation === 'types' && leaguePokemon !== null &&
+                    </div>
+                    { widgets.types && leaguePokemon !== null &&
                         <TypeEffectiveDisplay
                             effectiveness={ leaguePokemon.effectiveness }
                             pokemonName={ leaguePokemon.name }
@@ -189,9 +207,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
                     }
                     <div className={ leftNavCss }>
                         <button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
-                        <button className={ pvpButtonCss } onClick={ this.handleTypesClick }><i className={ pvpCss } /></button>
+                        <button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
                         <button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
-                        <button className={ tmButtonCss } onClick={ this.handleTypesClick }><i className={ tmCss } /></button>
+                        <button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
                     </div>
                     { isOverlayShown &&
                         <div className={ styles.overlay } onClick={ this.handleOverlayClick } />
@@ -225,9 +243,33 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
         });
     }
 
-    private readonly handleTypesClick = () => {
+    private readonly handlePvpClick = () => {
+        const widgets = this.state.widgets;
         this.setState({
-            activeNavigation: this.state.activeNavigation !== 'types' ? 'types' : null,
+            widgets: {
+                ...widgets,
+                pvp: !widgets.pvp
+            }
+        });
+    }
+
+    private readonly handleTypesClick = () => {
+        const widgets = this.state.widgets;
+        this.setState({
+            widgets: {
+                ...widgets,
+                types: !widgets.types
+            }
+        });
+    }
+
+    private readonly handleMovesClick = () => {
+        const widgets = this.state.widgets;
+        this.setState({
+            widgets: {
+                ...widgets,
+                moves: !widgets.moves
+            }
         });
     }
 

src/ts/app/actions.ts

@@ -1,7 +1,6 @@
 import { action } from 'typesafe-actions';
 
-import { ThunkResult } from 'app/types';
+import { PokemonExplorerActionTypes, ThunkResult } from 'app/types';
-import { PokemonExplorerActionTypes } from './types';
 
 import { calculateMaxLevelForLeague } from 'app/utils/calculator';
 

src/ts/app/components/Footer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import * as styles from '../styles/PokemonApp.scss';
+import * as styles from 'app/styles/PokemonApp.scss';
 
 interface IFooterProps {}
 

src/ts/app/components/Header.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 import classNames from 'classnames';
 
-import * as styles from '../styles/PokemonApp.scss';
+import * as styles from 'app/styles/PokemonApp.scss';
 
 interface IHeaderProps {}
 

src/ts/app/components/IvForm.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { IIndividualValues, IndividualValueKey } from './types';
+import { IIndividualValues, IndividualValueKey } from '../types';
 
-import * as styles from './styles/IvForm.scss';
+import * as styles from 'app/styles/IvForm.scss';
 
 export interface IIvFormProps {
     ivs : IIndividualValues;

src/ts/app/components/LeagueIvExplorer.tsx

@@ -6,14 +6,14 @@ import { IBestWorstStats, ILeaguePokemon, League, MaxCpByLeague } from 'app/mode
 import { Grade, IStats } from 'app/models/Pokemon';
 import { calculateCp, calculateStatAtLevel } from 'app/utils/calculator';
 
-import { IIndividualValues, IndividualValueKey } from './types';
+import { IIndividualValues, IndividualValueKey } from 'app/types';
 
 import { IvForm } from './IvForm';
 import { LeagueSelector } from './LeagueSelector';
 import { LeagueStatsList } from './LeagueStatsList';
 import { StatDisplay } from './StatDisplay';
 
-import * as styles from './styles/LeagueIvExplorer.scss';
+import * as styles from 'app/styles/LeagueIvExplorer.scss';
 
 export interface ILeagueIvExplorerProps {
     activeLeague : League;

src/ts/app/components/LeagueSelector.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { League, LeagueLabels } from 'app/models/League';
 
-import * as styles from './styles/LeagueSelector.scss';
+import * as styles from 'app/styles/LeagueSelector.scss';
 
 export interface ILeagueSelectorProps {
     activeLeague : League;

src/ts/app/components/LeagueStatsList.tsx

@@ -7,9 +7,9 @@ import { FixedSizeList } from 'react-window';
 import classNames from 'classnames';
 
 import { Grade, IStats } from 'app/models/Pokemon';
-import { IIndividualValues } from './types';
+import { IIndividualValues } from 'app/types';
 
-import * as styles from './styles/LeagueStatsList.scss';
+import * as styles from 'app/styles/LeagueStatsList.scss';
 
 export interface ILeagueStatsListProps {
     activePokemonId : POGOProtos.Enums.PokemonId;

src/ts/app/components/PokemonDisplay.tsx

@@ -11,7 +11,7 @@ import { formatDexNumber, formatForm, Forms } from 'app/utils/formatter';
 import { StatDisplay } from './StatDisplay';
 import { TypeIndicator } from './TypeIndicator';
 
-import * as styles from './styles/PokemonDisplay.scss';
+import * as styles from 'app/styles/PokemonDisplay.scss';
 
 export interface IPokemonDisplay {
     leaguePokemon : IPokemon;

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

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { ILeagueIvExplorerProps, LeagueIvExplorer } from './LeagueIvExplorer';
-import { PokemonDisplay } from './PokemonDisplay';
-
-import * as styles from './styles/PokemonExplorer.scss';
-
-export interface IPokemonExplorerProps extends ILeagueIvExplorerProps {
-    temporaryNavigationIsActive : boolean;
-    className? : string;
-    isLoading : boolean;
-}
-
-export class PokemonExplorer extends React.Component<IPokemonExplorerProps> {
-
-    public render() {
-        const {
-            temporaryNavigationIsActive,
-            className,
-            activeLeague,
-            individualValues,
-            leaguePokemon,
-            handleChangeLeague,
-            handleChangeIndividualValue,
-            handleMaximizeLevel,
-        } = this.props;
-
-        const wrapperCss = classNames(
-            styles.wrapper,
-            className
-        );
-
-        return (
-            <React.Fragment>
-                <div className={ wrapperCss }>
-                    <PokemonDisplay
-                        leaguePokemon={ leaguePokemon }
-                        temporaryNavigationIsActive={ temporaryNavigationIsActive }
-                    />
-                    <LeagueIvExplorer
-                        activeLeague={ activeLeague }
-                        leaguePokemon={ leaguePokemon }
-                        individualValues={ individualValues }
-                        handleChangeIndividualValue={ handleChangeIndividualValue }
-                        handleMaximizeLevel={ handleMaximizeLevel }
-                        handleChangeLeague={ handleChangeLeague }
-                    />
-                </div>
-            </React.Fragment>
-        );
-    }
-}

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

@@ -1,31 +0,0 @@
-@import '~styles/Variables.scss';
-
-.wrapper {
-  margin: 0 auto;
-  // flex-basis: 30rem;
-  width: 30rem;
-  display: flex;
-  flex-flow: column nowrap;
-}
-
-.container {
-  display: flex;
-  justify-content: space-evenly;
-
-  .leftColumn,
-  .rightColumn {
-    display: flex;
-    flex-flow: column nowrap;
-    flex-basis: 45%;
-    align-items: center;
-  }
-
-  .leftColumn {
-    text-align: center;
-  }
-
-  .rightColumn {
-    flex-grow: 1;
-    align-items: start;
-  }
-}

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

@@ -1,6 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-export const container: string;
-export const leftColumn: string;
-export const rightColumn: string;
-export const wrapper: string;

src/ts/app/components/PokemonExplorer/types.ts

@@ -1,29 +0,0 @@
-import { ILeaguePokemon, League } from 'app/models/League';
-import { IMaxStats } from 'app/models/Pokemon';
-
-export type IndividualValueKey = 'level' | 'hp' | 'atk' | 'def';
-export interface IIndividualValues {
-    level : number | null;
-    ivHp : number | null;
-    ivAtk : number | null;
-    ivDef : number | null;
-}
-
-export interface IPokemonExplorerState {
-    isLoading : boolean;
-    leaguePokemon : ILeaguePokemon | null;
-    maxPossibleStats : IMaxStats;
-    individualValues : IIndividualValues;
-    league : League;
-}
-
-export const PokemonExplorerActionTypes = {
-    SET_IS_LOADING: 'POKEMON_EXPLORER/SET_IS_LOADING',
-    SET_MAX_STATS: 'POKEMON_EXPLORER/SET_MAX_STATS',
-    SET_LEAGUE_POKEMON: 'POKEMON_EXPLORER/SET_LEAGUE_POKEMON',
-    SET_IV_LEVEL: 'POKEMON_EXPLORER/SET_IV_LEVEL',
-    SET_IV_HP: 'POKEMON_EXPLORER/SET_IV_HP',
-    SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
-    SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
-    SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
-};

src/ts/app/components/StatDisplay.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import * as styles from './styles/StatDisplay.scss';
+import * as styles from 'app/styles/StatDisplay.scss';
 
 export interface IStartDisplayProps {
     statLabel : string;

src/ts/app/components/TypeEffectiveDisplay.tsx

@@ -6,7 +6,7 @@ import { IPokemon, TypeEffectiveness } from 'app/models/Pokemon';
 
 import { TypeIndicator } from './TypeIndicator';
 
-import * as styles from './styles/TypeEffectiveDisplay.scss';
+import * as styles from 'app/styles/TypeEffectiveDisplay.scss';
 
 export interface ITypeEffectiveDisplayProps {
     pokemonName : string;

src/ts/app/components/TypeIndicator.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 
 import { formatType } from 'app/utils/formatter';
 
-import * as styles from './styles/TypeIndicator.scss';
+import * as styles from 'app/styles/TypeIndicator.scss';
 
 export interface ITypeEffectiveDisplayProps {
     className? : string;

src/ts/app/index.tsx

@@ -9,8 +9,8 @@ import { IPokemonAppExtraArguments } from 'app/types';
 
 import { PokemonService } from 'api/PokemonService';
 
-import { PokemonExplorerReducers } from './components/PokemonExplorer/reducers';
+import { PokemonSelectListReducers } from 'app/components/PokemonSelectList/reducers';
-import { PokemonSelectListReducers } from './components/PokemonSelectList/reducers';
+import { PokemonExplorerReducers } from 'app/reducers';
 
 import { ConnectedPokemonApp } from './PokemonApp';
 

src/ts/app/reducers.ts

@@ -2,8 +2,8 @@ import { Reducer } from 'redux';
 
 import { League } from 'app/models/League';
 
-import * as Actions from './actions';
+import * as Actions from 'app/actions';
-import { IPokemonExplorerState, PokemonExplorerActionTypes } from './types';
+import { IPokemonExplorerState, PokemonExplorerActionTypes } from 'app/types';
 
 export const initialState : IPokemonExplorerState = {
     isLoading: false,

src/ts/app/styles/LeagueIvExplorer.scss

@@ -1,16 +1,16 @@
 @import '~styles/Variables.scss';
 
 .container {
-  composes: container from './PokemonExplorer.scss';
+  composes: container from './PokemonApp.scss';
   margin-bottom: 1rem;
 }
 
 .leftColumn {
-  composes: leftColumn from './PokemonExplorer.scss';
+  composes: leftColumn from './PokemonApp.scss';
 }
 
 .rightColumn {
-  composes: rightColumn from './PokemonExplorer.scss';
+  composes: rightColumn from './PokemonApp.scss';
 }
 
 .leaguePokemonRank {

src/ts/app/styles/PokemonApp.scss

@@ -75,3 +75,33 @@ $overlay-opacity: 0.7;
   background-color: $main-overlay-color;
   opacity: $overlay-opacity;
 }
+
+.displayWrapper {
+  margin: 0 auto;
+  // flex-basis: 30rem;
+  width: 30rem;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.container {
+  display: flex;
+  justify-content: space-evenly;
+
+  .leftColumn,
+  .rightColumn {
+    display: flex;
+    flex-flow: column nowrap;
+    flex-basis: 45%;
+    align-items: center;
+  }
+
+  .leftColumn {
+    text-align: center;
+  }
+
+  .rightColumn {
+    flex-grow: 1;
+    align-items: start;
+  }
+}

src/ts/app/styles/PokemonApp.scss.d.ts

@@ -2,10 +2,14 @@
 // Please do not change this file!
 export const activeNavigationButton: string;
 export const body: string;
+export const container: string;
+export const displayWrapper: string;
 export const footer: string;
 export const header: string;
 export const highlight: string;
+export const leftColumn: string;
 export const leftNavigation: string;
 export const overlaid: string;
 export const overlay: string;
+export const rightColumn: string;
 export const wrapper: string;

src/ts/app/styles/PokemonDisplay.scss

@@ -1,22 +1,22 @@
 @import '~styles/Variables.scss';
 
 .highlight {
-  composes: highlight from '../../../styles/PokemonApp.scss';
+  composes: highlight from './PokemonApp.scss';
   color: $main-active-font-color;
   pointer-events: none;
 }
 
 .pokemonInfoWrapper {
-  composes: container from './PokemonExplorer.scss';
+  composes: container from './PokemonApp.scss';
   margin-bottom: 1rem;
 }
 
 .pokemonInfoLeftColumn {
-  composes: leftColumn from './PokemonExplorer.scss';
+  composes: leftColumn from './PokemonApp.scss';
 }
 
 .pokemonInfoRightColumn {
-  composes: rightColumn from './PokemonExplorer.scss';
+  composes: rightColumn from './PokemonApp.scss';
 }
 
 .pokemonName {

src/ts/app/styles/TypeEffectiveDisplay.scss

@@ -2,6 +2,7 @@
 
 .multiplierWrapper {
   position: relative;
+  z-index: 0; // so the contents don't show up over the overlay
   padding-top: 6px;
   padding-right: 6px;
 

src/ts/app/types.ts

@@ -3,8 +3,10 @@ import { ThunkAction, ThunkDispatch } from 'redux-thunk';
 
 import { IProviderExtraArguments } from 'common/models/IProviderExtraArguments';
 
-import { IPokemonExplorerState } from './components/PokemonExplorer/types';
+import { IPokemonSelectListState } from 'app/components/PokemonSelectList/types';
-import { IPokemonSelectListState } from './components/PokemonSelectList/types';
+
+import { ILeaguePokemon, League } from 'app/models/League';
+import { IMaxStats } from 'app/models/Pokemon';
 
 import { PokemonService } from 'api/PokemonService';
 
@@ -26,3 +28,30 @@ type ThunkDispatchPokemonApp = ThunkDispatch<IPokemonAppStore, IPokemonAppExtraA
 export interface IPokemonAppDispatch {
     dispatch : ThunkDispatchPokemonApp;
 }
+
+export type IndividualValueKey = 'level' | 'hp' | 'atk' | 'def';
+export interface IIndividualValues {
+    level : number | null;
+    ivHp : number | null;
+    ivAtk : number | null;
+    ivDef : number | null;
+}
+
+export interface IPokemonExplorerState {
+    isLoading : boolean;
+    leaguePokemon : ILeaguePokemon | null;
+    maxPossibleStats : IMaxStats;
+    individualValues : IIndividualValues;
+    league : League;
+}
+
+export const PokemonExplorerActionTypes = {
+    SET_IS_LOADING: 'POKEMON_EXPLORER/SET_IS_LOADING',
+    SET_MAX_STATS: 'POKEMON_EXPLORER/SET_MAX_STATS',
+    SET_LEAGUE_POKEMON: 'POKEMON_EXPLORER/SET_LEAGUE_POKEMON',
+    SET_IV_LEVEL: 'POKEMON_EXPLORER/SET_IV_LEVEL',
+    SET_IV_HP: 'POKEMON_EXPLORER/SET_IV_HP',
+    SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
+    SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
+    SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
+};