style rank section

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

@@ -353,11 +353,48 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                         </div>
                     </section>
                     <section className={ leaugeRankCss }>
-                        <div className="league-pokemon-stat pokemon-rank"><span>{ rankedGrade }</span> Rank</div>
+                        <h5 className={ containerTitleCss }>Rank</h5>
-                        <div className="league-pokemon-stat pokemon-cp">CP <span>{ rankedCp }</span></div>
+                        <div className={ styles.pokemonInfoWraper }>
-                        <div className="league-pokemon-stat"><span>{ rankedHp }</span> HP</div>
+                            <div className={ styles.pokemonInfoLeftColumn }>
-                        <div className="league-pokemon-stat"><span>{ rankedAtk }</span> ATK</div>
+                                <div><h1 className={ styles.pokemonRankValue }>{ rankedGrade }</h1> Rank</div>
-                        <div className="league-pokemon-stat"><span>{ rankedDef }</span> DEF</div>
+                                <div>CP <span>{ rankedCp }</span></div>
+                            </div>
+                            <div className={ styles.pokemonInfoRightColumn }>
+                                <div className={ styles.baseStatRow }>
+                                    <span>HP &nbsp;{ rankedHp < 100 && String.fromCharCode(160) }{ rankedHp }</span>
+                                    <progress
+                                        className={ progressStaminaCss }
+                                        max={ 100 }
+                                        value={ leaguePokemon.statsRank.staminaRank }
+                                        title={ `${leaguePokemon.statsRank.staminaRank}%` }
+                                    >
+                                        { leaguePokemon.statsRank.staminaRank }%
+                                    </progress>
+                                </div>
+                                <div className={ styles.baseStatRow }>
+                                    <span>ATK { rankedAtk < 100 && String.fromCharCode(160) }{ rankedAtk }</span>
+                                    <progress
+                                        className={ progressAttackCss }
+                                        max={ 100 }
+                                        value={ leaguePokemon.statsRank.attackRank }
+                                        title={ `${leaguePokemon.statsRank.attackRank}%` }
+                                    >
+                                        { leaguePokemon.statsRank.attackRank }%
+                                    </progress>
+                                </div>
+                                <div className={ styles.baseStatRow }>
+                                    <span>DEF { rankedDef < 100 && String.fromCharCode(160) }{ rankedDef }</span>
+                                    <progress
+                                        className={ progressDefenseCss }
+                                        max={ 100 }
+                                        value={ leaguePokemon.statsRank.defenseRank }
+                                        title={ `${leaguePokemon.statsRank.defenseRank}%` }
+                                    >
+                                        { leaguePokemon.statsRank.defenseRank }%
+                                    </progress>
+                                </div>
+                            </div>
+                        </div>
                     </section>
                 </div>
                 <LeagueStatsList

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

@@ -12,7 +12,8 @@
   margin-bottom: 0;
 }
 
-.pokemonInfoWrapper {
+.pokemonInfoWrapper,
+.leaguePokemonRank {
   display: flex;
   justify-content: space-evenly;
   margin-bottom: 1rem;
@@ -41,6 +42,24 @@
   align-self: stretch;
 }
 
+.leaguePokemonRank {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+
+  .pokemonInfoWraper {
+    flex: 1 0 100%;
+    display: flex;
+  }
+
+  .pokemonInfoLeftColumn {
+    align-items: flex-start;
+  }
+
+  .pokemonRankValue {
+    display: inline;
+  }
+}
+
 .pokemonType {
   text-transform: uppercase;
 
@@ -252,14 +271,6 @@
   }
 }
 
-.popkemonIndividualStats {
-  display: block;
-}
-
-.leaguePokemonRank {
-  display: block;
-}
-
 :global(.nes-field.is-inline) .ivInput {
   width: 4.25em;
   padding-left: 0.7em;

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

@@ -10,9 +10,10 @@ export const levelInput: string;
 export const pokemonBaseStats: 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 pokemonType: string;
 export const pokemonTypeWrapper: string;
-export const popkemonIndividualStats: string;
 export const wrapper: string;

src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx

@@ -84,7 +84,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
                         className={ inputTextCss }
                         onChange={ this.handleChangeFilter }
                         value={ this.props.filterTerm }
-                        placeholder="Pokemon Name"
+                        placeholder="Search"
                     />
                     { this.props.filterTerm !== '' &&
                         <i