fix mobile issues, welcome dialog

dist/app.css

@@ -2,7 +2,7 @@
 /** Source: ./dist/main.tmp.css */
 .Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}.Navigation__navigation__32sTf.Navigation__menu__2XeMt{position:fixed;right:72px;z-index:1;width:100px;height:400px;justify-content:space-between}.Navigation__navigation__32sTf.Navigation__menu__2XeMt button>*{display:block;margin:auto}.Navigation__navigation__32sTf.Navigation__menu__2XeMt a>i{margin-left:auto;margin-right:auto;transform-origin:top}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
 
-.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:450px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch;height:100vh}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:75px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}@supports not (-webkit-overflow-scrolling: touch){.PokemonApp__overlaid__3B_Ol .PokemonApp__header__2s_s2{background-color:rgba(0,0,0,0.7)}}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}ul{display:grid;justify-items:center}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;grid-column-gap:1em;justify-content:center;padding-top:0;padding-bottom:0}.PokemonApp__footer__3q19Q .PokemonApp__adWrapper__3GNZY{width:320px;height:50px;grid-column-start:2;display:flex;justify-content:space-evenly;align-items:center}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6{margin:auto 0 auto auto}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6>*{display:inline;margin:1em}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6 .PokemonApp__feedback__2Nh7J{vertical-align:super}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__navigationButton__2BuiE.PokemonApp__hamburgerIcon__1ujIT{font-size:2rem;margin-top:-6px}.PokemonApp__overlay__2vc-r{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.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;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:0;align-items:start}
+.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:450px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch;min-height:100vh;height:100%}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:75px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}li{margin-bottom:0.75em}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;grid-column-gap:1em;justify-content:center;padding-top:0;padding-bottom:0}.PokemonApp__footer__3q19Q .PokemonApp__adWrapper__3GNZY{width:320px;height:50px;grid-column-start:2;display:flex;justify-content:space-evenly;align-items:center}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6{margin:auto 0 auto auto}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6>*{display:inline;margin:1em}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6 .PokemonApp__feedback__2Nh7J{vertical-align:super}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__navigationButton__2BuiE.PokemonApp__hamburgerIcon__1ujIT{font-size:2rem;margin-top:-6px}.PokemonApp__overlay__2vc-r{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.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;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:0;align-items:start}
 
 .Loading__wrapper__3kid5{text-align:center}.Loading__wrapper__3kid5 .icon{animation:Loading__bounce__2g2QY 0.6s both linear infinite}@media only screen and (max-width: 767px){.Loading__wrapper__3kid5 .icon{margin:0 auto}}@keyframes Loading__bounce__2g2QY{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.Loading__wrapper__3kid5 .icon:nth-child(2){animation-delay:0.2s}.Loading__wrapper__3kid5 .icon:nth-child(3){animation-delay:0.4s}
 
@@ -16,7 +16,7 @@
 
 .StatDisplay__baseStatRow__1B60A{display:flex;align-items:center}.StatDisplay__baseStatRow__1B60A>*{flex-shrink:0}.StatDisplay__baseStatRow__1B60A>progress{flex-shrink:1;margin:0 0 0 1em;width:5em;height:1em;border-image-outset:1;padding:2px}@media only screen and (max-width: 767px){.StatDisplay__baseStatRow__1B60A>progress{height:1.2em}}@media only screen and (max-width: 359px){.StatDisplay__baseStatRow__1B60A>progress{height:1.3em}}
 
-.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:450px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch;height:100vh}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:75px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}@supports not (-webkit-overflow-scrolling: touch){.PokemonApp__overlaid__3B_Ol .PokemonApp__header__2s_s2{background-color:rgba(0,0,0,0.7)}}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}ul{display:grid;justify-items:center}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;grid-column-gap:1em;justify-content:center;padding-top:0;padding-bottom:0}.PokemonApp__footer__3q19Q .PokemonApp__adWrapper__3GNZY{width:320px;height:50px;grid-column-start:2;display:flex;justify-content:space-evenly;align-items:center}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6{margin:auto 0 auto auto}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6>*{display:inline;margin:1em}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6 .PokemonApp__feedback__2Nh7J{vertical-align:super}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__navigationButton__2BuiE.PokemonApp__hamburgerIcon__1ujIT{font-size:2rem;margin-top:-6px}.PokemonApp__overlay__2vc-r{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.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;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:0;align-items:start}
+.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:450px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch;min-height:100vh;height:100%}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:75px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}li{margin-bottom:0.75em}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;grid-column-gap:1em;justify-content:center;padding-top:0;padding-bottom:0}.PokemonApp__footer__3q19Q .PokemonApp__adWrapper__3GNZY{width:320px;height:50px;grid-column-start:2;display:flex;justify-content:space-evenly;align-items:center}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6{margin:auto 0 auto auto}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6>*{display:inline;margin:1em}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6 .PokemonApp__feedback__2Nh7J{vertical-align:super}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__navigationButton__2BuiE.PokemonApp__hamburgerIcon__1ujIT{font-size:2rem;margin-top:-6px}.PokemonApp__overlay__2vc-r{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.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;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:0;align-items:start}
 
 .LeagueIvExplorer__wrapper__3E7AD{display:flex;flex-flow:column nowrap}.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{max-height:350px;font-size:0.95em;flex:0 999 auto;display:flex;flex-flow:column nowrap}.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:-9px;margin-left:-9px;padding:0 1.5em}.LeagueIvExplorer__capturedSourceSelectRow__1Sc9K{text-align:center}
 
@@ -34,7 +34,7 @@
 
 .PokemonSelectList__wrapper__2LQMY{font-size:0.8rem;width:20em;display:flex;flex-flow:column nowrap;margin:0 1.5em 0 auto;position:relative}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6{flex:1 1 auto;display:flex;padding:0;overflow:hidden;height:340px;position:absolute;top:100%;left:0;right:0;z-index:2}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6>*{width:100%}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb{align-self:center;text-align:center}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb>*:first-child{margin:1em auto}.PokemonSelectList__wrapper__2LQMY a{color:inherit;text-decoration:none;padding:5px 1em 5px 2em;justify-content:flex-end;align-content:space-around;flex-wrap:wrap;display:flex}.PokemonSelectList__wrapper__2LQMY a .PokemonSelectList__menuIcon__1I2_T{margin:-4px 0 0 0.5em;opacity:0.5}.PokemonSelectList__wrapper__2LQMY a.active .PokemonSelectList__menuIcon__1I2_T{opacity:1}.PokemonSelectList__filterWrapper__1d1Wl{position:relative;margin:0.1em}.PokemonSelectList__filterWrapper__1d1Wl .close{position:absolute;top:1em;right:1em}.PokemonSelectList__filterInput__1z_s2{margin-left:0;margin-right:0;padding-right:3em}.PokemonSelectList__dex__1QHut,.PokemonSelectList__form__VIw8Q{font-size:0.8em;text-transform:capitalize}.PokemonSelectList__dex__1QHut{margin-left:auto}.PokemonSelectList__form__VIw8Q{flex:0 1 100%}
 
-.WelcomeDialog__dialog__2L0N1{font-size:0.75em;width:450px;position:fixed;z-index:2;top:20%;left:0;right:0;margin:0 auto}@media only screen and (max-width: 767px){.WelcomeDialog__dialog__2L0N1{width:auto;margin:0 0.1em}}.WelcomeDialog__title__35Pr6{text-align:center;margin-top:1em}.WelcomeDialog__closeButton__2brhD{position:absolute;top:0.25em;right:0.25em;margin:0}.WelcomeDialog__iconWrapper__3emT0{display:flex;justify-content:space-evenly}.WelcomeDialog__iconWrapper__3emT0 .icon:hover{animation:WelcomeDialog__bounce__12n2T 0.6s both linear infinite}@keyframes WelcomeDialog__bounce__12n2T{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
+.WelcomeDialog__dialog__2L0N1{font-size:0.75em;width:450px;position:fixed;z-index:2;top:20%;left:0;right:0;margin:0 auto}@media only screen and (max-width: 767px){.WelcomeDialog__dialog__2L0N1{width:auto;margin:0 0.1em}}.WelcomeDialog__title__35Pr6{text-align:center;margin-top:1em;margin-bottom:1em}.WelcomeDialog__closeButton__2brhD{position:absolute;top:0.25em;right:0.25em;margin:0}.WelcomeDialog__iconWrapper__3emT0{display:flex;justify-content:space-evenly}.WelcomeDialog__iconWrapper__3emT0 .icon:hover{animation:WelcomeDialog__bounce__12n2T 0.6s both linear infinite}@keyframes WelcomeDialog__bounce__12n2T{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.WelcomeDialog__center__1BimA{text-align:center}.WelcomeDialog__anchor__19xjg{display:inline}
 
 
 /*# sourceMappingURL=main.tmp.css.map*/

src/ts/app/components/WelcomeDialog.tsx

@@ -64,17 +64,22 @@ export class WelcomeDialog extends React.Component<IWelcomeDialogProps, IState>
 
         return (
             <div ref={ this.state.ref }className={ wrapperCss }>
-                <h3 className={ styles.title }>Welcome to PVPokémon Go</h3>
+                <h2 className={ styles.title }>Welcome PVPokémon Go<br />BETA</h2>
                 <ul className="nes-list is-disc">
-                    <li>Evaluate your Pokémon for PVP viability!</li>
+                    <li>Evaluate Pokémon PVP viability!</li>
-                    <li>Activate icons for hidden areas!</li>
+                    <li>Activate icons, hidden areas!</li>
-                    <li>Enjoy state-of-the-art graphics!</li>
+                    <li>Enjoy state-of-the-art design!</li>
-                    <li>What functionality would you like to see? There's plenty more to add!</li>
                 </ul>
+                <h4 className={ styles.center }>What features are missing?<br />There are plenty more to add!</h4>
+                <h4 className={ styles.center }>
+                    Please let us know!
+                    { ' ' }
+                    <a href="mailto:feedback@pvpokemon.com" className={ styles.anchor }><i className="nes-icon is-small gmail" /></a>
+                    { ' ' }
+                    <a href="https://twitter.com/pvpokemongo" className={ styles.anchor }><i className="nes-icon is-small twitter" /></a>
+                </h4>
                 <div className={ styles.iconWrapper }>
-                    <a href="mailto:feedback@pvpokemon.com"><i className="nes-icon gmail" /></a>
                     <a href="https://www.youtube.com/watch?v=Ce5mRvkAePU" target="_blank"><i className={ yadonCss } /></a>
-                    <a href="https://twitter.com/pvpokemongo"><i className="nes-icon twitter" /></a>
                 </div>
                 <i
                     className={ closeCss }

src/ts/app/styles/PokemonApp.scss

@@ -21,7 +21,8 @@ $footer-height: 60px;
   display: flex;
   flex-flow: column nowrap;
   align-items: stretch;
-  height: 100vh;
+  min-height: 100vh;
+  height: 100%;
 
   .body {
     background-color: $main-background-color;
@@ -52,22 +53,14 @@ $footer-height: 60px;
   position: sticky;
   top: 0;
 
-  .overlaid & {
-    // non-iOS only
-    @supports not (-webkit-overflow-scrolling: touch) {
-      background-color: rgba($main-overlay-color, $overlay-opacity);
-    }
-  }
-
   a {
     display: inline-block;
     display: flex;
   }
 }
 
-ul {
+li {
-  display: grid;
+  margin-bottom: 0.75em;
-  justify-items: center;
 }
 
 .footer {

src/ts/app/styles/WelcomeDialog.scss

@@ -19,6 +19,7 @@
 .title {
   text-align: center;
   margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 .closeButton {
@@ -47,3 +48,11 @@
     }
   }
 }
+
+.center {
+  text-align: center;
+}
+
+.anchor {
+  display: inline;
+}

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

@@ -1,6 +1,8 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const anchor: string;
 export const bounce: string;
+export const center: string;
 export const closeButton: string;
 export const dialog: string;
 export const iconWrapper: string;